【第7回】Webサイトの構造とレイアウト｜ノンデザイナーがデザインを作る

前回は簡易的に広告バナーを作成するデザインツールを解説しました。繰り返しになりますが、バナーデザインはデザイン力を鍛えるのに最適です。ぜひ積極的に取り組んでみてください。

今回はガラッとテーマを変えて、Webサイトの使い勝手を決めるサイト構造とレイアウトを解説します。

これまでのロゴやバナーといった部分的なデザインではなく、Webサイト全体のデザインについて理解していきましょう。

1.Webデザインとは?-アート、グラフィックとの違い
2.ノンデザイナーがデザインする際の考え方
3.これだけでプロっぽいデザインに!デザインの原則
4.“意味のある”ロゴデザイン
5.これだけ抑えれば大丈夫!広告バナーのデザイン
6.ノンデザイナー向け広告バナーデザインツール
7.Webサイトの構造とレイアウト
8.Webサイト制作に必要な知識
9.デザイナーのための広告・マーケティングの基礎知識

Webサイトはサイト構造とレイアウトで決まる

Webサイトを構成する要素は「サイト構造」「レイアウト」「デザイン」の3つです。この3つの要素が優れたWebサイトは使い勝手がよく、成果につながります。一方、いずれかの要素が欠けてしまうと、Webサイトとして使いづらくなります。

なぜひとつでも要素が欠けると使いづらくなるのか？それぞれの関係性を部屋に例えて解説します。

サイト構造=必要な家具・家電

「サイト構造」は部屋にとって必要な家具・家電です。自分の部屋にとって絶対に必要なものってありますよね。

例えば、机や棚、冷蔵庫や洗濯機などは重要です。快適に住むにあたって、こうした家具や家電は欠かせませんよね。サイト構造も同じく、Webサイトに絶対的に必要な要素です。これらが欠けてしまうと、サイト自体が機能しません。

レイアウト=家具・家電の配置

「レイアウト」は部屋にとって必要な家具・家電の配置です。同じ間取りの部屋でも物の置き方によって印象が変わります。Webサイトもこれと同じで、要素を配置するバランスによって印象が変わるのです。どんな風に見られたいかを実現するためにはレイアウトが重要です。

デザイン=家具・家電のデザイン

「デザイン」は、部屋にとって必要な家具・家電のデザインです。レイアウトに適した色や形の家電を集めれば、より部屋の印象をコントロールできます。
家具や家電のデザインって、意外と重要ですよね。同じ場所に家具を置いても、デザインによって部屋全体の印象や生活しやすさが大きく変わります。
Webサイトも同じ構造、レイアウトでも、デザインによってイメージを大きく変えられます。

Webサイトの基本的な構造

Webサイトの基本は「ヘッダー」「メニュー」「コンテンツ」「フッター」です。まずは基本要素をおさらいしておきましょう。

サイト全体の設計図となるサイト構造については、「SEO・ユーザビリティに影響するサイト構造/設計の考え方」で紹介しているので、合わせてお読みください。

ヘッダー

ヘッダー領域には、以前本シリーズでも解説したロゴや画像、テキストなどが配置されます。ヘッダーは、ファーストビュー（最初に見える領域）に映る部分でもあるので、魅力的なロゴや画像が重要です。ぱっと見の印象が悪いと、その時点で離脱してしまうユーザーもいます。

メニュー

メニュー（ナビゲーション）領域は、Webサイトのコンテンツに直結する要素です。ユーザーはメニューを軸に、Webサイトを回遊します。メニューは、常にユーザー目線で、わかりやすくなければいけません。

コンテンツ

コンテンツ領域はサイトの軸となる部分です。多くのユーザーはコンテンツを求めて訪れます。どんなレイアウトやデザインのサイトでもコンテンツが重要です。ユーザーが求める優れたコンテンツを提供しましょう。

フッター

フッター領域には全ページ共通のアクセスマップや所属情報を配置します。最近ではSNSやバナーを配置するケースも多いです。

Webサイトはこうした要素を組み合わせて構築されます。それぞれの役割を抑えておきましょう。

Webサイトの基本的なレイアウト

Webサイトの基本的なレイアウトを紹介します。各レイアウトには特徴があるので、種類とともに確認していきましょう。

シングルカラムデザイン

シングルカラムは、ワンカラムともいい「基本要素を縦に並べていくレイアウト」です。カラムとは「段組」を意味します。シングルカラムの場合、ヘッダー→メニュー→コンテンツ→フッターといった順番に配置していきます。

数あるレイアウトの中でもシングルカラムは基本です。単純なスクロールのみでコンテンツを魅せられます。また、レスポンシブデザイン（ユーザーの画面サイズによって変化するデザイン）にしやすく、パソコンのみならずスマホやタブレットとも相性がいいです。

一般的にランディングページやコーポレートサイト、キャンペーンサイトなどで使われます。
また、シングルカラムのデザインはここ数年のWebデザインのトレンドで、様々なWebサイトで取り入れられています。スマートフォンではほとんどの場合、シングルカラムになります。シングルカラムのWebサイトは、スマホファーストのレスポンシブサイトを構築しやすいというメリットがあります。

マルチカラムデザイン

マルチカラムは「複数のコンテンツを分割して配置するレイアウト」です。基本的にコンテンツとサイドメニューを片方に置いた2カラム、サイドメニューを両方に置いた3カラムが基本です。また、ショッピングサイトでは、アイテムの掲載数を増やすことを目的とした4〜5カラムも存在します。

マルチカラムではメインコンテンツに加えて、メニューやバナーなどのサブコンテンツを配置します。そのため、各ページへの遷移が早く、Webサイトを回遊させたい場合に有用です。

主に、ECサイトやニュース系、メディアサイトに使われています。

グリッドデザイン

グリッドデザインは「ページを分割し配置するレイアウト」です。コンテンツを幾つにも分割し、カードやタイル状に配置するものをグリッドレイアウトと呼びます。またカードやタイルの大きさを変更したり、あえてグリッドを崩したり（ブロークングリッド）するなど、柔軟なアレンジが可能です。

グリッドは数多くのコンテンツを配置できるため、ECサイトやニュースサイトに適しています。スマホやタブレットで閲覧する際もデザインが崩れにくく、利便性に優れたレイアウトといえるでしょう。
最近は要素をあえてずらしたり、重ねたりすることによってデザインにアクセントをつける「ブロークングリッドレイアウト」やグリッドを取り払った「ノングリッドレイアウト」も流行っています。しかし、これらは遊びのデザインでかなり難易度が高く、経験や戦略による裏付けなしに取り入れるとごちゃごちゃとしたイメージを与えてしまうので注意が必要です。

フルスクリーンデザイン

フルスクリーンはその名通り、「写真や動画をWebサイト全体に映したレイアウト」です。一般的な利便性を損ない場合もありますが、ブランドの世界観や写真や動画などの作品を伝える際に役立ちます。主に、アーティストやデザイナー、ブランド、またPCでの閲覧を想定したBtoBのサービスサイトなどで利用されています。

固定メニュー

固定メニューは、基本要素であるメニューを固定したレイアウトです。シングルカラムに多いイメージがありますが、マルチカラムでも応用できます。固定メニューのレイアウトなら、スクロールしてもメニューが追従してくれるので、サイト内の回遊率を上げることができます。
スマートフォンでは、必然的にシングルカラムの縦長のレイアウトになります。そのためスマートフォンサイトで回遊を促すうえで、固定メニューは非常に効果的です。

ノンデザイナーが意識すべき3つのこと

ここまで、Webサイトの基本的な構造や、レイアウトを紹介してきました。最後に、ノンデザイナーがWebサイトを作る際に意識すべきことを解説します。
実は、どのレイアウトがいちばんいい、と一概にいうことはできません。それぞれにメリット・デメリットがあり、サイトの目的や役割によって適切なサイト構造・レイアウトは様々です。

サイト構造を理解し情報をまとめる

Webサイトを作る前に、載せたい情報を整理してください。整理する情報は、基本的なサイト構造に従ってまとめます。まずは、ヘッダー、メニュー、コンテンツ、フッターの4つに掲載すべき情報を吟味しましょう。

例えば、ヘッダーにはロゴや簡単なテキスト、コンテンツにはこれからメインとなる情報やバナー、フッターにはメニューを元にしたサイトマップやSNSなどを載せます。

この際、重要になるのがメニューです。Webサイトの良し悪しは様々な要素で決まりますが、使いやすさという点に限れば、ほとんどメニューで決まるといっていいでしょう。
メニューはWebサイト内を回遊させる際に重要な要素です。メニューがまとまっていないと、ユーザーは離脱してしまいます。そこで、まずはサイトマップを作成しましょう。

サイトマップとは「Webサイトの階層構造」のこと。基本的に親カテゴリ、子カテゴリ、孫カテゴリといった形で分類されます。

例えば、当メディアではトップページが親カテゴリに属し、そしてマーケティング、クリエイティブ、ダウンロード、セミナーが子カテゴリに属します。さらにWebマーケティング・Web広告・アクセス解析・SNSマーケティング・SEO・MAがマーケティングの孫カテゴリ、Webデザイン・Web制作・写真・イラストがクリエイティブの孫カテゴリになります。（ダウンロードやセミナーに孫カテゴリはありません。）

このように載せたい情報を親・子・孫カテゴリに分類してください。サイトマップの分類が優れているほど、ユーザーが迷わずに回遊できます。

自社に合うレイアウトを厳選する

ノンデザイナーがWebサイトのレイアウトを決める際は、業種に見合うものを選択してください。多くはコーポレートサイトやランディングページになるため、シングルカラムやマルチカラムになるはずです。

もし、載せるコンテンツが多い場合はグリッドレイアウト、ブランドなどであればフルスクリーンを利用するといいでしょう。悩んでしまった場合は、競合他社に使われているレイアウトを調べてください。

レイアウトが決まったら、「ワイヤーフレーム」と呼ばれる下書きにまとめておきます。（手書きで構いません）この段階で自社に合うレイアウトになっているか確認しましょう。

とりあえず作る

ノンデザイナーがWebサイトを作る際に重要なのは「とりあえず作る」こと。前述した通り、準備は大切ですが、ある程度方向性が決まったらすぐに形にしてください。
Webサイトはリアルタイムで修正・更新、方向転換が可能です。いつまでも悩んでいると、結局形にできません。何はともあれ作る、公開してからアクセス解析などを行い必要に応じてPDCAサイクルを回し続けることが重要です。
納期が決まっている場合は、必ず従うようにしましょう。

一度でも形にしたら、あとは意見をもらったり、アクセス解析などからブラッシュアップしてください。この繰り返しで優れたWebサイトが完成します。

まとめ

第7回では「Webサイトの使い勝手を決めるサイト構造とレイアウト」と題して、サイト構造とレイアウトを解説しました。Webサイトに関する知識をつけておくと、今後デザインを作る際に役立ちます。

続いて第8回では、Webサイト制作に必要な知識を解説します。実際にレイアウトを作る際に知っておきたい知識になるので、覚えておいて損はありません。