WEBサイトを作る際にレイアウトは重要です。デザインでレイアウトを決めるのではなく、レイアウトしてからデザインします。WEBサイトを実際に作り始める前にレイアウトを理解するために、まず各パーツを理解しましょう。
パーツを理解しているとよりWEBサイト制作をしやすくなります。

基礎レイアウトを頭に入れておこう

まずはこのオーソドックスなブログタイプのWEBデザインを見てください。これの大まかなレイアウトを図にしてみます。

大まかなレイアウトはこの様になっています。めちゃくちゃシンプルなワイヤーフレームみたいですね。実際にこのデザインを作る前にこのようなワイヤーフレームを書いたりします。これが基礎となるレイアウトパーツです。

そしてこの各パーツには代表的な名前がついています。それを見てみましょう。

世界共通でこのような名前が付いています。ヘッダーとフッターに関してはHTMLタグでもあるので馴染みがある人がいるかも知れません。

このように配置とバランスを変えればサイトのイメージもガラッと変わります。

最近はこのようなサイドバー無しでメインの領域を大きく見せるデザインが多く見受けられますね。スマホやタブレットの利用者が増えたおかげかも知れません。LPと呼ばれるページもだいたいこの形になっています。

このようにどんなに複雑なサイトでも大きく見るとこの４つのパーツに分けることが出来ます。最近はサイドバーが無いサイトが多く見られますが、最低でもヘッダー＋メイン＋フッターという構成は絶対です。サイトのレイアウトを考える場合にこの事を念頭に置いておきましょう。

レイアウトの中に設置するパーツの詳細

先程のサンプルページに設置されている細かなパーツを見てみましょう。

ヘッダー部分

かなり質素なヘッダーとはいえ、各パーツには上記のような意味があります。サイトタイトルは当然必須ですよね。ほとんどのサイトがヘッダーへサイトタイトルを記載しています。サイトタイトルの下にどのようなサイトなのか説明をして、シェアがかんたんに出来るようにしてあります。最後に各コンテンツへ移動できるメニューを置くことでユーザビリティを向上させています。

サイト内巡回で迷ったらまずヘッダーを確認する人が多いと思います。ヘッダーというのは全ページ共通になることが多く、ユーザーの一番始めに目に入ってくる要素です。多くの人がこのヘッダーにメニューがあることを体で覚えているため、ヘッダーへグローバルメニューを設置するのは非常に有効です。

メニュー以外にもお問い合わせフォームへのリンクを設置するのも非常に有効ですね。このようにヘッダーとはページのメイン情報を設置するのではなく、ユーザーがサイト巡回しやすくなるように補助的な機能を持たせます。

メイン部分

サンプルページの内容だと分かりにくいと思いますが、メイン部分に表示されるのはそのページで最も主要となる情報です。ブログで言えば記事本文が表示されている箇所ですね。トップページであれば各ページへのリンクになります。

メイン部分で難しいのはどこまでユーザーに情報を見せるかです。例えば記事ページで本文以上に別ページへのリンクが多かったりするとそのページの内容がわかりづらくなります。トップページであれば一体どれくらいまでのページリンクを設置するのか考える必要があります。

最近はこのメインの中にヘッダーとフッターを入れることが出来るため、見せ方を工夫する必要があります。サイト設計で一番楽しい作業ですね。

サイドバー部分

サイドバーといえばカテゴリーリンクだと思います。これもユーザーが体で覚えているのでカテゴリーの一覧を見たい時にだいたいサイドバーを見ようとします。また、サイドバー部分はページをスクロールしていると必ず目に入る部分なので特別に誘導したいコンテンツリンクをよく設置されます。例えば特集ページです。キャンペーンやいま最も売りたい商品があった場合にサイドバーへバナーリンクを設置すると非常に有効です。

あくまでもサイトの主要となるメニューはヘッダー部分へ設置します。サイドバーはそのサブ的なメニューとして活用しましょう。ヘッダーとサイドバーのメニューが同じだと全く意味がありません。
例えばヘッダーのメニューには「全記事が表示できるページ」「会社概要」「お問い合わせ」などを表示し、サイドバーでは各記事が付属するカテゴリーを表示させます。

フッター部分

フッターは端的に言えば「サイト構造」を記述します。そのため情報が過多になりやすく、サイトによっては全てのカテゴリーやタグを表示させていることがあります。逆にコピーライトだけを表示させている事もあります。何を書くかは自由なのですが「フッター部分にメインコンテンツは書かない」ということは理解しておきましょう。

昔はSEOの意味でもフッターに多くのリンクを設置していましたが、今は意味がないため無理にリンクを表示させる必要はありません。しかし企業によっては複数の異なるサービスを配信している場合があります。その場合はフッター部分で姉妹サイトへのリンクを設置したりすることが良くあります。
ユーザーにサービスを提供している場合はよく見られるヘルプへのリンクを設置するなど使い方は様々です。

昨今はスマホサイトが主流のため、スマホで見た場合はヘッダーメニューをフッターへ持ってくる手法も取られます。

当サイトは↑のようにタグ一覧と検索ボックス、そして普段見られないけど無いと困る固定ページへのリンクを設置しています。

既存サイトのレイアウトを写し取ろう

WEBサイトのレイアウトを覚えるにはとにかく既存サイトを見て紙にレイアウトのパーツを書き出してみることです。

例えば下記サイトのレイアウトの先頭を少し書き出してみます。
※このサイトを選んだ理由は特にありません。強いて言えば可愛かったからです。

見ている人に伝わるようにテキストを書きましたが自分で書く場合は不要だと思います。重要なのは既存サイトのレイアウトがどうなっているのかじっくり観察することです。美術で言えばデッサンのようなものですね。既存サイトの各パーツにはそれぞれ意味があってそこに配置されています。サイトによっては一つ一つ大きく表示している事があれば、上記サイトの用にヘッダー内に色々なパーツを盛り込んでいる事もあります。

もっと簡素に書いてもいいですし、詳しく書いても良いです。

まずは100サイトくらい紙に書き出してみましょう！

これは実際に僕もWEBの覚え始めにやった方法なのですが100サイト書き出す頃には様々なパーツの知識が増えます。WEB制作初心者の時はページ上に何が必要なのかアイデアが出てこないものです。しかし100サイトも書き写せば鉄板のメニューやコンテンツのアイデアがすらっと出てくるようになります。

WEBサイト探し

WEBデザインを色々調べるために既存サイトをまとめられたサイトがいくつかありますので紹介します。

最後に

WEBサイト作りで重要なのはデザインセンスでもコーディングの知識でもありません。そのサイトに必要なコンテンツをユーザーにいかにわかりやすく伝えるかです。デザイナー志望の方で多いのはグラフィカルでモーションの多いPVサイトばかりに目が行っていると思います。しかし、WEBサイトを見る一般ユーザーってオシャレなサイトには別に興味が無いんですよね。

商品を調べに来た人に商品のスペックを正しく伝え、買い物を望んでいる人には欲しい商品をわかりやすく見せるのが本来WEBサイトが力を入れるべき点です。とはいえパワポで作ったようなWEBサイトだと信用度やブランド力が下がるのである程度のおしゃれさは必要です。

まずはしっかりとレイアウトを組んでいればデザインを凝っても分かりやすい見せ方も出来るようになります。沢山のWEBサイトを書き写してヒントを得ましょう！

次はワイヤーフレーム制作です。お疲れさまでした。