ワイヤーフレームとは?Webサイト制作・アプリ開発に必須のページ設計図を解説【2024年最新版】

ワイヤーフレームとは?Webサイト制作・アプリ開発に必須のページ設計図を解説!

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

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

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

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

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

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

目次
  1. 1. ワイヤーフレームとは
    1. 1-1. レイアウトをシンプルな線・枠で表現した設計図
    2. 1-2. 実際のワイヤーフレームの事例
    3. 1-3. ワイヤーフレームは制作会社が作る
  2. 2. ワイヤーフレームはなぜ必要なのか?
    1. 2-1. 必要な要素を洗い出せる
    2. 2-2. 完成イメージを共有できる
  3. 3. ワイヤーフレームと混同されやすい用語
    1. 3-1. HTMLサイトマップ
    2. 3-2. ディレクトリマップ
    3. 3-3. デザインカンプ
    4. 3-4. プロトタイプ
  4. 4. ワイヤーフレームの作り方
    1. 4-1. 情報を整理してサイトマップを作る
    2. 4-2. ワイヤーフレームを作るページを決める
    3. 4-3. Webページのレイアウトを決める
    4. 4-4. コンテンツ・情報を配置する
  5. 5. ワイヤーフレーム・Webデザイン制作に便利なツール
    1. 5-1. ワイヤーフレーム作成ツール
    2. 5-2. デザインカンプ作成ツール
    3. 5-3. プロトタイプ作成ツール
  6. 6. 【参考】ホームページ制作の費用がわかる料金シミュレーター
  7. 7. ワイヤーフレームまとめ
    1. 7-1. ホームページ制作をプロに任せたい方へ

ワイヤーフレームとは

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

ワイヤーフレーム完成版

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

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

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

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

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

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

ワイヤーフレームはWebデザインではない? ワイヤーフレームは線・枠といったグラフィック要素を使った設計図であり、色合いや文字サイズなどを細かく設計した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サイトの制作工程

概要

1.要件定義・サイト設計

制作するWebサイトに求められる条件を整理して定義。

それをもとにWebサイトの設計図(ワイヤーフレーム)を制作

2.デザイン制作

設計図をもとにWebデザイナーがデザイン制作

3.コーディング・実装

完成したデザインをもとにプログラマがコーディング、

エンジニアが機能を実装する

4.テスト

完成したWebサイトが要件を満たしているかテスト

5.リリース・運用

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幹事 コンサルタント 岩田真 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

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

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

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

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


Q. ワイヤーフレームとは何ですか?

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