デザインの引き出しを増やしておこう！最近のWebサイトで見かけるデザインの新しいテクニックのまとめ

サイト構築 -デザイン

Post on:2017年7月6日

ダウンページナビゲーション

ナビゲーションは最近、実験段階にあるように思われます。このダウンページナビゲーションは以前はまったく違うものでしたが、最近のものは大きく変わりました。

ダウンページナビゲーションはシンプルなデザインに適しており、スクロールを必要としないページが最適です。
ビジターが見落とさないように、大きくデザインされています。
縦長ページに使用する場合は、スティッキーにします。
新鮮なアイデアとしてトップページに採用します。内部ページは伝統的なパターンに戻します。
多くの要素が配置された複雑なページには適していません。
ビジターをナビゲーションに誘導するためのデザイン要素を使用します。

Little Village Lapland

hot dot

ボックスをデザイン要素として使う

カード型レイアウトでは、ボックスはコンテンツを格納する役割で多くのデザインに活用されました。それらとは異なり、コンテンツを強調するためにボックスを使ったデザインです。特定のエリアを目立たせたり、リンクとして機能させることもできます。

ボックスを使用して、要素をレイヤー化します。Feudiではコンテンツの特定の部分にフォーカスを向けて、画像の一部のように感じさせるレイヤーのテクニックが使用されています。シンプルなデザインにさらに複雑なレイヤーを追加します。
ボックスを使用して、フローを作成します。B&O Playでは画像を含む積み重なったボックスを使用して、デザインを通じて導線が作られています。
ボックスを使用して、デザインの上にアクション可能な要素（アクションのポップアップコールなど）を作成します。
ボックスを使用して、マテリアルデザインスタイルのカードを含むデザインを作成します。特にモバイルのデザインで人気があります。

Feudi
※音注意

B&O Play

垂直のライン

Webのデザインでは、垂直の空間が非常に重要です。
この垂直の空間をつくるのがスキニーラインと呼ばれるもので、デザインを通してユーザーを誘導し、スクロールを促し、特定の要素に注意を集中させることができます。また、水平要素やボックス・サークルなどの要素ほど一般的ではないため、視覚的にも面白い効果が得られます。

テクスチャを作成するには、繊細な垂直線で背景をつくります。
縦型のイメージのコラージュを作成します。
メインの画像に垂直のラインを使用して、写真や動画やテキストなどの要素のレイヤー間に奥行きを設定します。
スライダーの要素を区切るには、垂直方向のアニメーションスイープを使用します。
垂直方向のフォーカスで、メタファを作成します。
それぞれの面がより垂直方向の縦横比を持つように分割画面を設計します。
小さなオブジェクトの背景パターンを垂直方向の配置で使用します。
アイコンや要素を画面全体に配置するのではなく、重ねて配置します。

Panamera

07H34

小さいテキストの要素

昨年は大きいタイポグラフィがトレンドでしたが、最近では小さいテキスト、それもごく小さいサイズのものに変わりつつあります。見出しから本文まで、タイポグラフィはダウンサイジングされています。

Moonfarmerではロゴタイプには軽い書体を使用され、コピーには小さなテキストが使用されています。すべての書体をダウンサイジングすることで、背景画像と素晴らしいハーモニーを生み出しています。
HTML Burgerでは、大胆な見出しと小さな2行目のテキストでほぼ反対のアプローチがとられています。より小さいテキストは、特大の見出しと対照的であるため、よく機能しています。

Moonfarmer

HTML Burger

幾何学的なレイヤー

新しい方法で要素を重ねるデザインは、着実に人気が上昇しています。マテリアルデザインで取り入れられた幾何学的なレイヤーは、モダンなデザインテクニックとして人気が高いです。楽しい形状、切り抜き、色の追加により、ビジターはデザインに入る出発点になります。

Salt Projectsでは重要な要素にフォーカスを当てるために画像が幾何学的に切り取られています。
Bailey and Frenchでは明るいボーダー要素を使用して、画面全体に導くオフバランスのフォーカスが作成されています。

Salt Projects

Bailey and French

ぼかしを使った画像

画像をぼかすのは新しいテクニックではありません。最近の使い方としては画像や動画の部分的に適用して、新鮮なデザインを演出しています。ぼやけたイメージを使うことで、イメージからデザインの他の部分への強調を促します。

Digitaluxではメインメッセージの背後に少し動きを加えて、アクションを促すためにブルーが使用されています。
espnではスタジアムがぼやけているため、テレビのドキュメンタリーのプレビューをどこにでも見せることができます。ぼやけた背景は、デザインの他の要素にフォーカスを与えるのに役立ちます。

Digitalux

espn
※音注意

スクリーンいっぱいのヒーローイメージは後退

ヒーローイメージは今までは大きく、スクリーンいっぱいのサイズで表示されていました。最近ではこの特大イメージのトレンドは後退しはじめ、シャロウな浅いイメージが採用されています。これはイメージだけでスクリーンを満たすのではなく、情報やアクションを配置し、ビジターがより素早く行動できるようにするものです。

ヒーローイメージを浅く使用するために最も難しいのはクロッピングです。デザインプロセスの早い段階で、イメージについて考える必要があります。シェイプは標準ではないので、画像を使用してそのアスペクト比で良好に見える写真やビデオを用意する必要があります。