- 公開日： 最終更新日：
ワイヤーフレームとは？ホームページ制作に必須
成果が出るホームページを制作するには、ワイヤーフレームが必須です。
ワイヤーフレームとは、デザインを作成する前の段階で、各ページの要素や大まかな原稿を定めるための線画になっていて、一般的にはWeb制作会社が作成してくれます。
当ページでは、これからホームページを制作する方に向けて、ワイヤーフレームとは何かや、作成する前に知っておきたいポイントを紹介します。
目次
ワイヤーフレームとは
ワイヤーフレームとは、デザインを作成する前に作成するホームページの線画のことを言い、一般的にはWeb制作会社が作成をして、お客さまは確認を行います。
なぜ、デザインを作成する前にワイヤーフレームを作成するかと言うと、デザインで確認をするとぱっと見のデザイン性の良し悪しが影響してしまい、冷静な判断を行うことができないからです。
すなわち、デザイン要素をすべて削除したワイヤーフレームで、各ページに訪問したユーザーに有益なコンテンツが何になるのかを考えることができるのがワイヤーフレームになっています。
また、単に掲載するコンテンツだけではなく、情報の位置も確認することが可能です。
ホームページでは、モニターでコンテンツを読むため、上部から順にページを閲覧していて、ユーザーは左から右にコンテンツを読むので、重要なコンテンツほど左上に配置することが大切です。
ここでもデザイン要素がないことで、各コンテンツの配置を冷静に判断することが可能になり、ユーザー目線のページへと成長させることができるので、高い成果を実現するホームページとなるのです。
このようにワイヤーフレームは、良質なホームページ制作には必須になっており、成果を求めているのであれば、必ず作成しなくてはならないと言えます。
ワイヤーフレームを確認する前に知っておきたいポイント
ワイヤーフレームはページ構成を把握するもの
これまで多くのホームページにワイヤーフレームを提案しましたが、お客さまの中にはワイヤーフレームを確認したときに、イメージが付かないと言われることがあります。
ワイヤーフレームはイメージを付けるものではなく、ページ構成を把握するものになっているので、該当ページにどのようなニーズを持った訪問者が訪れるかを考えながら、適切なコンテンツが配置され、順番に間違いがないかをチェックするものになります。
デザイン案で確認をしても良いのですが、デザイン要素を含めてしまうと、ぱっと見の良し悪しが影響を与えて、適切な判断が行えない可能性が高いです。
そのため、ワイヤーフレームは、ページの構成を把握するためのものであり、イメージを持つものではないと理解しましょう。
原稿を用意した方が良い
完ぺきなものでなくても良いですが、ワイヤーフレームの段階で、原稿を作成するようにしましょう。
ワイヤーフレーム段階で原稿を作成していないと、デザインの完成やテストアップが完了した後に、いざ原稿を作成すると、想定していたよりも、原稿が多くなったり少なくなったりする恐れがあります。
この原稿の変化は、ワイヤーフレームとしては問題がありませんが、デザインで大きな問題になる可能性があります。
せっかくホームページを制作するのであれば、綺麗なデザイン性が良いのは当然だと思うので、デザインの品質を高めるためにも、大体の原稿は作成をしておいて、長さや内容を定めることで、よりユーザー目線のデザイン作成が行えるようになります。
ヘッダーやフッターにも意識を向ける
ワイヤーフレームの確認では、コンテンツだけではなく、普段は訪問者もあまり見ないようなヘッダーやフッターにまで注意を払いましょう。
ヘッダーは、訪問者がブラウザでホームページを開いたときにまず目に入るので、魅力的なロゴやブランドメッセージ、重要なページへの内部リンクがあるグローバルナビゲーションなどの適切な要素を実装しなくてはなりません。
また、フッターは、コンテンツを読んだ訪問者に表示させる箇所になっているので、会社名や連絡先、グローバルナビゲーションに含まなかったページへの内部リンクの設置が必要です。
さらには、ヘッダーもフッターも全ページで共通個所になっているので、重要な文言を含めることによって、どのページに訪れたユーザーにも適切に情報提供が行えるようになります。
ヘッダーやフッターは、お客さまからすると、重要性ではコンテンツのほうが上だと考えてしまい軽視されることがありますが、適切に利用することは、成果が出るホームページ制作において重要な要素になっています。
ホームページのワイヤーフレームの作り方
ホームページで作成するすべてのページを確認
ワイヤーフレームを作る前に、ホームページにあるすべてのページを確認しましょう。
この確認はホームページの成果において重要になり、もし重複しているページがあれば、すべてのページで固有の内容を掲載できるように、統合しなくてはなりません。
一般的にWeb制作会社は、ExcelやGoogleスプレッドシートを利用して、作成するページを表にしていると思い、その表で重複が発生していないかをチェックしましょう。
また、自分でホームページを制作する際にも、感覚的に作成するページを把握するのではなく、重複が発生しないように、必ずExcelやGoogleスプレッドシートを使って、作成するすべてのページを管理していくことがおすすめです。
各ページで必要な要素をExcelなどに書き込む
それぞれのページで掲載する内容をExcelなどの表に書き込むようにしましょう。
ページごとに掲載する内容をExcelで定めていくことで、コンテンツの重複を回避したり、ユーザー目線で見たときのコンテンツの過不足を最適化することが可能になり、高いSEO効果や成約率を実現できる可能性が高まります。
ワイヤーフレームやデザインで確認をすると、どうしてもぱっと見の印象が含まれてしまうので、Excelなどの表を使って文字で把握していくことが大切です。
コンテンツの重複については、必ずしも駄目なわけではありませんが、できる限り各ページで固有のコンテンツのほうが高い成果を発揮できる可能性があります。
ワイヤーフレームを作るツールを決める
Excelなどの表が完成した後、ワイヤーフレームを作るツールを決めましょう。
当社はWeb制作会社になりますが、PowerPointやExcelを利用することが多く、制作実績のホームページでお客さま自身でワイヤーフレームを作っている場合に多いのが、CACOOやExcel、手書きになっています。
ワイヤーフレームの作成ツールは、自分にあったツールであれば、何でもよいですが、ワイヤーフレームを閲覧する人が理解できるワイヤーフレームを作りましょう。
ワイヤーフレームを作る
ワイヤーフレームを作るツールが定まれば、実際にワイヤーフレームを作っていきます。
ワイヤーフレームを作る際に注意点があり、初めから完璧なものを作る必要はないという点です。
最初に、各ページのテキストや画像の位置などのレイアウトを作成して、テキストの文字数や画像のサイズは大まかに定めておき、導入するものはダミーで良いと思います。
なぜ、テキストや画像がダミーになっているかと言うと、複数ページのワイヤーフレームを作っていると、作成しているページ以外のページで変更したい箇所が出てくる可能性が高いからです。
そのため、レイアウトを定めるために、全ページのワイヤーフレームを作った後、本番用のテキストや画像を実装していくことが、効率の良いワイヤーフレームの作り方になります。
まとめ
ワイヤーフレームとは何かや、確認する前に知るべき内容を紹介しました。
成果が出るホームページ制作では、デザイン要素を抜いたワイヤーフレームの作成が必須になり、ワイヤーフレームでページの構成をしっかりと定めることで、よりユーザーフレンドリーなホームページへと成長します。
ホームページ制作中やワイヤーフレーム確認中の方の参考になれば幸いです。
