2017年も、Webデザインは益々進化を遂げていくでしょう。
今年のトレンドを予想する前に、2016年のWebサイトのトレンドをふり返ってみましょう。

今回は、2016年に特に印象深かった国内外のWebサイトを49個ピックアップしました。

ユーザーの心をグッと掴んだWebサイト50 -海外編-

1. Paul Valentine

01.jpg
https://www.paul-valentine.com

有名時計ブランド「Paul Valentine」のホームページで、エレガントな時計をホームページの主役にパステルピンクとパステルグレーの配色が印象的です。
買い物かごの下の通貨を「EUR」から「JPY」に変えると日本円で購入することができます。
  

2. The Fourth Phase

002.jpg
http://www.thefourthphase.com

The Fourth PhaseはRed Bullが提供するスノーボーディングのドキュメンタリーフィルムです。
この特設サイトは、雪山がマウスの位置に合わせて向きを変えるという面白いギミックが施されています。
  

3. Future of Design

003.jpg
http://www.futureof.design

スタートアップにおけるデザインの調査を行っている会社NEAの2016年の調査内容を報告したサイトがFuture of Designです。
調査内容に合わせて円グラフや棒グラフなどがインフォグラフィックでわかりやすくプレゼンされています。
  

4. The Cool Club

004002.jpg
https://thecoolclub.co

The Cool Clubはオランダ発のデザインエージェンシーです。
ECサイトではフラットデザイン調のマイケルジャクソンやマリリンモンローなどの絵画を購入することができます。
  

5. Vallier Bistro

005.jpg
http://vallierbistro.com

Vallier Bistroはカナダのモントリオールにあるレストランです。
写真は少し彩度を落としており、配色も含めて全体的にレトロな雰囲気を醸し出しています。スクロールするごとに楽しめるパララックスエフェクトも採用されています。
  

6. Revols

006.jpg
https://www.revols.com

カスタムメイドでワイヤレスイヤホンを注文することができるRevolsは、トップページに全画面のヒーロー動画を薄く敷き詰めて、イヤホンの利用シーンを喚起しています。
サイト後半ではプロダクトにフィーチャーしており、スクロールでふわりと現れる画像のエフェクトも非常に印象的です。
  

7. Coup de coeur francophone

007.jpg
http://www.coupdecoeur.ca

カナダの音楽フェスティバルCoup de coeur francophoneのホームページです。
トップページは赤とピンクのデュオトーンが印象的ですが、一方でページ下部にはフラットな可愛らしいイラストも掲載されていて2つの世界観がほどよくマッチしています。
  

8. Artifact

008.jpg
http://www.artifactproperty.co.nz

Artifactはニュージーランドのハウジングメーカーです。
シングルページで、スクロールするごとに背景色やメニューの色が変わり、シックで落ち着いた配色を選択しているのもブランドイメージと合わせていて好感を持つことができます。
  

9. Carv

009.jpg
http://carv.ai

Carvはスキーに関するウェアラブルデバイスを開発・販売しているメーカーです。
近未来らしく、ドメインも「.ai」を採用し、スクロールするとテキストや画像が今まで見たこともないエフェクトで登場します。
  

10. Garden Eight

010.jpg
https://garden-eight.com

GardenEightは日本のクリエイティブエージェンシーです。(すべて英語で紹介されているためこちらで紹介しています)
冒頭に現れるGardenEightのロゴも印象的ですが、中央線に沿ってスクロールする独自のUXも非常に印象深い作りとなっています。
  

11. öny

011.jpg
http://ony-france.com/

önyはフランスのファッションブランドで、横スクロールかつ横パララックスを採用したユニークなデザインとなっています。
  

12. Hannah Purmort

012.jpg
http://hannahpurmort.com

アメリカ・コロラド州のプロダクトデザイナーであるHannah Purmortさんのポートフォリオサイトで、真ん中に赤い線が入っており、この赤いプログレスバーが現在地を示してくれます。
赤・白の配色にモノクロの写真が印象的なホームページです。
  

13. YouFab Creative Awards 2016

013.jpg
http://www.youfab.info/2016/

デジタルファブリケーションに関するクリエイティブデザインアワードYouFabのホームページは、赤と黒を基調としたホームページです。
2016年度のYouFabは慶應義塾大学SFCの田中教授が座長を務め、日本人も多く参加しています。
  

14. Nameless

015.jpg
http://www.nmlss.it

Namelessはイタリア生まれのシューズブランドです。
ポップでエネルギッシュな配色を使っており、画像の所々に影を効果的に使用しています。
  

15. Go.arch

016.jpg
http://murren.ru/templates/go-arch/demo/dark/index.html

Go.archはニューヨークを拠点に世界中にオフィスを構える建築・インテリアデザイン事務所です。
ホームページには「light」「dark」の2種類のモードが実装されていて、モードによって雰囲気が大きく変わってきます。本文には細めのサンセリフ書体を取り入れており、モダンな雰囲気を演出しています。
  

16. KIKK Festival 2016

017.jpg
http://www.kikk.be/2016/

デジタルとクリエイティブの祭典KIKK Festivalのホームページでは、ブラウン管のテレビノイズのようなエフェクトが印象的です。
審査員の写真にはデュオトーンが使われており、紫色をメインカラーとした艶やかなホームページとなっています。
  

17. Etq Store

018.jpg
https://www.etqstore.com

アムステルダムのファッションストアEtq Storeは余白を上手に活用したバランスのいいデザインのホームページを運営しています。
一見するとECサイトとは思えないような大胆なヒーローイメージが最初に読み込まれ、セール情報とともに商品が紹介されていきます。
  

18. Camden Town Brewery

019.jpg
http://www.camdentownbrewery.com

Camden Town Breweryは、イギリス・ロンドンの地ビールを販売しているお店です。
ページ上部に並んだ8つのビールにそれぞれマウスカーソルを合わせると、もともと赤かった背景色が黄色や青などの別の原色に変化します。ビビッドな配色を使ってユーザーの注意を惹きつける手法を採用しています。
  

19. CHART

020.jpg
http://chartartfair.com

デンマーク・コペンハーゲンのアートミュージアムCHARTのホームページです。
クロールすると「CHART」の後ろの文字が変化する、ユニークなアニメーションを取り入れています。少し見えにくいですが、ページ右側に細い線がいくつか並んでいて、この線を押すとアトリエの画像が切り替わるカルーセルになっています。
  

20. Milano Contract District

021.jpg
http://contract-district.com

イタリア・ミラノの不動産事業・デザイン事業を手がけるMilano Contract Districtのホームページは、大胆な黄色の背景に黒の太めのボーダー・サンセリフ書体を使っています。
ボーダーとボーダーで囲まれたブロックには、不動産の画像が現れたり、メニューとしてクリックすることが可能です。画像部分には矢印が付いており、押すと画像が切り替わるカルーセルになっています。
  

21. DIGITAL DESIGN DAYS & AWARD 2016

022.jpg
http://www.ddd.it/en

こちらもイタリア・ミラノで行われている、デザインアワードとワークショップのイベントDIGITAL DESIGN DAYS & AWARDページです。
黒をベースに薄紫とエメラルドグリーンというデジタルな配色を採用し、背景動画にはパーティクルが撒き散らされたようなアニメーションがかかっています。
  

22. Haute Haulogerie - New models and trends for 2016

023.jpg
https://trends.hautehorlogerie.org#!/en/2016/home

スイスに拠点を置く高級時計財団Haute Haulogerieの、2016年の新モデルとトレンドを紹介している特設ページです。
ページ上部では時計のコレクションを追いかけるヒーロー動画が敷き詰められており、ページ下部では時計の新モデルやニュース記事を読むことができます。
  

23. VR Sessions

024.jpg
http://www.vr-sessions.com

VR Sessionsは、スマートフォンを使った360度のVR(バーチャルリアリティ)で音楽セッションを行う啓蒙活動をしているホームページです。
微細なパララックス、ふわりと現れるサムネイル、メニューや画像にカーソルを合わせるとかかるわずかなアニメーションなど、2016年のトレンドをふんだんに取り入れたホームページとなっています。
  

24. Tío Luchín

025.jpg
http://www.tioluchin.com

Tío Luchínはハイチにあるレストランのホームページです。
こちらもわずかに取り入れたパララックス、シングルページレイアウトページ下部のシネマトグラフなど、2016年のWebデザイントレンドが目立っています。グレーをバックにして鮮明に料理の画像が登場するので、思わず出かけたくなりますね。