Web制作者が知っておきたい！2017年ここ最近、よく見かけるデザインのトレンドのまとめ
Post on:2017年2月1日
sponsors
2017年ここ最近、よく見かけるようになったデザインのトレンドを紹介します。
トレンドの好き嫌いに関わらず、デザインのアンテナを張っておくことは大切です。今すぐに使うことがなくても、未来のプロジェクトでその知識が役立つかもしれません。
Essential design trends, January 2017
Essential design trends, February 2017
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
視線を誘導する空白スペースの新しい使い方
空白スペースはデザインを素晴らしくしたり、壊したりすることもあります。それが白や背景色、または文字や画像を囲んでいるかに関わらず、デザインにおける空白スペースはただの空白ではなく、多くを語ります。
空白スペースを大胆に使用することは楽しいことが多いデザイントレンドの1つです。うまく使用することで、Webサイトやアプリの見た目や使い方をユーザーに知らせるのに効果的です。オープンスペースは、しばらくの間人気が高かったミニマルスタイルを拡張したものですが、あまり違いはありません。スペースを使った対称的なアウトラインではなく、文字や画像のスペースをより非対称なフォーマットにしてバランスを保ちます。
ユーザーの観点から考えてみましょう。ユーザーは意識してかどうかに関わらず、デザインのオープンな部分に引き込まれるでしょう。そこから、ユーザーの目はデザインのより密度の多い部分に移動します。この2つのステップは、ユーザーの注意をつかんで、どこを見るべきかコントロールできます。
賢い方法だと思いませんか？
この単純なバランスの取れたデザインテクニックは視覚的に面白く、強い影響を与えるのに最適です。下記の例を見て、あなた自身で最初に目がどこにいくか確認してください。
Verawang
左の空白スペースは、ユーザーの目を女性の洋服に誘導します。ファッションデザインを効果的に見せています。
文字周りの空白スペースは、ユーザーの目を見出しに誘導します。見出しは、ページで見る最初の要素の1つであるべきです。
空白スペースはユーザーの目をまずは人物に、その次にバイオグラフィに誘導します。明るい要素と暗い要素のコントラストは、この動きを強化するのにも役立ちます。注目すべきは右から左に読むと、それは非常にクリエイティブだと感じることです。もしあなたがデザイナーを探しているなら、気になりませんか？
プロダクトの見せ方
オンラインショッピングでは経験は2つのカテゴリーに分類されます。Amazonなどの大手サイトが提供するシームレスな経験と、小規模サイトで共通するチェックアウトのクリック数が多すぎる経験です。
その2つの間に何かがあるはずですよね？
小売業者の多くは、ビジュアル面を重視したデザインスタイルを選択しています。このトレンドはアイテムが少ない店舗では効果的で、ユーザーエクスペリエンスについてのきちんとした考えに基づいています。
下記は小規模サイトの例で、最初から巨大なナビゲーションメニューと数百のオプションが表示されます。フォーカスされるのは、アイテムの美しさやユニークさ、そしてその背後にあるストーリーです。スクロールやホバーすると、アイテムを実際に購入することができることに気がつくでしょう。
このデザインはInstagramの影響を受けた写真やクリックを促すカードスタイルのインターフェイスを使って、より視覚的な感覚を持っています。これらのデザインの中のアイテムは、アイテムごとに多くのオプションが付いていないようです。アイテムはオーダーメイドです。
他の共通点として、スクロールするまで価格を見つけることができないことです。最初に見える画面では、プロダクトのストーリーを通じて購買欲を高めるようにデザインされています。
パステルカラーはソフトに
カラーはよりソフトなものに戻ってきています。より明るく、より大胆なパレットはしばらくの間はトレンドでしたが、移行しているように思われます。
使用法は、しかしながら今までとは異なります。パステルカラーはフラットやマテリアルデザインのデザインスタイルに新しい生命を与える方法で使用されています。
パステルカラーは背景に使用するのが最善だと思うかもしれませんが、必ずしもそうではありません。確かにパステルカラーの背景は簡単ですが、暗い背景でもテキストを読みやすくする方法がたくさんあるように他の方法でも使用できます。
最近人気が高い使い方は、ヒーローヘッダや打ち出し画像にパステルカラーを使うことです。多くのデザイナーがこれらの画像にパステルカラーを使用しています。パステルカラーのパレットにあわせた画像や写真は、下記のBridal Plannerのようによりソフトな色調を使った目立つ組み合わせです。また、Infinity Foodsは同様のテクニックを使用し、類似色のテーマを持つ画像にパステルをニュートラルに組み合わせています。Rentberryはマテリアルスタイルの楽しいカラーパレットを使用しています。
画像のオーバーレイはダーク系
画像が静止しているか動いているかは関係ありません、ダーク系のオーバーレイは画像の上にテキストなどの要素を簡単に加えることができます。手軽に思うかもしれませんが、このテクニックには多くの価値があります。
カラーオーバーレイを選択する主な理由は、可読性を高めることです。ほとんどの画像にはカラーに明暗があり、すべてのデバイスで読み取り可能な文字を加えることは困難です。デスクトップで最適な配置をしても、同じ画像とテキストの組み合わせがモバイルで判読不能になることがあります。
それを解決するのが、カラーオーバーレイです。画像や動画に半透明のカラーオーバーレイを重ねることで、コントラストが増えます。その上にある白や明るいカラーの要素ははっきりと読みやすくなります。
ダーク系のカラーオーバーレイは他の理由でも視覚的に面白いです。ダーク系はブラックやグレーだけではありません。internetumで使用されているグリーンなど、どんな色でもダーク系カラーになり得ます。珍しいカラーの選択は、ユーザーをデザインに引き込むのに役立ちます。
ダーク系のカラーオーバーレイにはもう1つの利点があり、デザインの中心にないことを望む画像や動画をカモフラージュするのにも役立ちます。画像や動画が少し古いような印象を与えます。カラーオーバーレイを使用すると、画像の雰囲気が変わり、目立たなくなり、テキストやアクションボタンや他のグラフィック要素などの他のコンテンツにもっと重点を置くことができます。
オーバーレイは、Digital Werkのように実際に暗くしてもよいし、Lytton Livingのように微妙に暗くすることもできます。画像や動画を見ることができ、重なっているすべての要素を読むことも簡単であるとき、それはバランスが適切であるということです。
ブルータリズム
ブルータリズムとは元は建築形式で、美しい対称性とハーモニー、複雑なレイアウト、視覚的パフォーマンスのアクセントを備えた洗練されたデザインのことです。最近はこのブルータリズムをデザインに取り入れているWebサイトが増えてきました。いくつか例があるので、実際に見てみましょう。
ブルータリズムで特に興味深いのは、非常に普及しているフラットやミニマルとはまったく違って見えるということです。これらのデザインのいずれかを見かけたら、あなたは立ち止まり、じっくり見て、調査しないわけにはいかないでしょう。それが美しくても気に入らなくても、その中間であっても、それはWebサイトのデザインの最終のゴールです。
テキストの新しいエフェクト
ちょっと面白い文字のエフェクトが準備運動を始めています。このトレンドについて興味深いのは、2つの明らかに異なる見た目があることです。
- C&C Coffeeのような画像の背景に空洞の文字。
- The London Loomのような空洞が画像で埋め尽くされた文字には、My Mother Before Meのような背景を少し透明にするバージョンもあります。
このトレンドは視覚的な影響が大きく、面白いですが、実装するのが少し難しいかもしれません。
画像を使った空洞文字のフォントには、それほど多くの選択肢はありません。このことは理想的な状況とは言えません。Webでなければ、レンダリングについて心配する必要がないので柔軟性があります。
文字を塗りつぶす時は、文字の中の画像を判別できるようにする必要があります。その画像が何であるかを知ることができない場合、デザインは有効ではありません。この時点でほとんどのデザイナーは太い文字を選ぶので、画像が表示される領域が増えます。人間の脳は画像の空白を埋める傾向があるので、全部が見えていない画像でも認識することができます。見る方法が特殊な人間の顔やオブジェクトの画像は、文字内に完全に配置する必要があるため、使用するのは非常に難しいです。
sponsors
