ワイヤーフレームとは？定義や基礎から作り方まで徹底解説！

ホームページ作成の上で重要な「ワイヤーフレーム」。制作工程の初期に作成しその後の進行にも影響する大切な要素です。
今回はワイヤーフレームについて、

について、図解も交えながら解説していきますので、ぜひワイヤーフレーム作成の参考にしてください。

なお、ホームページ作成をご検討なら、Wepageをご検討ください。

ワイヤーフレームを一言でいうなら、Webサイトのレイアウトを示す設計図です。

また、ワイヤーフレームと混同されがちな3つの項目があります。

ワイヤーフレームとの違いについてそれぞれ見ていきましょう。

１-１．ディレクトリマップ

ディレクトリマップは、Webサイト内にある全てのページの

をまとめた一覧表を指します。

１-２．デザインカンプ

デザインカンプは、Webサイトのデザインを完成させた見本を指します。

ワイヤーフレームは、あくまでコンテンツの配置やレイアウトを決めるものです。
上記に加えて、画像や配色をどうするかなど、具体的な完成形まで作るのがデザインカンプとなります。

また、デザインカンプと同義でモックアップという言葉を使う場合もありますが、言葉の意味に大きな違いはありません。

１-３．サイトマップ

どちらも、ターゲットに向けてサイトを認識しやすくするために用意するものです。
そのため、デザインやレイアウトを決めるワイヤーフレームとは趣旨が異なります。

サイトマップについて詳しく知りたい方は、以下の記事を参考にしてください。

参考： SEOに強いサイトマップの作り方【XMLとHTMLの仕組みを解説】

ワイヤーフレームはなぜ必要なのか気になる方も多いでしょう。
そこで、ワイヤーフレームの役割と目的について解説します。

２-１．完成イメージや作業の共有に使う

ワイヤーフレームの役割は、完成イメージや作業の共有です。

また、完成イメージに沿っているからこそ修正も少なく済むため、ワイヤーフレームは全体の進行に大きな影響を与えます。

２-２．企画・制作の議論に活用できる

ワイヤーフレームは企画・制作の議論に活用できるのも大きな役割です。

基本的にワイヤーフレームは配色や画像などを用いず、線と文字だけのいわゆるラフ画で作られます。
そのため、

など、アイデアを出しながら議論するのに最適です。

２-３．Webサイトのレイアウトを決定する

ワイヤーフレームの大きな目的は、Webサイトのレイアウトを決定する点です。

レイアウトはWebサイトの見た目に関わる重要な部分のため、事前に型を決めておく方がスムーズに作業が進みます。
その際、必要なコンテンツを先に洗い出しておき、レイアウトを組み立てていく方がワイヤーフレームは作りやすいです。

３-１．必要な項目の書き出し（ピックアップ）

まずは、ページごとに必要な項目を書き出していく作業です。

上記を参考にしながら、自社ホームページに必要な項目は思いつく限りリストアップしていきましょう。

参考： Webサイト構築とは？手順や考え方、費用を紹介

３-２．関連項目のグループ分け（グルーピング）

必要な項目を書き出した後、必要に応じて関連するもの同士をグループ分けします。

３-３．表示の優先度を決定（ランキング）

ピックアップとグルーピングが終わったら、表示の優先度を決めていきます。

３-４．レイアウトの決定

情報をまとめられたら、Webページのレイアウトを決定する作業です。

参考： ホームページの構成を考える！ページの作り方を解説

また、Webページの中には、場所によって名称や設置すべきコンテンツがあります。
レイアウトを決める上で、名称を覚えておくのは重要なので、この機会に覚えておきましょう。

ヘッダー

Webページの上部を指し、ユーザーが一番目にする箇所です。
基本的には、ブランドやサイトのイメージとなる

以上の項目を挿入し、ユーザーに興味・関心を持たせます。
ヘッダーの部分は非常に重要な部分なので、慎重に作り込んでいきましょう。

フッター

Webページの下部を指し、ユーザーにとってさほど必要ではないものの、全体を見ると重要な情報を掲載しているケースが多い部分です。
例えば以下のような項目があります。

また、掲載しているコンテンツを分かりやすくカテゴリ分けし、フッターに掲載するのもいいでしょう。

グローバルナビゲーション

グローバルナビゲーションは、どのWebページを開いても表示されるメニューバーのような役割を果たします。
Webサイトにおいて重要なカテゴリをグローバルナビゲーションに設置しておき、どのページからでも開けるようにする箇所です。

例えば、以下のような項目が掲載されています。

上記のように、ユーザーが必要な情報を把握し、グローバルナビゲーションに設置しておきましょう。

サイドバー

メインとなるコンテンツの左あるいは右に設置するメニューバーのような箇所です。
よくブログやオウンドメディアで設置されており、以下のような項目を組み込んでいるのを見かけます。

サイドバーがあると、ユーザーが現在見ているページから、他へ遷移する際の補助が可能です。

といったユーザーの興味に合わせてサイドバーを考えていきましょう。

３-５．手書きでラフ案の制作

レイアウトが決まったら、実際に手書きでラフ案を制作していきます。
最初はざっくりと紙に手書きで配置やレイアウトを書いていきましょう。

ワイヤーフレームは、ユーザーの視線や気持ちを一番に考えて制作すべきです。
例えば、Webページを見る際のユーザーの視線には法則があります。

上記の法則からわかるように、大切な項目は左上に配置すると、多くのユーザーの目に入るようになります。
以上をふまえて、1ページ内に詰め込むボリュームも検討しながらラフ案を制作していきましょう。

３-６．ツールを用いて清書

手書きでワイヤーフレームを制作し、形が完成してきたらツールを用いて清書をします。
ワイヤーフレームは自分だけでなくクライアントや社内のメンバーにも共有するため、データ化しておくと便利です。

また、清書をデータ化しておけば、類似のWebページ制作の際に活用できるので、積極的にツールを使って蓄積しておきましょう。

４-１．正しい手順で進める

ワイヤーフレームは正しい手順で進めなければ、後々の作業工程に支障が出る場合があります。
特にどのコンテンツを組み込むか曖昧にしていると、

などの理由で、結果的に修正が多くなる可能性が高いです。

そのため、今回ご紹介した作り方をもとに、必要な項目をチェックしながらワイヤーフレームを作成しましょう。

４-２．時間をかけて作り込みすぎない

よくありがちなのが、ワイヤーフレームを作る際に時間をかけすぎることです。
ワイヤーフレームはあくまでラフ案なので、具体的なレイアウトのイメージを伝えるに留めておきましょう。

色やデザインなどの具体的な要素を入れると、クライアントに先入観を与えてしまいかねません。
「本当は青色がよかった」「この部分は少しこだわりたかった」などの要望が聞き出しにくくなるので注意が必要です。

あくまでモノクロのシンプルなものに留め、他の優先すべき業務に時間を使うようにしましょう。

４-３．作成の優先順位

ワイヤーフレームをどのページから作るのか、優先順位は明確にしておくべきです。
基本的には、以下のようなページから優先して作るのがいいでしょう。

上記ページのワイヤーフレームを優先して作っておけば、その後の作業効率はよくなるはずです。

４-４．競合サイト・人気サイトの分析を忘れない

レイアウトのアイデアが浮かばない状態でワイヤーフレームを作り始めても、思うように進みません。

その場合は、競合サイトや人気サイトを分析して、コンテンツの配置や注目の集め方などを分析しましょう。
ワイヤーフレームで独自性を出さずとも、デザインによって異なる印象を与えられます。

そのため、あまりワイヤーフレーム時点では差別化にこだわりすぎないようにする点も意識しておきましょう。

４-５．スマホ・PCそれぞれのワイヤーフレームを作る

Webサイトの表示はスマホ・PCで異なるため、それぞれでワイヤーフレームを作っておかなくてはいけません。

最近ではスマホでWebサイトを見るユーザーも増えてきているため、レイアウトが崩れてしまわないように配慮が必要です。
また、デザインやレイアウトがスマホに対応しているかは、検索エンジンの評価対象にもなっています。

ワイヤーフレームを作る際は、必ずスマホ・PCどちらも作るようにしましょう。

ワイヤーフレームを作成する際に、便利で効果的なツールがいくつかあります。
そのうち、今回は3つ厳選してご紹介しますので、気になる方は参考にしてください。

５-１．Adobe XD

Adobe XDは、ワイヤーフレームだけでなくデザインカンプも作りやすく、多くのユーザーが愛用しているツールです。

ワイヤーフレーム作成時に便利な機能が豊富に揃っており、クラウド上で共有ができる利便性の高さがあります。
クライアントや社内メンバーと複数でプロジェクトを進める場合には、非常に役に立つツールの1つでしょう。

５-２．CACOO

CACOOはリアルタイムで作業を共有しやすいオンライン作図ツールで、ワイヤーフレーム制作にも最適です。

メンバーの編集履歴を残せるだけでなく、コメントやチャット、ビデオ通話ができるため、作業しながらフィードバックもできます。
テンプレートも豊富にあるため、レイアウトに行き詰まることも少なくなるでしょう。

共同作業をするメンバーが多数いる場合におすすめのツールといえます。

５-３．Googleスプレッドシート

Googleが提供しているスプレッドシートでもワイヤーフレーム作りは可能です。

他のツールと違い、Googleアカウントがあれば無料で使い続けることができます。
ただし、基本的な機能しかないので、作業効率で考えると他のツールの方が利便性は高いでしょう。

コストを抑えてワイヤーフレームを作っていきたいと考えているなら、Googleスプレッドシートがおすすめです。

もしこれからホームページの作成をお考えなら、弊社が提供している「Wepage」を推奨いたします。

Wepageは、プログラミングの知識不要で誰でも簡単にホームページが作れるサービスです。
デザインテンプレートも2万種類以上あるため、業種やブランドイメージごとに最適なものを見つけられます。
フリープランは無料で始められるコストパフォーマンスのよさも魅力です。

Wepageでは無料プランをご用意しておりますので、まずはお気軽にご利用ください！

今回はワイヤーフレームの定義や基礎、作り方について徹底解説しました。
ワイヤーフレームはWebサイトを制作する上で重要な役割を持っています。

本記事を参考に、ホームページやWebサイトを効率よく制作するための正しいワイヤーフレームの作り方を覚えていきましょう。