ワイヤーフレームとは？｜初心者向けに作り方やおすすめツールを解説

WEBサイトやアプリの制作でよく耳にする「ワイヤーフレーム」。

名前は知っていても、「何のために作るの？」「デザインカンプとは何が違うの？」と疑問に感じている方も多いのではないでしょうか。

制作をスムーズに進めるためには、最初の設計がとても重要です。

しかし、どこから手をつければよいのか分からず、手探りで進めてしまっている方も少なくありません。

そのような状況でも、適切な手順で準備を行うことで、作業効率や完成度は大きく向上します。中でもワイヤーフレームは、その後の工程に大きな影響を与える重要なステップです。

そこで本記事では、以下の内容についてわかりやすく解説します。

これからWEB制作を学びたい方や、実際にワイヤーフレームを作成する予定の方は、ぜひ参考にしてください。

ワイヤーフレームとは

ワイヤーフレームとは、WEBサイトやアプリを制作する前に作成する「設計図」のことです。

ページ内にどの情報を掲載するのか、どの順番で配置するのかを整理し、サイト全体の骨組みを決める役割があります。

ここでは、まずワイヤーフレームの基本を理解するために、以下のポイントについて解説します。

これからWEB制作を学ぶ方はもちろん、初めてサイト制作に携わる担当者の方も、ぜひ参考にしてください。

ポイント1：ワイヤーフレームを作る目的

ワイヤーフレームを作る目的は、WEBサイトに必要な情報を整理し、制作メンバー全員で完成イメージを共有することです。

特にワイヤーフレームには、次の3つの役割があります。

例えば、ワイヤーフレームを作らずにデザイン制作へ進むと、後から「この情報が足りない」「配置を変更したい」といった修正が発生することがあります。

特にWEB制作では、デザイナーやエンジニア、ディレクターなど、多くの人が同じプロジェクトに関わります。そのため、完成イメージや情報の優先順位を事前に共有しておくことが欠かせません。

設計段階で情報を整理し、ワイヤーフレームとして可視化しておくことで、関係者全員が同じ認識を持った状態で制作を進められます。

ワイヤーフレームは、こうした認識のズレや手戻りを防ぐための重要な設計図と言えるでしょう。

ポイント2：ワイヤーフレームは誰が作る？

ワイヤーフレームは、主にWEB制作会社のディレクターやデザイナーなどが作成します。

特に多いのは、サイト全体の設計や進行管理を担当するディレクターが主導するパターンです。サイト全体の構成や情報設計を整理し、必要に応じてデザイナーやエンジニアと確認しながら内容をブラッシュアップしていきます。

ワイヤーフレームは、サイト制作の目的や必要な条件を整理したあとに作成されることが一般的です。

例えば、

といった内容を整理し、その結果をもとにページ構成を設計していきます。

また、ワイヤーフレームは一人で完結するものではありません。

制作現場では、ディレクターを中心にデザイナーやエンジニアが意見を出し合いながらブラッシュアップを重ねます。

早い段階で認識を揃えておくことで、後工程での修正や手戻りを減らせるでしょう。

ポイント3：ワイヤーフレーム、デザインカンプ、モックアップ、プロトタイプの違い

WEB制作では、ワイヤーフレームとあわせて「デザインカンプ」「モックアップ」「プロトタイプ」といった言葉が使われます。

それぞれ役割が異なるため、違いを理解しておきましょう。

これらは役割が重複しているわけではなく、WEB制作の工程に応じて使い分けられます。

特にワイヤーフレームは、制作工程の最も早い段階で作成する設計図です。

ここでページ構成や情報の優先順位を整理しておくことで、その後のデザイン制作や開発をスムーズに進められます。

一方で、それぞれの役割を混同したまま制作を進めると、本来は構成を確認する段階で見た目の議論に時間を使ってしまったり、デザイン確認後に情報設計の見直しが必要になったりすることがあります。

そのため、WEB制作では「今どの工程で、何を確認するべきなのか」を意識しながら進めることが重要です。

それぞれの役割を理解して使い分けることで、認識のズレや手戻りを防ぎ、効率的に制作を進められるでしょう。

なお、「デザインカンプ」「モックアップ」については、以下の記事でも詳しく解説しています。こちらもぜひ参考にしてみてください。

あわせて読みたい

デザインカンプとは？作成手順や失敗しないためのコツを解説 「デザインカンプとワイヤーフレームってどう違うの？」「デザインカンプってどうやって作ったらよいの？」 WEBデザイナーを目指す中で、このような悩みを抱える方もい…

あわせて読みたい

モックアップとは？ワイヤーフレームとの違いや作り方・ツールを徹底解説 「モックアップとは何？」「ワイヤーフレームとの違いが分からない」 モックアップはWEB制作でよく使われる言葉ですが、似た用語も多く、役割や使い分けがわかりにくい…

ワイヤーフレームの作り方｜6ステップ

ここでは、ワイヤーフレームを作成する基本的な流れを6つのステップに分けて解説していきます。

ワイヤーフレームは、いきなり線や枠を書き始めるのではなく、目的や情報を整理してから作成することが大切です。

順番に進めることで、初心者でもワイヤーフレームを作成しやすくなるでしょう。

STEP1：ページの目的とターゲットを決める

ワイヤーフレームを作る前に、まずはページの目的とターゲットを明確にしましょう。

目的やターゲットが曖昧なまま作り始めると、必要な情報やレイアウトの判断軸がブレてしまいます。

たとえば採用サイトを作る場合、「企業の魅力や働く環境をしっかり伝えたい」のか「応募や説明会への参加につなげたい」のかで、掲載すべき内容は変わります。

最初に整理しておきたい項目は以下の通りです。

この段階で、ターゲットに近い人へヒアリングできると、より具体的な情報を集められます。

目的とターゲットを決めておくことで、ワイヤーフレーム作成中に迷ったときの判断基準になるでしょう。

STEP2：競合サイトをリサーチする

ページの目的とターゲットが決まったら、競合サイトをリサーチします。

競合サイトを見る目的は、単にデザインを真似することではありません。

同じテーマのページで、どのような情報が掲載されているのか、どの順番で構成されているのかを把握するためです。

リサーチでは、以下のような点を確認しましょう。

たとえば採用ページなら、社員インタビューや働く環境、募集要項への導線がよく使われます。

ただし、競合サイトをそのまま真似する必要はありません。

競合リサーチの目的は、業界でよく使われる構成やユーザー導線を把握することです。

そのうえで、自社の強みやページの目的に合わせて設計へ落とし込むことで、オリジナリティのあるワイヤーフレームを作成できます。

STEP3：掲載するコンテンツを整理する

競合サイトのリサーチが終わったら、ページに掲載するコンテンツを整理します。

この段階では、まだ細かいレイアウトを決める必要はありません。まずは、ページに入れたい情報を箇条書きで洗い出しましょう。

たとえば採用サイトのトップページなら、以下のようなコンテンツが考えられます。

コンテンツを洗い出したら、似た情報をグループに分けます。「会社について」「働く人について」「応募について」のように分類すると、ページ全体の構成を考えやすくなります。

また、この段階で不要な情報も整理しておきましょう。

すべてを1ページに入れようとすると、ユーザーが知りたい情報にたどり着きにくくなります。必要な情報を選ぶことも、ワイヤーフレーム作成では重要です。

STEP4：コンテンツの優先順位を決める

掲載するコンテンツを整理したら、次に優先順位を決めます。

WEBページは、上部ほどユーザーの目に入りやすい場所です。そのため、ページの目的に直結する情報や、ターゲットが最初に知りたい情報を上の方に配置します。

優先順位を決めるときは、以下の観点で考えると整理しやすくなります。

たとえば採用サイトであれば、企業理念や社員の雰囲気を知りたい人もいれば、募集職種をすぐ確認したい人もいます。

どの情報をトップページで見せ、どの情報を下層ページへ誘導するのかを考えることが大切です。

優先順位が決まると、ワイヤーフレーム上で情報を配置する順番も見えてきます。ここで情報の流れを整えておくと、ユーザーが迷わず読み進められるページになるでしょう。

STEP5：ページレイアウトを設計する

コンテンツの優先順位が決まったら、ページレイアウトを設計します。

レイアウト設計では、どの情報をどの位置に置くのかを大まかに決めます。最初からきれいに作る必要はなく、手書きのラフや簡単な図で問題ありません。

WEBページには、主に以下のような要素があります。

レイアウトを考えるときは、スマートフォンで見たときの表示も意識しましょう。PCでは横並びにできる情報でも、スマホでは縦に並ぶことが多くなります。

また、重要なボタンや導線は目立つ位置に置くことが大切です。

ページの目的に合わせて、ユーザーが自然に行動できる流れを設計しましょう。

STEP6：要素を詰めながら清書する

最後に、ラフで作ったレイアウトをもとに、ワイヤーフレームを清書します。

清書では、図形や枠を使って要素を整えながら、必要に応じてテキストや画像の位置も具体化していきます。

色や装飾にこだわる必要はありませんが、実際に入れる見出しやボタン文言を入れておくと、完成後のイメージを共有しやすくなります。

清書で入れておきたい要素は以下の通りです。

作成には、FigmaやAdobe XDなどのデザインツールを使うと便利です。簡単なワイヤーフレームであれば、PowerPointやExcelでも作成できます。

大切なのは、誰が見ても構成を理解できる状態にすることです。

要素を配置した理由もメモしておくと、関係者への説明や修正対応がスムーズになります。

ワイヤーフレーム作成におすすめのツール5選

ここでは、ワイヤーフレーム作成におすすめのツールを5つご紹介します。

ワイヤーフレームは手書きでも作成できますが、デザインツールや資料作成ツールを活用すると修正や共有がしやすくなります。

近年は、複数人で同時編集できるクラウド型ツールや、AIによる作成支援機能を搭載したツールも増えてきました。

まずは、それぞれのツールの特徴を一覧表で確認してみましょう。

ワイヤーフレームの作成におすすめツール5選

ツール1：Figma（フィグマ）｜特におすすめ

Figmaは、WEB制作業界でもよく利用されているデザインツールのひとつです。

また、複数人で同じファイルを同時編集でき、ディレクターやデザイナー、エンジニアがリアルタイムで意見を出し合いながら作業を進められる点も魅力です。

さらに、近年は「Figma AI」によるワイヤーフレームの自動生成機能も登場しています。

ラフ案やアイデア出しの効率化にも役立つため、初心者から制作会社まで幅広く利用されています。

Figmaの詳細情報

ツール2：Adobe XD（アドビ エックスディ）｜※新規の販売終了

Adobe XDは、Adobe社が提供していたUI・UXデザインツールです。

PhotoshopやIllustratorを利用している人にとって操作感が近く、Adobe製品を使い慣れているデザイナーから高い支持を集めていました。

ワイヤーフレームだけでなく、デザインカンプやプロトタイプまで一貫して作成できる点も強みです。

現在は新機能の追加が終了し、単体販売も終了しています。ただし、既存ユーザーの利用は継続されており、今でも制作現場で使われるケースは少なくありません。

Adobe XDの詳細情報

ツール3：Miro（ミロ）

Miroは、アイデア出しから情報整理まで幅広く活用できるオンラインホワイトボードツールです。

付箋を画面上に配置しながらアイデアを書き出し、整理していく形で使えるため、ワイヤーフレーム作成前のブレストや情報設計との相性も優れています。

また、複数人でコメントを残しながら編集できるので、認識のすり合わせがしやすい点も魅力です。

「Miro AI」によるレイアウト生成機能も追加されており、簡単な指示文からワイヤーフレームのたたき台を作成できます。

Miroの詳細情報

ツール4：PowerPoint（パワーポイント）

PowerPointはプレゼン資料作成ツールですが、ワイヤーフレーム作成にも活用できます。

図形やテキストボックスを配置するだけで作成できるため、デザインツールに慣れていない人でも導入しやすい点が特徴です。

また、完成したワイヤーフレームを印刷して確認したい場合にも向いています。

一方で、複雑なレイアウトや大規模サイトの設計では管理が難しくなるため、シンプルなサイトや小規模案件向きと言えるでしょう。

PowerPointの詳細情報

ツール5：Excel

Excelも、ワイヤーフレーム作成でよく利用されるツールのひとつです。

セルの枠線を活用することで、ページ構成を視覚的に整理できます。特に、企業サイトや業務システムなど、情報量の多いページ設計との相性が良いでしょう。

一方で、複雑なレイアウトや細かなデザイン表現には向いていません。

また、共有先の環境によって表示が崩れる場合もあるため注意が必要です。

Excelの詳細情報

ワイヤーフレーム作成に使えるテンプレートサイト3選

ワイヤーフレーム作成に使えるテンプレートサイトを３つ紹介します。

どれも豊富なテンプレートが揃っています。

想定しているレイアウトに近いテンプレートを選べば、初心者でも手軽にイメージ通りのワイヤーフレームを作ることができますよ。

Edraw（エドラ）

世界で2,500万人以上のユーザーが使用しているEdraw社の作図ツール。

フローチャート、マインドマップ、ガントチャート、組織図、間取り図など様々な図を作ることができます。

シンプルなものやおしゃれなものまでテンプレート・図形が豊富で、効率よく作図できます。

こちらからPDF 形式やEDDX形式で無料ワイヤーフレームサンプルをダウンロード、ベクター編集することが可能です。

Edraw社公式サイト

Sketch（スケッチ）

WEBデザインをする際に役立つ、UIデザインを設計するためのツール。

企画書などを作成する際にも使えるため、ワイヤーフレーム作成にも適しています。

操作も直感的にわかるようになっており、簡単に使うことができます。

Macのみ対応ですが、公式サイトで30日間お試し版を無料でダウンロードできます。

公式サイト

Wires（ワイヤーズ）

wires.jpは、AdobeXDのwiresを日本向けに再構築したワイヤーフレームUIキットです。

UIパーツ、レイアウトパターン、端末サイズ別アートボードなど、ワイヤーフレーム作成時に利用頻度の高い要素を厳選して入れています。

端末サイズ別アートボードにレイアウトパターン、UIパーツを配置することで素早くフレームワークの作成ができます。

wiresはadobeのサイトからダウンロードすることができます。

公式サイト

ワイヤーフレームを作るときの注意点

ワイヤーフレームは、ただページの骨組みを作ればよいわけではなく、押さえておきたい注意点があります。

後工程での手戻りや認識のズレを防ぐためにも、次の4つを意識しましょう。

これらを意識することで、情報設計の精度が高まり、その後のデザイン制作や開発もスムーズに進められます。

注意点1：デザインにこだわりすぎない

ワイヤーフレームでは、色や装飾などのデザインにこだわりすぎないことが大切です。

ワイヤーフレームの役割は、デザインを作ることではなく「情報設計」を行うことにあります。

作成を進めていると、「ボタンの色はどうするか」「写真はどんな雰囲気にするか」といった議論に発展しがちですが、ワイヤーフレームの段階では必要ありません。

まずは、以下の要素を整理することを優先しましょう。

色や装飾まで作り込んでしまうと、後から構成変更が発生した際に修正コストが大きくなります。また、デザイナーの発想や表現の幅を狭める原因にもなりかねません。

ワイヤーフレームは、シンプルな線や枠を使った「設計図」として作成することを意識しましょう。

注意点2：各要素を配置する理由や根拠を明確にする

ワイヤーフレームでは、「なぜその場所に配置したのか」を説明できる状態にしておくことが重要です。

例えば、「なんとなく目立つ場所に置いた」という理由では、関係者との議論が主観的な意見に偏ってしまいます。

根拠を言語化しておくことで、レビュー時の議論が建設的になります。

また、サイト公開後の効果測定でも、「どの仮説が正しかったのか」「どこを改善すべきか」を判断しやすくなります。

ワイヤーフレームは感覚ではなく、ユーザー視点の根拠をもとに設計することが大切です。

注意点3：レビューと修正を繰り返せるように作る

ワイヤーフレームは、一度で完成させようとせず、レビューと修正を繰り返すことが重要です。

実際のWEB制作では、ディレクターやデザイナー、エンジニア、クライアントなど、多くの関係者が内容を確認しながらブラッシュアップしていきます。

レビュー時には、特に次の観点を確認しましょう。

初回のワイヤーフレームで完成するケースは多くありません。

むしろ、修正を前提としてシンプルに作り、フィードバックを受けながら改善していくことが、成果につながるWEBサイト制作の近道です。

レビューと改善を重ねることで、ワイヤーフレームの完成度は着実に高まっていきます。

注意点4：できる限り完成時のテキストを入れておく

ワイヤーフレームには、「見出し」や「お問い合わせはこちら」といったダミーテキストではなく、できる限り実際に使用する予定のテキストを入れておくことが重要です。

実際の文章を入れることで、情報量や視線の流れ、コンテンツ同士のつながりを確認しやすくなります。

特に、次のようなポイントはダミーテキストでは判断が難しくなってしまいます。

実際のテキストを入れておくことで、クライアントや制作メンバーとの認識共有もスムーズになります。

もちろん、制作初期の段階ですべての原稿を完成させる必要はありません。

しかし、主要な見出しやCTA（お問い合わせボタンなど）は、できる限り完成形に近い内容を入れておくことで、その後のデザイン制作やコーディングを円滑に進められるでしょう。

ワイヤーフレームに関するよくある質問

最後に、ワイヤーフレームに関してよく寄せられる質問と、その回答をまとめました。

まとめ｜ワイヤーフレームは良いWEBサイトを作るための設計図

本記事では、ワイヤーフレームの基本的な役割から作り方、おすすめツール、作成時の注意点までを解説してきました。

ワイヤーフレームは単なる下書きではなく、WEBサイトやアプリ制作において方向性を定めるための重要な工程です。

あらかじめ構成や導線を整理しておくことで、制作全体の効率が上がり、関係者との認識のズレも防ぎやすくなります。

WEBデザインの現場では、見た目の美しさだけでなく、ユーザーにとって使いやすい構造を考える力が求められます。

そのため、ワイヤーフレームの理解と実践は、WEBデザイナーとして成長するうえで欠かせないスキルのひとつです。

もし、ワイヤーフレームだけでなく、WEBデザイン制作全体の流れや実践的なスキルを学びたいと感じた方は、【逆算式ロードマップセミナー】がおすすめです。

未経験からWEBデザインを学び、在宅で月20万円を目指すための道筋を学べます。