Webサイト制作の必要不可欠な要素の中に「ワイヤーフレーム設計」というものがあります。
Web制作におけるワイヤーフレーム作成は、「誰に何を届けるか」をコンテンツにし、情報整理を行う重要な設計行為であり、ターゲットとなる顧客を架空の人物として設定する「ペルソナ作成」や、顧客の購買行動を把握するために用いられる「カスタマージャーニー作成」などに匹敵する要素です。
今回は、プロジェクトの明暗を分けるワイヤーフレームの特徴やWeb制作を加速させるワイヤーフレームを作成する具体的な手順をご紹介します。
Webページを見える化するワイヤーフレームとは？
ワイヤーフレームは、Webサイト設計図であり、ページ上の要素がどのように配置され、どのように機能するかを示すための基本的な描画です。
ワイヤーフレームは、コンテンツのレイアウトを可視化するツールとして使用され、デザイナーやクライアント、開発者がWebページの全体的な構造とフローを理解しやすくします。
そのためWeb制作の初期段階に作成する必要があり、ペルソナやカスタマージャーニーといった要素と並んで設計を進めます。
一般的なWebサイト制作工程では、ヒアリング、設計、デザイン、コーディング、テスト・リリースの手順を踏みますが、ワイヤーフレーム設計は全ての設計の中でも、プロジェクトの早い段階で着手し、コンテンツが詰まるまで設計書をアップデートし続ける、最も重要な中間成果物です。
Webサイトの失敗と成功を分けるワイヤーフレームの違い
具体的なワイヤーフレーム作成の手順を解説する前に、Webサイト制作プロジェクトを失敗に陥れるワイヤーフレームと成功に導くワイヤーフレームの違いをお伝えいたします。
これまで私たちは10年以上Web制作業界に携わり、Webサイト制作を通じて企業の事業支援を行って参りました。私たちが実際の制作現場で肌で感じたプロジェクトの明暗を分けるワイヤーフレームの特徴を理解した上で実践頂くことで、より実用的で効果的な設計書を書くことができるはずです。
ワイヤーフレームのよくある失敗例
Web制作プロジェクトが失敗する場合、設計の段階で失敗していることがほとんどです。
中でも、ワイヤーフレーム設計はWebサイトに直接的に関連しており、完成したWebサイトが満足のいくものではないケースではワイヤーフレーム作成が足りていなかったと疑いましょう。
この記事をご覧頂いているWeb担当者の皆様もWebサイトを外注したご経験のある方であれば、ワイヤーフレームの重要性は気づかれている方が多いのではないでしょうか。それでは、どのようなワイヤーフレームがプロジェクトの明暗を分けるのか、お伝えいたします。
無差別にテンプレートを使っているだけ
Web制作の現場におけるよくある失敗の原因として汎用テンプレートの使い回しが多いように見受けられます。
そのため、Webサイトが他のサイトと差別化できず、企業の独自性や個別性が失われたWebサイトが出来上がることが多いです。特にブランドイメージやユーザー体験は企業により千差万別のはずなのですが、テンプレートを使い回すことでまったく独自性を出すための検討が出来なくなります。
テンプレートを活用する際は、コンテンツ面ビジュアル面含めてテンプレートに使われるのではなく、テンプレートを活用する箇所とオリジナルで個別に作成する箇所を考慮するように注意しましょう。
デザインフェーズにおいてもコンテンツが入っていない
デザインはコンテンツをサポートするためのもので、コンテンツなしにデザインを行うことは非常に難しいです。
特にユーザーエクスペリエンス（UX）デザインの観点からは、「コンテンツファースト」のアプローチが推奨されており、ワイヤーフレームにコンテンツが無い状態でデザインを進めると、最終的にコンテンツがデザインに適合しない可能性があります。
そのため、コンテンツファーストではないワイヤーフレームの場合、効率性の問題が発生しがちです。
デザインが先行し、後からコンテンツが追加されることで、コンテンツがデザインに合わないという事態に繋がり、その結果、デザインを再調整する必要が生じ、時間とリソースの無駄が発生します。
成功するワイヤーフレーム
成功するワイヤーフレームの特徴も失敗するワイヤーフレーム同様、特別なことではなく普遍的なところにあります。
そのため、企業のWeb担当者になったばかりの方がワイヤーフレーム設計を担当する際にも使えますし、Webサイト制作を制作業者に外注するときにも、これからご紹介するポイントを確認しながら進行することで、業者ともスムーズに仕事を行うことができるため、より良い会社のWebサイトを作成できます。
必要なコンテンツを事前に洗い出しできている
コンテンツの洗い出しを行うことで、Webサイトの目的と方向性が明確になります。
Webサイトの方向性が定まると、デザインと開発のプロセス全体を通じて一貫性と効率性を保つことができます。また、コンテンツが明確になると、それに基づいた適切なデザインを作成することが可能になり、全体のパフォーマンス向上に繋がります。
さらに、ユーザーが求めている情報を正確に理解し、それを適切に提供するためにどのようなコンテンツが必要なのかの検討を行えば、ユーザー体験を大幅に向上させることも可能になります。
適切な階層構造が設計されている
適切な階層構造は、ユーザビリティ（使いやすさ）を向上させます。
ユーザーが情報を簡単に見つけられるようにすると、ユーザーエクスペリエンスが向上し、サイトへの訪問者が継続的に利用したくなるWebサイトとなります。また、明確な階層構造は、効果的なナビゲーションを作成する基盤となります。
加えて、適切な階層構造はサイトの検索エンジンランキングを向上させるのにも役立ちます。適切に階層構造が設計されたクローラビリティの高いサイトは、検索エンジンがサイトのコンテンツを理解しやすく、高い評価が得られるためです。
さらに、階層構造の設計はスケーラビリティ(拡張性)へも貢献します。適切に設計された階層構造は、サイトが成長して新しいコンテンツや機能が追加されたときに、それらを自然に組み込むことができるため、効率的にサイトを拡張できます。
階層構造の設計はサイトマップ作成のフェーズで検討します。サイト構造が一目瞭然！Web制作に必須のサイトマップ作成の記事で適切な階層構造設計に役立つ情報を掲載しておりますので、ワイヤーフレーム設計の前にぜひ取り組んでみてください。
コンテンツが全て入った状態でデザインへ渡される
ワイヤーフレーム設計書は中間成果物であるため、どこまで設計書として落とし込むかは企業や担当者によって異なります。
エニィでは、コンテンツファーストの考え方からコンテンツが全て入った状態でデザイナーへ渡すことを徹底しておりますが、デザイナーからの評判もよく、「コンテンツが全て入った状態でタッチしてくれるため、やるべきことに集中できる」と好評頂いています。
ただし、一つだけ注意点があります。
ワイヤーフレームにコンテンツがすべて入った状態だと、デザイナーの創造性に制限をかけてしまう場合があります。ワイヤーフレーム設計では、コンテンツ設計とレイアウト設計も含まれており、レイアウトはデザインの領域です。
デザインについては、デザイナーに任せた方が品質の良いものを創ることができるため、仕事を渡す際に、デザイン検討の上で必要であればレイアウトは変更して良いことを忘れずに伝えましょう。
Web制作をスムーズにするワイヤーフレーム作成の手順
それでは、サイトマップ設計が完了している前提でワイヤーフレーム作成の手順をお伝えします。
この記事でご紹介するワイヤーフレーム設計の手順はブログ用だけではなく、実際に私たちがWeb制作を進める場合も、同じ手順で作成しているため、とても実践的であることを保証します。
事前に必要な情報をヒアリングで洗い出す
最も重要なコンテンツ(情報)を重点的に洗い出してみましょう。
ページの優先度の高いものでいうと以下のページに必要なコンテンツはワイヤーフレーム作成の着手前までにピックアップできていると良いです。
- TOPページ
- サービスページ
- 理念やMVVなどの企業の独自性をアピールするページ
この段階では、やりたいこと、発信したいことを中心に情報の発散を心がけましょう。何を発信するべきかを考えるとSEO対策や集客に頭を悩ませることになり、結果的に独自性のないありふれたWebサイトになってしまうため、まずはラフに願望でも構わないので、本当に発信したいと思える情報をメモやマインドマップを使いながら洗い出していきましょう。
競合サイトのワイヤーフレームを参考にしてプロトタイプを作成する
コンテンツの洗い出しがある程度でき次第、実際にワイヤーフレームを作成してみましょう。
ワイヤーフレームを作成する際は、競合サイトのワイヤーフレームを真似るととても速く使えるプロトタイプを作成することができます。似たような業界の場合、検討することが似ているため、すでに世の中に出ているWebサイトから成功例を取り入れながら効率的にプロトタイプを作成できます。
この段階では、プロトタイプであり、全てのコンテンツを作成する必要はありませんので、品質よりも速さを意識して作成して下さい。
洗い出した情報とプロトタイプを基にワイヤーフレームを詰める
各ページの見出しや各セクションの見出し、写真のイメージを設計書に書き込みましょう。
事前に洗い出した情報と競合サイトを比較しながら、また必要な情報を洗い出したり、プロトタイプを編集していきます。この段階で発信したいことと発信すべきことやオリジナルのコンテンツに差し替えする箇所とほとんど真似る箇所を検討し、ワイヤーフレームの完成度を上げ、洗練させていきます。
完成度は以下の図を参考にしてみてください。
コンテンツ制作をワイヤーフレーム設計と平行して進める
ワイヤーフレーム設計と平行して、コンテンツ(中身)の作成も合わせて進めましょう。
ワイヤーフレーム設計書として完成させるにあたり、もっとも時間の掛かる工程がこのコンテンツ制作、いわゆるコピーライティングです。コンテンツはワイヤーフレーム設計が見出しや本文の方向性が決められたものから作成します。
中小企業のWebサイトの場合、ブログや事例などの更新コンテンツを除いても10〜20ページのボリュームとなることが多いです。
大企業ほどではありませんが、それなりにボリュームがあるため、全ページのワイヤーフレーム設計の完成を待ってコンテンツ制作を着手すると、プロジェクト全体の進行が遅くなり、非効率となります。コンテンツ制作が進められるところからライティングを開始し、コンテンツをワイヤーフレームに入れてみて、再度ブラッシュアップをかけていきます。
コンテンツをワイヤーフレーム設計書に投入してデザイナーへ渡す
コンテンツの制作が完了しましたら、作成したコンテンツをワイヤーフレームに投入します。
制作業者によっては、ワイヤーフレームと原稿のドキュメントが別で用意されている場合もありますが、エニィでは一元管理を推奨します。
これもデザイナーの負担を減らし、パフォ−マンスを向上させるために必要な作業であると捉えており、ディレクターやコンテンツ制作者がワイヤーへの流し込みを行います。また、この段階で各ステークホルダーに対してもコンテンツに関する合意を取ることも完了させましょう。エニィのご支援してきた企業様の中ではデザインを見てからコンテンツの判断もしますと仰るお客様もいらっしゃいますが、この点はデザインの前工程で大きな変更はできないことを必ず合意を取り付けます。
何度も繰り返しますが、デザインはコンテンツをサポートするためにあり、コンテンツがデザイン前に決まっていないのはリスクが大きすぎるためです。
以上の工程をもって、ワイヤーフレーム設計を完了とします。
まとめ
いかがでしたでしょうか。ここまでWeb制作を加速させるワイヤーフレーム作成についてお伝えしてきました。最後に簡潔にここまでの内容をまとめます。
- 無差別にテンプレートを使っているだけ
- デザインフェーズにおいてもコンテンツが入っていない
- 必要なコンテンツを事前に洗い出しできている
- 適切な階層構造が設計されている
- コンテンツが全て入った状態でデザインへ渡される
これらのポイントに気をつけながら、下記の手順でワイヤーフレームを作成します。
- 事前に必要な情報をヒアリングで洗い出す
- 競合サイトのワイヤーフレームを参考にしてプロトタイプを作成する
- 洗い出した情報とプロトタイプを基にワイヤーフレームを詰める
- コンテンツ制作をワイヤーフレーム設計と平行して進める
- コンテンツをワイヤーフレーム設計書に投入してデザイナーへ渡す
最後までお読みいただきありがとうございました。私の記事が少しでも御社のWeb制作プロジェクトのお役に立てれば幸いです。
お問い合わせ
資料ダウンロード