デザインの引き出しを増やしておこう!最近のWebサイトで見かけるデザインの新しいテクニックのまとめ
Post on:2017年7月6日
新しいデザインを見かけるとワクワクしますよね!
2017年も半年が過ぎ、さまざまな新しいデザインを見かけるようになりました。最近のWebサイトで見かけるデザインのテクニックとその使い方を紹介します。

3 Essential Design Trends, July 2017
3 Essential Design Trends, June 2017
3 Essential Design Trends, May 2017
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- ダウンページ ナビゲーション
- ボックスをデザイン要素として使う
- 垂直のライン
- 小さいテキストの要素
- 幾何学的なレイヤー
- ぼかしを使った画像
- スクリーンいっぱいのヒーローイメージは後退
- 斜めを使ったレイアウト
- 分かりやすいアクションボタン
ダウンページ ナビゲーション
ナビゲーションは最近、実験段階にあるように思われます。このダウンページ ナビゲーションは以前はまったく違うものでしたが、最近のものは大きく変わりました。
- ダウンページ ナビゲーションはシンプルなデザインに適しており、スクロールを必要としないページが最適です。
- ビジターが見落とさないように、大きくデザインされています。
- 縦長ページに使用する場合は、スティッキーにします。
- 新鮮なアイデアとしてトップページに採用します。内部ページは伝統的なパターンに戻します。
- 多くの要素が配置された複雑なページには適していません。
- ビジターをナビゲーションに誘導するためのデザイン要素を使用します。


ボックスをデザイン要素として使う
カード型レイアウトでは、ボックスはコンテンツを格納する役割で多くのデザインに活用されました。それらとは異なり、コンテンツを強調するためにボックスを使ったデザインです。特定のエリアを目立たせたり、リンクとして機能させることもできます。
- ボックスを使用して、要素をレイヤー化します。Feudiではコンテンツの特定の部分にフォーカスを向けて、画像の一部のように感じさせるレイヤーのテクニックが使用されています。シンプルなデザインにさらに複雑なレイヤーを追加します。
- ボックスを使用して、フローを作成します。B&O Playでは画像を含む積み重なったボックスを使用して、デザインを通じて導線が作られています。
- ボックスを使用して、デザインの上にアクション可能な要素(アクションのポップアップコールなど)を作成します。
- ボックスを使用して、マテリアルデザインスタイルのカードを含むデザインを作成します。特にモバイルのデザインで人気があります。

Feudi
※音注意

垂直のライン
Webのデザインでは、垂直の空間が非常に重要です。
この垂直の空間をつくるのがスキニーラインと呼ばれるもので、デザインを通してユーザーを誘導し、スクロールを促し、特定の要素に注意を集中させることができます。また、水平要素やボックス・サークルなどの要素ほど一般的ではないため、視覚的にも面白い効果が得られます。
- テクスチャを作成するには、繊細な垂直線で背景をつくります。
- 縦型のイメージのコラージュを作成します。
- メインの画像に垂直のラインを使用して、写真や動画やテキストなどの要素のレイヤー間に奥行きを設定します。
- スライダーの要素を区切るには、垂直方向のアニメーションスイープを使用します。
- 垂直方向のフォーカスで、メタファを作成します。
- それぞれの面がより垂直方向の縦横比を持つように分割画面を設計します。
- 小さなオブジェクトの背景パターンを垂直方向の配置で使用します。
- アイコンや要素を画面全体に配置するのではなく、重ねて配置します。


小さいテキストの要素
昨年は大きいタイポグラフィがトレンドでしたが、最近では小さいテキスト、それもごく小さいサイズのものに変わりつつあります。見出しから本文まで、タイポグラフィはダウンサイジングされています。
- Moonfarmerではロゴタイプには軽い書体を使用され、コピーには小さなテキストが使用されています。すべての書体をダウンサイジングすることで、背景画像と素晴らしいハーモニーを生み出しています。
- HTML Burgerでは、大胆な見出しと小さな2行目のテキストでほぼ反対のアプローチがとられています。より小さいテキストは、特大の見出しと対照的であるため、よく機能しています。


幾何学的なレイヤー
新しい方法で要素を重ねるデザインは、着実に人気が上昇しています。マテリアルデザインで取り入れられた幾何学的なレイヤーは、モダンなデザインテクニックとして人気が高いです。楽しい形状、切り抜き、色の追加により、ビジターはデザインに入る出発点になります。
- Salt Projectsでは重要な要素にフォーカスを当てるために画像が幾何学的に切り取られています。
- Bailey and Frenchでは明るいボーダー要素を使用して、画面全体に導くオフバランスのフォーカスが作成されています。


ぼかしを使った画像
画像をぼかすのは新しいテクニックではありません。最近の使い方としては画像や動画の部分的に適用して、新鮮なデザインを演出しています。ぼやけたイメージを使うことで、イメージからデザインの他の部分への強調を促します。
- Digitaluxではメインメッセージの背後に少し動きを加えて、アクションを促すためにブルーが使用されています。
- espnではスタジアムがぼやけているため、テレビのドキュメンタリーのプレビューをどこにでも見せることができます。ぼやけた背景は、デザインの他の要素にフォーカスを与えるのに役立ちます。


espn
※音注意
スクリーンいっぱいのヒーローイメージは後退
ヒーローイメージは今までは大きく、スクリーンいっぱいのサイズで表示されていました。最近ではこの特大イメージのトレンドは後退しはじめ、シャロウな浅いイメージが採用されています。これはイメージだけでスクリーンを満たすのではなく、情報やアクションを配置し、ビジターがより素早く行動できるようにするものです。
ヒーローイメージを浅く使用するために最も難しいのはクロッピングです。デザインプロセスの早い段階で、イメージについて考える必要があります。シェイプは標準ではないので、画像を使用してそのアスペクト比で良好に見える写真やビデオを用意する必要があります。


斜めを使ったレイアウト
斜めを使った最近のレイアウトは、画面の1つのコーナー(多くは右下)を中心に、要素が広がるように配置されています。デザインの下隅にフォーカスをつくり、画面全体に広がるように要素を配置し、ビジターに異なるアイトラッキングのパターンを提供します。
これらの要素を最大限に利用するためには、スクロールした時に見えるかのように多くの要素を隠すことです。このタイプのデザインはあらゆるコンテンツで機能するものではありませんが、他に多くの情報を持たないデザインや多くのUI要素を使用して注意を引くデザインにとっては良いアイデアです。


分かりやすいアクションボタン
ほとんどのサイトに、何らかのアクションボタンが利用されています。クリックしてページを移動したり、フォームの入力ボタンだったり、ビジターは何らかの行動をするよう促されます。最近のデザインではこのアクションボタンは、非常に分かりやすくデザインされています。
ビジターに何ができるのか、何が起こるのかを説明し、やりたいことや見たいものをコントロールできるようにコンテンツと選択肢の適切な組み合わせを表示します。このデザインが機能するには、適切な種類のコンテンツが必要です。

Wordshurt Lefilm
※音注意

sponsors