世界中のデザインを表彰！「Awwwards」で2016年ノミネートされたホームページ33選
- 2016年12月28日
- 1,196
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
Facebook: ryoxsakai
Twitter: @ryoxsakai
Webデザインのトレンドを追うには様々な方法があります。
ホームページをカテゴリ別に掲載する「ギャラリーサイト」は、最新のデザイントレンドを採用しているホームページがカタログのように掲載されています。
数あるギャラリーサイトの中でも、ユニークな方法を使ってホームページを掲載している「Awwwards」というサイトがあります。
ユーザーに様々な項目で投票してもらい、掲載順位を決めるAwwwardsでは、今年どのようなサイトが上位を占めているのでしょうか。
今回は、Awwwardsでノミネートされたホームページの中から、特に高評価だった33のホームページをピックアップしてご紹介します。
Awwwardsを通して「今年のWebデザイントレンド」を確認してみましょう。
世界中のデザインを表彰するホームページ「Awwwards」とは？
Awwwardsは、世界中から投票されたホームページを様々な方法で、日ごと・週ごと・月ごと・年ごとに採点・投票を行い、順位付けを行っているホームページのギャラリーサイトです。
応募条件を満たしていれば誰でも応募でき、ユーザー登録をすることで誰でも投票や採点ができます。
ログインすると、「VOTE ON THIS SITE」というリンクからそれぞれのサイトを採点することができます。投稿者は、以下の4つの項目で採点をします。
デザイン：50％
クリエイティビティ：25％
ユーザビリティ：15％
コンテンツ：10％
この4つを加重配分したのが、一人あたりの平均投票スコアとなります。
しかし、このユーザーの投票は、残念ながらサイトとしてのスコアリングには反映されません。
Awwwardsの「審査会(Jury)」に参加する8人の審査員(そのうち平均点から最も遠い１名の点数は除外される)と、投票ユーザーの中で貢献度が特に高いメンバー(Honorary Members)の平均点が正式なスコアとなります。2016年の審査会メンバーは180名程度で、その中には、SHIFTBRAIN Inc.のアートディレクター鈴木慶太朗氏など、日本人が4名選出されています。
今回は、日ごと・週ごと・月ごとのノミネートが多かったサイトをピックアップしてご紹介していきます。
Awwwardsで2016年ノミネートされたサイト33選
1. Ignition (アメリカ)
Ignitionはアメリカのカリフォルニアに拠点を置くクリエイティブエージェンシーです。
画像のサムネイルにマウスを合わせるとサブタイトルが出てくるなど、ホームページもインタラクティブな作りになっています。
2. Deux Huit Huit (カナダ)
Deux Huit Huitはカナダのモントリオールにあるグラフィックデザイン企業です。幻想的なレインボーカラーが現れては一瞬で消えて、シンプルなページに遷移しますが、スクロールするとまたもや大胆な写真とタイポグラフィが現れるなど、メリハリのあるレイアウトとなっています。一番下までスクロールすると、意外なメッセージも残されています。
3. FCINQ (フランス)
パリを拠点とするクリエイティブスタジオFCINQのホームページを覗いてみましょう。
ファーストビューでは紫のデュオトーン調背景に、まるで文字を書いているかのようなアニメーションでヘッダーがあらわれます。FCINQは、最近では公開中の映画「ローグ・ワン/スター・ウォーズ・ストーリー」の公式ホームページのチャットボットを開発している実力派の企業です。
4. Huncwot (ポーランド)
インタラクティブなWebデザインに強いポーランドのデザイン企業Huncwotのホームページでは、幾何学模様と原色を大胆に使ったモダンなホームページになっています。
今話題のマイクロインタラクションも取り入れられており、いつまでも触っていたくなるホームページです。
5. Epiphany (イギリス)
https://www.epiphanysearch.co.uk
EpiphanyはイギリスのリーズにあるSEOに強いデジタルマーケティング企業です。
聡明でイノベーティブなイメージを彷彿させるイラストや写真で企業を紹介しつつ、シングルビューをスクロールでスライドのように切り替えていくユニークなページの遷移方法を採用しています。
6. Akaru (フランス)
フランス・リヨンに拠点を構えるクリエイティブ企業Akaruのホームページでは、まるで折り紙でも折ったかのような可愛らしい狐が出迎えてくれます。
こちらのホームページでもたくさんのマイクロインタラクションが採用されているので、ぜひ様々な場所にマウスカーソルを合わせてみてください。ページ遷移中のローディングアニメーションにロゴを採用している点もユニークです。
7. Spring/Summer (デンマーク)
コペンハーゲンからは、デジタルマーケティング企業Spring/Summerが登場しました。素朴な写真のヒーローイメージにセリフ書体が似合います。
スクロールしていくと、所在地を表すテキストがさらっと切り替わって心地良くなります。余白を効果的に使ったよい手本となるでしょう。
8. Epic (ベルギー)
ベルギーのEpicは、大胆な色使いとレイアウトに定評のあるクリエイティブ企業です。
ホームページでは制作実績が確認できますが、VRや3Dモデリングなどさまざまな最新技術を使って実験的なデザインにも挑戦しています。
9. Cartelle (オランダ)
Cartelleは、オランダ・アムステルダムのクリエイティブエージェンシーです。
ホームページではVRを使ったインタラクティブな映像を体験することができます。
ワニがUFOにさらわれたり、宇宙空間で服を選んだりと、いつまでも触っていたくなるユニークなコンテンツばかりです。
10. SHIFTBRAIN Inc. (日本)
渋谷のSHIFTBRAIN Inc.はAwwwardsの常連ですが、今年も人気の高いホームページを多数制作しています。
コーポレートサイトでは、ストーリー性のあるヒーロー動画、マイクロインタラクション、ユニークなページネーションなどを使って、かなりクオリティの高い仕上がりになっています。
11. Merci-Michael (フランス)
フランスのクリエイティブ企業Merci-Michaelは、人物にフィーチャーしたインタラクティブなホームページ制作を得意としています。
肌の色味と服装・化粧・背景などのコントラストを上手に使ったグラフィックが多用されています。
12. Jam3 (カナダ)
トロントの制作会社Jam3のホームページを見てみましょう。
3Dアニメーションに強い制作会社らしく、ホームページではマウスオーバーすると破片のようなものがマウスカーソルに合わせて動き、中央のコピーもマウスを合わせると切れてしまうような面白い動きをします。
実績一覧では独創的な世界観のホームページを垣間見ることもできます。
13. Anonymous (フランス)
パリの映像制作に強いデジタルプロダクションAnonymousのホームページは、まるで映画のトレーラーのような映像が背景に全面で映し出されています。
メニューにマウスオーバーすると一瞬暗転しますが、またカーソルをメニューから離すと動画が再開します。
メニューをクリックするとそれぞれの映像作品をYouTubeで観ることができます。
14. Build in Amsterdam (オランダ)
Build in Amsterdamはその名の通りオランダに拠点を持つeコマースなどのコンサルティング企業です。
ホームページはカタログのように写真が並び、横スクロールに対応している珍しいホームページです。
使っている写真もビビッドカラーとパステルカラーを混在させているあたりが非常にユニークです。
15. Good Morning (ノルウェー)
ノルウェー・オスロのクリエイティブ企業Good Morningは、大胆なグリッドレイアウトを採用したホームページを持っています。
サムネイルに画像を合わせると微妙にずれて動く挙動をするのも面白いです。見出しは太いサンセリフ書体、本文はセリフ書体を採用し、新聞を彷彿させます。
16. Stinkdigital (アメリカ)
ニューヨークのデジタルクリエイティブ企業Stinkdigitalはどんなホームページを制作しているのでしょうか。
一見するとしっかりしたグリッドデザインを採用していますが、スクロールするごとに左右のグリッドが微妙にずれていくという興味深いインタラクティブ体験を提供してくれます。
いくつかのサムネイル自体が映像のように動いているのも面白いですね。
17. UZIK (フランス)
パリの制作会社UZIKのホームページです。アクセスすると、まず白背景に黒文字のシンプルなページが出てきますが、スクロールすると全画面を使った巨大なメニューに出会います。メニューのタイトルにあたるヘッダーがスクロールするごとにくっついてくる動きもユニークです。
18. Jean-Cristphe Suzannne (フランス)
今までは企業を紹介してきましたが、もちろんAwwwardsでは個人でも参加可能です。
フランスのフロントエンドエンジニアJean-Cristphe Suzanneさんのポートフォリオサイトでは、スクロールするごとに彼のこれまで制作してきた作品をイニシャルとともに紹介してくれています。
19. Active Theory (アメリカ)
アメリカのデジタルプロダクションActive Theoryは、VRも含めた3Dアプリケーション制作が得意で、そうした作品を体感できるようホームページで全面的に紹介しています。制作作品一覧では、スクロールしながら、全画面で作品を動画で観ることができます。
20. Tool of North America (アメリカ)
世界地図や宇宙など、空間や建造物をモチーフとしたWebサイトのデザインが得意なTool of North Americaのホームページを確認してみましょう。
制作一覧ページでは、カード型メニューに横スクロールのカタログのようなデザインを採用しています。
上部のメニューにマウスカーソルを移動すると、コロコロと切り替わるアニメーションが楽しめます。
21. Benjamin Guedj (フランス)
フランスのデザイナーBenjamin Guedjさんのポートフォリオサイトでは、ビビッドな色使いをした写真に大胆で大きなセリフ書体のタイポグラフィが印象的です。
また、上にスクロールして右にサイトが動くという、従来の既成概念とは違った動き方をするページの移動方法もユニークです。
22. B-Reel (アメリカ)
ロサンゼルスのテクノロジー企業B-Reelのホームページを見てみましょう。白・黒・紫という独特の配色に、正方形のサムネイルが印象的です。制作しているどのプロジェクトにもストーリーテリングの手法がふんだんに取り入れられています。
23. 84.Paris (フランス)
http://www.84paris.com/en/home
自らをアイデア企業と名乗る84.Parisのホームページでは、正方形を上手く活用したレイアウトを採用しています。
正方形にマウスカーソルを合わせると、その部分だけが動画で再生される仕組みになっており、思わずクリックしたくなります。
24. UNIT9 (イギリス)
イギリスのUNIT9のホームページは、わくわくするようなアクロバティックな動きをしたヒーロー動画を全面に敷いています。
各ページのメニューも全面に画像を敷きつめたポスターのような構成になっており、より図版率が高くジャンプ率が低いレイアウトになっています。
25. Immersive Garden (フランス)
アニメーションにも強いパリのデジタルプロダクションImmersive Gardenのホームページです。
アクセスすると、うっすらとしたグレーのアニメーションが背景で上映されます。スクロールすると、数字とともにこれまでの制作実績を紹介してくれます。
26. Dogstudio (ベルギー)
ベルギー・ナミュールのクリエイティブスタジオdogstudioでは、特徴的なシルエットの切り抜きに制作実績が映し出されるという独創的な演出を仕掛けています。
制作実績では、古き良きヨーロッパを思い出させてくれるアンティーク調の作品が出迎えてくれます。
27. Legwork Studio (アメリカ)
コロラド州デンバーの制作会社Legwork Studioのホームページは、実際の写真にシュールなイラストを描き加える独特の雰囲気を醸し出しています。
全体的にポップなデュオトーンを用いている点やスライドのようにページを遷移するページネーションが面白いです。
28. Superhero Cheesecake (オランダ)
http://superherocheesecake.com
アムステルダムのクリエイティブ企業Superhero Cheesecakeはブラウザにとらわれないクロスプラットフォームでインタラクティブなホームページを作るのが得意な制作会社です。
ホームページでは、多くとも3カラムでデザインされており、情報がすっきりと整理されていて見やすくなっています。
29. AQuest (イタリア)
淡いヴィンテージ写真のような画像を使う美しいホームページ制作が得意なイタリア・ヴェローナのAQuestのホームページを覗いてみましょう。
全画面で最大4カラムを使ったグリッドレイアウトを採用し、サムネイル画像を合わせると画像が横に少しだけズレるちょっとしたインタラクションが楽しめます。左上の「AQ」の固定位置のロゴも印象的です。
30. ultranoir (フランス)
パリの制作会社ultranoirのホームページでは、ページ遷移にストレスを感じないほどのスムーズなページ遷移が実装されています。
また、制作実績のページでは、まるで自宅で見たい番組を選ぶかのような感覚でプロジェクトを閲覧することができます。
31. MediaMonks (オランダ)
オランダのMediaMonksはUberやドミノピザなどのグローバルブランドのホームページを手掛けるグローバルなクリエイティブ企業です。
ホームページではややトーンを落としたグレーを背景に、全画面グリッドを採用し、制作実績を確認することができます。
32. Resn (ニュージーランド)
ニュージーランドのウェリントンからは、クリエイティブエージェンシーResnがランクインしました。
グリッドレイアウトを崩して使うような斬新な手法を好むResnのホームページでは、スイッチを見つけることではじめて出てくるメニューや、枠の外にある一覧ページなど、既成概念を壊すクリエイティブな手法を学ぶことができます。
33. Hello Monday (アメリカ)
2016年最も人気をさらった作品を多く残したのが、ニューヨークのHello Mondayです。
ホームページでは、全画面のボックスをスクロールで遷移していきますが、遷移時のアニメーションではバキュームで吸い込まれるかのように文字や写真が消えていって楽しむことができます。
まとめ
今回は、2016年に高評価だったAwwwardsのクールなサイトをご紹介させていただきました。
今回紹介したノミネート作品は、AwwwardsのWinner Listで確認することができます。
「ブラウザだけでこんなことができるの？」と驚きのホームページばかりですが、何歩も先を行くクリエイターたちの作品を観ることによって、自分でホームページを作る際のインスピレーションに役立てることができるかもしれません。ぜひ、今後の制作活動のヒントにしてみてください。