ホームページのワイヤーフレームの作り方

ワイヤーフレームとは、ホームページのデザインを作成する前に作成するサイト全体のすべてのページの線画になります。

ワイヤーフレームを作る理由は、デザインを作成する前に、各ページの要素を確定することになっており、デザインで各ページの要素を確認すると、どうしてもぱっと見の見栄えを意識してしまうので、適切な判断ができなかったり、デザイン修正には時間がかかるので、ホームページ制作の納期を伸ばしてしまうからです。

このワイヤーフレームは、一般的には、Web制作会社が作成するのですが、自分でホームページを制作するや、ワイヤーフレームは自社で作りたいと考える方もいらっしゃると思います。

当ページでは、そのような方に向けて、どのようにワイヤーフレームを作るかを紹介します。

ワイヤーフレームとは何かとお思いの方は、ワイヤーフレームとはのページをご覧ください。

ワイヤーフレームを作る前に、ホームページにあるすべてのページを確認しましょう。

この確認はホームページの成果において重要になり、もし重複しているページがあれば、すべてのページで固有の内容を掲載できるように、統合しなくてはなりません。

一般的にWeb制作会社は、ExcelやGoogleスプレッドシートを利用して、作成するページを表にしていると思い、その表で重複が発生していないかをチェックしましょう。

また、自分でホームページを制作する際にも、感覚的に作成するページを把握するのではなく、重複が発生しないように、必ずExcelやGoogleスプレッドシートを使って、作成するすべてのページを管理していくことがおすすめです。

それぞれのページで掲載する内容をExcelなどの表に書き込むようにしましょう。

ページごとに掲載する内容をExcelで定めていくことで、コンテンツの重複を回避したり、ユーザー目線で見たときのコンテンツの過不足を最適化することが可能になり、高いSEO効果や成約率を実現できる可能性が高まります。

ワイヤーフレームやデザインで確認をすると、どうしてもぱっと見の印象が含まれてしまうので、Excelなどの表を使って文字で把握していくことが大切です。

コンテンツの重複については、必ずしも駄目なわけではありませんが、できる限り各ページで固有のコンテンツのほうが高い成果を発揮できる可能性があります。

Excelなどの表が完成した後、ワイヤーフレームを作るツールを決めましょう。

当社はWeb制作会社になりますが、PowerPointやExcelを利用することが多く、制作実績のホームページでお客さま自身でワイヤーフレームを作っている場合に多いのが、CACOOやExcel、手書きになっています。

ワイヤーフレームの作成ツールは、自分にあったツールであれば、何でもよいですが、ワイヤーフレームを閲覧する人が理解できるワイヤーフレームを作りましょう。

ワイヤーフレームを作るツールが定まれば、実際にワイヤーフレームを作っていきます。

ワイヤーフレームを作る際に注意点があり、初めから完璧なものを作る必要はないという点です。

最初に、各ページのテキストや画像の位置などのレイアウトを作成して、テキストの文字数や画像のサイズは大まかに定めておき、導入するものはダミーで良いと思います。

なぜ、テキストや画像がダミーになっているかと言うと、複数ページのワイヤーフレームを作っていると、作成しているページ以外のページで変更したい箇所が出てくる可能性が高いからです。

そのため、レイアウトを定めるために、全ページのワイヤーフレームを作った後、本番用のテキストや画像を実装していくことが、効率の良いワイヤーフレームの作り方になります。

まとめ

ホームページのワイヤーフレームの作り方を紹介しました。

ワイヤーフレームを作る際に大切になるのは、作る前に、どのようなコンテンツを作成するのかを明確に定めることになります。

各ページで掲載するコンテンツを定めずに、ワイヤーフレームを作ってしまうと、何度も作り直しをしなくてはならないので、お客さまの労力は膨大になってしまいます。

自分でワイヤーフレームを作る方の参考になれば幸いです。