【超重要】WEBデザイナーなら知っておきたいレイアウトの種類を一挙公開
いざWEBサイトを制作しようとした時、
「デザインは考えたけど、レイアウトってどうしたらいいんだろう・・・？」
「PCとスマホ、それぞれの見え方が変わるけど、どう作ればいいの？」
と思ったことはありませんか？
つい、どんなデザインにするか、どんな情報をのせるかばかり考え、レイアウトは後回しになりがちですよね。
しかし、WEBサイトにおいてレイアウトはとても重要なんです。
今回は、レイアウトを考えるにあたって、知っておきたいデザインの基礎知識に始まり、サイトの構成要素、レイアウトの種類まで、一気にご紹介していきます。
これからサイト制作を行っていきたいと考えている方は、この記事を参考にして、基礎からトレンドのレイアウトまで、一度に学んでしまいましょう！
WEBサイトにおけるレイアウトとは
デザインをするときに重要になってくるのは大きく分けて、テイストとレイアウトの2つです。
どんなにおしゃれなテイストでデザインができていたとしても、レイアウトがうまくできていないと、途端に古臭くてかっこわるいデザインになってしまいます。
さらに、レイアウトがうまくできていないと、見にくいデザインになってしまうので、デザインを通して伝えたい内容が、ユーザーに届かなくなってしまうことにもなるのです。
そんなレイアウトについて、まず基礎知識からお伝えしていきたいと思います。
累計7200名以上が参加した「好きなことで生きていく！WEBデザイナーという働き方セミナー」では、WEBデザインの学習で失敗してしまった"しくじり先生"のお話や、「未経験OK」のワナ、WEBデザイン業界の最新裏事情などをお伝えしています。
なお、日本デザインスクールのLINE＠では、スキルなしでも簡単にバナーが作れるようになる無料レッスンをプレゼント中です。こちらもぜひご登録ください。
WEBデザインのレイアウトを作るうえで、知っておきたい基礎知識
デザインをする時、見た目のきれいさを意識される方は多いと思います。
もちろん、きれいなデザインであることも大事ですが、同時にユーザーが情報をきちんと受け取れるか？ということも大切です。
テキストや画像といったデザインの要素を整えて配置することで、ユーザーは素早く情報を得ることができます。
情報が伝わりやすいデザインをするために役立つ知識が「デザイン４原則」です。
WEBサイトのレイアウトだけでなく、チラシや名刺にも使えるデザインの基礎知識なので、ぜひ参考にしてみてください。
デザイン４原則
デザイン４原則とは、
・近接の原則
・整列の原則
・反復の原則
・コントラストの原則
この４つに分けられます。
一つひとつご紹介していきますね。
近接の原則
人はたくさんの情報が並んだものを見た時、近くにある要素を「関係がある」と認識します。
名刺などで例えると、名前とふりがな、電話番号とFAX番号は、基本的に近くに配置されますよね。
メニュー表も、商品の写真の近くにはその商品名が書かれています。
もし、それがバラバラに配置してあったら、それを見た人はストレスを感じてしまうはずです。
名前とふりがなの様に、同じ属性のものを近くに配置し、グループ化することで瞬時に「関係がある」と認識でき、人は効率よく情報を得ることができます。
また、近づけた要素の周りには、適度に余白を作ることも、念頭に置いておきましょう。
均等に余白を作ってしまうと、うまくグループ化できず、成立しません。
関係しないものの間は、適切に空白を作ることを意識してくださいね。
整列の原則
例えばこの名刺をみても、あちこちに視線が移動して読みづらい印象を受けるのではないでしょうか？
こちらは整列の原則にのっとって作られた名刺です。
自然と視線が言葉の先頭にいくので、情報を理解しやすいはずです。
整列の原則とは、要素の大きさや位置、色、そして形を整え構成を作ること。
中央揃えや左揃え、下揃えなどを使って整列させることで統一感をもたせ、情報をグループ化させることができます。
整列の原則におけるポイントは、「目に見えない線」を作ることです。
この名刺の言葉の先頭に「線」があるように感じませんか？
この線があることで、レイアウトをすっきりさせ、自然と視線が集まるようになるので、情報を理解しやすくなります。
反復の原則
同じデザインのものなど、特徴のあるものを繰り返し使うことを反復といい、一貫性を持たせることができる方法です。
たとえば、一つのサイト内であれば、いろんなページに飛んだとしても、出てくる見出しは基本的に同じデザインになっていると思います。
もし、違うページに飛ぶごとに、全く違うデザインの見出しがでてきたら、「間違って違うサイトに飛んだかな？」と誤解を生むかもしれません。
そうならないよう、サイト内では一貫したデザインを反復させ、情報を統一させることで、ユーザーが理解しやすい様にデザインされているのです。
何度も出てくるアイコンやイラストのテイストなども揃えてあげた方が、情報が伝わりやすく、見た目にも美しいですよ。
コントラストの原則
コントラストの原則とは、異なる要素には強弱をつけて、はっきりと区別させることを言います。
たとえばセールの広告では、「大安売り」や値段は大きく書かれ、「◯月◯日まで」といった情報は小さめに書かれていますよね。
伝えたい情報に優先順位をつけ、大きさや色、フォントなどはっきりとした違いをつけることで、大事な情報に視線を引きつけ、瞬時に情報を理解させることができます。
すべて同じデザイン、同じルールで統一感を出すばかりでは、短調になり、すべて同じに見えてしまうので、これはしっかり伝えたい！という場合は、思い切って違いを出してみましょう。
人の視線の動き方
人はものを見る時、視線は一定の動きをしているということをご存知ですか？
人の視線の動き方には、３つのパターンがあります。
この動き方を知っていると、見やすいレイアウトを意識してデザインすることができるようになります。
Z型
アルファベットのZの様に、左上→右上→左下→右下の順番に視線が動くパターンです。
全体を把握したい時、横書きの文章が続く時、画像が多い時などにZ型の動きをします。
ポスターやチラシなどは、この動き方を意識して作られていることがほとんどです。
また、コーポレートサイトにおいては、企業のロゴなども基本的には左上に配置されます。
最初に目が行きやすいのが左上になるので、大事な情報は左上に配置することをオススメします。
F型
F型の視線の動き方は、左上→右上へ、次に少し視線が下がって左から右へ、最後に左上からそのまま下へ下がるという流れになります。
情報が多く載っている時、内容をしっかり把握するためにこの様な動き方になるそうです。
WEBサイトを閲覧する時、人はまずZ型の動きで全体を把握した後、F型の動きでしっかり把握しようとします。
サイトを制作する時は、左側に見て欲しい情報を載せるといいですよ。
N型
新聞や国語の教科書など、縦組みのものを見た時に人の視線はN型の動きをします。
視線が動く順番は、右上→右下→左上→左下となります。
サイトや記事など、WEB上にあるものは基本的に横組みなので、あまり意識する必要はないパターンです。
WEBデザインのレイアウトを構成する５つのパーツ
では、レイアウトを考える上で次に大事な基礎知識をお伝えします。
サイトは主に５つの要素で構成されています。
レイアウトを考えていく前に、まずは構成要素の名称と役割を知っていきましょう。
ヘッダー
ページの一番上にあるエリアをヘッダーと呼び、よくサイトの名称や企業名が書かれている部分になります。
ページの中で一番最初に目がいく部分なので、ヘッダーはより大事な情報を読者に読んでもらうための大事な役割をもちます。
お問い合わせや購入のボタンなどの大事な要素も、読者の目につきやすいヘッダーに配置されるのが一般的です。
ナビゲーション
いわゆるメニュー表示のことを、ナビゲーションと言います。
サイトの上部やサイドに位置し、他のページへ飛ぶためのリンクが貼られたパーツですね。
コーポレートサイトで「当社について」といった大きなカテゴリーのものをグルーバルナビゲーションといい、その中でも細かく分けられる「会社概要」「代表挨拶」といったものをサブナビゲーションと呼ぶこともあります。
メインコンテンツ
ページのメインとなる部分で、本文や画像などサイトを訪れた人が知りたい情報が載っています。
サイト制作において、伝えたい情報や量にあわせてコンテンツの幅や配置のしかたを考えることが大切です。
サイドバー
メインコンテンツの横に配置され、コンテンツに関連した記事情報や、広告バナーなど、サイトを回遊するためのサポートをする役割があります。
人の視線は左から右へ移動するものなので、サイドバーはよく右側に配置されますが、その限りではありません。
飲食店のサイトを例に出すと、サイドバーにメニューを載せていることがほとんどです。
メニューは最初に見てもらいたいものなので、左側に配置します。
このように、目的や伝えたいことの優先度を考えて配置する場所を適宜変えていきます。
フッター
サイトの一番下にあたるエリアをフッターと言います。
フッターナビゲーションと言って、メニュー表示をフッターに配置しているサイトもよく見かけます。
フッターはページを見終えたユーザーに対して、次の行動を促すという役割があるのです。
他にもプライバシーポリシーや企業情報を載せ、ユーザーに信頼感を与える役割もあります。
WEBデザインの基本的なレイアウト｜カラムレイアウトについて
WEBサイトの構成要素が分かったところで、いよいよレイアウトについてお伝えしていきます。
まずは基本的なカラムレイアウトについてのご紹介です。
カラムとは段組みのことで、先ほどご紹介したサイドバーの数でそれぞれ、
・シングルカラムレイアウト
・マルチカラムレイアウト
に分類できます。
シングルカラムレイアウト
左右にサイドバーがなく、メインコンテンツのみのレイアウトをシングルカラムレイアウトと言います。
WEBサイトをスマホで見ることが増えた今、サイトの主流はこのシングルカラムです。
サイドに余計な要素を表示させないことで、すっきりとした見やすいサイトになります。
縦に要素を追加していくので、縦長のサイトと相性がいいレイアウトです。
マルチカラムレイアウト
マルチカラムレイアウトとは、左右にサイドバーを配置したレイアウトのことです。
サイドバーが左右どちらか片方にだけ配置したものを2カラムレイアウト、左右両方にサイドバーがあるものを3カラムレイアウトと呼びます。
ユーザーがサイト内をどれだけ見て回ったか？を示す回遊率と言い、サイドバーで情報を与えることで、回遊率を上げることができます。
しかし、見た目の情報量が多くなることで、逆にメインコンテンツが見られなくなってしまうというデメリットもあります。
デバイスの大きさを考えたWEBデザインレイアウト
サイトを制作するときに意識して欲しいのが、スマホにも対応したレイアウトにすることです。
パソコンに比べて横幅が狭くなるので、その幅に柔軟に対応できるレイアウトであることが大切になってきます。
ここでは、いろんなデバイスに対応したレイアウトをご紹介していきます。
グリッド・レイアウト
今主流のレイアウトが、このグリッドレイアウトです。
グリッドとは、「格子状」という意味で、本文や画像などの要素をブロックと考え、格子状に要素を配置していく方法です。
一定の規則で整然と要素が並ぶので、いろんな大きさの要素を複数並べても安定感があり、すっきりと見えるのが特徴です。
グリッド・レイアウトはさらに、リキッド・レイアウトとフレキシブル・レイアウトの2種類に分けられます。
リキッド・レイアウト
デバイスの横幅に合わせて、本文や画像などの要素、そしてコンテンツの幅自体が柔軟に変化するレイアウトです。
どのサイズのデバイスで見ても、空白が出来たり、はみ出て横スクロールが必要になることがなく、見やすいというメリットがあります。
楽天のサイトがこのレイアウトを採用しています。
フレキシブル・レイアウト
フレキシブルレイアウトは、最大幅と最小幅をそれぞれ決めることができるので、大きな画面で見た時に右端に空白ができたり、スマホなどの幅が狭いデバイスで見た時は、横へスクロールする必要が出てくのが特徴です。
リキッドレイアウトは相対的にコンテンツ幅を変化させるため、崩れる場合がありますが、フレキシブルレイアウトの場合は、それがありません。
このレイアウトは、Amazonのサイトで採用されています。
レスポンシブデザイン
リキッドレイアウトとフレキシブルレイアウトは、レスポンシブとどう違うの？と思う方もいるかもしれませんので、違いをお伝えしますね。
画面の大きさに合わせて、本文や画像などの要素の配置が変わるのがレスポンシプデザインです。
本文と画像が横並びになっているデザインの場合、スマホで見た時にそのまま表示されるとかなり縮小する必要がでてきます。
レスポンシブデザインでは、スマホでサイトを表示させた時に、自動で本文と画像が縦並びに表示されるようになります。
こちらのサイトがレスポンシブでデザインされているので、見てみてください。
フリー・レイアウト
デバイスの大きさを考慮せずに、固定した幅で作られているのがフリーレイアウトです。
昔のサイトのほとんどがこのタイプになります。
多くの情報を自由に配置できますが、スマホで見た時に見づらく、SEOの観点からもあまりオススメできないレイアウトです。
今では、WEBサイトのほとんどはスマホでみられているので、スマホでの見え方は優先したいですよね。
その他のWEBデザインレイアウト
基本となるレイアウトをお伝えしてきたので、次は最近注目されているデザイン性が高いレイアウトをご紹介していきます。
フルスクリーン・レイアウト
ホームページのファーストビューを全て、画像と数量のキャチコピーに詰め込んだレイアウトです。
表したいメッセージは余計なものがないほど伝わりやすいですし、何より大きなインパクトなど与えられます。商品やサービスのブランドイメージを全面に打ち出すときに使うことが多い。
ブロークングリッドレイアウト
グリッドレイアウトは、要素をきれいに整えたレイアウトでしたよね。
ブロークングリッドレイアウトは、あえてレイアウトを崩し変化をつけたものです。
重ねたり、ずらしたり、同じ要素の大きさを変えたりすることで、オリジナリティがあるオシャレなデザインになります。
ただし、バランスに注意しないと、違和感だらけのサイトになってしまうので、適度にメリハリをつけるよう変化をつけ、全体のバランスをみながらデザインしましょう。
グリッドレイアウトについては、コチラの記事で詳しく紹介しているので、参考にしてみてください
▶︎【初心者必見！】WEBデザインの基本「グリッドレイアウト」とは？
ノングリッドレイアウト
ブロークングリッドレイアウトより、さらに自由度高く配置をしたものをノングリッドレイアウトと言います。
規則性がなく型にはまらない配置をするので、他と差別化を図ることができます。
自由度が高い分難しいレイアウトになりますが、躍動感と遊び心のあるステキなデザインに仕上げられる、魅力あるレイアウトです。
カード・タイル型レイアウト
例えばピンタレストや、参考サイト集のように、カードをはめ込んだようなサイトをよく見かけますよね。
あのようなレイアウトをカード・タイル型レイアウトと言います。
たくさんの情報を載せたい時に見やすくできる方法で、スマホなど小さな画面で見る時にもオススメのレイアウトです。
たくさんの画像を魅力的に見せることができ、またポインタを乗せると画像が裏返るといった面白いエフェクトを使って面白さをプラスすることもできます。
サイト別のおすすめレイアウト
ここまでさまざまなレイアウトをご紹介してきました。
ですが、正直なところ、レイアウトだけ紹介されても「このレイアウトどこで使えば…」となってしまいますよね。
ですので、ここではどのようなサイトにどのようなレイアウトを使えばよいかをお伝えしていきます！
ご紹介するサイトの種類は次の4つです。
- コーポレートサイト
- ブランドサイト
- サービスサイト
- ECサイト
レイアウトには必ず意味があります。なぜそのレイアウトが使われているかを知ったうえでサイトを見たり、作りったりするともっとWEBデザインが楽しくなります。
コーポレートサイト
コーポレートサイトに最適なレイアウトは「シングルカラムレイアウト」です。
コーポレートサイトの目的は企業の認知を拡大すること。そのため、「問い合わせ」「商品・サービス」を周りに散らばらせるよりも企業のイメージを一瞬で伝えられるような「画像」や「キャッチコピー」を大きく伝える「シングルカラムレイアウト」が向いています。
また、「シングルカラムレイアウト」は「マルチカラムレイアウト」よりもスマホ対応がしやすく、企業からスマホ版の作成を依頼されたときにも作業が楽に済みます。
ブランドサイト
ブランドサイトの目的は「自社が出している商品の価値の向上と認知の拡大」です。そのため、コーポレートサイトと同じように、初めてサイトを訪れたときのインパクトが重要になってきます。
コーポレートサイトと同じように「シングルカラムレイアウト」、もしくはより思い切って「フルスクリーン・レイアウト」を使うのも訪問者に大きなインパクトを与えられてよいでしょう。
サービスサイト
不動産の見積もりや保険の見積もりなど、サービスに関することをするサイトはサービスサイトと呼ばれます。サービスサイトでは「サービスの認知」ももちろんですが、それに加えて「サービスのお問合せ」や「サービスの購入」が最終的なゴールです。
「お問合せ」などの申込につながるボタンがすぐ見つかることが重視されるので、「シングルカルムレイアウト」だけではなく、「マルチカルムレイアウト」が使われることもあります。
ECサイト
最近では、Amazonや楽天など通販で買い物をすることも多いですよね。
ECサイトとはそれらのようにインターネット上で商品を買うとき使うサイトです。ECサイトではさまざまな商品を比較したり、とりあえず暇つぶしとして商品を探したりすることが多いので、他のページに飛ぶためのボタンが数多く必要になります。
ですので、向いているレイアウトは「マルチカルムレイアウト」です。
レイアウトの参考にできるサイト
ここまでレイアウトの種類と、それらのどのように使い分けるかをお伝えしてきました。
最後にあなたがこれからレイアウトを考えて、デザインするときの参考になるサイトをご紹介するので、ぜひ困ったときにお使いくださいね。
MUUUU.ORG
とにかく見やすいのが特徴の参考サイトです。縦長のサイトを作るときに役立つサンプルが数多くあります。
さらに「デザイン」「カラー」をはじめ「業種」「サイト」など幅広いカテゴリで調べられるので、「ここを見ればヒントが必ずある」という安心感があります。
I/O 3000
サイトの下層ページのデザインまで表示される、珍しいサイトです。
サイト全体のバランスをチェックしたいときに物凄く重宝します。
また、国外のサイトなので最新のグローバルデザインを知れるのもおすすめのポイントです。
Web Design Clip
日本のサイトが数多く掲載されています。
レイアウト検索ができるうえに、類似サイトが表示されるなど便利な機能が数多く揃っています。
bookma!
サイトのPC版とスマホ版の両方のレイアウトを見れるのが特徴のサイトです。
更新頻度が多いわけではありませんが、質の高いデザインを見ることが可能です。
WEBデザインのレイアウトまとめ
今回は、WEBサイトを制作する時に知っておきたい、レイアウトの知識から、レイアウトの種類まで一挙にお伝えしました。
サイトは見た目のきれいさだけでなく、レイアウトを整え、ユーザーが情報を得やすいようなサイトであることが大切です。
ユーザーを第一に考え、使いやすく魅力的なサイトを作るために、ぜひこの記事を参考にしてくださいね。
