初心者の方にもオススメ!2017年上半期注目のデザイントレンド14選
Webデザインのトレンドは時代の流れと同時に変化し、新たなものが生まれます。
最近では、スマートフォンの普及や新しい技術が登場したことで、急速にデザイントレンドも変化しました。すでにPCではなくスマートフォン、タブレットでインターネットにアクセスしているという方も多いのではないでしょうか。
こうした流れから、近年インターネット関連ではモバイル重視の傾向が強まり、デザインにも影響を与えています。常に時代に合わせたデザインにするためには、トレンドを押さえておくことも重要です。
そこで今回は、2017年上半期注目のデザイントレンドを15個まとめてご紹介します。
そこで新社会人はもちろん、初心者や経験の浅い方も含め、時代遅れにならないためにも今押さえておくべきデザイントレンドをピックアップしました!今年Webデザインでたくさん取り入れられるであろうトレンドばかりですので、一通り目をとおしておきましょう。
2017年注目のWebデザイントレンド15個
1. ミニマリズム
近年人気の高いミニマリズムは、2017年も継続すると見られています。
ミニマリズムのデザインとは、余分な要素を削ぎ落としシンプルにしたデザインのことです。極力ノイズを排除することで、伝えたいメッセージがより伝わりやすくなります。また、美しさや分かりやすいというメリットもあります。
従来の情報過多なデザインでは、PCはもちろん特にスマートフォンで閲覧した場合、欲しい情報が見つけにくいという問題がありました。しかし、必要最小限のコンテンツ構成にすることでデザイン性だけでなく使い心地もアップします。ミニマリズムがまだまだ人気が高いのは外観の良さだけでなく、最近のモバイルファーストが一つの要因でもあるでしょう。
2. マイクロ・インタラクション
2015年頃から注目を集めているトレンドです。マイクロ・インタラクションとは「製品の最小単位のインタラクション」のことで、簡単にいえばユーザーの動作に対してちょっとしたアクションを返すことです。
具体的に例を挙げると、以下のようなものがあります。
マイクロ・インタラクションの例
・iPhoneをミュートにしたときの振動
・マウスオーバーしたときの色の変化
・サイレントモードになったときのアイコン表示
マイクロ・インタラクションを取り入れることで、今システムで何か起きているかを伝えたり、ユーザーの行動に対する結果をわかりやすくします。スマートフォン向けのホームページなどは、掲載できる情報が限られるため多くがかなりシンプルなものですが、こうした状況でもマイクロ・インタラクションがあれば直感的に操作できるようになります。今後はさらに改善・進化し、より良いマイクロ・インタラクションの活用が進むのではないでしょうか。
画像でご紹介した「Little Big Details」は、マイクロインタラクションの事例をいくつかピックアップしていますので、ぜひ参考にしてみてください。
3. 触覚フィードバック技術
http://www.weekend-makers-lab.com/news/2573
触覚フィードバック技術(haptics)とは、ユーザーに振動、動きなどを与えて皮膚感覚フィードバックを得ることで、触覚技術とも呼ばれています。より具体的にいえば、タッチパネルに触れた際に従来のパネルのような触り心地ではなく、まるでパネルに映っているものを触っているかのような感覚を提供することです。
現時点ではまだあまりメジャーな技術ではなく知らない方も多いでしょうが、今後あらゆるシーンで注目されること間違いなしの技術です。ホームページに導入されることになれば、近い将来Web上で触感を確かめながらショッピングができるかもしれません。
4. 遅延時間(レイテンシー)への対策
http://web-tan.forum.impressrd.jp/e/2014/07/08/17757
インターネットにアクセスしている際に、次のページを表示するのに時間がかかって見るのをやめてしまった経験はないでしょうか。特に最近は以前と比べるとホームページの構成も複雑になり、表示速度にも影響を与えています。
リソースとは、CSSやJavaScript、画像や音声などのWebページを構成する要素だ。ページを構成するリソース数が増せば、それだけページ表示に時間がかかってしまう。また、昨今はリッチコンテンツ化が進み、コンテンツサイズが大きくなっていることも表示速度低下の要因だ。
引用元:Web担当者Forum
要求に対するデータ処理において発生する遅延時間(レイテンシー)があると当然UXは損なわれます。すでに開発者側では様々な対策を進めていますが、今後はより遅延時間への対策が登場してくるはずです。
5. コンテンツ重視
従来Webデザインといえば外観、ビジュアルを意味していることが多くありました。しかし、この記事にも登場しているように、近年は見かけよりも中身に関する新しい技術やトレンドが増えています。
参考画像の「AGFラウンジ」では、コーヒー豆や植物の手書きイラストを使った温かみを感じるデザインが素敵ですが、見た目だけではなく中身もコーヒーがより楽しめるコンテンツが充実しています。商品ラインナップはもちろん、スイーツレシピの紹介、TVCM紹介、コーヒー別の美味しい飲み方も掲載しています。また、コンテンツは充実していながらもトップページはすっきりとしていて、見たいコンテンツが探しやすい印象です。
実際ユーザーは見た目ではなくコンテンツを見に来ているわけですので、ビジュアルにこだわるだけでは不十分で、中身にこだわるのは当然です。特に表示できる内容が限られるモバイルからインターネットにアクセスするユーザーが多い今、必要のない装飾はやめコンテンツをわかりやすく伝えるのは重要です。今後モバイルユーザーが増えていくと、この傾向はさらに強まるのではないでしょうか。
6. オンラインショップの新しい形
https://colourissound.com/collections/all
一般的にオンラインショップというと楽天、Amazonのようなショッピングモールであったり、個人で運営している小さなオンラインショップでのイメージがあります。ショッピングモールでは豊富な商品をスムーズな流れで購入でき、小さなオンラインショップではたくさんのクリックを経て購入しますが、最近ではどちらにも属さないショップも増えています。
例としてご紹介するのは、Tシャツを扱うオンラインショップです。商品の質の高さ、美しさにフォーカスした優れたデザインとなっており、複雑なオプション、メニューや目立った価格表示はありません。ネットショップが一般化している今、より新しいショッピング体験ができるオンラインショップが登場してくるのではないでしょうか。
7. 操作に慣れないユーザーへのフォロー
http://www.ashinari.com/2012/08/29-368494.php
インターネットが普及し、最近では多様なデバイスも登場したことで様々な人がインターネットを利用できるようになりました。ビジネスマンはもちろん、若年層、高齢者まで年齢・性別・環境を問わず、たくさんの人が当たり前にインターネットを利用しています。スマートフォンも普及しさらにインターネットを利用するユーザーは増えると予想できますが、同時にインターネットに不慣れで操作ミスしたり説明が分からないというユーザーも増えてくるでしょう。
今後は、こうした操作に慣れないユーザーへのフォロー、工夫をする動きが多くのホームページにおいて強まるのではないでしょうか。
8. GIFアニメの再登場
近年シネマグラフという技術がトレンドになるなど、GIFアニメが再び注目を集めています。GIFアニメを取り入れるデザインは昔からあるものですが、最近ではこのシネマグラフのように以前とは少し形が変わっています。
GIFアニメを使いすぎるとUX低下を招きかねませんが、ワンポイントに取り入れることでユーザーを引き付けることが可能です。
9. イラストの活用
スマートフォンでも高解像度の画像が綺麗に表示できるようになったこと、SVGファイル対応が普及したことがきっかけで、イラストの活用が増えています。少し前は写真を多く使っているホームページをよく見かけましたが、最近では写真ではなくあえてイラストを大胆に使ったものが増えています。今後はますます多様化が進むことが予想できます。
10. 縦長のデザイン
スマートフォンが登場して以来、タッチ画面に慣れてしまったことでスクロールするのが当前になりました。この傾向に合わせて、ホームページのデザインもどんどん縦長に進化しています。縦長のデザインにすることで、モバイルユーザーは特にコンテンツを簡単に見れるようになります。
11. 3D的表現
https://dribbble.com/shots/1639865-Simple-Personal-Page-portfolio
Googleのマテリアルデザインが引き続きWebデザインの主流となっています。
マテリアルデザインは、フラットデザインのシンプルさに影や動きを加えた、シンプルながらも立体感のあるものです。今年は、中でも幾何学模様や大胆なパターンを使った3D的表現が多く登場することが予想できます。
12. スプリットスクリーンレイアウト
日本国内ではまだあまり浸透していませんが、海外ではスプリットスクリーンレイアウトという手法が広まりつつあります。スプリットスクリーンレイアウトとは、画面を大きく分割するレイアウトのことで、分割スクリーンレイアウト、分割式レイアウトとも呼ばれています。
レスポンシブデザインと相性がいいというメリットがあり、モバイルファーストインデックスが導入されることでますます注目が集まるのではないかと考えられます。
13. ストーリーテリング
ストーリーテリングは2016年頃から注目が集まっているデザインで、その名のとおりホームページをストーリー仕立てにするというものです。
近年浸透している縦長のシングルページは、あまりに長いと最後まで読むのに疲れてしまいます。そこでストーリーテリング型にし、魅力的なコンテンツ構成にすることで、ユーザーを引き付け、最後まで読んでもらうことが可能となります。
14. パララックスデザイン
パララックスデザインとは、視差効果を取り入れたデザインのことをいいます。数年前から人気のデザインですのでもう見飽きた印象がある方もいるでしょうが、まだまだ人気は衰えておらず、取り入れているデザイナーもたくさんいます。
基本的に1ページで完結させるシングルページレイアウトで取り入れる手法のため、先にご紹介した「ストーリーテリング」との相性も抜群です。
まとめ
以上、2017年上半期注目のデザイントレンド14個をご紹介しました。いかがでしたでしょうか。
近年はモバイル重視の流れがあり、Webデザインもモバイルを意識する方向にどんどんシフトしてきています。今回ご紹介した中でも「マイクロ・インタラクション」「触覚フィードバック技術」「ストーリーテリング」など、外観だけではなく、使い勝手もモバイルユーザーを考えたものが多くありました。昨年発表された「モバイルファーストインデックス」が今年から実装されることもあって、この流れは今年さらに強まるのではないでしょうか。
「モバイルファーストインデックス」が実際に始まればよりモバイル化の傾向が強まり、Webデザインも大きく変化するものと考えられます。時代遅れのデザイン、モバイルユーザーにとって使いづらいデザインにならないためにも、常に最新のデザイントレンドを知っておきましょう。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- インデックス
- インデックスとは、目次あるいは目次として登録されている状態のことをいいます。また、ホームページのトップページや、製品ページの最上層ページなど、ほかのページへアクセスするための起点となるページを指すこともあります。会話や文脈によって意味が異なるので、注意が必要です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- インデックス
- インデックスとは、目次あるいは目次として登録されている状態のことをいいます。また、ホームページのトップページや、製品ページの最上層ページなど、ほかのページへアクセスするための起点となるページを指すこともあります。会話や文脈によって意味が異なるので、注意が必要です。
- インデックス
- インデックスとは、目次あるいは目次として登録されている状態のことをいいます。また、ホームページのトップページや、製品ページの最上層ページなど、ほかのページへアクセスするための起点となるページを指すこともあります。会話や文脈によって意味が異なるので、注意が必要です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●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・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング