Webサイトを作ろう！【3】ページの構成を考える

前回記事　【2】必要なソフトを準備する　にて、サイトデータを保存するフォルダ作成と、最低限必要なソフトのインストールについてご説明しました。
今回はページを作るに当たって段落構成などを考える作業に進みたいと思います。

構成を決める
- ページの段落構成（カラム）を決める
必要なページを考える
ページの幅や高さを決める

構成を決める

サイト全体に共通する様式（構成、色合い等）を予め決めておくと作成もスムーズですし、まとまりのあるスッキリ綺麗なサイトに見えます。
そこでまずは全体の大まかな構成を決めましょう。

・ページの段組をどうするか
・トップページ『 index.html 』以外にどんなページを作るか

最初に決めておくのはこの2点くらいじゃないでしょうか。
他は後からどうとでもなります。
ノートやメモ書きをご用意いただいて、構想を書き出してみましょう。

ページの段落構成（カラム）を決める

普段ご覧いただいているサイトを思い浮かべていただくと、大体のサイトに共通して一番上には画像やロゴがあり、左右どちらか、もしくは両方にメニューバーがあり、真ん中には本文、一番下には会社名やコピーライト表記があると思います。
こうした段落構成＝段組のことをカラムと呼びます。

①と②はメイン／サイドバーの2カラム、
③はメイン／サイドバー2本の3カラム、
④はサイドバーが無いので特にカラムとは呼ばれません。

弊社サイトのトップページは2カラムということになります。

サイドバーを2本にすると、その分メインに使える幅が狭くなってしまうため、一般的なサイトは2カラムで作られていることが多いように思います。
逆に本文は文章がメインで幅がそんなに必要ないブログなどの場合は3カラムにしてサイドバーを2本設置し、左にメインメニュー、右にカレンダーや広告などを表示させていることもあります。
他に、上部にメニューを設置し、左右のサイドバーを無くして、④のようにメインを広く使うレイアウトも人気ですね。

トップページから枝分かれしていくページがどの程度あるか、カテゴリ分けや製品数の多少など、作るサイトによって必要なメニュー数も異なりますから、先に下記の　必要なページを考える　の項をご覧いただいて大体のページ数の目安がついてからカラムを考えるのも良いと思います。

必要なページを考える

そのサイトで何をしたいか、何を伝えたいかを考えて、そのために必要なページを書き出してみましょう。

下記はサイト構成の一例です。

これを実際のサイト表示のようにメニューに割り振ってみます。

上部メニューにした場合

サイドバーでメニューにした場合

それぞれのメニューボタンを押すとリンク先のページに繋がるようにします。
上のサイト構成の一例にある『文書のページ2（book.html）』は『文書』から更に先に進んだ先にあるページなので、メニューとしてはリンクを繋ぎません。

もちろん文字にリンクを貼ったメニューでも良いのですが、ボタンのほうが何となく見栄えがいいような気がして私はボタン型のメニューにしています。
今後ボタンの作り方やリンクの貼り方もご説明しますので、その辺りもお好みで。

このように、作りたいページとその構成をある程度決めて、繋がりをちょっとした図にしておくと自分でも分かりやすく、これから先の作業がスムーズになります。

ページの幅や高さを決める

ページ全体、それぞれのコンテンツの幅（width）や高さ（height）を決めておきます。
全部作り終わってから「もうちょっと広くすれば良かったな」と思ったりしたら後から修正することも勿論可能です。
ただ、幅や高さの変更を行うと、指定方法によっては合わせて作ってあった画像のサイズやメニューボタンのサイズなどを変更しなければならなくなったりもします。後から手間が増えないように、できるだけ最初に決めたサイズでいきましょう。

px（ピクセル）指定の場合は、指定した数値で幅や高さが固定されます。
レイアウトが崩れないように、少しずつ注意して作る必要がありますが、％指定よりも自分の考えたとおりのレイアウトになるという長所があります。

ページ全体の幅

800pxが妥当と書いてあるサイトもあるのですが、それは皆さんのパソコンのモニタ（画面）がそんなに大きくなく、横800pxのモニタを使っているひとも多かった時代の話です。
今は縦横にモニタは大きくなり、更にワイドタイプなら幅広になっているので、850～1200pxくらいで作っているサイトが多いかと思います。

このブログだと、本文の『コンテンツ』（ここ）が800px、メニューがある右の『サイドバー』が250px、合計で1050pxにしています。
これはこのブログでは手順の解説などの文章もそこそこ多く、あまり横幅を広くすると閲覧している人が左右に文字を追う幅が広くなって目が疲れるかもしれないので、出来るだけ目を動かさなくて済むようにしとこう、ということで程々の広さにしています。
左右のブルーグリーンの部分は背景扱いで、ページ全体の幅として100％を指定してウィンドウの幅に応じて広がるようになっています。

ページ全体の高さ

高さが足りなくて本文が下にはみ出して見えなくなってる、なんてことのないように、100％指定にしておくのががおすすめです。

ファーストビュー

和製英語でファーストビュー、英語では Above the fold といいます。
サイトにやって来た人達が、パッと見で見ることのできる範囲のこと。
基本のメニューボタンなどはこの範囲に収めることが推奨されています。
例えばいきなり大きな写真だけが出てきて、メニューも文章もないサイトとかだと「なんか不親切だしスクロール面倒だから戻ろう」と、すぐに引き返されてしまうかもしれません。
どのくらいの高さで何を配置するか、色々なサイトを参考にじっくり考えてみてください。

弊社のサイトだと高さ600pxをファーストビューと想定して　↓　こんな感じになっています。

レスポンシブ・ウェブデザイン　(Responsive Web Design)

サイトへの訪問者の閲覧環境(ブラウザ幅、画面サイズ)に合わせてサイトコンテンツの幅やレイアウトを自動で最適化するデザインのことです。

SONYさんやSHARPさんもレスポンシブ・ウェブデザインでサイトを作っていますね。
試しに今ご覧いただいているこのブログで、ブラウザ幅を狭くしてみてください。
それに合わせてメニューボタンの幅などが狭くなったり、文章が折り返されたりと流動的に変化します。
PC、タブレット、スマホなどWebの閲覧手段も様々な現在、レスポンシブ・ウェブデザインで作られたサイトは訪問者に優しいサイトと言えます。
レスポンシブ・ウェブデザインを自由自在に扱うにはHTMLやCSSに関するちょっとした慣れも必要かと思いますが、出来るだけ設定しておきましょう。

　※（2015年1月19日追記）※
　Googleさんがモバイルユーザビリティについても検索結果へ反映する判断基準にするようです。
　詳しくはGoogleさんのヘルプ【モバイルユーザビリティ】をご覧ください。
　このため、今からサイトを作るなら最初からレスポンシブ・ウェブデザインで作成したほうが後々の手間も省け、　Googleさんの検索結果でも、より上位に表示されるようになるかもしれません。

　※（2015年3月5日追記）※
　弊社サイトをレスポンシブ・ウェブデザインに対応させました。
　作業の流れや改装については以下の記事をご覧ください。
　スマホ最適化【1】モバイルユーザビリティの問題って？
　スマホ最適化【2】スマホ表示の確認と作業の流れ
　スマホ最適化【3】ビューポート（viewport）の設定
　スマホ最適化【4】メディアクエリー（Media Queries）の設定
　スマホ最適化【5】htmlファイルとCSSファイルを編集