Webデザイン

【わかりやすく徹底解説】Webデザイン制作|基本のレイアウトとは?

この記事は、次のような人に向けて書きました。

・センスのが良くて使いやすいWebサイトを作りたい

・それにはどこから手をつければ良いのかな?

・参考になるサイトが知りたい

この記事を読んだら、このような希望を叶えてくれますよ。

Webデザインの基本的なレイアウトの知識を深めたい方に是非おすすめの内容ですので、最後まで読んでくださいね。

 

Webデザインのレイアウトとは

 

デザイニャー
デザイニャー
Webデザインのレイアウトについて、基本的なことから教えてもらいたいニャン。

先生
先生
Webデザインにおけるレイアウトというのは、「情報を視覚化する作業」のことを指すんだ。

デザイニャー
デザイニャー
その言葉から読み取ると、情報を目に見えるようにする作業っていうことかニャン。

先生
先生
そうだね。具体的に挙げてみると

・写真

・画像

・文字

先生
先生
などの構成要素を視覚的に表現する、ということなんだ。

デザイニャー
デザイニャー
視覚的表現を取り入れると、どうなるんだニャン?

先生
先生
単純に並べただけでは伝えきれないような、Webサイトに含まれているたくさんの情報や目的を迅速で的確にユーザーに伝えることができるんだ。

デザイニャー
デザイニャー
つまり、情報整理という点でグラフィックデザインのような印刷物のデザインと同じようなものなんだニャン。

先生
先生
デザイニャー! その通りだよ!!

レイアウトの基礎知識

先生
先生
Webデザインのレイアウトについて知るより前に、グラフィックデザインとWebデザインの両方における基本中の基本というべき、「デザインの4大原則」「レイアウトの5つの基本」について、知っておいた方が良いよ。
デザインの4つの基本原則 |これさえできれば伝わるデザインができる「なんだかいまいちパッとしないデザインしか作れない」 そんな初心者デザイナーさんや、デザイナーじゃないんだけれど、仕事でデザインら...
...

Webサイトで使われるパーツの名前

先生
先生
まずは、Webサイトのレイアウトについて考える上で、Webサイトの中で使われているパーツの種類や名称を知っておくことが大切だよ。なぜなら、間違えた名称でデザイナーやエンジニアに伝えてしまうと、チーム内でのすれ違いが発生してしまうからなんだ。

デザイニャー
デザイニャー
しっかり把握しておくニャン!

先生
先生
そして、Webサイトのレイアウトで必要なパーツの一つ一つをしっかり理解しておいて、それを適切に組み合わせていけば、Webデザインの制作で迷うこともなくなるんだ。

デザイニャー
デザイニャー
Webデザインのレイアウトをする時に必要と言われているそのパーツについてもっと知りたいニャン!

先生
先生
Webデザインに必要なのは、以下の、5つのパーツだよ。

・ヘッダー

・ナビゲーション

・メインコンテンツ

・サイドバー

・フッター

ヘッダー

先生
先生
ヘッダーとは、ページの一番上に同じ内容で表示されるエリアでだよ。どのページにも共通で設置するもので、

・Webサイトのタイトル

・企業やブランドなどのロゴ

・お問合せ・資料請求

・重要なページへのリンク

先生
先生
などが配置されていることが多いパーツだよ。

ヘッダーは、アイキャッチ効果とWebページ全体のイメージにつながるパーツなので、企業などのロゴ商品のキャッチコピーを表示させることが多い。

ナビゲーション

先生
先生
ナビゲーションとは、Webサイト内の重要なリンクを集めた案内メニューのことで、日本語で言うと、「目次」だけれど、人によっては「メニュー」と呼ぶこともあるよ。

デザイニャー
デザイニャー
ナビゲーションも全ページ共通の内容みたいだニャン。

開発用語としてはナビゲーションとよぶのが一般的だけれど、その他にも「グローバルナビゲーション」「ヘッダーナビゲーション」「ヘッダーメニュー」「メインメニュー」という名称で呼ばれることもあります。

先生
先生
また、大きな目次だったら「グローバルナビゲーション」だけれど、小さな目次の場合は、「サブナビゲーション」と呼ぶこともあるよ。

基本的には、Webサイト内の全ページで共通で同じものを配置するもので、サイト内のどのページからでも自分が読みたい記事へ迷わずに飛んでいくのが可能なものです。

メインコンテンツ

先生
先生
メインコンテンツとは、Webページ内の主要的な部分のパーツを指して、ページごとにレイアウトや内容など見え方が変わるんだ。例えばブログの文章やニュースの記事などWebサイトの主要なコンテンツ部分のことを指すんだ。

デザイニャー
デザイニャー
Webページの主題の部分で、重要なエリアなんだニャ。

先生
先生
そうだね。このエリアでは画像や文章の優先順位をきちんと整理して、ユーザーがわかりやすく情報を得られるようなレイアウトをするべきなんだよ。

サイドバー

先生
先生
サイドバーというのは、グローバルナビゲーションのサブ的な役割をするエリアのことを指すんだ。まぁ、グローバルナビゲーションだけでは載せられなかった情報補う役割なんだ。

デザイニャー
デザイニャー
メインコンテンツの右端か左端もしくは両方に配置されることもあるようだニャン。

サイドバーは、2カラム以上の横並びのレイアウトのWebサイトでメインコンテンツの横に配置されていて、レイアウトによってはない場合もあります。

先生
先生
サイドバーには以下のような項目が入るよ。

・カテゴリー一覧

・関連記事へのリンク

・人気記事や最新記事

・企業や店舗の基本情報

・SNSのボタン

先生
先生
ただ、スマートフォン向けのサイトでは用いられないので、最近では利用することが少し減ってきたかな。

フッター

先生
先生
フッターとは、メインコンテンツの下でページ内の一番下のある部分のことを指して、全ページに共通するパーツなんだ。

デザイニャー
デザイニャー
フッターの中に入る項目は何だニャン?
フッターに入る項目

・会社概要
・サイトマップ
・コピーライト
・プライバシーポリシー
・SNSボタン
・ロゴ
・ナビゲーション
・ページのトップに戻るボタン

先生
先生
フッターの部分には運営元企業情報などをしっかりと書くことでコンテンツの信頼性を示す部分なんだ。

1カラムでサイドバーのないデザインの場合は、フッターの中に「人気記事」や「関連情報」を入れることもあります。

先生
先生
フッターに置く項目には、決まったルールはないから、ある程度自由に決めることができるから、使いやすさを考えてその表示する内容を決めたいところだね。

ホームページに使われるレイアウト

先生
先生
ここからはWebサイトでよく使われているレイアウトのお話だよ。Webサイト用いられるレイアウトには、基本パターンがあってね、そこから派生したレイアウトもたくさんあるんだ。

デザイニャー
デザイニャー
Webデザインの初心者になると、レイアウトの種類がありすぎて迷ってしまうかもだニャン。

先生
先生
ここではWebサイトでよく使われる基本的なレイアウトについて紹介していくね!

カラムとは

先生
先生
Webサイトを作るときに、情報を見やすく整理するために、要素と要素の「段組み」を行うことがあるんだ。

デザイニャー
デザイニャー
雑誌とか見ても、文章と写真が見やすい位置に置かれているけれど、それと同じようにWebサイトを作るときにも、要素と要素を最適な位置に置く必要があるんだニャン!

先生
先生
そうだね。この段組みのことをWebサイト作る現場では「カラム」と呼ぶんだ。このカラムがいくつ組み合わさっているかという部分で、「シングルカラムレイアウト」とか「マルチカラムレイアウト」というふうな呼び方をするんだ。

Webデザインの4つのレイアウトパターン

 

先生
先生
Webサイトのレイアウトには、次の4つのパターンがあるよ。

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

・マルチカラムレイアウト

・フルスクリーンレイアウト

・グリッドレイアウト

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

先生
先生
「シングルカラムレイアウト」というのは、縦長で1列に段組みされているレイアウトのことを指して、1カラムとも呼ばれているだ。

デザイニャー
デザイニャー
最近ではスマートフォンでWebサイトを見ることが多いから、こんな風な余計な情報は表示しないすっきりしたシングルカラムレイアウトのサイトが増えてきたようだニャン。

「シングルカラムレイアウト」は、スマートフォンやタブレットで表示するときに横幅を考慮した「レスポンシブWebデザインとの相性も良いです

先生
先生
集客したユーザーに商品の説明をする「ランディングページ」のようなもののレイアウトにも、シングルカラムレイアウトが適しているんだ。

デザイニャー
デザイニャー
コンテンツを読むのに集中させることが目的なんだニャン。

先生
先生
上からヘッダー、ナビゲーション、メインコンテンツ、フッターという順番で並んでいるから、パソコンで見る場合とスマートフォンで見る場合の違いが、マルチカラムレイアウトと比べて少ないんだ。

デザイニャー
デザイニャー
そういうわけで、シングルカラムレイアウトを使うWebサイトが増えているんだニャン。

マルチカラムレイアウト

先生
先生
「マルチカラムレイアウト」というのは、コンテンツの脇にサイドバーが設置されていて2〜3列に分かれたレイアウトなんだ。

デザイニャー
デザイニャー
「マルチカラムレイアウト」って大体どういったタイプのWebサイトで使われているのかニャン?

先生
先生
そうだね。情報量が多かったりとか、もしくは検索サイトやポータルサイト、またはニュースメディアなど、Webサイト内での回遊性を必要とするサイトにしたい場合にマルチカラムレイアウトで作られることが多いね。

2カラムレイアウト

コンテンツの左か右のどちらかにサイドバーを設置したレイアウト。

3カラムレイアウト

コンテンツの左右両端にサイドバーを設置したレイアウト。

先生
先生
マルチカラムデザインにもデメリットがあって、まずスマートフォンのような画面が小さいデバイスでは見づらかったりすることや、サイドバーの情報がちょっと多すぎると、メインコンテンツを見るときに集中しづらい、また、シンプルさを求めるようなデザインには不向きだったりするよ。

デザイニャー
デザイニャー
そんなケースではスマホ用にデザインをするは、シングルカラムレイアウトで表示されるようにしなくっちゃニャン。

先生
先生
そうだね。そんな風でシングルカラムが主流となりつつあるんだけれど、マルチカラムレイアウトは、さっき説明したように実用性が高いから、多くのWebサイトのデザインで使われていて、ストレスを感じにくく、多くの人が慣れ親しんでいるレイアウトだと言えるよ。

フルスクリーン型レイアウト

デザイニャー
デザイニャー
「フルスクリーン型レイアウト」というのは、パソコン画面いっぱいにメインコンテンツが配置されたレイアウトのことを指すんだニャン。

先生
先生
そうだね。シングルカラムとも捉えられて、余白なしでメインコンテンツを全画面で埋め尽くしていてサイドナビゲーションがないのがフルスクリーン型レイアウトの特徴で、その他のヘッダー、グローバルナビゲーション、フッターなどパーツは控えめで、省略されることもあるんだ。

デザイニャー
デザイニャー
フルスクリーン型レイアウトの長所と短所について教えてニャン。

フルスクリーン型レイアウトの長所

・デザイン性の高いWebサイトを作りやすい

・画像のインパクトを最大限に引き出せる

フルスクリーン型レイアウトの短所

・ナビゲーションが見づらく回遊率が落ちる

・テキストが読みづらい傾向

・使い勝手が低くなりやすい

先生
先生
フルスクリーン型の長所と短所を踏まえて使用しようね。

グリッドレイアウト

先生
先生
「グリッドレイアウト」というのは、画像や文字、カラムなどの一定の規則にしたがって格子状にしたレイアウトのことを指すんだ。

デザイニャー
デザイニャー
整然とした印象が強い感じのレイアウトだと言えるニャン。

先生
先生
WordPressで使われる多くのテンプレートがこのタイプだよ。また、このグリッドレイアウトは、パソコンやスマホ、タブレットといったさまざまなデバイスに対応しやすいという可変レイアウトとして使うこともできるんだ。

先生
先生
グリッドレイアウトの長所と欠点は次の通りだよ。

グリッドレイアウトの長所

・たくさんの情報を整然と見ることができる

・すっきりとした印象

・コンテンツに統一感が出る

・レスポンシブ・Webデザインと好相性

グリッドレイアウトの欠点

・サイトの差別化に課題が残っている

・コンテンツの優先順位がつけにくい

先生
先生
良い部分と欠点がわかったら、さらにグリッドレイアウトについて詳しく掘り下げていくね。

グリッドレイアウトの4つの種類

先生
先生
「グリッドレイアウト」には、次の4種類があるよ。

・リキッドレイアウト

・フレキシブルレイアウト

・可変グリッドレイアウト

・エラスティックレイアウト

先生
先生
一つ一つ解説していくね。

リキッドレイアウト

先生
先生
「リキッドレイアウト」というのは、ユーザーのパソコンの画面サイズによって、横幅が100%の相対的または可変的に調整されてコンテンツされるレイアウトのことを指すんだ。

デザイニャー
デザイニャー
可変的ってなんだニャン?

先生
先生
ユーザーのパソコン画面って、パソコンの種類によって大きさが違うでしょう。パソコンと比べて、スマートフォンはものすごく小さくなるし、最近ではタブレットというものも出てきたよね。一言で言えば、レスポンシブデザインというのが流行っているんだけれど、要するに、大きさによってレイアウトを調整させるために伸縮したりするっていうことなんだ。

デザイニャー
デザイニャー
ニャルほど!今、先生が説明してくれたことが、リキッドレイアウトの長所でもあるんだニャン。

フレキシブルレイアウト

先生
先生
「フレシキブルレイアウト」の特徴は、各要素を%で指定して、最大幅と最小幅を指定することでレイアウト崩れをカバーするというところなんだ。最大幅が決められているから、大きなパソコン画面で見たときには、周りに余白が生まれたり、パソコンで見た時だけレイアウトの幅を固定したいときに使われるのが、「フレシキブルレイアウト」の特徴だよ。

可変グリッドレイアウト

先生
先生
「可変グリッドレイアウト」というのは、一定のグリッドに沿ってカードという短冊みたいな形のコンテンツを並べて、パソコンのウインドウ幅が変わる旅にコンテンツを再配置するレイアウトのことを指して、情報系サイトに多く使われているタイプなんだ。再配置をするのには、jQueryなどのプログラミングを使うんだ。

デザイニャー
デザイニャー
でも、それってスマホとかの小さな画面になったら、縦長になって見づらくなるんじゃないかニャン?

先生
先生
確かにその部分は、デザイニャーのいう通りかもしれないね。

エラスティックレイアウト

先生
先生
「エラスティックレイアウト」というのは、全ての要素をemという単位で決められていて、ブラウザの幅を変えても、コンテンツが全体的にズームするようなレイアウトのことを指すんだ。現在はブラウザ自体にズーム機能がついているからそんなに必要性はないかもしれないけれど、ノン・レスポンシブ・サイトをスマートフォンで見せるときに使われるレイアウト方法なんだ。

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

先生
先生
「ブロークングリッドレイアウト」というのは、グリッドをつけたりして規則性のある境界線をあえて外したレイアウト方法だよ。

デザイニャー
デザイニャー
今までのグリッドレイアウトとはまた違った印象を受けるニャン。

先生
先生
背景にあるブロックからはみ出した理とか位置を外して要素を配置させるのが特徴だよ。

デザイニャー
デザイニャー
インパクトがあるし、洒落てるニャン。

先生
先生
このタイプのレイアウトは、昔から雑誌とかでもよく使われていたんだけれど、最近ではWebサイトでもこの手法が使われていることが多いんだ。

ノングリッドデザイン

先生
先生
「ノングリッドデザイン」は、ブロークングリッドレイアウトをさらに崩したタイプのレイアウト方法なんだ。

デザイニャー
デザイニャー
ブロークングリッドレイアウトは、ずらしたり重ねたりするレイアウト方だけれど、ノングリッドレイアウトは、より開放的な感じがするニャン。

先生
先生
インパクトを与えたいとか、個性を強調させたい、または開放感や躍動感を出したい、というときにこのノングリッドデザインを使うといいよ。

スクロールするときの見せ方のレイアウト

 

先生
先生
Webサイトは、チラシや雑誌などと違って、ユーザーのアクションによってレイアウトを変更することができるんだ。

デザイニャー
デザイニャー
そういえば、スクロールしたときに、ヘッダーやフッターの配置が移動したりするニャン。

先生
先生
スマホやタブレットなどは画面サイズが小さくて、パソコン画面と比べると、一度に見れるコンテンツの量は少ないよね。

デザイニャー
デザイニャー
Webサイトのページをスクロールしたときに、大切な内容が目に入りやすくいレイアウトにする必要があるニャン。

先生
先生
先生:ここでは、スクロールしたときの見せ方や特殊な動きを加えたレイアウトについて話していくね。

ヘッダーを固定して動かすレイアウト

デザイニャー
デザイニャー
スクロールしたときに、ヘッダーがそのままの位置で表示されたWebサイトって、便利だしよくあるよニャン。

先生
先生
こうすることで、サイトのナビゲーションやロゴが常に上に表示された状態になって、スクロールが終えた後も、固定されたナビゲーションからすぐに他のページのリンクに飛ぶことができるんだ。

デザイニャー
デザイニャー
パソコンでもあるけれど、縦に長いスマホのサイトでよく見られるニャン。

先生
先生
デザイニャーの言う通りで、スマホサイトによく使われているデザインだよ。

サイドバーを固定して動かすレイアウト

デザイニャー
デザイニャー
スクロールした後に、サイドバーが同じ位置に固定されているレイアウトというものもあるよニャン。

先生
先生
サイドバーが固定されて表示されていると、いつでもナビゲーションとかユーザーに見せたいコンテンツを提供できて効果的なんだ。

デザイニャー
デザイニャー
でも、スマホとかみたいに横幅が小さいと、このタイプのレイアウトは読みづらいんじゃないのかニャン?

先生
先生
うだね。パソコンでのみに使える手法と言えるね。

ページの先頭に戻る

デザイニャー
デザイニャー
シングルカラムレイアウトなどのWebページの場合、最後までスクロールした後に、ページの頭に戻るのって面倒くさいニャン。

先生
先生
それを解消させるのに、ページの先頭に戻るためのボタンをつけるといいんだ。

デザイニャー
デザイニャー
ページの右下にそういう先頭に戻るためのボタンが配置されてるんだニャン。

問い合わせボタンを固定表示する

デザイニャー
デザイニャー
近頃チャットでの問い合わせができる機能が増えてきているニャン。メールで問い合わせるよりも簡単にできるからかニャン。

先生
先生
近頃では、チャットシステムを提供している会社が増えてきているから、Webサイトにチャットで問い合わせができる機能をつけることが簡単にできるようになっているんだ。

デザイニャー
デザイニャー
スマホのサイズが大きくなっていくにつれて、大事なボタンは右利きの人の親指がとど起きやすい画面の右下に配置されていることが多くなってきたニャン。例えばTwitterの投稿ボタンは右下にあるよニャン。

先生
先生
Webサイトの目的によって、問い合わせチャットなどへのリンクボタンまたはカートボタンなどのボタンの内容を検討してね。

美しいWebデザインのレイアウトにする3つのコツ

デザイニャー
デザイニャー
ここまでWebサイトのレイアウトに関して基本的なことをたくさん教えてもらったニャン。

先生
先生
これから、美しいWebデザインのレイアウトにするコツは次の3つだよ。

・デザインの4つの基本原則を守る

・視線の動きを考える

・スクロールビューを考える

先生
先生
一つひとつ解説していくね。

デザインの4つの基本原則を守る

 

先生
先生
デザインのレイアウトにはさまざまな種類があるけれど、どのレイアウトを使うにも、原則を守ることで美しく伝わるデザインができるんだ。デザインの4つの基本原則は次の通りだよ。

・近接

・整列

・反復

・コントラスト

デザイニャー
デザイニャー
デザインの4つの基本原則は、以前にも学んだニャン♪
デザインの4つの基本原則 |これさえできれば伝わるデザインができる「なんだかいまいちパッとしないデザインしか作れない」 そんな初心者デザイナーさんや、デザイナーじゃないんだけれど、仕事でデザインら...

視線の動きを考える

先生
先生
人がWebサイトや雑誌や本を読むときには、決まった目の動きがあるんだけれど、この視線の動き方を理解して利用することで、魅力的なデザインを作ることができるんだ。これも以前の授業で学んだよね。

デザイニャー
デザイニャー
N型Z型F型だったニャン!
...

スクロールビュー重視を考える

デザイニャー
デザイニャー
「スクロール」するのは、Webサイトを見るときに便利な機能なんだけれど、時々苛立ってしまう原因になることもあるんだニャン。

先生
先生
そんなこともあるかもしれないけれど、スクロールはWebサイトにおいて昔からある基本的な機能でありながら、ユーザビリティにも大きく関わる大切なものなんだ。

デザイニャー
デザイニャー
Webサイトのブランドイメージや見る人たちの層によって、スクロールの種類は異なるんだよニャン。今の世の中では、スマートフォンでWebサイトを見ることが多いから、スクロールビューが重視されているんだよニャン。

先生
先生
Webサイトではこれまで、ファーストビューに大事な情報を詰め込むのが基本で、ユーザーがそこに必要な情報がないと判断したら、サイトを離脱することが多かったんだけれど、最近ではSNSの浸透によって、画面スクロールをすることに抵抗感がなくなって、Webサイトを開いたら、下にスクロールするユーザーがたくさん増えてきているんだ。

デザイニャー
デザイニャー
時代の変化で、変わっていく傾向なんだニャン。

レイアウトするときはサイトの目的と使い方を考えよう

 

先生
先生
ここまでお話ししてきたけれど、Webサイトを見やすくて使いやすくするためにもレイアウトが重要だということがわかってもらえたかな。

デザイニャー
デザイニャー
サイトの使い方や目的に合うのに効果的なレイアウトを選んでWebサイトを作っていかなくっちゃニャン!

先生
先生
Webサイトを作るときには、ここまで学んできたレイアウトパターンを活かしてほしいよ。

レイアウト別にサイトを探すのにいい参考サイト

 

先生
先生
良いレイアウトを作るには、良いレイアウトをたくさん見るのがいちばんの近道だよ。ここでは、質のいいWebサイトをまとめたギャラリーサイトを紹介するね。

Webデザインのレイアウトを学ぶおすすめ本

先生
先生
最後にWebデザインのレイアウトを学べるおすすめ本を紹介するね。

デザイニャー
デザイニャー
これも以前の授業で学んだから、復習だニャン。
【Webデザインの基本を学びたい方必見!!】デザイン基本おすすめ本この記事は次のような方に向けて書きました。 ・ Webデザイナーを目指している方 ・駆け出しのウェブデザイナーの方 ...

まとめ

デザイニャー
デザイニャー
ここまでWebサイトのレイアウトの種類についてたくさん学んだニャン。

・Webデザインのレイアウトとは

・レイアウトの基礎知識

・ホームページで使われるパーツの名前

・ヘッダー

・ナビゲーション

・メインコンテンツ

・サイドバー

・フッター

・ホームページに使われるレイアウト

・カラムとは

・Webデザインの4つのレイアウトパターン

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

・マルチカラムレイアウト

・フルスクリーンレイアウト

・グリッドレイアウト

・グリッドレイアウトの4つの種類

・リキッドレイアウト

・フレキシブルレイアウト

・可変グリッドレイアウト

・エラスティックレイアウト

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

・ノングリッドデザイン

・スクロールするときの見せ方のレイアウト

・ヘッダーを固定して動かすレイアウト

・サイドバーを固定して動かすレイアウト

・ページの先頭に戻る

・問い合わせボタンを固定表示する

・美しいWebデザインのレイアウトにする3つのコツ

・デザインの4つの基本原則を守る

・視線の動きを考える

・スクロールビューを考える

・デザインの4つの基本原則を守る

・視線の動きを考える

・スクロールビュー重視を考える

・レイアウトするときはサイトの目的と使い方を考えよう

・レイアウト別にサイトを探すのにいい参考サイト

・MUUUUU.ORG

・SANKOU!

・I/O 3000

Webデザインのレイアウトを学ぶおすすめ本

先生
先生
Webサイトにおいてもレイアウトはとても重要な役割を果たすことがわかってもらえたかな。

デザイニャー
デザイニャー
常にいろんなサイトを見て参考にしていって、Webサイトを作るときに、目的とかに適したデザインを作ってユーザーに譲歩を届けることが大事だということを教わったニャン。

先生
先生
いろんなWebサイトを見てインスピレーションを得ていって、魅力的なWebサイトを作っていってもらえると嬉しいよ!