【レイアウトの基本】考え方や手法をマスターし、デザイン品質を劇的にアップしよう!

レイアウトの基本と考え方

レイアウトがしっくりこない。。

考え方や意識するポイントがわかってないのかな?

レイアウトの基本をマルっと教えて〜!

デザインする際、要素をなんとなくで並べていませんか?

それっぽく並べただけのレイアウトだと、クライアントの課題を解決できていないかも。。

この記事では、WEBデザインにおけるレイアウトの役割・パターン・手法・考え方など、レイアウトの基本をマルっと解説します。

レイアウトはデザインの土台となるため、考え方さえつかめば、デザイン力は飛躍的にアップしますよ◎

レイアウトの基本を学び、プロ級のデザインを作れるようになりましょう!

やぁみんな!僕がWEBデザインスクール校長のさかしだ!執筆者プロフィール

僕の会社でも取り入れている考え方だから、実践的なレイアウト方法を盗んでいってね!

「スクール代に30万円は正直怖い。。しかも先払い。」

WEBデザインスクールの料金に絶望していませんか?
実は、スクールに30万円支払う時代は終わりました。
WEBデザイナーの切符を勝ち取る!
プロの添削つきサブスク型スクール爆誕。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼
WEB食いオンラインスクールへのお申し込みはこちら
※未経験からの転職成功者、増産中!

レイアウトとは「情報の見せ方」をデザインすること。

レイアウトとは

WEBにおけるレイアウトデザインとは、「情報の見せ方」をデザインすることです。

具体的には、どの情報をどの順番でどのくらい伝え、どんな動線にするかを考えて、適切な配置を決めることをいいます。

要素を上から順に並べるだけなら誰でもできるので、適切な配置を決めることがデザイナーの仕事ですね。

レイアウトによって、サイトの見やすさや、ユーザーの操作・視認性、情報の受け取り方などが変わるため、非常に重要な工程です。

ページ回遊率や離脱率、滞在時間にも影響するため、結果的に売り上げやSEOなどに響くことも。

そのため、達成したい目的に合わせて秩序を与えつつ、工夫されたレイアウトが求められるでしょう。

レイアウトデザインって、めちゃくちゃ重要じゃん!

レイアウトはデザインの土台となるから、デザイン全体の良し悪しを決めると言っても過言ではないね!

でもレイアウトってなんか地味だし、あしらい(装飾)の方が重要な気が…

いくらあしらいや配色が良くても、レイアウトは誤魔化せない。

だから、レイアウトを制するものがデザインを制するぜ!

ふぇぇ。ちゃんと座って読むわ!

「情報の優先順位」がレイアウト決めのベースになる!

情報の優先順位を決めよう

レイアウトをする前に必須なのが「情報の優先順位」を決めることです。

なぜかというと、優先順位が決まっていなければ、そもそも配置する順番・レイアウトを決められないから。

ヘッダー・ナビゲーション・コンテンツ・サイドバー・フッターなど基本の構成要素だけでは不十分です。

基本の構成要素の中の、キャッチコピーやサブキャッチ、見出しに本文、画像、ボタンなどの優先順位も決めたいところ。

WEBサイトを作る目的に合わせて情報の優先順位を決めましょう!

決め方はシンプルで、「何を伝えたいか?」で順位を決めていきます。

例えば、ハウスメーカーのWEBサイトでは、家の外装・内装画像の優先順位が高くなるケースが多いです。

ハウスメーカーのレイアウト

「素敵な家をアピールして、ターゲットに生活している自分をイメージさせたい」という目的があるので、テキストより画像を使うと効果的になるためですね。

このように目的から逆算し、「何を伝えたいか?」を考えることで、適切な優先順位を決めることができます。

配置する要素を出し尽くし、箇条書きで優先順位の高い順に並べておくと迷わず配置できるでしょう。

WEBデザインは「情報を伝えること」が目的だ。

初心者のうちは「情報の優先順位」を決め忘れがちだから要注意だね!

やばい、カワイくてモテるデザインにすることばっか考えてたわ(笑)

レイアウトパターンと手法を理解すれば、ただ並べるだけから卒業できます。

レイアウトのパターンと手法

レイアウトを決めるときは、ヘッダー、フッター、サイドバー、メインコンテンツの配置など、大きなところから決めていくのが原則です。

そのため、全体のレイアウトパターンの特徴や、レイアウト手法を知っておくだけで迷いにくくなるでしょう。

レイアウトデザインの軸ができ、統一感のあるデザインに仕上げることができますよ。

基本のレイアウトパターン

レイアウトのパターン

ベースとなるレイアウトには「シングルカラムレイアウト」と「マルチカラムレイアウト」があります。

シングルカラムレイアウト

シングルカラムレイアウト

シングルカラムレイアウトとは、全てのセクション(要素ごとのかたまり)を縦に積んでいくレイアウトのことです。

「サイドバーのないサイト」をイメージしてもらうとわかりやすいかと思います。

モバイルファーストの重要度が高い現在の、主流なレイアウトですね。

1ページ内に多くのコンテンツをまとめられるため、情報を集約して伝えられることがメリットとなります。

情報量が少なめのWEBサイトに特に多く採用されています。

【シングルカラムレイアウトに適したもの】

  • LP
  • 情報量が少ないWEBサイト(お店やサービスのサイト)
  • ページ数が少なめのWEBサービス・アプリ全般
マルチカラムレイアウト

マルチカラムレイアウト

マルチカラムレイアウトとは、セクションを複数列で配置するレイアウトのこと。

サイドバーのあるサイトや、ショッピング機能を持ったECサイトなどをイメージしてもらうと良いでしょう。

たくさんの商品を1ページで見せたい場合や、ページの回遊も大きな目的とするサイトに採用されやすいです。

【マルチカラムレイアウトに適したもの】

  • ECサイト
  • ポータルサイト
  • ブログ
  • 情報量が多いWEBサービス・アプリ

特徴が分かれば、どっちにすればいいかわかるね!

「情報が多いか少ないか」で使い分ければいいってこと?

そんな感じで捉えてもらってOKだ!

情報量やWEBサイトの目的によってレイアウトパターンを決めよう!

手法を使いこなせば失敗しない!基本のレイアウト手法3つ

3つのレイアウト手法を覚えておくと迷わない

レイアウトの軸を作るために、レイアウト手法についても学んでおきましょう!

基本的なレイアウト手法には、下記の3つがあります。

  1. グリッドレイアウト
  2. ブロークングリッドレイアウト
  3. ノングリッドレイアウト

各手法には法則があり、使いこなせれば、きっちりしたものから大きく崩したレイアウトまで、プロ仕様のレイアウトが組めるようになります。

※グリッドとは「格子状のもの」「方眼状のもの」を意味します。

グリッドレイアウト

グリッドレイアウト

グリッドレイアウトとは、画面を縦や横に分割し、分割線に沿って配置を決めていくレイアウト手法です。

「4分割分の幅で表示し、5分割目から配置する」などとレイアウトを決めていきます。

規則的な配置が実現可能なので、非常に見やすく、基本のレイアウト手法と言えるでしょう。

また、コーディングの際もレスポンシブ対応が楽になったり、Googleが推奨するマテリアルデザイン※の導入に適しているなどのメリットも。

※マテリアルデザインとは、「見やすく、直感的に操作できるWebページ・サービス」のこと。

一方で、つまらないデザインになりやすいのは要注意ですね。

リキッドレイアウトもありますが、これはグリッドレイアウトを%などの可変値で配置したものと捉えてもらえればOKです。

なんとなくで配置していた人は、グリッドレイアウトを使うだけで、一気に洗練されたデザインを作れるようになるよ!

デザインの4原則で「整列が大事」って言ってたもんね。

慣れるまではグリッドレイアウトで配置決めしよっと。

ブロークングリッドレイアウト

ブロークングリッドレイアウト

画像引用:office GOOD impressionさま

ブロークングリッドレイアウトは、あえてずらしてグリッドからはみ出したり、要素を重ねて配置するレイアウト手法です。

ぱっと見で不規則な配置によって、他サイトとの差別化ができたり、トレンド感を出す、ユーザーの視線を引きつけられるといったメリットがあります。

また、流れるような余白を作ることで、ユーザーに見せたい要素へ視線を誘導することも。

一方で、不規則に見えて規則があるのがブロークングリッドレイアウトです。

ルールを無視して使うと無秩序になり、素人感が漂うデザインになるので、練習が必要となります。

他サイトとの差別化したい、トレンド感を出したい、ユーザーの視線を引きつけたいといった時に選択するのがおすすめだよ!

要素をずらしたデザインにも、規則性があったんだね!

どうりで闇雲に配置しただけだとうまくいかないわけだ(笑)

ノングリッドレイアウト

ノングリッドレイアウト

画像引用:COMODOさま

ノングリッドレイアウトとは、配置に規則や法則を持たないレイアウト手法です。

まるで画用紙にお絵描きするように、より自由に感覚的に配置することで、オリジナリティや躍動感を表現することが可能です。

上で紹介した「ブロークングリッドレイアウト」に近いですが、さらに崩したレイアウト手法くらいに捉えるとイメージしやすいと思います。

アーティストのポートフォリオサイトや、現代建築のWEBサイトなど、アート感が強く、より自由な表現が求められる際に使うのが良いでしょう。

逆に、ECサイトやメディアサイトなど、じっくり読んでもらうものには向かない手法とも言えます。

ノングリッドレイアウトは、新しさとかオリジナリティを表現しやすい。

一方で、経験がないとおかしなレイアウトになるから要注意ね!

私みたいにレイアウトで迷う人は、無意識にノングリッドを使っているかも(笑)

【デザイン手法のまとめ】

  • グリッドレイアウト:初心者におすすめの基本的なレイアウト手法。きっちり情報を伝えたい時におすすめ。
  • ブロークングリッドレイアウト:グリッドレイアウトに「ずらす・重ねる」を加えたレイアウト。トレンドや他サイトとの差別化を表現できる
  • ノングリッドレイアウト:規則・法則のないレイアウト手法。オリジナリティや躍動感を表現したい時におすすめ

レイアウトをする前に、まずはどの手法をベースに使うかを決めると、統一感が出るためおすすめだよ!

3つの手法をうまく組み合わせるという方法もありだけど、ベースは決めておこう。

自由な表現は、秩序の中にあるものだぜ!

なんか名言っぽいの出てきたやん!

【レイアウトの考え方】「視線誘導」を学んで、上手に情報を伝えよう!

レイアウトの考え方

画像の配置など、各セクションの細かなレイアウトを決めるときは、「視線誘導」も意識してデザインするのが重要です。

※視線誘導とは、文字通りユーザーの視線を意図的に誘導すること。

見てもらえなければ、どれだけ大切な情報を記載していても意味がないからですね。

そして視線誘導には以下の2種類があります。

  1. 情報を適切に認知させるもの
  2. ユーザーの視線移動をサポートするもの

視線誘導が理解できれば、ユーザーに情報を適切に伝えることができ、良いレイアウトデザインになりますよ◎

情報を適切に認知させる(誘目性)

情報を認知させる

良いレイアウトにするには、情報を適切に伝えることが大切です。

そして、情報を適切に伝えるには、優先順位に合わせて、「誘目性」を意識したレイアウトが重要。

誘目性とは、「人の注意をひきつける度合い」のこと。

レイアウトデザインで誘目性を高めるポイントは、3つあります。

配置の順番

誘目性を高める配置

1つ目のポイントが、要素の配置です。

レイアウトはユーザーの視線の動きに合わせて、上から下、左から右に向かって優先順位が高いものから順に配置していきましょう。

もちろん絶対ではなく、縦書きサイトの場合は右から左に配置するなど、臨機応変な対応が必要ですが、基本は左から右ですね。

WEBは表示範囲が限られているため、どれだけ色やあしらいなどで目立たせても、レイアウトによってはそもそも見えないことになるので注意してください。

ただ、重要なものを順番に並べるだけでは、まだデザインとして不十分です。

表示領域(大きさ)

表示領域で視線を誘導する

誘目性を高める方法の2つ目が、表示領域です。

人は大きいものから小さいものへ視線を移す傾向があるため、情報の優先順位が高いものを大きく配置することで、情報が伝わりやすくなります。

ぱっと見で目に入るか、入らないかで、情報の伝わり方に大きな影響を与えるでしょう。

特にLPは、3秒でWEBサイトを見る・見ないを判断されると言われているので、表示領域は強く意識したいポイントです。

そのため、表示領域を常に意識してレイアウトを組むようにしましょう。

奥行き

3つ目は奥行きです。

奥行きとは、要素の重なり順のこと。

実は、各要素の重なり順を変えるだけで、ユーザーが見る順番を操作できます。

奥行きで視線誘導

上の画像は同じサイズ・色のシェイプですが、まず初めに重なり順が上の右側から読み始めたのではないでしょうか?

このように、奥行きは情報伝達の強力な武器となるので、使いこなせるとデザインの質が上がります。

WEBサイトを3次元で捉え、奥行きまで意識してレイアウトをデザインしましょう!

ただ、最近はフラットデザインが主流ですので、ドロップシャドウをかけすぎるなど、立体感の出し過ぎには注意が必要です。

配置の順番、表示領域、奥行きの3つを意識するだけで、伝えたいことが伝わる良いレイアウトになるよ◎

伝わるレイアウト = クライアントの課題解決 = 良いデザインってことか!

レイアウトやべ〜!!

ユーザーの視線移動をサポートする

視線移動をサポートする

レイアウトデザインでは、「見てもらう」だけでなく「見て欲しい箇所まで導く」ことも大切です。

というのも、WEBサイトでは1度に表示できる領域が限られているから。

つまり、最後まで見てもらうために、スクロールしてもらう工夫が必要となります。

具体的には、余白を繋げたり、画面下部に次のセクションをチラ見せする配置などですね。

例えば以下のレイアウトは、余白をうまく使って視線が下へ流れるようにしています。

余白で視線移動をサポートする

余白が滑らかにつながっているため、自然と視線が流れていくのを感じませんか?

つまり、自然とどんどん読み進めてもらうための仕組みを、レイアウトを通して作ろうということ。

これによって、ユーザーの視線をコントロールできます。

UIデザイン的な要素が強いですが、視線移動のサポートも意識することで、適切なレイアウトを組むことができます。

また、視線誘導できれば、ユーザーはストレスなく画面を巡回・閲覧・操作できるため、滞在時間や回遊率が自然と高まり、情報の伝達度も高まります。

その他の視線誘導テクニック

他にも以下のような視線誘導テクニックもあるので、頭の片隅に置いておくのがおすすめです。

【その他の視線誘導パターン】

  • 大きいものから小さなものへ視線は流れる
  • 近くのものへ視線は流れる
  • 数字の順番に視線は流れる
  • 同型・同色へ視線は流れる

※レイアウトとは少しズレるので詳細は割愛します。

「なんだかスムーズに読めないな…」「情報がうまく伝わってない気がする」と感じたら、上記をデザインに取り入れてレイアウトを組むのはいかがでしょうか?

ユーザーの視線移動のパターンを知ろう!

視線移動をサポートするには、ユーザーの視線移動パターンを知る必要があります。

媒体や目的、テイストによって視線の動きは異なりますが、3種類くらいは把握しておくと良いでしょう。

パターンに合わせて配置することで、目的を達成しやすくなります。

※情報の強度が均一の場合の視線パターンです

Z型

Z型

WEBサイトを見るときの基本パターンが「Z型」です。

ユーザーの視線は、Zの形に沿って、左上→右上→左下→右下という順番に動いていると言われています。

これをデザインに応用すると、最も重要なものは左上に配置し、右上・左下で情報を全て見てもらった後、購入ボタンを右下に配置するといったパターンです。

流れがスムーズで目的達成に繋がりやすくなりますね。

また、初めてサイトを見るときにこのパターンになりやすいため、「新規ユーザー」をターゲットと想定している場合に意識するのがおすすめです。

F型

F型

Fの文字に沿って、左上→右上→左下→右下の順に視線が動くパターンですが、左が軸となり何度も見られるのが特徴です。

縦にどんどん読み進められるため、情報量が多いECサイトや、ブログなどで起こりやすいユーザーの視線パターンですね。

そのため、F型でレイアウトを組む場合は、左側に重要な要素を配置するのが合理的と言えます。

N型

N型

N型は、日本語のように縦書きのデザインの際の視線パターンです。

右上→右下→左上→左下と動くため、重要な情報は右上に配置し、購入ボタンなどは左下がおすすめ。

チラシや雑誌、新聞などの紙媒体に多く使われます。

最近は縦長のスマホ画面に合わせ、縦書きデザインも増えてきたので、覚えておくと良いでしょう。

プロのデザインを見ると、視線が流れるように下へ降りていくのを実感できると思うよ!

プロのデザインに矢印を引いてみると分かりやすいぜ。

ユーザーの視線をコントロールできれば、売りたいものが売れやすくなったり、伝えたい情報をしっかり伝えられそうだね!

しかもクライアントの課題解決になるから、デザイナーとしての価値も大幅アップだ!

 


 

【情報を認知させる手段まとめ】

  • 配置の順番
  • 表示領域
  • 奥行き

【視線移動をサポートする手段まとめ】

  • 余白などを使って視線を「流す」
  • ユーザーの視線移動パターンに合わせて重要な情報を配置する
  • 視線移動パターンは「Z型」「F型」「N型」がある

良いレイアウトにするには、「誘目性」と「視線移動のサポート」を意識するべきなんだね。

普段気にせずに見てたけど、レイアウトには細かな仕掛けが施されてたのか。

レイアウトにも理由があるのがプロのデザインだ!

まずは「見やすい!」と感じてもらうために、「誘目性」と「視線移動のサポート」は意識しようね!

レイアウトの参考になるギャラリーサイト

レイアウトデザインにおすすめのギャラリーサイト

最後に、レイアウトを組む際に参考となるギャラリーサイトをご紹介します。

カラム数やレイアウトなどで検索できたり、「ヘッダー」や「こんなお悩みありませんか」などの各パーツ・ページで検索できるサイト、関連するレイアウトデザインまで表示してくれるサイトがありますよ!

SANKOU!

SANKOU!は、業種や配色だけでなく、カラム数やレイアウト、サイトの種類などで検索できるギャラリーサイトです。

最新のサイトがどんどんアップされますし、何より検索など、使い勝手が良いですね。

スマホのデザインも見れますので、メインのギャラリーサイトとして使うのがおすすめです!

SANKOU!の公式サイトはこちら

.Parts

ヘッダーやフッターなど、各パーツごとにデザインをまとめてくれているサイトです。

「サービス」や「よくある質問」など、よく使う項目ごとにまとめてくれているので、部分ごとのレイアウトを考えるときに重宝します。

.Partsの公式サイトはこちら

Pintarest

「検索したけど、しっくりくるものが見つからない」なんて時に役立つのが、Pintarest。

ワード検索するだけで、関連画像をダーッと表示してくれるので、直感的にレイアウトを探せます。

画像を選択するごとに、さらに関連する画像を表示してくれるので、レイアウトがしっくりこない時にヒントを与えてくれるでしょう。

※会員登録をすると無限に見られます(無料)

Pintarestの公式サイトはこちら

レイアウトに迷った時は、迷わずプロの技術を取り入れよう!

初心者がオリジナルのものを取り入れると、素人感が出やすいんだったね。

まとめ:レイアウトの考え方や手法をマスターすれば、最高の土台を作れる!

レイアウトはデザインの土台です。

ここをミスると、どれだけ素敵な装飾やフォントを使っても、二流のデザインとなるので注意しましょう!

最後に、レイアウトの基本についてまとめます。

■ レイアウトとは、「情報の見せ方」をデザインすること。

■ レイアウトのパターンと手法をマスターすれば、大枠は迷わず設計できる

  • パターンは「シングルカラム」か「マルチカラム」
  • 「シングルカラム」は、1ページに情報を集約できる
  • 「マルチカラム」は、たくさんの情報を掲載すること・ページの回遊を重視する際に使う
  • 手法は「グリッドレイアウト」「ブロークングリッドレイアウト」「ノングリッドレイアウト」の3種類
  • 基本はグリッドレイアウト。規則正しく情報を配置できる
  • ブロークングリッドレイアウトは、重ねる・ずらすを使うことで、トレンド感・差別化がはかれる
  • ノングリッドレイアウトは、規則性を持たないレイアウト。アート感が強いデザインに向いている

■ レイアウトを考える前に「情報の優先順位」を必ず決めよう!

  • 情報の優先順位が決まっていないと、レイアウトの順番を決められない。
  • 「何を伝えたいか」を強く意識して、ブレずに情報を伝え切ろう!

■ レイアウトは「視線誘導」を意識して考えよう!

  • 見てもらえなければ意味なし。視線誘導を意識してレイアウトを考えよう!
  • 視線誘導には「情報を認知させる」「視線移動をサポートする」の2つがある
  • 「情報を認知させる」には、「配置」「表示領域」「奥行き」を使う
  • 「視線移動をサポートする」ためには、視線が流れるようにレイアウトする
  • ユーザーの視線移動パターンは「Z型」「F型」「N型」の3つ。パターンに合わせて情報を配置する

■ レイアウトに使える便利なギャラリーサイト3選

なんとなくレイアウトを決めてたけど、プロのデザインはユーザー第一にレイアウトが考えられていたんだね。

ユーザーに必要な情報を届けるとか、ユーザーが読みやすいように視線を誘導するとか、常にユーザーのことを考えてデザインされているってことがわかるよね!

不思議なんだけど、ユーザーのことを考えると、良いデザインが自然とできる。

世の中うまくできてるね〜。

これからはレイアウトの基本を意識しつつ、ユーザーのことを考えてレイアウトを組んでいこう!

コツをつかめば、初心者デザインから脱却できるぜ!

「スクール代に30万円は正直怖い。。しかも先払い。」

WEBデザインスクールの料金に絶望していませんか?
実は、スクールに30万円支払う時代は終わりました。
WEBデザイナーの切符を勝ち取る!
プロの添削つきサブスク型スクール爆誕。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼
WEB食いオンラインスクールへのお申し込みはこちら
※未経験からの転職成功者、増産中!

メニューを閉じる