ワイヤーフレームとは？役割や作成のコツなどを紹介！

ホームページ制作の流れの説明の際、「ワイヤーフレームが…」と謎の単語に遭遇した経験はありませんか。

話の流れでなんとなくどういったものか想像できるとしても、ワイヤーフレームを作成する工程を挟むことでどんなメリットがあるのか、その役割などを今回は解説します。

ワイヤーフレームとは

ワイヤーフレームは家でいうところの「設計図」のようなものです。

デザイン性は一切介入させず、設計図をまず作成することで、より結果に繋がるホームページを生み出すことができます。

ワイヤーフレームの必要性

いきなりデザインをするのではなく、なぜワイヤーフレーム作成の工程を挟むのか、その必要性について説明します。

1．必要なコンテンツが必要な箇所に配置されているか確認できる

私たちはホームページ制作を提供していますが、コンペの際などに「まずはデザインを見てから決めたい」と要望をいただくことがあります。どのような完成物が納品されるのか不安なので、お気持ちは大変よくわかるのですが「なんとなくオシャレ」「なんとなくカッコいい」ではホームページに求めるゴールにたどり着くことはできません。

ホームページ制作の目的は以下のように様々です。

• リード（見込み客）獲得
• 店舗誘導
• 資料請求
• 株主へのPR　など

店舗に来て欲しいのであれば、店舗がどこにあるのか、どのようなアクセス方法があるのかをわかりやすくする必要がありますし、株主へPRするのであればサービスが成長していることをわかりやすく理解してもらう必要があります。ユーザーが必要とするコンテンツを用意し、そのコンテンツにスムーズに誘導できるかを考えなければなりません。

「必要な箇所に」という点も大変重要で、例えばヘッダー部分のメニュー考える際、どのページへのメニューを配置し、サービス・料金・会社概要・アクセスなどのメニューの中から、どのページが一番左側に配置されるべきなのかを検討することができます。

ワイヤーフレームを作ることは、デザインという余計な要素を介入させず、コンテンツだけがシンプルに並べられている状態を確認することで、ホームページが必要な役割を果たせているかを確認できるのです。

2．視覚的にページボリュームを確認できる

通常、ホームページ制作時には、最初にサイトマップ（どのようなページがあるか記述したもの）を作成しますが、サイトマップだけでは、そのページのボリュームはわかりません。

例えば会社概要ページを作成する際に考えられるコンテンツとしては、主に下記のようなコンテンツが必要です。

• 会社概要
• 沿革
• 代表あいさつ
• 理念
• 事業所一覧…

創業して数年の会社であれば1ページにまとめてしまっても問題ないかもしれませんが、歴史のある会社では沿革が想像以上に長くなることもあります。

その場合、先にデザインから行ってしまうと「実際にデザインとして見てみると縦に長過ぎるページになってしまっているので、別ページに分けよう」となることがあります。そうなると１からまたデザインをし直さなければいけなくなることもあり、余計な時間やコストが発生してしまいます。（会社概要のページだけでなく、会社概要ページへリンクするメニューやバナーなども修正する必要があります。）

これは私たち制作会社の問題だけではなく、依頼する側も確認のコストを支払っていることになり、両者にとって良くありません。

ワイヤーフレームがあれば、視覚的にページボリュームを確認することで、適切なページ設置ができているかを確認できます。

3．レイアウトが適切か確認できる

先程の会社概要の例のように、ページが想像以上に長くなってしまった場合、サイドバーに設置されているページ内リンクが、その役目を果たさなくなってしまうということも考えられます。

その場合、サイドバーという形式ではなく、追従してページ内リンクメニューが表示されているほうがユーザーにとって便利かもしれません。

他にもタイル型のデザインで進める予定だったものの、実際にコンテンツとして配置してみると、ページの重要度がわかりにくくなってしまいユーザーをゴールに導くことが難しくなってしまうということもわかるかもしれません。

やはりこちらもデザイン制作後の修正は、余分に時間とコストを増やしてしまうことに繋がりますので、ワイヤーフレームの段階で軌道修正をすることでスムーズに制作を進めることができます。

4．アイデアを膨らませたり議論をすることができる

例えば、ページを作成してみたら、思ったよりも簡素で魅力が伝わらないということがあります。

採用ページを例に挙げますと、募集要項や採用担当者のメッセージを掲載してみたものの、これだけではイマイチ会社の魅力が伝わらないのでは…という発見ができることがあります。

そこで平均継続年数や男女比、先輩社員の声、面白い社内制度、一日の仕事の様子、会社のミッションなどのコンテンツを付け加えるかどうかの議論をすることができます。

デザインが入ってしまうと、この写真が、この色が…とデザイン要素に気を取られがちですが、ワイヤーフレームですとコンテンツの確認に集中できます。

ワイヤーフレーム作成のコツ

より良いホームページの完成に繋げるためにはワイヤーフレーム作成のコツを抑えなければなりません。

1．意思決定者にも確認してもらう

ホームページが完成してから「イメージと違う」となってしまっては元も子もありません。余計なコストをかけないためにも、必ず最終意思決定者にも確認してもらうようにしましょう。

その際に「どうしてこのコンテンツがこの場所に配置されているか」などキッチリと説明し、理解を得ておく必要があります。

2．営業など各部署にも確認する

ホームページの目的はリード（見込み顧客）を獲得することなのに、制作の現場に営業担当者がいないことはよくあります。

営業担当者は実際に営業現場でよく聞かれる質問など、担当者にしかわからない有益な情報をたくさん持っています。現行ホームページで不足している箇所を補えるようにしなければなりませんから、なるべく現場の方の話も聞くようにしましょう。

ただし、最終意思決定者はハッキリさせておく必要があります。全ての人の意見を汲み取っていては、本来達成したかった目的を達成できず、何が一番重要なのかあやふやなホームページとなってしまいますので、あくまでも参考適度にヒアリングするのがベストです。

3．エンジニア・コーダーにも確認する

これは社内にエンジニアがいる場合や、制作会社側の話になります。

アニメーションや複雑な仕様のフォームなど、本当にワイヤーフレーム通りに実現できるのかどうか、自社のサーバーやシステムと連携はできるのか、予算内に収まるのか…など確認する必要があります。
仮に予定したアニメーションが実現できなかったとしても、代替案をワイヤーフレーム段階で確認できていれば大きなトラブルに繋がることはありません。

4．デザイン性を持たせない

デザインの要素を排除しているつもりが、細かく作りすぎてしまい、いつの間にかデザイン要素をつい介入させてしまうことがあります。

それでは本来の目的である「デザイン要素を排除した状態で確認する」ということができなくなってしまいますので、注意が必要です。

5．競合サイトと比較する

完成したホームページが競合サイトと比較されることを考えると、競合サイトと比較してワイヤーフレームをチェックしましょう。

競合サイトよりも魅力的に見えるか、自社の強みを打ち出せているか、アピールし足りないことはないか、など新たな気づきを得ることができるかもしれません。

6．スマホでの表示

どの業界においても、今やスマホ対応は必須ですが、特にスマホユーザーが多い業界・業種では、スマホでどのように表示されるかという点も考えた方がいいでしょう。

スマホとパソコンでは、見え方は大きく変わります。パソコンでは魅力的に見えるコンテンツも、スマホでは重くて表示に時間がかかる、何を伝えたいか分かりづらい、文字が小さくて読めない…といったことがありえます。

デザイン時にスマホで最終確認をする必要がありますが、ワイヤーフレームの段階で、コンテンツのボリュームや配置を配慮するとスムーズにデザインが進行します。

7．文章を入れる

ホームページはユーザーに伝えることを目的としますので、文章が重要です。
デザインを排除した状態で、この内容が伝わるかをチェックできるのはワイヤーフレームの段階だけです。
具体的な理念や細かいサービス内容などは全て書けなくても、何文字程度入るのか、どのような内容の文章が入るのかなどを入れることで、コンテンツがユーザーに伝わるかどうかをチェックすることができます。

ワイヤーフレームの作成方法

ワイヤーフレームは基本的にホームページ制作会社が作成しますが、事前に依頼する側が作成しておくことでスムーズに打ち合わせを進めることが可能です。

作成のポイント

ユーザビリティや動線設計など細部のチェックは制作会社の仕事ですが、何をアピールしたいか、何をどう見せたいかなどが決まっている場合には、依頼者がワイヤーフレームで作っておくと、イメージが共有しやすくなります。

また、現サイトがある場合は、アクセス解析を見て課題を洗い出すと、必要なコンテンツがわかります。

作成ツール

作成する際のツールは、デザインであればPhotoshopやIllustratorなどある程度共通したツールやソフトウェアが存在していますが、ワイヤーフレームに決まったものはありません。

制作会社により全く異なるので、いくつかワイヤーフレーム作成でよく見かけるものをご紹介いたします。

• Photoshop
• Illustrator
• AdobeXD
• PowerPoint
• EXCEL

どれが正解ということは特にありません。それぞれメリット・デメリットがありますが、より手軽に扱いやすいツールやソフトウェアを選択するようにしましょう。（他にもブラウザで使える図作成ツールを利用することもあります。）

イメージが伝わればいいのであれば、手書きでも十分です。

ワイヤーフレームはスムーズな意思決定とコスト削減に繋がる

ここまで詳細に説明してきましたが、要するにワイヤーフレームを作成することでスムーズに意思決定をすることが可能となり、やり直し回数を減らすことで時間的にも人件費的にもコスト削減をすることができます。

早くデザインを確認したい気持ちも大変よくわかりますが、より結果の出せるホームページを完成させるために、ワイヤーフレームをしっかり確認することで、満足のいくホームページに仕上がるはずです。