ワイヤーフレームとは？LPの作り方・テンプレートと無料ツールを解説

ワイヤーフレームとは、Webサイトやアプリの画面に「何を・どの順番で・どこに置くか」を線と箱だけで示した設計図です。色や写真を決める前に情報の配置と流れを固めるために作り、LP（ランディングページ）なら上から読む順にセクションを並べた1枚の縦長の図になります。

この記事では、ワイヤーフレームの意味、デザインカンプやプロトタイプとの違い、LPのワイヤーフレームの作り方とテンプレート、無料で使えるツールを順に説明します。ツールの料金や無料プランの内容は各社の公式ページで確認したものです（2026年10月15日確認）。

ワイヤーフレームとは

ワイヤーフレーム（wireframe）は、もともと「針金（wire）で組んだ骨組み（frame）」という意味です。Web制作では、ページのレイアウトを灰色の箱と線、仮の見出しだけで表した図を指します。日本語では「ワイヤー」と略されることもあります。

ワイヤーフレームで決めるのは次のようなことです。

• ページにどんな情報（見出し、画像、本文、ボタン、フォーム）を載せるか
• それぞれをどの順番・どの位置に置くか
• どれを大きく、どれを小さく見せるか（優先度）
• ボタンを押したらどのページへ進むか（導線）

逆に、色・フォント・写真の雰囲気といった「見た目」はこの段階では決めません。見た目を入れると、関係者の意見が配色や画像の好みに集中してしまい、本来確認したい「情報の並びは正しいか」が議論されにくくなるからです。

サイトマップ・デザインカンプ・プロトタイプとの違い

成果物	何を示すか	作るタイミング
サイトマップ	サイト全体のページ構成と階層	最初（ページ一覧を決める段階）
ワイヤーフレーム	1ページ内の情報の配置と優先度	サイトマップの後、デザインの前
デザインカンプ	色・文字・画像を入れた完成見本	ワイヤーフレームが固まった後
プロトタイプ	クリックして画面が切り替わる試作品	操作の流れを確かめたいとき

ワイヤーフレームの細かさには幅があり、手書きの走り書き程度のものを低忠実度（ローファイ）、実際の文言や画像の大きさまで入れたものを高忠実度（ハイファイ）と呼ぶことがあります。最初は粗く作り、合意が取れたら細かくしていくのが進めやすい順番です。

ワイヤーフレームを作るメリット

手戻りが小さくなる

デザインやコーディングが終わってから「この情報は上に置くべきだった」と気づくと、作り直しの量が大きくなります。箱と線だけの段階なら、並べ替えは数分で済みます。

関係者と同じ絵を見て話せる

依頼者・デザイナー・エンジニアが文章だけでやり取りすると、頭の中の完成形がそれぞれ違ったまま進みがちです。ワイヤーフレームがあれば「このボタンはどこに置くか」を同じ図を指して決められます。

コーディングの見通しが立つ

エンジニアにとっては、どの部品が何回繰り返し出てくるか、スマートフォンでどう並び替わるかを事前に把握できる資料になります。HTMLの構造（見出しの階層やリストにする部分）もワイヤーフレームから決めやすくなります。

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

LP（ランディングページ）は、広告や検索から来た人に1ページで商品やサービスを説明し、申し込みや問い合わせといった1つの行動につなげるページです。上から順に読まれることを前提に、セクションの並びを設計します。

ステップ1：目的と読み手を決める

最初に「このLPで読み手にしてほしい行動は何か（資料請求、無料体験の申し込み、購入など）」と「誰が、どんな状況でこのページに来るか」を1〜2行で書き出します。ここが曖昧なままだと、載せる情報を選べません。

ステップ2：載せる情報を書き出して並べる

伝えたい情報を付箋やテキストで全部書き出し、読み手が知りたい順に並べ替えます。よく使われるのは次のような流れです。

LPワイヤーフレームのテンプレート（セクション構成例）

順番	セクション	載せる内容の例
1	ファーストビュー	一言で伝わる見出し、補足の一文、メイン画像、最初の申し込みボタン
2	悩み・課題	読み手が抱えている困りごとを箇条書きで
3	解決策	商品・サービスが何をしてくれるのか
4	特徴・選ばれる理由	3つ前後に絞った特徴（アイコン＋見出し＋短い説明）
5	根拠	実績、導入事例、資格や受賞など、事実で示せるもの
6	料金・プラン	料金表、含まれる内容
7	利用の流れ	申し込みから利用開始までのステップ
8	よくある質問	申し込み前に不安になりやすい点への回答
9	最後の申し込み	ボタンやフォーム（ページ途中にも同じボタンを置く）

この並びは「何の話か→自分に関係あるか→なぜ信用できるか→いくらか→どうすればいいか」という読み手の疑問の順番に沿ったものです。すべてのLPに当てはまるわけではないので、商品に合わせて削ったり入れ替えたりしてください。根拠のセクションには実際にある実績だけを載せ、まだ実績がない段階なら無理に作らず省くのが原則です。

ステップ3：箱と線で配置する

セクションの並びが決まったら、それぞれを箱で描きます。画像は×印を入れた四角、本文は横線、ボタンは角丸の四角、といった簡単な記号で十分です。見出しだけは仮でも実際の文言を入れておくと、情報の優先度が伝わりやすくなります。

ステップ4：スマートフォン版も描く

パソコンで横に並べた要素が、スマートフォンでは縦に積み重なります。広告から来る人の多いLPでは、スマートフォンで最初に見える範囲に何が入るかを必ず確認しましょう。パソコン版とスマートフォン版を並べて描いておくと、コーディングのときにも迷いません。

ステップ5：レビューして直す

関係者に見てもらい、「この順番で読んで申し込みたくなるか」「必要な情報が抜けていないか」を確認します。直すのは今がいちばん安いタイミングなので、遠慮なく並べ替えます。合意が取れたらデザインカンプの作成に進みます。

無料で使えるワイヤーフレームツール

ツール	無料で使える範囲（公式ページの記載）	向いている人
Figma	無料の「スタータープラン」あり。ドラフト数無制限、UIキットとテンプレートを利用可	ワイヤーフレームからデザイン、プロトタイプまで1つのツールで進めたい人
Miro	Freeプランは編集可能なボードが3件まで（ボードの作成・共有自体は無制限）	付箋で情報を洗い出す段階から、チームで共同作業したい人
draw.io	無料、アカウント登録不要。ソースコードはApache 2.0ライセンス	登録せずにすぐ描きたい人、図をファイルとして手元に保存したい人
Cacoo	一部機能に制限のあるフリープランあり。有料のスペースプランは30日間無料で試せる	日本語の画面とサポートで使いたい人
Balsamiq	無料プランはなく、14日間の無料トライアル（クレジットカード不要）。手書き風のワイヤーフレーム専用ツール	見た目に気を取られず、粗いワイヤーフレームを素早く作りたい人

Figmaには無料のワイヤーフレームキット（無料オンラインワイヤーフレームキット）も公開されており、LPの部品を組み合わせて作り始められます。料金やプランの内容は変わることがあるため、使い始める前に各公式ページで最新の条件を確認してください。

ツールを使わず、紙とペンで描くのも立派な方法です。最初の構成案は手書きで素早くいくつも描き、方向が決まってからツールで清書する、という使い分けもよく行われます。

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

最初から細かく作り込まない

最初からピクセル単位で整えると、作った本人が直すのを惜しむようになります。初期の段階では粗さを残し、並びと優先度の確認に集中しましょう。

ダミーテキストに頼りすぎない

本文が全部ダミーだと、実際の文章が入ったときに長さが合わず、レイアウトが崩れることがあります。見出しや料金など大事な部分は、仮でも実際に近い文言を入れておきます。

決めたこと・決めていないことを書き添える

「この画像は差し替え予定」「ボタンの文言は未定」といったメモを図の横に書いておくと、デザインやコーディングの担当者が判断に迷いません。

ワイヤーフレームからコーディングへ

ワイヤーフレームの箱は、そのままHTMLの要素の区切りになります。セクションごとに見出しを付け、繰り返し出てくる部品（特徴のカード、料金表の列など）を同じ形のまとまりとして作れば、CSSでパソコン用とスマートフォン用の並びを切り替えやすくなります。自分でページを作れるようになると、ワイヤーフレームの段階で「これは実装しやすいか」まで考えられるようになります。

テックジムは、東京・永田町に本校がある通学型のプログラミングスクールです。自分のペースで課題を進め、つまずいたらその場でトレーナーに質問できます。まず無料で試したい方は無料講座をご覧ください。

よくある質問

Q. ワイヤーフレームとは簡単に言うと何ですか？

Webサイトやアプリの画面に、何をどの順番でどこに置くかを線と箱だけで示した設計図です。色や画像を決める前に、情報の配置と導線を固めるために作ります。

Q. ワイヤーフレームとデザインカンプの違いは？

ワイヤーフレームは情報の配置と優先度だけを示す骨組みで、デザインカンプは色・文字・画像を入れた完成見本です。ワイヤーフレームで合意してからデザインカンプを作ります。

Q. LPのワイヤーフレームはどんな構成にすればいいですか？

ファーストビュー、悩み・課題、解決策、特徴、根拠、料金、利用の流れ、よくある質問、申し込みの順が一例です。読み手の疑問の順番に沿って並べ、商品に合わせて削ったり入れ替えたりします。

Q. 無料で使えるワイヤーフレームツールはありますか？

Figmaには無料のスタータープランがあり、draw.ioは無料でアカウント登録なしに使えます。Miroの無料プランは編集可能なボードが3件までです（2026年10月15日確認）。

Q. ワイヤーフレームは手書きでもいいですか？

構いません。最初の構成案は紙とペンで素早くいくつも描き、方向が決まってからツールで清書する方法もよく使われます。

まとめ

ワイヤーフレームは、見た目を決める前に「何を・どの順番で・どこに置くか」を線と箱で固めるための設計図です。LPなら、読み手の疑問の順番に沿ってセクションを並べ、パソコン版とスマートフォン版を描き、関係者とレビューしてからデザインに進みます。ツールはFigmaやdraw.ioなど無料で始められるものがあるので、まずは手書きでも構わないので1枚描いてみてください。

あわせて読みたい

学習の進め方はPython学習のロードマップ、職種ごとの違いはエンジニアの職種の違いにまとめています。