Advertisement

design-trend-guide-2017

 

2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。

 

デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。

 

基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。

 

adobe-trend2017-1
2017年に入り、ウェブデザインのトレンドや動向を予想したエントリーを当サイトでもいくつか公開してきましたが、ウェブデザインやグラフィックの世界基準ソフトウエアの
webdesign-trend2017
いよいよ2017年。年の初めは、既存のデザインや新しいプロジェクトを見直し、最新のトレンドをフレームワークに組み込む方法について考える絶好の機会と言えます。
2017-designtrend-selection
2017年、早くも2週間が過ぎたことで、さまざまなデザインブログで今年のWebデザイントレンドが予想され、公開されています。 今回は、海外のデザインブログ

 

 

コンテンツ目次

 

 

01. セミフラット・デザイン

ここ数年、フラットデザインがWebデザイン市場を独占していましたが、今ではマテリアルデザインの影響を受け、より奥行きのある形になってきています。ほんの少しの影を加えることで、半立体的なセミフラット・デザインへと変化しはじめています。ミニマルスタイルから派生したフラットデザインの進化は、新しい技術開発にも適しています。フラットデザインの人気は続きますが、改良が加えられていくでしょう。

 

滑らかな影、シェーディングは、フラットデザインの本質を損なうことなく、奥行きと複雑さを追加します。これまでのフラットデザインに追加された新しい機能で、2017年さらに進化を続けていくでしょう。

 

1-1

Resource | UI/UX Tool for Web Services by Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

1-2

Listener’s Playlist | Anzi .

目次へ戻る

 

 

 

02. シネマグラフ

シネマグラフ(英: Cinemagraphs)は、ウェブでよく見かけるGIFとは異なり、写真の一部分がほんの少しだけ動いている静止画です。このテクニックを活用することで、シンプルな写真をよりリアルに魅せることができます。

 

 

food-cinemagraph
写真が部分的に動いているように見えるデザイン手法、シネマグラフ(英: Cinemagraphs)。写真では伝わらない不思議な雰囲気を加えることができ、これまでに当サ
cinemagraph2015-top
写真の一部分に、無限につづくループを加えることで、不思議な感覚にさせるシネマグラフ。もともとアメリカ人写真家Kevin BurgとJamie Beckによるファッシ

目次へ戻る

 

 

03. より3Dに

3Dの分野は間違いなく進んでおり、すべてのデザイン分野に影響を与えるでしょう。VR / AR革命が急速に勢いを増しており、今後のますますの進化が見込まれています。

 

3-1

Luv.It | AARON MARTINEZ

3-2

Open Annual Awards | TAVO

3-3

Air Max ’17 | Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson

3-4

NIKE F.C. | 3D Golden balls in the real world | TAVO

目次へ戻る

 

 

 

04. アニメーション

アニメーションはウェブデザインでますます登場機会が増えており、GIFやSVG、WebGL、CSS、まははビデオ動画などが利用されています。もっとも影響力のある2016年のウェブデザイントレンドのひとつだったので、迷わずに積極的に活用しましょう。

 

 

4-animation-techniques
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出し
animation-principle-top
PhotoshopVIP編集部: 2015年3月30日に公開された記事を再度編集、追加しています。 フロントエンド・デザイナーやデベロッパーは
scrollreveal
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQ

目次へ戻る

 

 

05. ランディングページ

2017年には、マーケティングや潜在的なユーザーの獲得を獲得することを目的に、ランディングページがより重要視され、利用するサイトも増加するでしょう。

目次へ戻る

 

 

06. 幾何学模様、パターン、円、ライン線

この傾向は2016年に始まり、2017年も引き続き人気スタイルとなるでしょう。フラットやセミフラット・デザインのモダンな形シェイプを加えるだけで、ウェブサイトをパーソナライズ化できるトレンド。

 

6-1

Pfizer – Active and 50+ for The New York Times | justyna stasik; Vladimir Marchukov

6-2

DRAP.agency Branding | Mireldy Design; Filip Gjurin

6-3

目次へ戻る

 

 

 

07. 鮮やかな配色

鮮やかな配色で表現力のあるアピールをしましょう。特にマテリアルデザインやフラットデザインでは、この大胆な色合いがうまくマッチします。Googleが提供しているカラーパレットツールを使用、選択することで希望の配色を設定できます。

 

7-1

7-2

Edris – Logo Designed by MiLo

7-3

Rendered — Responsive Demo Website for Adobe | Serge Vasil

7-4

b2mach | Natalia Żerko; Kuba Enzowski; Kommunikat Studio

目次へ戻る

 

 

 

08. 革新的なスクロールとパララックス

この視覚的なアイデアは、どんなウェブサイトにもユニークな要素を追加するのにも最適です。複数の要素がレイヤー状に重なったパララックスから、ビデオ動画向けパララックスまでどんなものでも可能と言えるでしょう。

 

D.ex – Multilayer Parallax WordPress Plugin

目次へ戻る

 

 

 

09. グラデーションカラー

淡く色が変化していくグラデーションは、現在もっとも人気のあるトレンドのひとつです。2016年によく見られた傾向で、誰もが知っている Instagram は、ロゴやイメージを単色からマルチカラーに変更することを決めました。ロゴやボタン、または画像のオーバーレイまで、どこにでも利用できるトレンド。

 

9-1

 

eye-1
ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.

目次へ戻る

 

 

10. モバイルによる閲覧(レスポンシブ・デザイン)

2015、16年はモバイル端末での閲覧について考える機会が大幅に増えました。今ではウェブサイトの閲覧状況として、デスクトップやノートパソコンを抜いて、スマートフォンやタブレット端末がトップになり、この流れは今後も続くでしょう。レスポンシブデザインに対応していないサイトは、すぐにアップグレード更新する必要があるでしょう。

 

目次へ戻る
 

 

 

11. カスタムグラフィックとイラスト

ストックフォト素材は、依然としてかなり人気ですが、2017年に大幅に成長する新しいデザイントレンド。カスタムメイドの手づくりされたグラフィックやイラストに人気が集まるでしょう。訪問ユーザーに印象を残すユニークなデザインを作成し、ストックフォトを少なくし、よりオリジナルで独創的なものを利用しましょう。

 

11-1

Margarita Mar

11-2

目次へ戻る

 

 

 

12. クリエイティブな余白スペースとグリッド

これまでのウェブデザインは、整理されたカラムとグリッドを適用していましたが、2016年にかけて不規則に並べられたり、コンテンツを重ねた超モダンなデザインへの移行が顕著となります。

 

12-1

目次へ戻る

 

 

 

13. ストーリーテリング

ウェブサイトでは今、ユーザーがサイトにとどまってもらえるように物語、ストーリー性の高いコンテンツ(英: Storytelling)を提供しはじめています。人はありきたりで平凡なテキスト情報よりも、物語からより多くのものを得る傾向があります。

目次へ戻る

 

 

14. 遅延読み込み

遅延読み込み(英: Lazy Loading)は、コンテンツが豊富で長いウェブページ内の画像読み込みを遅延させるテクニック。基本的には、必要なポイントまでスクロールすることで情報が表示されます。

 

14-1

目次へ戻る

 

 

 

15. 分割、スプリットレイアウト

レスポンシブデザインのおかげで、コンテンツの分割が一般的となり、スクリーン画面を2つ以上に分割するレイアウトスタイル。このレイアウトを使えば、ユーザーに重要な2つのメッセージを同時に表示することができます。この傾向は2015年後半から増えており、2017年にはさらにその人気が加速し、多くのウェブサイトで見かけるようになるでしょう。

 

15-1

 

split-screen-technique-2
画面を縦半分に二分割した「スプリット・スクリーン(英: Split Screen)」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「ひとつの画面

目次へ戻る

 

 

 

16. フルスクリーン・フォーム

新しいウェブサイトでは、別ページに移動することなくフォームの記入ができる、レスポンシブデザイン対応のフルスクリーンで表示されたフォームが活用されています。

 

16-1

目次へ戻る

 

 

 

17. ビデオ動画

ビデオ動画を利用したコンテンツはここ数年増えており、ユーザーはストーリーを伝える高品質なビデオを期待するようになってきています。ウェブサイトで公開するビデオ動画は短いループさせたものから、視聴者がストーリーに興味を持つ大規模な映画製作プロジェクトまでさまざまです。

 

 

free-video-library
すこし前までは映像制作と聞くと専門のプロが行うものというイメージがありましたが、最近ではあらかじめPCに編集ツールがインストールされていたり、モバイル用アプリも数多

目次へ戻る

 

 

18. SEOが重要

検索エンジン最適化(英: Search Engine Optimization)はウェブサイトにとって非常に重要な要素ひとつで、SEO対策していない美しいウェブサイトは、おそらく注目を集めにくくなるでしょう。

 

18-1

目次へ戻る

 

 

 

19. 隠されたナビゲーションメニュー

ハンバーガーメニューは、メニュー自体を見つけることがむずかしいという点で、多くのメリットとデメリットが挙げられていますが、この試行錯誤を繰り返すトレンドは継続し、最終的にユーザーはそれらのスタイルに慣れるでしょう。

 

5a0a0347810259-588a1ff40a2da

 

mobile-alternative-menu-1
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているの
100css-menu
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイル

目次へ戻る

 

 

20. 細部にこだわるデザイン

207年は、より細部に焦点を合わせ、こだわることが重要となるでしょう。ナビゲーションメニューに使われる小さなドットから、ページ端に表示するロゴまで、細かい部分に焦点を当てることで、魅力的なデザインを完成させましょう。

 

20-1

Barometa – Next-generation Job Platform | Netguru Team; Łukasz Pachytel

20-2

Konstantin Zhenchur

目次へ戻る

 

 

 

21. ロゴデザイントレンド

21.1 ミニマルスタイル

有名ブランドがよりシンプルでミニマルなデザインに切り替えている今、この傾向は今後もますます続くでしょう。

 

21-1

Mingo Ideas Up

 

21.2 手書きロゴ

数年前から注目されているトレンドで、ヒップスター系の業種に適しています。このスタイルは、カフェやレストランなどの飲食業界、ヘアーサロン、手づくりクラフトなどで利用されています。

 

21-2

Sam Healy

 

21.3 ネガティブ・スペース

これは古いトレンドですが、ここ数年で再び脚光を浴びており、2017年も注目しておきたいスタイル。

 

21-3

 

21.4 切り抜きロゴ

このトレンドは、できる限りミニマルに抑え、ロゴが何を意味しているのか知るのに十分なパーツのみで構成されています。

 

21-4

Aleksandr Maksimov

 

21.5 幾何学ロゴ

これは昔から使われいるお決まりパターンですが、決して無くなることのない鉄板スタイルのひとつ。

 

21-5

Mingo Ideas Up

 

21.6 ラインアート・ロゴ

新しく登場したモダンなビジネスの現場で人気となっているロゴトレンド。

 

21-6

Sam Healy; Andrea Schlaffer; Jacek Janiczak

 

21.7 パターンロゴ

パターンは新しいトレンドで、この繰り返しを利用したスタイルは、コンテンツを目立たせるユニークな方法と言えます。このトレンドは、ロゴデザインのプレゼンテーションにもオススメ。

 

21-7

Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

 

21.8 アニメーションロゴ

動きのあるデザインは、2017年にかけて大きなトレンドで、あらゆるデザイン分野で見かけることになるでしょう。

 

 

21.9 ヴィンテージロゴ

今でもよく見かけるヴィンテージスタイルは、今後も残っていくでしょう。

 

21-11

Роман Додонов; Mingo Ideas Up; Will Try Further

 

21.10 グラデーションカラー・ロゴ

先述したデザイントレンドのひとつで、この流れはロゴデザインでも人気となるでしょう。

 

21-12

Mingo Ideas Up

 

21.11 イラストロゴ

イラストは、ロゴにユニークで個性的な雰囲気を加えるのに最適な方法です。今年、ますます人気が高まりそうなスタイルのひとつ。

 

21-13

Bodea Daniel; Jacek Janiczak

 

21.12 写真をつかったロゴ

タイポグラフィー書体と画像イメージの組み合わせは、まさにトレンディーで人気となっています。組み合わせ安く、うまくコントラストを表現できるスタイル。

 

21-14

 

2017-logo-trend-forecast2
新しい年を迎え、ロゴデザインを新しく作成したり、変更するのにもぴったりな時期。しかし、実際どんなデザインがいいのか迷ってしまうのも事実です。今回は、2017年のロゴ

目次へ戻る

 

 

22. タイポグラフィー・トレンド

22.1 巨大で太字の美しい書体

素晴らしいデザインを作成するうえで、タイポグラフィーはおそらくもっとも重要な要素です。今年のトレンドとして、太字で大きな見出しタイトルをよく見かけるようになるでしょう。

 

22-1

Alexander Laguta

22-2

Quim Marin

22-3

Baugasm Series – Pack 4 | Vasjen Katro

 

22.2 グラデーションカラー書体

鮮やかな色の移り変わりを表現するグラデーションは、まさにいまがトレンドで、タイポグラフィー書体でも同じことが言えるでしょう。

 

22-2

The Woork Co

 

22.3 ビジュアル階層

タイポグラフィーにおける階層の作り方は、すべてのデザイン分野に当てはまる重要なポイントです。フォントのサイズやウエイトは、どの単語や文字がもっとも重要であるかを簡単に示すことができるので、文字テキストの入力ではこの点に注意しましょう。また、文字テキストの配置や色を活用し、素晴らしい視覚的な階層を作成できる点を覚えておきましょう。

 

22-4

 

typography-hierarchy-eyecatch
文字テキストの視覚的な階層(英: Visual Hierarchy)とは、いったい何を意味しているのでしょう。 デザインプロジェクトに致命的な影響が出
level3-top
海外デザインブログCanva Design School Blogで公開された「Why Every Design Needs Three Level of Typo
10-visual-hierarchy-top
海外デザインブログ Canva Design School で公開された「The Design School Guide To Visual Hierarchy」よ
nondesigner-tip-top
海外サイトMediumで公開された「3 Typography Tips for a More Comfortable Read」の著者Luke Jonesより許可を

 

22.4 小さなタイポグラフィー

とても小さなく表示された文字テキストは、余白スペースに囲まれていることが基本で、色や画像とのコントラストを作成することで見やすくできます。また、アニメーションを組み合わせ、より目立たつように仕上げることも可能です。

 

22-5

22-6

22-7

Slava Oleinik; Bahaa Samir; Witty Digital

22-8

Baugasm Series – Pack 4 | Vasjen Katro

 

22.5 アニメーション・タイポグラフィー

アニメーションはどこでも使われている人気トレンドで、タイポグラフィー書体でも同じことが言えます。控えめでソフトなアニメーションを利用するときは、細心の注意を払う必要があるでしょう。

 

 

22.6 写真をつかったタイポグラフィー

文字テキストと写真の組み合わせは、魅力的な見た目を実現できます。以下のサンプル例も参考にどうぞ。

 

22-10

Quim Marin

 

22.7 幾何学模様とタイポグラフィー

ロゴトレンドでも紹介した幾何学スタイルは、タイポグラフィー書体にも適用することができ、モダンな見た目を表現できるテクニック。

 

22-11

22-12

Quim Marin

22-13

∆ Studio—JQ ∆

 

22.8 フォントの組み合わせ

2017年も2つ以上のフォントを組み合わせて利用する流れが続くでしょう。今後のデザインプロジェクトに役立つ、幾つかのサンプル例も参考にどうぞ。

 

22-14

Typography: Google Fonts Combinations – Volume 1 | Volume 2

 

10font-combination-top
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Co
font-pairing2-top
海外デザインブログCanva Design School Blogで公開された「The Design School's Ultimate Guide to
numbers-hero
「数字」にフォーカスを当て、書体の選びかたやデザインの秘訣ガイドラインを学びながら、実際に使えるフリーフォント素材20個をまとめてご紹介します。

目次へ戻る

 

 

海外サイト Behance.net で公開された 2017 Design Trends Guide – Behance.net by MiloThemes より許可をもらい、翻訳転載しています。

 

参照元リンク : 2017 Design Trends Guide – Behance.net