有名サイトの事例から学ぶ12のWebデザイン・レイアウト

ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。

この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。

1. カード
2. グリッド
3. マガジン
4. コンテナの不使用
5. スクリーン分割
6. シングルページアプリケーション（SPA）
7. Ｆパターン
8. Ｚパターン
9. 水平的なシンメトリー
10. 水平的なほぼシンメトリー
11. 放射線状のシンメトリー
12. アシンメトリー

1. カード

それぞれのアイテムに詳細情報まで表示してしまうと、スクリーンがゴチャゴチャとしてしまう。

カードを使って、多量のコンテンツをすっきりした形で表示することができます。Web Design Book of Trends 2015?2016で説明した通り、カードは画面のどこからでもポップアップで表示ができます。

カードはクリック可能な情報のコンテナです。認識しやすいプレビュー表示により、ユーザーは求めているコンテンツを見つけやすくなります。カードのスタイルはサイトごとにさまざまですが、大抵は画像と簡単な記述が含まれており、Facebookのいいね！やTwitterのリツイートのように、個々の機能が入っているものもあります。

さらに、カードはレスポンシブデザインにも有効です。カードはスクリーンに応じて自動的にサイズ調整され、画面にフィットするように配置されます。

多くのコンテンツをもつサイトにとって、カードは大変有効に使えるレイアウトです。

・直感性：使い方に関する説明を必要としません。

・レスポンシブ：画面サイズに対して自動で調整し、配置を行います。

・シェアしやすい：ソーシャルメディアにおいて特定のコンテンツだけをシェアできます。

・多目的に使える：幅広い種類のWebサイトに使えます。

・特定のカードだけをクリック可能にするのではなく、全てのカードをクリックできるようにしましょう。Interaction Design Best Practicesに記載されているルールによると、これによってユーザーのインタラクションはより適切なものになります。

・１つのコンセプトに沿ってカードを配置します。そうでないと、目的が損なわれます。

・画像を選択する際は、より小さな画面を念頭に選びます。異なるデバイスに対しては、画像をトリミングする必要もあるでしょう。

・複雑になりすぎないようにします。シンプルなほどカードは有効です。標準的なタイポグラフィにし、最小限の文章にすることで閲覧の負担を減らせます。

2. グリッド

コンテンツが多量にあるサイトにおいて、全てのアイテムを最重要なものとして、順位をつけることなく表示したい。

グリッド構造で閲覧を分かりやすくできます。ほとんどの場合、カードは単一のグリッドか、もう一つのグリッドのフォーマットでレイアウトされます。グリッドは、シンプルなリスト表示の見た目よりも、閲覧に関してのより多くのオプションを提供することができ、余白が効果的に働きます。

グリッドは、サイズやそれぞれのアイテムの間隔、列の数により変化します。Huffington Postはジグザグにアイテムを配置して「お堅いイメージ」になるのを避けている一方で、YouTubeは規則正しい構造を用いてまっすぐにアイテムを並べ「おすすめ」や特定のチャンネルなどのカテゴリーにアイテムを分類しています。

・余白に注意します。余白はユーザーがどのように閲覧するかに影響します。余白がたくさんあると、閲覧スピードはゆっくりになり、それぞれのアイテムをより注意して見るようになります。余白が少ないとスピードが速くなり、いくつかのコンテンツが飛ばされてしまう可能性があります。

・異なるデバイスに対してデザインする場合は、整合性が重要になります。

・基本的な12列のグリッドから始めましょう。

3. マガジン

複数のカテゴリー内で、定期的にアップデートされるコンテンツが数多く発生する。

雑誌はWebサイトよりも以前からこの問題を抱えており、雑誌で発達してきたフォーマットが継続的に使われています。列のサイズやカード、見出しのサイズに変化をつけることで、グリッドの単調な構造を壊し、さまざまなコンテンツを目立つように表示します。

マガジンのレイアウトは、コンテンツがどのように表示・配置されるかにより変化します。画面の左側にカードのグリッドが表示され、右側にテキストリンクが表示されることが多いです。

BuzzFeedを例にとって見ると、最初の列は特集のコンテンツであり、画像の隣に詳細説明を載せています。真ん中にはタイムリーなコンテンツが配置され、画像の下に簡単な記述があります。最後の列は、現在のトレンドが載せられ、説明文のない画像がたくさん配置されています。文字スタイルをよく見ると、カラーやサイズがユーザビリティのために変えられており、視覚的な階層を作り出しています。

・紙媒体の雑誌のように、このフォーマットは画像を強調します。TIME、WIREDのように大抵の場合、目を惹きつける１つの画像が配置されます。

・このスタイルの特徴の一つとして、それぞれのサイドに縦に垂直なメニュー（または横に水平なメニュー）が配置されることが挙げられます。

4. コンテナの不使用

必要最小限のコンテンツだけで、見栄えのあるページをデザインしたい。

コンテナ不使用のフォーマットは、ミニマリズムの新たなステージと言えるものです。不必要なビジュアル要素をすべて取り除き、他サイトの慣例を打破します。このパターンのフォーマットは、コンテンツを整然と区切るのではなく、ビジュアル、グルーピング、共通感覚などを使い関係性を示します。

このスタイルは、画集や資料集などのポートフォリオやファッションサイトにおいて、モダンで前衛的なイメージを与えるものとしてよく採用されます。

コンテナを使用しないデザインは、コンテンツそのものに対する注目をより集める効果があります。しかし、視覚的な階層を明確化するためにはより注意が必要です。インパクトの上では効果的なパターンですが、実際にそれをデザインした人でないと、階層が分からないというリスクのあるデザインです。

ミニマリズムの第一人者であるAppleは、サイトにコンテナを使うことをあまりよしとしません。リンクは全てテキストでボタンを使わず、よく考え抜かれたヴィジュアルデザインで、コンテンツが何に関係しているのかを表しています。

・タイポグラフィはとても重要です。可視化された区切りのない画面上において、サイズや大きさ、色などの全てがユーザーに意味を伝えます。Appleはタイトルに大きなテキストを使い、第２階層の記述に小さめのテキストを用い、リンクの場所には青文字を使っています。

・分かりづらくならないように、ほとんどのエレメンツはクリック可能にします。ユーザーは何か１つのエレメンツに対してどうしてよいか分からなくなると、そのエレメンツをクリックして、インタラクションを試すでしょう。コンテンツの量が多いサイトは、このフォーマットと相性がよくありませんが、AOLでは可能であることを示しています（必ずしも理想的とは言えませんが）。

5. スクリーン分割

２つのメインとなるコンテンツを、それぞれの重要性を損なうことなく表現したい。

スクリーン分割のレイアウトは、二つの対称的な要素を、重要度が平等なものとしてユーザーに伝えるのに人気の方法です。

スクリーン分割は、二つの主要となる要素を同時に表示したり、または、Adidasの例に見られるように、それぞれを対称的に配置したりする選択肢です。

スクリーン分割は、62 Modelsの男女の例のように、サイトが二つのはっきりと異なるバリエーションを伝える際には最適なパターンです。ユーザーは最初から何を選択すればよいか分かるので、サイトは不要な選択肢を表示する時間が省けます。またスクリーン分割では、Peugoetで使われているように、２つのCTAを強調する効果があります。

このスタイルは純粋に、サイトにアーティスティックさを与えるものとして改良されてきました。デザインする際に共通していることは、ページの半分側にテキストを表示し、ヘッダーとなる画像が反対側を埋めています。

・スクリーン分割は対称性を表すのに理想的です。Patrick McNeil氏が言うように、対称的なカラーや異なるテキストサイズ、対称的なイメージなど、対となる特徴を表す手法で、二重性を表現します。

・１つにまとめられたナビゲーションメニューでなければなりません。画面のトップに配置し、どちらのサイドにも共通して属していることが分かるようにするのが理想的です。

・スクリーン分割のデザインは、コンテンツが多くなった時に拡張することができないので、コンテンツが多いレイアウトに対しては採用できません。

6. シングルページアプリケーション

ページが複数にわたる場合、ナビゲーションシステムを何度も配置するのが煩わしい。

最新のWeb技術の発達により、単一ページだけのサイトやWebアプリが作成できるようになりました。技術的発達と単一ページのアプリがより便利なモバイルブラウザが広がることにより、このパターンがより利用されるようになりました。

シングルページアプリケーションでは、非同期的に読み込みを行うことで、一つのページ内で複数の動作を可能にしています。このパターンは、アプリがないサイトにも人気です。

例えば、GmailではEメールの閲覧と作成、チャットが同じページ内で行えます。またそれぞれのメールを異なるカテゴリーに分類して、複数ページのサイトで行われる動作を再現します。

・GmailやTwitterの画面のように、URLがどの場所にあってもぱっと見で分かるようにしましょう。コンテンツはJavaScriptにより一斉にロードされるので、URLは特に目を惹くようにすることが求められます。また、ブラウザの戻るボタンが使えるようにします。

・画面上部に固定のナビゲーションを使い、コンテンツの識別がしにくくなるのを防ぎます。ヘッダーのメニューが一つしかない場合でも同様です。

・Web UI Patterns 2016 (Vol.1)の第４章にあるスクロールの手法を使って、スクロールに関する課題を適切に処理します。

7. Fパターン

サイトにテキストが多く、ユーザーが閲覧するのに分かりにくい。

コンテンツが大量になる場合、特にテキストが多いケースでは、人間が自然に流し読みする方法を再現したFパターンのレイアウトを用いると、ユーザーはよりよく反応します。

Nielsen Norman Groupの記事によると、目の追跡に関する研究で、左から右にものを読む文化圏のユーザーは、コンテンツの量が多いサイトを、アルファベットのFやEの字のパターンのように、流し読みするのが典型的であることが明らかにされているそうです。

例えば、ユーザーがブログをさっと読む時、最初の段落の一行目をキーワードやテーマが何かを探して見て、そういう目的のものが見つからないと次の段落に移っていきます。

コンテンツの量が多い場合、Fパターンは水平な列を作り出し、上から下へと水平な列が続いていく構造を作り出します。この構造により、ユーザーの目がものを読む際に自然に行う動作ができ、デザイナー自身がどのような情報が見られるべきか、コントロールをできるようになります。

Yelpの例では、ユーザーが興味のあるトピックや画像を見つけると、より詳細な情報を得ようとその横に向かって読み出します。コラムの中で興味があるものがないと、それを見つけるまで下に読み進みます。

・ユーザーが左端から右端に向けて読むことを考慮して、左右の両側にCTAのような重要なコンテンツを載せます。上段から次の段に目が移る際、ユーザーにほんの少しだけ考える時間を与えます。

・心をくすぐるようなキーワードを載せて、次の段落を始めます。さらに、テキストのキーワードを強調するスタイルを使い、それがユーザーの探しているものだと分かるようにします。

・最初の２行に、最重要なコンテンツを載せます。ユーザーは興味がないコンテンツだと思うと、サイトを出ていってしまうからです。

・右側の列に、関連性はあるけれど直接的な関係はないコンテンツや、検索ツールを載せます。右側の領域は読む際に視野には入りますが、読み流すプロセスにおいては、重要なものとは意識されにくい場所です。

・Web UI Design for the Human Eye: Content Patterns and Typographyを読んで、より詳しい情報や実践方法を見てください。

8. Zパターン

ユーザーとのインタラクションを必要としない、特有の目的やCTAをサイトに載せる必要がある。

Fパターンと同様に、Zパターンのレイアウトは目の自然な読み流しの動作を再現したものですが、Zパターンは、目的が一つだけの場合やコンテンツがより少ないサイトに対して、より適しています。

Zパターンでは、効果的に配置されたビジュアルやテキスト、CTAなどを用いて、ユーザーの関心を特定のポイントに惹きつけることが期待できます。Fパターンがコンテンツの量が多いページを閲覧するのに適しているのに対し、Zパターンはよりオープンなページに適しています。

左から右に向かってものを読む文化圏のユーザーは、先程と同じように、左上の角から読み始めますが、今度は次の段に移る代わりに、ユーザーの目は真ん中で少し止まってそのあたりをうろうろし、最下段や左下の角の近くからまた読み始めます。このパターンは、TripAdvisorのように、中央にインパクトの強い画像を配置したり、Wunderlistのようにテキストや画像をかわるがわる配置してジグザグを作り出したりして、一層の効果を強調できます。

・CTAを、行の最後である右側に配置します。ユーザーの目が下段に動く前に、わずかながらのポーズが生まれます。

・右上のコーナーに最も重要なCTAを配置し、トップの段が最も目立つようにします。

・Zパターンを同一ページ内で何度も繰り返すことで、ユーザーがページを読む際のリズムを作り出すことができます。

9. 水平的なシンメトリー

同じようなビジュアルパターンが何度も出てくるので、すっきりとまとめたい。

シンメトリー（対称性）は、サイトに規則正しさときちんとした構成のイメージを与え、さらには信頼できるものだという印象を抱かせます。

シンメトリーによる画像は、視覚的な印象がよく、ユーザーとの心理的なつながりを作る可能性が期待できます。どのようにブランドイメージを印象作るかという点や、後にサイトがどのように思い出されるかなどの点で、サイトの面白さを増幅することができます。

・均衡なことが、必ずしもシンメトリーと一致するわけではありません。２つのオブジェクトは関係性に加えて、それぞれのコンセプトを含んでいます。ビジュアルのバランスについての詳細は、Smashing Magazine articleを読んでください。

・アーティスティックな背景画像により、シンメトリーはサイトの見た目に、品の良さや洗練されたイメージを与えます。

10. 水平的なほぼシンメトリー

水平的なシンメトリーだと整然としすぎた印象になる。

シンメトリーの長所をほぼ維持していますが、少しだけ躍動感を生み出します。このパターンでは、シンメトリーのイメージに僅かだけアシンメトリーの要素を加えます。結果として、より刺激的で感性に訴えるビジュアルになります。ただし、少しだけ構造が崩れます。

しかし、このわずかな視覚的なズレがメリットにもなります。

・より興味を惹きつけるために、シンメトリーが崩れるポイントに、重要なテキストやイメージ、CTAを配置します。

・少しのアシンメトリー効果で十分に効果があります。シンメトリーの画像をほんの少し変えるだけで、見た目に緊張感が生まれます。また、均衡的なデザインにサイドバーを配置するだけで、アシンメトリーを作り出せます。アシンメトリーの要素を加えるのには、十分配慮をしましょう。そうでないと、見た目がゴチャゴチャになってしまう恐れがあります。

11. 放射線状のシンメトリー

ページの中央に関心を集めて、ユーザーの素早いアクションを起こしたい。

放射線状のシンメトリーは、中央部の周りに円を作ってバランスを生み出します。どんなサイトに使うかの判断が難しいパターンですが、このパターンが上手くいくと、中央部に関心を惹きつける美的感覚が形成されます。典型的な例として、真ん中に会社の名前やロゴを置き、それをリンクで囲みます。

放射線状のシンメトリーは、動きを表現するのにも効果的です。円形のパターンでは一般的に、ユーザーの目線が自然と円形に動き続け、自然な形で終点に辿り着きます。

・放射線状のシンメトリーは、他のパターンとの共通点が少なく、見た目の良さだけでなく目立たせるうえでも効果的です。

・最重要な項目を中央に配置し、その次にくる項目をその近くに並べます。

・センターの周りにリンクをたくさん配置する場合は、無限ループにならないようにします。上のWikipediaの画像では、円の頂点と底部が空いているのが分かると思います。この空白は目の動きに休憩空間を与えて、両側のリンクを探しやすくしています。

12. アシンメトリー

視線の自然な動きを崩すことなく、特定のコンテンツを瞬時に目立たせるようにしたい。

アシンメトリーの構造は緊張感と躍動感を作り出します。全てのサイトで行われているものではありませんが、サイトを生き生きとしたものにしたくて、その中にはっきりと目立つポイントを作りたい場合はよいパターンです。

適切に用いられる場合は、アシンメトリーは躍動感のある空間を作ります。つまり、空白のスペースに、より生き生きとした印象をもたせることができます。アシンメトリーの要素は、目の動きをより素早くさせ、空白のスペースをサッと飛ばすように動かすので、サイトそのものをよりエネルギッシュな印象にします。

しかし、このスタイルはきちんと使うことが難しく、アシンメトリーが適切に配置されないと、ビジュアル要素の重要度階層が正確に伝わらず、単純に見た目に美しくないサイトになります。

・アシンメトリーの効果を強調するために色を使います。HSBCやHondaの例では、見た目に強弱を生み出すのに赤のボックスを効果的に配置しています。

・僅かに非対称で、構造自体はきちんとしたレイアウトを作るために、テキストを片側に配置し、反対側に画像を載せてバランスをとります。

・四角や三角などの、角が尖ったオブジェクトを配置すると、その場所の見た目にインパクトが生まれる一方で、それ以外の空間の印象を弱めて相互補完する効果を得られます。これらのオブジェクトは、デザイン自体のバランスが損なわれないように、慎重に利用しましょう。

次のステップ：
この記事が便利だと思ったら、Web UI Patterns 2016 Volume １のフルバージョンのe-bookを入手して下さい。38通りの有効なUIのパターンを、140通り以上の事例を用いて説明します。