プロが教えるホームページの作り方その２

前回から始まりました、「ホームページの作り方」。
今回は第２弾でございます。
今回のテーマは「ワイヤーフレーム」を作ることです。
まずは前回の内容をご確認ください。

プロが教えるホームページの作り方その１

前回はページ一覧を洗い出し、エクセルにまとめるところまで作業を行ったかと思います。

ホームぺージを作る上でなかなか重要な「ワイヤーフレーム」

ワイヤーフレームとはページのどの部分にどんな要素を配置するのか？
を図、または絵にしたものです。
サンプルをご覧ください。

弊社の場合ワイヤーフレームはCacooというツールを使用して作成しています。
上記の図はそのCacooのテンプレートです。
参考ツール：Cacoo（カク―）
このCacooは割と簡単に図の作成が可能で、無料版でもいくつかワイヤーフレームの作成ができるようになっています。
使い方などの詳細についてはCacoo（カク―）サイトをご覧ください。
Cacooを使わなくても、エクセルやワードで作成してももちろん構いませんが、
実寸で作成することが面倒になるので、できるだけ実寸で作成できるツールがお勧めです。
Cacoo以外には、今は亡きAdobeのFireWorks（ファイヤーワークス）やもちろんフォトショップやイラストレーターで作成しても良いと思います。

ディレクトリマップからワイヤーフレームに落とし込む

前回作成したディレクトリマップでまとめた内容を今度はこのワイヤーフレームに落とし込んでいきます。
ポイントは出来上がりを想像しながら作成する事です。
一人ですべて作成する場合には、デザインの事、コーディングの事などを考えながら作ることができますが、
もしデザインは別の人、コーディングも別の人がそれぞれ作業をするとなるとワイヤーフレーム作成はより重要な作業となります。

ワイヤーフレームは実寸で作成する

他の制作会社さまや個人で作成される方の場合は知る限りではありませんが、弊社の場合、実寸で作成します。
実際の完成したサイトが横幅1000pxで作るなら、ワイヤーフレームも横幅1000pxで作ります。
デザインを進めるときに、この時点で作成したワイヤーフレームを下敷きにして、そのままデザインを作成できるようにワイヤーフレームを作ります。
今回のワイヤーフレームはPC用が横幅1000pxで、スマートフォンを750pxでそれぞれ作っていきたいと思います。
※横幅については「ウェブサイト　横幅」などで検索をしてみると良いかと思います。
　今回なぜこの横幅にしたのかは割愛しますが、一般的に、アクセスされるモニタの解像度、大手サイトが採用している幅など、いろいろな理由があります。

実際にワイヤーフレームを作成してみる

実際にCacooを使用して作成してみたワイヤーフレームがこちらです。
トップページのPC用となります。

スマートフォンのトップページです。

上の2つのワイヤーフレームは実際にはPC用が横幅1000pxで、スマートフォン用が横幅750pxで作成しています。
これらは場合によりですが、各目次ページや詳細ページまで作りこむこともあります。
次回へ続きます、次回はこれを元にデザインの作成へと続きます。
お楽しみに！