先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します!
↑私が10年以上利用している会計ソフト!
Web制作会社のサイトの特徴
Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。
制作実績
多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。
- スクリーンショット
- クライアント名
- 制作したサイトの簡単な説明文(長過ぎ注意)
- いつ制作したのか
- WebサイトURL
- クライアントからの感想
こちらのサイトではWebサイトを動画で見ることができます。見どころをしっかり抑え、jQueryなどのアニメーションもその場で見ることができるので、動きのあるWebサイトを紹介する際には特に効果がありそうです。
お問い合わせフォーム
お問い合わせフォームに制作依頼内容、予算などを加えている会社も多く見られました。依頼専用フォームと質問・意見用フォームでわけて、ザックリでいいので依頼内容を書いてもらえば、ムダが省けたり、最初からスムーズにやりとりできそうですね。
制作依頼内容、予算、ページ数、希望製作期間などが送信できるようになっているサイトもチラホラ。
ブログ
ブログは必須ではないと思いますが、ブログを書いている制作会社が多い気がします。内容は基本的にはWebサイトやサービスの新着情報ですが、中には制作したWebサイトやマーケティング戦略のケーススタディを公開している会社もありました。具体的には、以下の内容をまとめていました。
- 制作したWebサイトの概要
- クライアントからの要望
- 制作したWebサイトの見どころ
- 実際に行ったマーケティング概要
- 結果(アクセス解析)
- クライアントからの感想
Radiumのブログでは実際にしたデザインの過程をワイヤーフレームから紹介したり、マーケティングで使っているツールの紹介、ROIの計算方法など、制作者の勉強にもなる記事を公開しています。
Icelabのブログでは実際に製作中のアプリの製作過程を記事で紹介しています。コードを書いて説明もしています。アプリ公開後ではなく、製作途中に書いていってるのが興味深いですね。
遊び心
Web制作会社のサイトでは細かい所に仕掛けがあったり、思わず眺めてしまったりという「小ネタ」が仕込まれていたりします。自社サイトということもあり、自由に仕込めるんでしょうねw
作品一覧のサムネイル画像にマウスオーバーすると「Luv This!(いいね!)」がクリックできます。クリックすると下からニョキっとコンタクトフォームが現れ、どのサイトにいいね!したのかを送信する事ができます。これからWebサイト制作を依頼しようとしているクライアントがどんなデザインが好みなのかがわかるいいアイデアですね!
ゴリラが現れたり。
フッターで「London Baby!」と叫んでみたり。
マフィアに殺されそうな人を発見したり。
Web制作会社のポートフォリオWebサイト
私が見ていて「お!」と思った素敵なデザインのWebサイトをいくつか紹介します。ざっくりカテゴリー分けしてみました。
シンプル+ビビッドカラー
1. Unfold(ノルウェー)
スクロールする時の動きがおもしろい!しかも無限ループです。斜めの線の使い方が素晴らしい。
2. Moovents(イタリア)
「M」の字を動かしてお花のような模様にしています。さらにカラフルな色を足してパララックス効果で動かしているところにクリエイティブ性を感じますね!
3. 2am(UK)
かわいらしいイメージのあるピンクも、モノクロ+彩度の高いピンクだとこんなにかっこいいデザインに仕上がります。
4. tme solutions(UK)
どのカテゴリーにするか悩みました…。なぜなら見るエリアによってデザインが違うからです。手描き風だったりクールな印象だったり。ナビゲーションメニューが上からびよーんと現れるのもおもしろい!いろんなところにユニークなアイデアが仕込まれています。
5. Uber(UK)
フルスクリーンの背景画像が迫力あります。「Showreel」のページではさらに迫力のあるフルスクリーンのプロモーションビデオが見ることができます。
6. Blurb Creative(UK)
暗めの色合いの中で浮かび上がるビビッドな色が特徴のデザイン。背景の模様も好きです。半透明のボックスを少しずらして変化をつけています。
7. The Creative District(アイルランド)
ピンクを使っていますが、セリフフォントを使って大人っぽいイメージにまとめています。
ミニマル
8. enjoythis(UK)
とってもシンプルなデザインの中で手描き風のロゴがかわいらしさ・素朴感を演出しています。
9. DRAFT(日本)
ウィンドウのサイズによってカラム数が変わるレイアウト(可変カラムと言うんですかね?)が素敵なWebサイト。ぜひウィンドウのサイズを変更してみてください!
10. Birch Studio Ltd(UK)
上部の横長に広がる作品写真が特徴。他をシンプルに抑えている分、余計目立ちますね。
11. Erskine Design(UK)
ところどころ手描き風のデザインも加えていますが、色味を抑えている分大人っぽく仕上がっています。
12. TH= SUM(カナダ)
色を一切使わない、モノクロオンリーのサイト。シックな雰囲気のなか、イラストがアクセントになってかしこまりすぎないデザイン。
13. Tokyo Digital(UK)
イギリスにあるのにTokyoという不思議な名前の制作会社。グリッドベースの整列されたデザインが特徴。
イラスト
14. Pieoneers(カナダ)
ホームのポップなイラストはもちろん、各ページにある手描き風の大きな見出しイラストもインパクト大!
15. Creative Spark(UK)
ビビッドな色と不思議系キャラクターがインパクトのあるサイト。Webだけでなくプリントデザインも素敵な作品ばかりです。
16. Orange Label Design Studio(UK)
カラフルなドット絵が特徴のWebサイト。マリリン・モンロー、マフィアに今にも殺されそうな人、おっぱい丸出しのおねーちゃんなど、細かいところまでよく見てみるとおもしろいです!
17. Radium(US)
Web制作ではなくインターネットマーケティングの会社ですが、好きなデザインのサイトなので一緒にご紹介。イラストやカラフルな色使いが印象的です。
18. Studio 7 Designs(カナダ)
シロクマさんやオーロラ、トーテムポール、レイヴンなど、カナダらしいイラストが散りばめられています。イラストを使ったデザインが得意のよう。
19. WitFlow(ポーランド)
ベージュ×青緑の配色が個人的に気に入りました。シャドウやグラデーションを使わずに表現した3D風ボックスがかわいらしいです。
20. Actual Size Creative(US)
スクロールや開閉するコンテンツのアニメーションが特徴。ゴリラが登り降りしたり、住所にわざわざ「アメリカ 地球」と書いちゃうところに遊び心を感じます。
21. Local Wisdom(US)
シャドウをうまく利用して奥行きが感じられるデザイン。色使いも個性的です。
テクスチャ
22. Marah Creative(US)
わずかなテクスチャ感と、ホームのイメージやフッターのリボンについたシャドウのつけ方が上手!
23. Amazee Labs(スイス)
テクスチャとイラストが素敵にマッチしています。大胆な色使いやタイポグラフィもうまくまとまっていますね。
24. Kooba(アイルランド)
紙をちぎったような質感や水彩画のようなエフェクトが美しいサイト。
25. Goldenboy(UK)
かっこいいイメージになりがちなグランジ風デザインも、色を押さえることでどこかクラシカルな雰囲気に。
手描き風
26. 株式会社ブラン(日本)
チョコチョコ歩く女の子と手描き風のデザインがかわいらしいサイト。
27. Icelab(オーストラリア)
目の覚めるような鮮やかな水色とかわいらしいイラストが特徴のサイト。赤がアクセントになって引き締まっていますね。
28. Carsonified(UK)
手描き風イラストや2色のみを使った配色、タイポグラフィ、大胆な配置など、見ているだけで楽しくなるようなサイト。
29. Pixel Thread(UK)
手描き風のロゴや木目調の背景、色合いがとっても温かみがあります。
クール
30. MetaLab(カナダ)
前の記事「少しの手間で大きく変わる、細部にこだわったWebデザインを」でも紹介した、1pxのラインをうまく取り入れているWebサイト。カナダの会社とは知りませんでした!
31. FLIPP Advertising(カナダ)
「What we do」ページのパイチャートを使ったサービス紹介の仕方がおもしろいですね。
32. Invoke(カナダ)
こちらも「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介しました。深みのある赤がかっこいいですね。
33. Paramore(US)
各ページわずかなアニメーションがシンプルでかっこいいです。社内写真も公開していて、思わず「こんなところで働きたい!」と思ってしまうかも。
34. formoda(UK)
制作実績のページではその作品に合わせて上部背景画像が変わります。こだわってますね!
35. Abstraktion(UK)
黒×赤はやっぱりかっこいいですね!矢印キーで操作できます。
いろいろ見てみましたが「このサイトこの国だったんだ!」なんて発見もたくさんありました。あ、こっそり国をメモしているのバレちゃいました?そもそも「次はどこの国に住もうかなー?せっかくだからおもしろいWeb制作会社が多い国がいいなあ!」と思ってWeb制作会社のWebサイトを探し始めたのがきっかけなのです。で、150社以上Web制作会社を見てみましたが、その約4割がイギリスの制作会社のデザインでした…!次行く国はイギリスで決まりですかね!
Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。
ぜひご登録ください!もちろん無料です! :)
また参考にさせてもらいました(^^
海外にはいろんなポートフォリオサイトがあるんですねぇ
デザイン形ともに興味深い。
おしゃれなサイトを見つけるとみんなに知らせたくなりますよね^^
イギリスのWeb制作サイト、要チェックですね><
いつもありがとうございます☆
海外だと結構シャープな感じのものも多いですね。
僕も個人で作るときは、よく海外のサイトも見ているので、違ったポイントが面白いですね。
[…] ↑ … Web制作 インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35(via Webクリエイターボックス) […]
[…] インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35 […]
[…] インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35 […]
[…] インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35 […]
I like Creative Spark a lot! Great post!