ワイヤーフレームは、Webページのレイアウトを決める設計図。Webサイト制作・アプリ開発に欠かせないものですが、名称は聞いたことがあっても具体的にどのようなものか？イメージの湧かない企業・店舗のWeb担当者の方は多いはず。

・ワイヤーフレームとはどのようなもの？
・ワイヤーフレームはなぜ必要？
・Webデザインとはなにが違う？

そんな疑問を持つ方に向け、ワイヤーフレームの基本・概要を徹底解説！

また、制作会社とイメージを擦り合せるために、ワイヤーフレームを自分で作ってみたいと考える方に向け、ワイヤーフレームの作り方・注意点の概要も紹介します。ホームページ制作の依頼・発注にお役立てください。

※現在、ホームページ制作の依頼を考えている方はWeb幹事にご相談ください。予算や目的などから最適な制作会社を無料で選定いたします。

【無料】ワイヤフレームに詳しい専門家に相談する

ワイヤーフレームとは

レイアウトをシンプルな線・枠で表現した設計図

ワイヤーフレームとは、Webサイト制作におけるワイヤーフレームとは、「Webページのレイアウトをシンプルな線・枠で表現した設計図」のこと。

上の図がワイヤーフレームの完成版です。ワイヤーとは「線・針金・電線」を意味する英単語、フレームとは「枠・骨格」を意味する英単語のこと。サイトを作る場合に、盛り込む要素まで入れていくと上のようになります。

Webページの「なにを（What：テキストやグラフィックなど掲載するコンテンツ）」「どのような（How：コンテンツそれぞれの機能）」「どこに（Where：コンテンツの配置）」を決めます。

ワイヤーフレームは「発注側のニーズ（要件定義）を具体的に視覚化」する役割と、「Webデザインの設計図」という役割を担っているのです。

※ホームページ制作の流れについてより詳しく知りたい方は、以下の記事も参考にしてください。

関連記事：10分で分かるホームページ制作の流れ・期間（元Webディレクターが丁寧に解説）

ワイヤーフレームはWebデザインではない？ ワイヤーフレームは線・枠といったグラフィック要素を使った設計図であり、色合いや文字サイズなどを細かく設計したWebデザインとは別です。ワイヤーフレームは、見た目のデザインよりも、サイトを使うユーザーに使い勝手の良さを与えるための設計が目的です。

実際のワイヤーフレームの事例

Web幹事の過去のWebサイトを例に実際のワイヤーフレームを紹介します。

トップページのワイヤーフレーム

ワイヤーフレーム

実際のWebサイト

お客様の声のワイヤーフレーム

ワイヤーフレーム

実際のWebサイト

よくある質問のワイヤーフレーム

ワイヤーフレーム

実際のWebサイト

ワイヤーフレームは制作会社が作る

Webサイト制作を外注する場合、ワイヤーフレームを作るのは制作会社のPM（プロジェクトマネージャー）もしくはディレクターであることが一般的。これはワイヤーフレームが要件定義以降のWebサイト設計で制作されるからであり、場合によってはデザイナーが担当することもあります。

つまり、発注側のWeb担当者がやるべきことは、制作会社が作るワイヤーフレームをもとに認識のズレを修正して完成イメージを共有し、最終確認すること。通常は自らワイヤーフレームを制作する必要はないといえるでしょう。

ただし、良いサイトにするためには、ワイヤーフレームの修正を依頼することも必要であり、知識を持っておく、もしくは自分でも作れるとサイト制作に役立ちます。

ホームページ制作は、制作会社とのキャッチボールも重要な要素です。

※ここまで読んで、優良ホームページ制作会社に発注したいと考えている方はWeb幹事にご相談ください。最適な会社を無料で選定します。

【無料】ワイヤフレームに詳しい専門家に相談する

ワイヤーフレームはなぜ必要なのか？

「Webサイトに必要な条件が決まったのなら、すぐにデザイン制作に取りかかれば面倒がないのでは？」そう感じる方もいるかもしれません。しかし、ワイヤーフレームはWebサイト制作で欠かすことのできない重要な要素。その理由を2つ説明します。

必要な要素を洗い出せる

ワイヤーフレームというシンプルな設計図を制作することで、足りない情報・要素はないか？ユーザーの使いやすい動線になっているか？などを、デザインに取りかかる前にチェックできます。シンプルなワイヤーフレームなら修正も容易です。

ワイヤーフレームがないままデザインに取りかかってしまうと、制作後に「この要素が足りなかった」「使い勝手の悪いWebページになってしまった」など事態になりがち。

グラフィックを含めたデザインを作り込んでしまった後では、変更・修正は簡単ではありません。やり直しにかかる時間や手間を考えれば、ワイヤーフレームでしっかりとした設計図を制作しておくことが重要なのです。

完成イメージを共有できる

ワイヤーフレームは立場の異なる人々が携わるWebサイト制作時に、完成イメージを共有して認識のズレを擦り合せるために必要です。

特に、Webサイト制作を外注する際は必須だといえるでしょう。ワイヤーフレームがあれば、自社と制作会社間の擦り合わせに有効なだけでなく、完成イメージを制作スタッフ間で共有することで作業もスムーズに進むと期待できます。

【無料】ワイヤフレームに詳しい専門家に相談する

ワイヤーフレームと混同されやすい用語

ホームページ制作を依頼する際、ワイヤーフレームと混同されやすい専門用語が登場して混乱する場合があります。「サイトマップ」「ディレクトリマップ」「デザインカンプ」と「プロトタイプ」の4つは理解しておきましょう。

HTMLサイトマップ

HTMLサイトマップとは、直訳すると「サイトの地図」。サイトを訪問した人や検索エンジンに、そのWebサイトにどのようなページが存在するかを伝えるためのページやファイルです。ワイヤーフレームがページ単体のレイアウトを表すのに対し、サイトマップはWebサイト全体の構成やコンテンツの内容が一覧でわかりやすく記載されています。

後ほど説明しますが、ワイヤーフレームを作る前にサイトマップを作成します。

関連記事：【初心者向け】サイトマップとは｜意味・種類や作り方、事例を分かりやすく紹介！

ディレクトリマップ

ディレクトリマップとは、Webサイトに掲載する情報を一覧にしたものです。サイトマップはサイト訪問者にも見えますが、ディレクトリマップはサイト制作者の間で共有されるもの。エクセルやスプレッドシートなどにまとめて使います。どんな情報が何ページあるのか理解しやすくなります。

デザインカンプ

画像出典：システム幹事

デザインカンプ（Design Comprehensive Layout）とは、Webページの完成見本のこと。設計図であるワイヤーフレームをベースにデザインを作り込み、Webページの色やサイズなどを細かく確認するためのものです。複数のデザインカンプを制作し、もっともイメージに近いものを最終的に採用する場合が一般的です。

プロトタイプ

プロトタイプ（Prototype）とは、Webページ間の画面遷移などのイメージを動的に表現する「試作品」のこと。大規模で複雑なWebサイトで、機能や動作を確認するために制作される場合が多いです。

Web制作会社によってプロトタイプの捉え方は変わるため、どの程度まで試作品を作り込むかはケースバイケースですが、実際に操作してみて問題点を洗い出せるメリットがあります。

【無料】ワイヤフレームに詳しい専門家に相談する

ワイヤーフレームの作り方

ワイヤーフレームは要件定義（お客様の要望をまとめること）の直後、Webサイト設計で制作され、その後のデザイン制作のベースとして活用されることがわかります。

要件定義で定めた情報を、Webサイトにどのように「配置（レイアウト）」するのかを決める設計図がワイヤーフレームの役割。

サイトの完成イメージがハッキリしているのであれば、自分でワイヤーフレームを作成するのも有効です。そんな方に向け、ワイヤーフレームの作り方・注意点の概要を紹介していきます。

情報を整理してサイトマップを作る

まずはWebサイトに掲載すべき情報を洗い出して整理し、サイトマップ（作りたいホームページの全体像）へと落とし込んでいきましょう。具体的な手順は以下の通り。

・Webサイトに必要なページをすべて書き出す
・コンテンツごとにWebページをカテゴリ分類
・Webサイトの階層をツリー構造で作成（サイトマップ）

注意すべきポイントとしては、あまりサイトマップを深くしすぎないこと。ユーザーが目的のページにスムーズにたどり着けるよう、サイトマップはできる限りシンプルに制作することが重要です。

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

関連記事：サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】

ワイヤーフレームを作るページを決める

設計図であるワイヤーフレームは、掲載するすべてのWebページに対して制作するのがベストですが、効率化を図ることも重要。以下の基準に沿って、ワイヤーフレームを作るべきWebページをピックアップしていくのがおすすめです。

・重要度の高いページを優先して作る
・レイアウトの異なるページごとにワイヤーフレームを作る

注意点としては、同じ階層に位置するページであってもレイアウトが異なるのであれば、それぞれにワイヤーフレームを作るべきだということが挙げられます。

Webページのレイアウトを決める

ワイヤーフレームを作成するWebページ、それぞれのレイアウトを大枠で決めていきます。Webサイト・ページにはいくつかの代表的なレイアウトがあり、それぞれユーザーに与える印象や機能性が異なります。自社サイトの目的に応じて最適なレイアウトをベースに、アレンジしていく手法がおすすめです。

もちろん、すべてのページレイアウトを固定する必要はありません。コンテンツに応じてトップページと下層ページのレイアウトを変え、動線を含めたユーザーの使いやすさを考慮することがポイントです。

「カラムレイアウト」など、聞き慣れない専門用語もありますので、それぞれレイアウトについては下記の記事を参考にしてください。

関連記事：ワイヤーフレームの作り方完全ガイド【サンプル付き】

コンテンツ・情報を配置する

最後に、レイアウトに従い、ページごとに必要なコンテンツ・情報を配置してワイヤーフレームを制作していきます。レイアウトを4つの要素に分けてワイヤーフレームを設計していくことがポイントです。

ここまで読まれて、やはり自分ではワイヤーフレームの作成は難しそうと思われた方はプロに依頼しましょう。自社に合う最適な制作会社の選定はWeb幹事にお任せください。

【無料】ワイヤフレームに詳しい専門家に相談する

ワイヤーフレーム・Webデザイン制作に便利なツール

ワイヤーフレーム制作、デザインカンプなどのWebデザイン制作に、これを使わなければならないといった決まりはありませんが、ツールを活用すればより効率的であることも事実。最後に、ワイヤーフレーム・Webデザイン制作に活用できる便利なツールを紹介しておきましょう。

ワイヤーフレーム作成ツール

画像出典：株式会社ヌーラボ

デザイナーが担当するとは限らないワイヤーフレーム制作では、手書きでワイヤーフレームを完成させる方も少なくありませんが、一般的にはMicrosoft Excel、PowerPointなどが活用される場合が多いようです。

操作に慣れているMicrosoft製品であれば、特に新たなスキルを取得する必要もないため、企業・店舗のWeb担当者にもおすすめ。情報量の多いWebページや、階層の深いサイトのワイヤーフレームを作るため、オンライン作図ツール「Cacoo（カクー）」などを活用するケースも増えています。

関連記事：目的ごとにしっかり選べる！おすすめワイヤーフレームツール5選【Web担当者が厳選】

デザインカンプ作成ツール

画像：Adobe XD

Webページの完成見本としてのデザインカンプは、よりビジュアルを作り込んでいくため、Adobe Illustrator、Photoshopなどのグラフィックソフトを活用することが一般的。Adobe XDを活用して、ワイヤーフレームからアニメーション・プロトタイプの作成までを、まとめて行うデザイナーも少なくありません。

プロトタイプ作成ツール

画像出典：figma

UX / UIデザインを兼ねたプロトタイプ制作には、上述したAdobe XDをはじめとしたプロトタイピングツールを活用することが一般的。

macOS / Windowsアプリが用意されるほか、ブラウザでも活用できる「Figma」は、複数デザイナーによるリアルタイム同時編集に対応することで、デザイナーの間でも人気の高いツール。

macOS限定とはなりますが、Adobe XD登場前にデザイナーから親しまれていたのが「Sketch」。デザインツールとしての強力なUIデザイン機能を搭載するほか、プロトタイピング機能も搭載され、クラウド環境で作成したプロトタイプを確認することも可能です。

関連記事：目的ごとにしっかり選べる！おすすめワイヤーフレームツール5選【Web担当者が厳選】

【無料】ワイヤフレームに詳しい専門家に相談する

【参考】ホームページ制作の費用がわかる料金シミュレーター

作りたいホームページをプロに依頼した場合、いくら費用がかかるのか？　

そんな悩みに応えるべく、Web幹事で料金シミュレーターを用意しました。

• サイトの用途（採用サイトなど）
• ページ数
• デザイン
• 機能

ホームページの制作に関する8問に選択するだけで、たった60秒で制作料金が分かります。料金の算出は無料なので、ぜひご利用ください。

【無料】ホームページ料金シミュレーターを使う

ワイヤーフレームまとめ

ワイヤーフレームとはなにか？具体的なイメージの湧かないWeb担当者の方に向け、本記事ではワイヤーフレームの基本・必要性を解説してきました。重要なポイントは以下の3点。

・ワイヤーフレームとはWebサイト・ページの設計図
・完成イメージの共有・Webデザインのベースがワイヤーフレームの役割
・認識のズレを擦り合せて作業をスムーズにすすめるためワイヤーフレームが必要

本文内でも解説したように、Web制作を外注する場合、発注側のWeb担当者がワイヤーフレームを作る必要はありません。ただし、より理想に近いWebサイトを制作するには、発注側も確固としたイメージを描いておくことが重要。本記事を参考に、ワイヤーフレームのポイントを理解しておきましょう。

ホームページ制作をプロに任せたい方へ

これからホームページを作るけど制作会社をなかなか探す時間がない方、探し方が分からない方は、Web幹事にご相談ください。

Web幹事は、あなたに最適な制作会社を「人力で」マッチングするサービス。

実際にWeb制作・運用を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です！

コンサルタントのご紹介 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！

あなたの目的や予算にに合わせて最適な会社をご紹介させていただきます。

ご相談はもちろん無料。紹介された会社に必ず発注する必要はありません。

【無料】ワイヤフレームに詳しい専門家に相談する