Webサイト制作では、デザインに入る前のワイヤーフレームの確認がとても重要です。
例えば、事業紹介はTOPページに一覧を表示するか、それともシンプルな構成にするのかなど、
クライアントの要望・ユーザー目線の両方を意識しながら情報設計を行なっていく過程があります。
しかし、ワイヤーフレームの段階で、どこをポイントとして確認し、制作会社へフィードバックすれば良いのか分からないという方も多いのではないでしょうか。
特にデザインの確認と混乱してしまうこともあるかと思います。
そこで今回は、ワイヤーフレーム確認時に押さえておきたいチェックポイントを、修正例とあわせて分かりやすく解説します。
これからWebサイト制作を進める方は、ぜひ参考にしてみてください！
なぜワイヤーフレームで確認するか
ワイヤーフレームは、デザイン制作に入る前に「情報の整理」と「認識合わせ」を完了させるための設計図です。
この段階で確認すべきポイントを押さえておくと、
デザイン工程に入ってからの大きな手戻り（レイアウト変更・文言の全面差し替えなど）を防げます。
ワイヤーフレームの「５つ」のチェックポイント
②文章内容に違和感がないかを見る
③コンテンツの順番は良いか、ページ全体の流れを意識する
④見出しやナビメニューの言葉を整える
⑤決まっていれば写真・イラストの挿入箇所を伝える
それでは、今回は不動産事業のワイヤーフレームを例として解説していきます。
例：TOPページワイヤー
※クリックで拡大できます
①セクションコンテンツ（要素）の有り無しを決める
チェックすること
・TOPページに掲載しなくてもいいコンテンツはあるか？
・TOPページに掲載したいのに漏れているコンテンツはあるか？
・各セクションの大きさなどのバランス（訴求したいことが大きく表示されているか？）
よくある修正例
当社の事業にはTOPページで「どのような事業を行っている会社なのか」が一目で伝わる構成にしたい
ビフォーアフター
当初はTOPページではシンプルな事業紹介に留める想定だったが、各事業ごとに個別ページを設ける方向で社内で決定したので、TOPページで詳細事業が見えるようにしたい、となりました。
物件情報がごちゃついて見える。情報量が多い。
ビフォーアフター
TOPではシンプルに見せたいため、「おすすめ物件」「販売中物件」などのカテゴリーは非表示にしました。
各セクションの大きさは現状のままでOK！
②文章の内容
チェックすること
・制作会社が仮で入れた文章で問題ないか？
・修正があればご希望の修正文章を伝える
※文章を元に、イラストや写真選定を行なっていきます。
よくある修正例
サイトの一番初めに見える部分はシンプルで良い。シンプルに一言くらいで良い。
ビフォーアフター
情報量が多いため、代表の企業理念と合うような言葉を使いシンプルなキャッチコピーのみ残しました。
採用情報についても企業理念と合うような言葉を使いたい
ビフォーアフター
全体的に統一感を持たせたいため、企業理念に合うような言葉に文言を変更しました。
③コンテンツの順番は良いか
チェックすること
・それぞれのセクションの上下入れ替えたいものがあるか？
・全体のページの流れの順番を確認する
よくある修正例
会社概要より事業紹介を先に見せたい
ビフォーアフター
事業紹介を一番に伝えたいため、会社概要を採用情報の上に移動させました。
それに伴い、メニューの順番も変更しました。
当社の事業については、リノベーション買取再販事業／不動産流通事業／●●●事業 (新規の投資事業)の順番に変更したい
ビフォーアフター
リノベーション買取再販事業に一番力を入れているため、順番の入れ替えをしました。
その他の順番はこれでOK！
④見出しやナビメニューの言葉の確認
チェックすること
・英字にするか日本語にするかを決める
・言い回しなどを確認する
例：事業概要、事業紹介、サービス、SERVICE、ソリューション・・・等
よくある修正例
メニューは「会社概要」ではなく「当社について」の方が下層ページの内容に合っている
ビフォーアフター
「会社概要」だと少し堅いイメージがあるため、「当社について」に変更しました。
⑤【プラスアルファ】写真を入れたい場所、イラストで表したい場所が事前に決まっていれば指示する。
チェックすること
・写真を入れたい場所の確認
・イラストで表したい場所の確認
※ワイヤー上は写真のグレーのものや図はあくまでも仮で、デザインでも実際に写真が入るとは限りません。
よくある修正例
バナーしたの大きい写真はビルや建物などシンプルなもので良い
該当箇所
シンプルでスタイリッシュなデザインにしたいため、写真も要望に合わせてデザイン段階で挿入する
※デザイン段階で写真なしになる可能性もあるため必ず入れたい箇所は伝える
当社の事業についての各事業は素材で問題ないので写真を使いたい
該当箇所
提供できる写真がないため、素材で写真を挿入する
※デザイン段階で写真なしになる可能性もあるため必ず入れたい箇所は伝える
ワイヤーフレームのチェックポイントまとめ
今回ご紹介したワイヤーフレーム確認時のチェックポイントを振り返りです。
①セクションコンテンツの有無を確認する
②文章内容に違和感がないかを見る
③コンテンツの順番は良いか、ページ全体の流れを意識する
④見出しやナビメニューの言葉を整える
⑤決まっていれば写真・イラストの挿入箇所を伝える
ワイヤーフレームがデザインになるまで
これらの指示内容がすべて反映された段階で、はじめてデザイン制作に進みます。
以下が、最終版のワイヤーフレームです。
また、この最終ワイヤーフレームをもとに、最終的には以下のようなデザインに仕上がります。
まとめ
いかがでしたでしょうか。
ワイヤーフレームの段階でしっかりと確認と擦り合わせを行うことで、
デザイン制作に入ってからの大きな修正や認識の違いを防ぐことができます。
特に、コンテンツの有無や順番、文言の表現などは、ワイヤーの段階で確認しておくことが重要です。
今回ご紹介したチェックポイント例を参考に、
制作会社とのやり取りをスムーズに進めていただければと思います！
ホームページ制作をご検討されている企業様
お見積もりは無料です！ぜひ一度貴社の課題をお聞かせください。
お問い合わせはこちらから
発注までの流れや制作の流れ、公開後の保守についての記事もぜひご覧ください。
