【ホームページ成功に必須】ワイヤーフレームの役割と重要性について初心者向け完全解説

どうも、ウェブ企画パートナーズの竹内です。

今回は「ワイヤーフレーム」について、解説していきたいと思います。ワイヤーフレームの重要性や効果、そもそもどうして作るのか、といった背景も含めてお話ししますね。

これからホームページを作ろうと思っている方、新しくWeb担当者になった方、あるいは新人デザイナーやディレクターの方など、様々な方がいらっしゃると思います。ワイヤーフレームは、ホームページの制作において無くてはならない工程の一つですので、初心者向けに1から丁寧に解説したいと思います。

プロ仕様！内部SEOセルフチェックツール

あなたのウェブサイトが検索エンジンで上位表示されるために重要な内部SEO対策。このセルフチェックツールを使えば、簡単な質問に答えるだけで、サイトの改善点が見つかります。

あなたのホームページのSEOは健康度はどれくらい？ 今すぐチェックして、アクセスアップを目指しましょう！

今すぐチェックする >

ワイヤーフレームとは？Webサイトの「設計図」です

まず、「ワイヤーフレームとは？」というところからお話しします。

一言でいうと、ワイヤーフレームはWebサイトの「設計図」のようなものだと考えていただければと思います。ホームページ、つまりWebサイトは、よく「お家」に例えて説明されることが多いんです。そのお家で言うところの、設計図にあたるのがワイヤーフレームなんですね。

ワイヤーフレームってどんなもの？

「そもそも家の設計図って、なんで必要なんだっけ？」と考えてみると、ワイヤーフレームの重要性も、いろいろと納得がいくかと思います。

まだ見たことがない方のために、ワイヤーフレームがどんなものか簡単にご説明しますね。すごく簡単に描く会社もあれば、詳細に書く会社もあって、どこまで役割を求めるかは会社によってクオリティが変わってきます。

一般的には、まずページの全体像を示す四角があり、その中に「ここにロゴがありますよ」とか、「ここにお問い合わせボタンを設置しますよ」といったように、要素の配置を簡単な線や箱で示していきます。さらに「ここにキャッチコピーを配置して、最初に強みを1、2、3と説明しまして…」というのを、ページの下の方まで作っていきます。

これを全ページ分作っていくことになるのですが、このようにデザインをする前に、まず「こんな感じのWebサイトを作りますよ」という、骨組みとなる設計図を作る。それがワイヤーフレームと呼ばれています。

お家の設計図の場合は、建築基準法などに則っているか、ここの長さは何メートルか、といったことまで厳密に決めますよね。ホームページの場合はそこまで厳密ではありませんが、どこに何が配置されるかを示す、いわば簡素な設計図として、デザイン制作の前の段階で作られるのが一般的です。

なぜ作るの？ワイヤーフレームが担う3つの大きな役割

では、なぜこんなものを作るのでしょうか。

お家のことで考えてもらえば分かる通り、いきなり家は建てられませんよね。「こういうお家を作る予定だから、じゃあ木材がこれくらい必要だね」とか「キッチンはこういうのを購入しないと」とか、そういう計画があって初めて進められます。いきなり「あんな感じの家が建てたいから、よし、作り出そう！」とはならないはずです。

ホームページも全く同じで、デザインをする前に、大体どんな感じのものを作るのかをあらかじめ決めておくことで、様々なメリットが生まれるんです。

役割その1：サイトの骨格を決める「設計図」

ワイヤーフレームは、先ほどから何度も言っている通り、まず「設計図」としての役割を果たします。具体的には、サイトの構造・レイアウト、階層、そして機能を視覚的に表現していきます。

ページの構造とレイアウトを決める

ページの構造やレイアウトとは、例えば「一番上にロゴがあって、その隣にお問い合わせボタン、次にキャッチコピーが来て、その下に強みが来ますよ」といったように、上から順番にどんな要素でページが作られているのかを決めることです。これを最初に固めることで、ページ全体の骨格が明確になります。

サイト全体の階層を視覚化する

次に「階層」です。ホームページは通常、トップページの下にサービスページや料金ページがあり、さらにその下に詳細ページがある、といったツリー型の階層構造になっています。

ワイヤーフレームがあれば、この階層構造を視覚的に理解することができます。例えば、トップページにあるお問い合わせボタンを押したら、1つ下の階層である「お問い合わせページ」に移動するんだな、ということが直感的にわかるようになるのです。

具体的な「機能」の仕様を明確にする

そして3つ目が「機能」です。機能というと少し幅が広くて想像しづらいかもしれませんが、例えば「お問い合わせフォーム」を思い浮かべてみてください。

フォームを送信する前に、「個人情報の保護方針（プライバシーポリシー）に同意するかどうか」というフローがありますよね。この同意のさせ方一つとっても、実はいくつかのパターンが考えられます。

例えば、チェックボックスがあって「プライバシーポリシーに同意する」にチェックを入れて送信するパターン。あるいは、リンクを押すとプライバシーポリシーのページが別途用意されていて、そちらを読んでもらうパターン。はたまた、同意チェックの前に小さなスクロールできるボックスがあって、その中でポリシーを読んでもらうパターンなど、様々です。

このように、同じ「同意する」という機能ひとつとっても、その見せ方や実装方法は変わってきます。「こういう機能を付けましょう」と口頭で合意していても、具体的にどう実装されるのかをあらかじめワイヤーフレームで視覚化しておくことが、非常に重要になるのです。

役割その2：認識のズレを防ぐ「コミュニケーションツール」

ワイヤーフレームは、コミュニケーションの面でも非常に重要な役割を果たします。

先ほどの「プライバシーポリシーへの同意」の例で言うと、合意していたはずなのに、いざワイヤーフレームで見てみたら「思ってたのと全然違う！」となることがあります。「こんな同意のさせ方じゃなくて、もっと別の方法を想定していたのに…」といった具合です。

制作会社側が「ああ、いつものやつね」と想定していたことと、クライアントが想定していたことが、実は違ったということが、ワイヤーフレームによって明らかになります。こうしたコミュニケーションのズレを修正していく上で、ワイヤーフレームは欠かせません。

他にも、例えば「トップページで強みを3つ紹介しましょう」と決まっていたとします。しかし、クライアントから「いや、うちの強みは3つじゃない。20個ぐらいあるんだよ」という話になったらどうでしょう。さすがに20個をそのまま載せるわけにはいきませんから、「では、見出しを分けながら強みを説明していきましょうか」といった具体的なすり合わせができますよね。

このように、やることは決まっていても「具体的にどうやるか？」という部分の認識をすり合わせることができるのが、ワイヤーフレームの大きな利点です。

結果として「手戻り」を劇的に削減できる

こうしたすり合わせを行うことで、結果的に「手戻り」を削減できます。

よくあるのが、ワイヤーフレームを飛ばしていきなりデザイン案を作ってしまうケースです。確かにリニューアルするなら、オシャレでカッコいい今時のホームページにしたいという気持ちはよく分かります。ですが、まだやりたいことの詳細を話し合えていない段階で作ったデザインは、ほぼ役に立たないことが多いんです。

なぜなら、後から「ここにキャッチコピーを置くデザインだったけど、やっぱりいきなりお問い合わせフォームを置いた方が良くない？」といった話になる可能性が十分にあるからです。そうなると、せっかく作ったデザインが無駄になってしまいます。

無駄な工数が一度発生すれば、そこには当然人件費がかかり、結果的に費用が上がってしまいます。費用はなるべく増やしたくないですよね。それは制作会社も同じ気持ちです。だからこそ、手戻りを削減するために、まず設計図であるワイヤーフレームをしっかり確認し、機能や構造の段階で認識のズレをなくしておくことが重要なわけです。

役割その3：ユーザー体験を高める「UX向上」

最後に、ワイヤーフレームはUX、すなわち「ユーザーエクスペリエンス」を向上させる役割も担っています。

UXとは、サイトに訪れたユーザーがどういう経験・体験をするか、ということです。このユーザー体験をより良いものにするためにも、ワイヤーフレームは役に立ちます。

みなさんも、こんな経験はありませんか？ 気になることがホームページに書いてあって、それをもっと詳しく知りたいと思ったのに、リンクがどこにも見当たらない。「くまなく探しまわって、こんなところにあったのかい！」みたいなことって、ご経験あると思うんですよ。

これは、ワイヤーフレームの段階での計画が少し甘かった可能性が高いです。他にも、一覧ページから詳細ページに移動した後、また一覧ページに戻りたいのに「戻る」ボタンがない、といったこともユーザーにストレスを与えてしまいます。

ユーザーは想像以上に面倒くさがり屋で、少しでもストレスを感じるとすぐに離脱してしまいます。そうならないように、少しでもおもてなしをすることが非常に重要になるのです。

ユーザーが求める「情報の配置」を考える

UXの向上において、もう一つ重要なのが「情報の配置」です。

例えば、サイトのメインビジュアルのすぐ下に「強み1・2・3」と説明があったとします。でも、大半のお客さんが知りたいのは強みなんかじゃなくて「価格」だったとしたらどうでしょう。その価格がページのずっと下の方にあったら、「このサイトには価格が書いてないな」と思われて離脱されてしまいますよね。

だからこそ、「価格を一番上に持ってくるべきなんじゃないか」といった議論を、デザインに入る前の段階で行う必要があります。情報の配置次第で、お問い合わせ率は相当変わってきます。ユーザーがスムーズに情報を受け取れるように、どこに何を配置するかを事前に決めるのが、ワイヤーフレームの重要な役割なのです。

まとめ：なぜデザインの前にワイヤーフレームが重要なのか

長々と解説してきましたが、ワイヤーフレームがなぜ重要か、お分かりいただけたでしょうか。

制作会社に依頼した際に、なぜワイヤーフレームをしっかり確認しなければいけないのか。それは、この初期段階でのすり合わせを怠ると、後で「話が違う！」と大揉めになる可能性があるからです。

制作者側からしても、いきなりデザインして「いやいや、そうじゃない」となることは本当に多いんです。ワイヤーフレームを作っていても、そういうことは起こります。その時、「きちんとワイヤーフレームの重要性を説明できていなかったからだ…ワイヤーフレームの時に言っておいてくれれば…」と痛感させられるわけです。

また、発注するお客様の側からしても注意が必要です。最初にクールでカッコいいデザイン案が出てきて、「これイメージ通りだな！」と満足してしまうと、肝心な情報が置き去りになってしまうことがあります。ユーザーは雰囲気やブランディングも感じ取りますが、最終的には情報を受け取らないと購入やお問い合わせには至りません。

その結果、「カッコいいのに、全然お問い合わせが来ないんだけど」という事態に陥る可能性があるのです。

だからこそ、まずデザインという要素を取っ払った、一見するとダサい状態の設計図で、「ちゃんと上から必要な情報が伝えられているか」「お客さんがサイトに訪れた時に迷わないか」をフラットな気持ちで考える。そのための役割として、ワイヤーフレームは非常に重要なのです。

プロ仕様！内部SEOセルフチェックツール

あなたのウェブサイトが検索エンジンで上位表示されるために重要な内部SEO対策。このセルフチェックツールを使えば、簡単な質問に答えるだけで、サイトの改善点が見つかります。

あなたのホームページのSEOは健康度はどれくらい？ 今すぐチェックして、アクセスアップを目指しましょう！

今すぐチェックする >