2016年のデザイントレンドを振り返ろう！印象に残る国内・海外サイト49選
2017年も、Webデザインは益々進化を遂げていくでしょう。
今年のトレンドを予想する前に、2016年のWebサイトのトレンドをふり返ってみましょう。
今回は、2016年に特に印象深かった国内外のWebサイトを49個ピックアップしました。
ユーザーの心をグッと掴んだWebサイト50 -海外編-
1. Paul Valentine
https://www.paul-valentine.com
有名時計ブランド*「Paul Valentine」*のホームページで、エレガントな時計をホームページの主役にパステルピンクとパステルグレーの配色が印象的です。
買い物かごの下の通貨を「EUR」から「JPY」に変えると日本円で購入することができます。
2. The Fourth Phase
The Fourth PhaseはRed Bullが提供するスノーボーディングのドキュメンタリーフィルムです。
この特設サイトは、雪山がマウスの位置に合わせて向きを変えるという面白いギミックが施されています。
3. Future of Design
スタートアップにおけるデザインの調査を行っている会社NEAの2016年の調査内容を報告したサイトがFuture of Designです。
調査内容に合わせて円グラフや棒グラフなどがインフォグラフィックでわかりやすくプレゼンされています。
4. The Cool Club
The Cool Clubはオランダ発のデザインエージェンシーです。
ECサイトではフラットデザイン調のマイケルジャクソンやマリリンモンローなどの絵画を購入することができます。
5. Vallier Bistro
Vallier Bistroはカナダのモントリオールにあるレストランです。
写真は少し彩度を落としており、配色も含めて全体的にレトロな雰囲気を醸し出しています。スクロールするごとに楽しめるパララックスエフェクトも採用されています。
6. Revols
カスタムメイドでワイヤレスイヤホンを注文することができるRevolsは、トップページに全画面のヒーロー動画を薄く敷き詰めて、イヤホンの利用シーンを喚起しています。
サイト後半ではプロダクトにフィーチャーしており、スクロールでふわりと現れる画像のエフェクトも非常に印象的です。
7. Coup de coeur francophone
カナダの音楽フェスティバルCoup de coeur francophoneのホームページです。
トップページは赤とピンクのデュオトーンが印象的ですが、一方でページ下部にはフラットな可愛らしいイラストも掲載されていて2つの世界観がほどよくマッチしています。
8. Artifact
http://www.artifactproperty.co.nz
Artifactはニュージーランドのハウジングメーカーです。
シングルページで、スクロールするごとに背景色やメニューの色が変わり、シックで落ち着いた配色を選択しているのもブランドイメージと合わせていて好感を持つことができます。
9. Carv
Carvはスキーに関するウェアラブルデバイスを開発・販売しているメーカーです。
近未来らしく、ドメインも「.ai」を採用し、スクロールするとテキストや画像が今まで見たこともないエフェクトで登場します。
10. Garden Eight
GardenEightは日本のクリエイティブエージェンシーです。(すべて英語で紹介されているためこちらで紹介しています)
冒頭に現れるGardenEightのロゴも印象的ですが、中央線に沿ってスクロールする独自のUXも非常に印象深い作りとなっています。
11. öny
önyはフランスのファッションブランドで、横スクロールかつ横パララックスを採用したユニークなデザインとなっています。
12. Hannah Purmort
アメリカ・コロラド州のプロダクトデザイナーであるHannah Purmortさんのポートフォリオサイトで、真ん中に赤い線が入っており、この赤いプログレスバーが現在地を示してくれます。
赤・白の配色にモノクロの写真が印象的なホームページです。
13. YouFab Creative Awards 2016
デジタルファブリケーションに関するクリエイティブデザインアワードYouFabのホームページは、赤と黒を基調としたホームページです。
2016年度のYouFabは慶應義塾大学SFCの田中教授が座長を務め、日本人も多く参加しています。
14. Nameless
Namelessはイタリア生まれのシューズブランドです。
ポップでエネルギッシュな配色を使っており、画像の所々に影を効果的に使用しています。
15. Go.arch
http://murren.ru/templates/go-arch/demo/dark/index.html
Go.archはニューヨークを拠点に世界中にオフィスを構える建築・インテリアデザイン事務所です。
ホームページには「light」「dark」の2種類のモードが実装されていて、モードによって雰囲気が大きく変わってきます。本文には細めのサンセリフ書体を取り入れており、モダンな雰囲気を演出しています。
16. KIKK Festival 2016
デジタルとクリエイティブの祭典KIKK Festivalのホームページでは、ブラウン管のテレビノイズのようなエフェクトが印象的です。
審査員の写真にはデュオトーンが使われており、紫色をメインカラーとした艶やかなホームページとなっています。
17. Etq Store
アムステルダムのファッションストアEtq Storeは余白を上手に活用したバランスのいいデザインのホームページを運営しています。
一見するとECサイトとは思えないような大胆なヒーローイメージが最初に読み込まれ、セール情報とともに商品が紹介されていきます。
18. Camden Town Brewery
http://www.camdentownbrewery.com
Camden Town Breweryは、イギリス・ロンドンの地ビールを販売しているお店です。
ページ上部に並んだ8つのビールにそれぞれマウスカーソルを合わせると、もともと赤かった背景色が黄色や青などの別の原色に変化します。ビビッドな配色を使ってユーザーの注意を惹きつける手法を採用しています。
19. CHART
デンマーク・コペンハーゲンのアートミュージアムCHARTのホームページです。
スクロールすると「CHART」の後ろの文字が変化する、ユニークなアニメーションを取り入れています。少し見えにくいですが、ページ右側に細い線がいくつか並んでいて、この線を押すとアトリエの画像が切り替わるカルーセルになっています。
20. Milano Contract District
イタリア・ミラノの不動産事業・デザイン事業を手がけるMilano Contract Districtのホームページは、大胆な黄色の背景に黒の太めのボーダー・サンセリフ書体を使っています。
ボーダーとボーダーで囲まれたブロックには、不動産の画像が現れたり、メニューとしてクリックすることが可能です。画像部分には矢印が付いており、押すと画像が切り替わるカルーセルになっています。
21. DIGITAL DESIGN DAYS & AWARD 2016
こちらもイタリア・ミラノで行われている、デザインアワードとワークショップのイベントDIGITAL DESIGN DAYS & AWARDのページです。
黒をベースに薄紫とエメラルドグリーンというデジタルな配色を採用し、背景動画にはパーティクルが撒き散らされたようなアニメーションがかかっています。
22. Haute Haulogerie - New models and trends for 2016
https://trends.hautehorlogerie.org#!/en/2016/home
スイスに拠点を置く高級時計財団Haute Haulogerieの、2016年の新モデルとトレンドを紹介している特設ページです。
ページ上部では時計のコレクションを追いかけるヒーロー動画が敷き詰められており、ページ下部では時計の新モデルやニュース記事を読むことができます。
23. VR Sessions
VR Sessionsは、スマートフォンを使った360度のVR(バーチャルリアリティ)で音楽セッションを行う啓蒙活動をしているホームページです。
微細なパララックス、ふわりと現れるサムネイル、メニューや画像にカーソルを合わせるとかかるわずかなアニメーションなど、2016年のトレンドをふんだんに取り入れたホームページとなっています。
24. Tío Luchín
Tío Luchínはハイチにあるレストランのホームページです。
こちらもわずかに取り入れたパララックス、シングルページレイアウト、ページ下部のシネマトグラフなど、2016年のWebデザイントレンドが目立っています。グレーをバックにして鮮明に料理の画像が登場するので、思わず出かけたくなりますね。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ１ページ)の集まりのことです。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ１ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ウェアラブルデバイス
- ウェアラブルデバイスとは、手首や腕、頭など体の一部に装着して使用するコンピュータデバイスのことを指します。Googleの開発しているGoogleGlassやサムスンのGalaxyGear、AppleのAppleWatchなどがあります。メガネや腕時計のような形で身に付けることができ、スマートフォンにかわる端末として注目されています。
- ドメイン
- ドメインとは、インターネット上で利用可能なホームページやメールなどを識別するときの絶対唯一の綴りを言います。電話番号や自動車ナンバーが同一のものがないのと同様に、インタネットにおいても、２つとして同じドメインは存在できない、といった唯一無二の綴りです。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- UX
- UXとは、ユーザーエクスペリエンス（User Experience）の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI（ユーザーインターフェイス、User Interface）がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- セッション
- Googleアナリティクスは、ホームページに適切に組み込めばアクセス状況を把握できる便利なサービスです。Googleが無料で提供しており、日本でも大手企業や金融機関、政府など、その利用のシェアを広げています。そこで、もっとも基本的な単位がセッションです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪（thumb nail）という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
この記事を書いたライター
おすすめ記事
関連記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO（検索エンジン最適化）
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション（MA）
- メールマーケティング
- データ分析・BI
- CRM（顧客管理）
- SFA（商談管理）
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
