2017年にコンテンツを輝かせた11種類のWebサイトのレイアウト | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

なぜ人々はサイトを訪問するのでしょう？大抵の場合、それはコンテンツを閲覧するためです。デザイナーなら、それほど重要なコンテンツには、できるだけ分かりやすくて意味をなす表現を与えたいと思うでしょう。とすれば、デザイナーがプロジェクトの最初に行うことのひとつが、コンテンツを配置するレイアウトの選択だとしても不思議ではありません。

デザイナーによっては、プロジェクトの目的に合わせて、サイトのレイアウトはそれぞれユニークであるべきと考えています。しかしそれは誤りです。訪問者の多いサイトを見れば、似たレイアウトが採用されていることに気づくでしょう。それは偶然でも手抜きでもありません。そこには次のような利点があるのです。

使いやすさ
よく使われているレイアウトがよく使われるようになったのは、ユーザーに有用であることが確認されたからです
親しみやすさ
既視感は良いユーザー体験の助けになます。訪問者は見慣れた位置に期待する機能があることで安心感を覚えます。そして、固有のデザインに気をとられる代わりに、コンテンツの理解に時間を使えます
つくりやすさ
既存のレイアウトの再利用は時間を節約します。デザイナーはレイアウトの試行錯誤に費やす労力を削減でき、ユーザー体験に直接影響する視覚的な階層などデザインの他の側面に集中できます

それぞれのプロジェクトは特別で、異なる考え方を要求されるとしても、標準的なレイアウトについての深い理解は役に立ちます。この記事では、今日数多くのサイトで使われる、とても一般的な11のレイアウトを確認します。

1. シングルカラム

シングルカラムのレイアウトは、コンテンツを縦一列に表示します。この記事で紹介する中でおそらく最も単純で、ユーザーには閲覧が簡単な形式です。訪問者は単純に上から下にコンテンツを見るだけです。

とても単純であるにもかかわらず、シングルカラムは多くのサイトで使われています。モバイルデバイスの登場も、このレイアウトの採用に一役買いました。シングルカラムはモバイル画面に最適なのです。

いつ使うべきか

このレイアウトは、ミニマリストデザインの個人ブログでよく見られます。Tumblrのようなマイクロブログでも広く使われています。

ブログプラットフォームのMediumは、すべての記事をシングルカラムのレイアウトで表示する

デザインのヒント

長いページでは、メニュー位置の固定を検討する
シングルカラムは縦に長いページになりがちです。ナビゲーションが常に見えるようにすると、訪問者がナビゲーションを使うためにページの先頭に戻る必要がなくなります

出典： codemyui

2. 画面分割

2分割のレイアウトは、2つのメインコンテンツがあるページに最適です。デザイナーは両方の要素それぞれに同程度の気配りをしつつ表示できます。

2つの主要な要素が並列に表示されている出典： 62 models

いつ使うべきか

画面の分割は、2種類のまったく異なるユーザーへの入り口を提供するときに使います。下のDropboxの例のように、2つのユーザー別のガイドを提供する場合はその良い例です。

画面分割は、対比を表すのにも適しています。そのため、デザイナーはしばしば対立する要素を、このレイアウトを使って配置します。

対立する二極のキャラクター（と色）出典： Google Star Wars Customisations

デザインのヒント

要素を詰め込みすぎない
コンテンツが多くなると画面分割は効果的ではありません。多くのテキストやビジュアル要素を扱う場合は、このレイアウトは避けた方が良いでしょう
アニメーションを利用する
アニメーションを組み込むことで、より動的な体験を作り出せます

出典： Chekhov is Alive

3. 非対称レイアウト

非対称なレイアウトは、分割した両側の扱いが異なるレイアウトです。非対称は芸術分野でずっと使われてきたテクニックですが、今やWebデザインでも使われるようになりました。

非対称をアンバランスと捕らえる人もいるかもしれませんが、実際には、非対称なレイアウトは、等しく分割するとバランスを取ることが難しい状況でバランスを実現するために使われます。非対称さは、緊張感や力強さをつくるのに役立ち、ユーザーの注目をひとつのオブジェクトに向けさせる助けにもなります。非対称な領域それぞれのコンテンツの幅、大きさ、色などを変えることで、訪問者の目を誘導できるのです。

いつ使うべきか

このレイアウトは、大事な側を強調しつつ、興味深く意外性のあるレイアウトが欲しいときに使われます。適切に使えば、訪問者の目を片方の要素からもう片方の要素へと誘導する空間を作り出せます。下の例で、Dropboxが注目を集めるポイントをつくっていることを確認しましょう。

Dropboxホームページの非対称なレイアウトはデザインに活力を与える

デザインのヒント

コンテンツが非対称なレイアウト向きであることを確認する
非対称なレイアウトはすべてのサイトで実用的ではありません。おそらくミニマリストデザインには良く合います
色を使って強調する
非対称のレイアウトは、視覚的な重みのある要素が先に注意を引くという考えに基づいています。強い色のコントラストを使い、デザインの特定の箇所に視覚的な重みを足しましょう

色のコントラストがデザインの一部に視覚的な重みを加える出典； Culture PL

4. カードグリッド

カードはクリック可能な情報をまとめるのににぴったりです。カードを使えば、デザイナーは、ひとかたまりごとに情報を理解しやすく表示できます。訪問者は、画像と簡単な説明文などから好きなカードを見つけ、クリックやタップ操作で詳細を表示します。

カードのグリッドが持つ最も重要な特徴は、レイアウトを変更するの幅の広さです。グリッドのサイズ、感覚、カラム数、カードのスタイルを、画面サイズごとに変更するのは容易です。そのため、カードのグリッドは、レスポンシブデザインとの相性に優れています。

いつ使うべきか

カードのグリッドは、たくさんのアイテムを同じ階層に表示したいサイトに適しています。

YouTubeはグリッドレイアウトを使い、カテゴリーごとに分けられたカードの行が並べる

Pinterestのボードでは、それぞれのピンがカードとして表現されている

デザインのヒント

カード全体をクリック可能にする
コンテンツの詳細を表示するとき、カードのタイトルや画像だけを正確にクリックしなくて済む方が、ユーザーにはずっと楽です
画像を使うときは小さな画面に配慮する
小さな画面への表示に適さない画像を使用すると、ユーザー体験を損ないます
カード間のホワイトスペースを目的に合わせて調整する
カードの間隔が広いほど閲覧速度は落ちますが、訪問者は個々のカードへ注意を払うようになるでしょう。間隔を最小限にするとすばやく見渡せるようになりますが、コンテンツを見逃す可能性が高まります
アニメーションの使用を考慮する
カードがクリック可能であることを示すアピールに使えます

Smashing Magazineはカードにアニメーションを採用している

5. マガジン

これはこの記事で紹介するおそらく最も複雑なレイアウトです。名前の通り、このレイアウトは、新聞や雑誌に多用され、大量の情報を読者が追いかけやすくなるよう表示するために使われてきました。印刷デザインでレイアウトにグリッドが使われるのはこれが目的です。柔軟に分割可能なグリッドを使い、重要度に応じて異なる視覚的な強調が施されたマルチカラムのレイアウトが使われます。

マガジンレイアウトは、流し読みして、読みたい箇所だけをすばやく見つけて読むことができる出典： New York Times

紙の雑誌と同様に、デジタルマガジンはマルチカラムのグリッドを使い、複雑な階層をつくって、テキストやイラストを表示します。主要な目的は共通で、訪問者がページを眺めて見つけた箇所を読み、ページ全体をすばやく理解できるようにすることです。そのために、デザイナーは視覚的なリズムをつくります。ページ内のブロックから他のブロックへ自然に目を移せるようにするのです。同時に、デザイナーは、ブロック同士が注目を奪い合わないように配慮します。

いつ使うべきか

マガジンレイアウトは、ページに複雑な階層とたくさんのコンテンツがある場合に良い選択です。グリッドを効果的に使えば、コンテンツは整然とまとまって見えるでしょう。

マガジンスタイルのレイアウトは、たくさんの定期的に更新される複数カテゴリーの記事があるニュースサイトに最適

デザインのヒント

このレイアウトは、見出しと画像を強調し、その大きさは、集めたい注目と直結します。より目立つ要素は、ユーザーの注意を引き付けやすいでしょう。New York Timesの例を見てください。ページの最も重要なコンテンツは、大きなサムネイル、大きな見出し、長い説明文を持っています

New York Timesは、重要度の感覚を示すため異なる大きさのテキストを使う。テキストの大きさが視覚的な階層を作っている

良いレイアウトをつくるため、グリッドの配置には、縦方向と横方向それぞれのリズムに配慮します。次のサンプルの違いを見てください。左側は、横の間隔は一定ですが縦の間隔が異なり、視覚的なノイズになっています。右側は、縦の間隔も横の間隔も一定で、クリーンな見た目です。この方がユーザーが安心してコンテンツを見ることができます

6. ボックス

このレイアウトは、大きなヘッダー幅いっぱいの四角と、その下の領域を占めるいくつかの小さな四角から構成されます。小さな四角の数は、2つから5つの間です。それぞれの四角は、より大きく複雑なページへのリンクとして使われます。

いつ使うべきか

これは用途の広いレイアウトです。個人のポートフォリオサイトや、企業のEコマースサイトなどに利用できます。

出典： mrporter

デザインのヒント

ボックスをつなぐストーリをつくる
例えば、大きな四角は製品を展示する場所にして、小さな四角でより詳しい情報を表示するという使い方ができます

出典： Microsoft Surface

7. 固定サイドバー

ナビゲーションはどんなサイトでも重要です。ユーザーが他のページに移動したいとき、最初に探すのはメインメニューでしょう。ページ最上部の水平なナビゲーション以外にも、サイドバーに固定してメニューを常に表示することが可能です。サイドバーは、ページの右か左に表示される垂直なカラムです。このレイアウトではサイドバーは動かず同じ位置に留まって、ページの他の領域が上下にスクロールされても、画面内に存在します。そのため、常に利用可能です。

いつ使うべきか

このレイアウトは、比較的ナビゲーションの選択肢が少ないサイトに適しています。ユーザーがページを目にしたとき、すべての選択肢が視野にあるのが望ましいでしょう。

出典： measponte

デザインのヒント

サイドバーにはメニュー以外のコンテンツが含まれることもあります。ソーシャルメディアへのリンク、連絡先など、訪問者に見つけやすくしたいものが配置されます

Trefectaのサイドバーは、言語の変更やページ共有のオプションを提供する

8. 看板画像

このレイアウトは、画像を使うことが、主役の訴求への最短ルートであるという考えに基づいています。画像は訪問者との感情的なつながりを構築する機会になります。主題となるオブジェクトの、大きくて大胆な画像やイラストは、強く主張して強烈な第一印象をつくるでしょう。

いつ使うべきか

このレイアウトは、ひとつの対象だけを提示して、そこにユーザーのすべての注目を集めればよい場合に最適です。

他の要素が存在しないことで、ユーザーの注目はに製品に集中する

このレイアウトを使うと、感情的に取り込むような体験を構築することが可能です。その優れた例の一つはSpecies in Piecesです。豊かな体験を提供し、危機的な状況にある種への意識を高めます。

出典： Species in Pieces

デザインのヒント

質の高い画像を使う
メインの画像やイラストは、伝えたいメッセージを伝え、かつ高品質のものを選びましょう
タイポグラフィーに配慮する
画像に添えられる文字は、大きさ、ウエイト、色などのすべての属性がデザインを強調するべきです

9. F型レイアウト

このレイアウトは、ユーザーのWebコンテンツを読む習性に基づいてつくられました。ニールセン・ノーマングループにより最初に定義されたF型パターンは、多くのユーザーが文字のFやEのような形に見えるパターンでコンテンツを閲覧しているというものです。人の目は、まずページの左上から始めて横方向に移動します。そして下の行へと移動しては同じことを繰り返します。そして、何か興味を引かれたコンテンツが見つかるまでこれが続きます。このパターンは、デスクトップ環境だけでなく、モバイル環境でも同様です。

いつ使うべきか

このレイアウトは、たくさんのオプションをユーザーがすばやく確認できるようにしたいときに向いています。訪問者は、自然な見方ができるように並べられたF型パターンのレイアウトに良い反応を示すでしょう。ニュースサイトや検索結果の表示に向いたレイアウトです。

New YorkerはホームページにF型レイアウトを使う

デザインのヒント

ユーザーの振る舞いにコンテンツを合わせる
重要なコンテンツを行の左右の端に配置しましょう。ユーザーが行の先頭を見つけたとき、行の最後にたどり着いたとき、次の行動の前に少しの時間停止します。その間は、コンテンツを提示する機会となるでしょう
ユーザーを導く視覚的な合図を使う
特定の要素を視覚的に強調することで、ユーザーの注意を引くことができます。例えば、テキスト内のキーワードに注意を引くため、該当箇所を目立たせてみましょう