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

   2015/03/06   icon-clock-o読了時間:約8分46秒

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

 目次 

構成を決める
  ∟ページの段落構成(カラム)を決める

必要なページを考える

ページの幅や高さを決める
  ∟ページ全体の幅
  ∟ページ全体の高さ
  ∟ファーストビュー
  ∟レスポンシブ・ウェブデザイン

構成を決める

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

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

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

ページの段落構成(カラム)を決める

段落構成
普段ご覧いただいているサイトを思い浮かべていただくと、大体のサイトに共通して
一番上には画像やロゴがあり、左右どちらか、もしくは両方にメニューバーがあり、
真ん中には本文、一番下には会社名やコピーライト表記があると思います。
こうした段落構成=段組のことを『 カラム 』と呼びます。
4種類のカラム
①と②はメイン/サイドバーの2カラム、
③はメイン/サイドバー2本の3カラム、
④はサイドバーが無いので特にカラムとは呼ばれません。

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

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

必要なページを考える

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

下記はサイト構成の一例です。
ページの構成
これを実際のサイト表示のようにメニューに割り振ってみます。

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

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

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

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

ページ全体、それぞれのコンテンツの幅 (width) や高さ (height) を決めておきます。
全部作り終わってから 「 もうちょっと広くすれば良かったな 」 と思ったりしたら
後から修正することも勿論可能です。
ただ、幅や高さの変更を行うと、指定方法によっては合わせて作ってあった画像のサイズや
メニューボタンのサイズなどを変更しなければならなくなったりもします。
後から手間が増えないように、できるだけ最初に決めたサイズでいきましょう。
サイト構成
px(ピクセル)指定の場合は、指定した数値で幅や高さが固定されます。
レイアウトが崩れないように、少しずつ注意して作る必要がありますが、
%指定よりも自分の考えたとおりのレイアウトになるという長所があります。

ページ全体の幅

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

このブログだと、本文の『 コンテンツ 』(ここ)が800px、
メニューがある右の『 サイドバー 』が250px、合計で1050pxにしています。
左右のブルーグリーンの部分は背景扱いで、ページ全体の幅として100%を指定して
ウィンドウの幅に応じて広がるようになっています。

ページ全体の高さ

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

ファーストビュー

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

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

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

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

SONYさんやSHARPさんもレスポンシブ・ウェブデザインでサイトを作っていますね。
試しにブラウザ幅を狭くしてみてください。
それに合わせてメニューボタンの幅などが狭くなったり、文章が折り返されたりと流動的に変化します。
PC、タブレット、スマホなどWebの閲覧手段も様々な現在、
レスポンシブ・ウェブデザインで作られたサイトは訪問者に優しいサイトと言えます。

レスポンシブ・ウェブデザインを自由自在に扱うにはちょっとした慣れも必要かと思うので、
今のところは『 そういうのもあるのか・・・ 』と参考にしていただく程度で。

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

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

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket