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

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

ユーザーの心をグッと掴んだ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. MING Labs

014.jpg
https://minglabs.com/en

上海・ミュンヘン・ベルリン・シンガポールに拠点を置くクリエイティブエージェンシーMING Labsのホームページです。
風のようなアニメーションに注目を集めながら、ページを下にスクロールするごとにマイクロインタラクションの技巧が施されています。
  

15. Nameless

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

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

16. Go.arch

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

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

17. KIKK Festival 2016

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

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

18. Etq Store

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

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

19. Camden Town Brewery

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

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

20. CHART

020.jpg
http://chartartfair.com

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

21. Milano Contract District

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

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

22. DIGITAL DESIGN DAYS & AWARD 2016

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

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

23. Haute Haulogerie - New models and trends for 2016

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

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

24. VR Sessions

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

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

25. Tío Luchín

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

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

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

26. 株式会社パレンテ

026.jpg
https://www.parente.jp

株式会社パレンテはコンタクトのEC事業、自社オリジナルコンタクトの製造販売を行っています。
クロールするたびに様々な方向から登場するアニメーションは、マイクロインタラクションの手法をしっかりと押さえて、ユーザーエンゲージメントを高めています。
  

27. 音楽と暮らし

027.jpg
http://ongakutokurashi.tumblr.com

音楽と暮らしは、2016年12月に静岡市で行われたフェスティバルの告知サイトです。
オレンジとブルーをメインカラーに、スプリットした画面が印象的なホームページで、欧米文字はゴジック、日本語文字は明朝体を採用し、独特な世界観を演出しています。
  

28. PLAN-B RECRUIT 2018

028.jpg
https://www.plan-b.co.jp/recruit_2018/

デジタルマーケティング事業を行うPLAN-Bの採用ホームページです。
漫画のような世界観で学生を惹きつけつつ、ビジョンやミッションが語られているページは余計な装飾を外した洗練されたデザインで、エントリーボタンが押しやすいように右下に固定されているという工夫も施されています。
  

29. たてよこWebアワード

029.jpg
http://tategaki.github.io/awards/

たてよこWebアワードは、Web上での縦書きの可能性を感じることができるサイトを募集し、表彰するアワードです。
CSS3のwriting-modeを使用した縦書きや斜めスクロールなど、日本語によるWebデザインの可能性を感じることができます。
  

30. 株式会社ユニオンネット

030.jpg
https://www.unionnet.jp

株式会社ユニオンネットは、Webサイトの制作・コンサルティング事業を展開しているクリエイティブ企業です。
まるでCMの後半にでも出てくるような可愛らしいアニメーションが最初に登場し、白と水色を使った清潔感のある配色チョイスにも注目です。
  

31. 白雲荘

031.jpg
https://nisekohakuunso.com/ja/

北海道ニセコにある宿泊施設白雲荘のホームページです。
ニセコはアジアでもその規模とクオリティーを誇る最大スキーエリアで、ホームページでもぱらぱらと雪が降っているアニメーションがかかっています。
  

32. SFC Open Research Forum 2016

032.jpg
http://orf.sfc.keio.ac.jp/2016/

SFC Open Research Forumは、慶應義塾大学湘南藤沢キャンパス(SFC)のオープンリサーチフォーラム開催案内サイトです。
「かえる」という文字に込められた思いがアニメーションで切り替わり、手書きで書いたような歪な赤丸がフォーラムのアイデンティティアイコンになっているのも印象的です。
  

33. 丸京染色株式会社

033.jpg
http://www.marukyou-mk.co.jp

岐阜県で老舗の染色加工業を営む丸京染色株式会社のホームページには、スクロールするごとに染物の機械や素材などが様々な方向から登場します。
ページトップの色が変化するヒーロー動画は、染物を行なっている会社にぴったりのデザインです。
  

34. 株式会社グッドライフ

034.jpg
http://goodlife-inc.co.jp

株式会社グッドライフは、オフィスのトータルソリューションを提供する会社です。
ページの最初に現れるヒーロー動画は、まるでパラパラ漫画を見ているかのような面白い手法で作成されています。
  

35. おやつのアトリエmoco

035.jpg
http://oyatsu-moco.com

岐阜県美濃加茂市にあるおやつのアトリエmocoは、誰もが安心して食べられるお菓子を提供しています。
クッキーやマフィンなどのお菓子にあう薄いブラウンの配色に、あざやかなお菓子の写真が並びます。ボタンやリンクに使われているマイクロインタラクションにもぜひ注目してみてください。
  

36. HELLO CYCLING

036.jpg
https://www.hellocycling.jp

HELLO CYCLINGは、東京を中心にシェアサイクリングを利用できるサービスです。
クロールするごとに様々な要素がポップアップするアニメーションを採用しています。所々に黄色いカラーが取り入れられており、ブランドカラーを効果的に押し出した好例の一つです。
  

37. きづき

037.jpg
https://kizuki.style

きづきはOM Solar inc.が発信する、日常のささやかなきづきを提供するWebマガジンです。
明朝体を採用し、白い背景をそのまま使い、余白を活かすことで、日本のサイトに定番の「素朴さ」を上手に演出しています。
  

38. INDUSTRIAL JP

038.jpg
http://idstr.jp/jp/

工場音楽レーベルを謳うINDUSTRIAL JPのホームページです。
機械の動きが奏でる音楽を動画で楽しむことができ、縦長の極細ゴシックを使い、近未来の世界観を演出しています。
  

39. STUDIO DETAILS

039.jpg
http://www.details.co.jp

名古屋のデザイン事務所STUDIO DETAILSのホームページでは、シングルページを採用し、左側のメニューで現在の階層がわかるようになっています。
微細なパーティクルが散っているアニメーションも、独特な世界観を醸し出しています。
  

40. GINA

040.jpg
http://gina.tokyo

GINAは、西麻布にあるフレンチレストランのお店です。
黒い背景に、素材や料理の写真が鮮やかに配置されていて、見る人全員の食欲をそそります。所々に使われているワインレッドの配色により、大人のレストランを想起させています。
  

41. GUCCI

041.jpg
https://www.gucci.com/jp/ja/

GUCCIの日本版オフィシャルサイトです。
ページ上部・中部・下部でレイアウトがわかれており、商品は大胆に、ニュース記事はすっきりと配置され、余白を十分にとることでブランド品がエレガントに写っています。
  

42. ADOT

042.jpg
http://adot.tokyo

ADOTは音楽を徹底的に活用した広告代理店です。
冒頭のロゴマークを含むアニメーションは、まるでウルトラQを想起させるかのようなノイズのかかったユニークな動きをしています。シングルページで、スクロールするとページ上部にナビゲーションメニューが固定されます。
  

43. 小林製麺工業

043.jpg
http://kobayashi-seimen.info

創業明治39年、福岡県うきは市の小林製麺工業のホームページをご覧ください。
冒頭のフェードで切り替わる写真は、コントラストを強めに、彩度を落とすことによってレトロな雰囲気を醸し出しています。中段の2カラム・下段の3カラムと、グリッドレイアウトも上手く組まれています。
  

44. 株式会社〆

044.jpg
https://www.shime.co

クリエイティブコンサルティングを行っている株式会社〆コーポレートサイトです。
トップページの「のれん」のようなページには時計が使われており、時間帯により色が変わるギミックが施されています。サイト全体では、マテリアルデザインを取り入れたパーツが見どころです。
  

45. carborocco

045.jpg
http://carborocco.com

carboroccoは、大分市のイタリアンダイニングのホームページです。
細い線でシンプルに描かれた可愛らしいアイコンが非常に印象的で、装飾は最小限に抑え、写真を効果的に見せたミニマルなホームページとなっています。
  

46. UZUZ

046.jpg
https://uzuz.jp

UZUZは既卒・第二新卒にフォーカスを当てた就活サポートカンパニーです。
こちらのページでは、ページを読み込むと早速ギター音とともにユニークなアニメーションが始まり、ページを下部にスクロールするとギター音が小さくなり、また戻ると大きくなるという面白いギミックを採用しています。
  

47. アダチ伝統木版画

047.jpg
https://foundation.adachi-hanga.com

木版画の保存を目的とした公益財団法人のアダチ伝統木版画のホームページです。
あえてブルーの原色を固定ナビゲーションに採用しているところが、木版画のアバンギャルド感を演出しています。
  

48. BULAN

048.jpg
http://bulan.tokyo

中目黒でビンテージ古着を販売しているのがBULANです。
シングルページを採用し、右側に配置されているナビゲーションをはじめ、全体的にシンプルな幾何学模様で装飾されています。
  

49. INDETAIL

049.jpg
http://www.indetail.co.jp

東京・札幌のアプリ開発企業、INDETAILコーポレートサイトを見てみましょう。
平行ではなく、斜めに切ったコンテンツの配置が非常にユニークでショーイングアニメーションが写真を引き立たせます。モノクロ写真とカラー写真を相互に配置し、重要な写真を目立たせる手法を取り入れています。
  

50. 水曜日のカンパネラ

050.jpg
http://www.wed-camp.com

音楽バンド水曜日のカンパネラの公式ホームページです。
絵の具が混じったような背景にメンバーの顔写真を切り合わせたようなインパクトのある画像が来訪者を惹きつけます。マウスカーソルを動かすと水面が揺れるようなアニメーションにも注目してみてください。
  

まとめ

今回は、2016年にもっとも印象に残った、海外・国内のWebサイトを50個紹介しました。

ホームページを制作する時には、他サイトからインスピレーションを得るという行為は非常に大切です。

アニメーション、レイアウト、配色、写真や動画の使い方……etc
それぞれのホームページに独特の良さがあるので、2017年これからホームページを制作する時に参考にしてみてはいかがでしょうか。