ページレイアウトのワイヤーフレームをCacooで作成する

作成するホームページのコンテンツマップやサイトマップの作成で、全体像が見えてきたら、ここからは実際のページのデザインを作成していきます。

とは言っても、いきなりHTMLを書き始めたりグラフィックソフトを使ってパーツを作っていく工程ではなく、まずはワイヤーフレームを作成して大まかなレイアウトを決めていきます。

レイアウトデザインとページ幅を決める

まずはどういったレイアウトのデザインにしていくかを決めます。

カラム（段組み）をいくつ使うか・全体の幅をどうするかなど、ホームページ全体に関わる要素はあとから修正するのはとっても難しいので、あらかじめきちんと決めておかないといけません。

具体的には以下の3つのレイアウトが一般的だと思いますので、3つの中からイメージに合ったレイアウトをチョイスすれば良いと思います。

ページ全体の幅については、なかなか難しい所です。

まず、メニューにどういった要素を入れるかによって、メニューカラムの幅が変わります。

メニュー用のカラムに「幅300ピクセルの広告バナー」を設置したい時には、最低でも300ピクセルの幅を持たせる必要がありますし、そういったバナーなどは設置しない予定なら、200ピクセルくらいでも良いと思います。

メニューの幅に合わせるようにメインコンテンツのカラム幅も決めていく必要がありますが、メインカラムの幅はあまり広いと文章が読みにくくなったりしますし、狭すぎても窮屈になってしまいます。

だいたいの目安としては、ページ全体の幅が800ピクセル〜900ピクセルの間で、メニューが300ピクセル・メインが500ピクセルくらいが、文章も読みやすくちょうど良い感じかもしれません。

まずはざっくりと決めて次のステップに進みましょう。

実際にレイアウト・デザインをCacooで作ってみる

だいたいどういったレイアウトにするかを決めたら、次にホームページに設置する要素を決めていきます。

Cacoo（カクー）という無料のサービスを使うと、レイアウトデザインがものすごく簡単に、かつ柔軟に出来ます。

下の画面は、このホームページのレイアウトデザインを作成していた時のデータです。（初期稿なのでまったく違うものになっていますが・・・）

Cacooでは四角形などの基本的な図形を使って、ホームページ上の大まかなパーツを設計していきます。
各パーツごとのサイズもピクセルで指定する事ができますので、実際の大きさ感をつかむこともできます。

ある程度Cacoo上でホームページのレイアウトが出来上がったら、PNG形式でファイルを出力してブラウザで表示させてみましょう。ブラウザで表示させることで、ホームページの完成形をリアルにイメージをする事ができますので、各要素の大きさとかを確認して微調整を繰り返していきます。

この段階ではレイアウトのデザインが固まればOKです。
TOPページだけでなくカテゴリページや記事のページなどのレイアウトデザインも、同じようにして固めていきます。

「役にたった」と思ったらシェアお願いします