ワイヤーフレームのテンプレート集｜LPの定番構成を組む無料ツール

ワイヤーフレーム パターン集は、ヘッダー・ファーストビュー・料金表・FAQ・お問い合わせフォームなど、Webサイトの定番パーツをワイヤーフレームで一覧し、HTML/CSSの骨組みとしてコピーできる無料ツールです。パーツを上から積み重ねれば、LP1ページ分のワイヤーもその場で組めます。

LPや企業サイトを作り始めるとき、最初に迷うのは配色や書体よりも「どのセクションを、どの順番で、どんな形で置くか」です。白紙から考えると、要素の抜けや並び順のちぐはぐさに後から気づき、デザインやコーディングをやり直すことになります。

この記事では、ワイヤーフレーム パターン集の使い方に加えて、LPの定番の並び順と、セクションごとの形の選び方を整理します。パーツ単位のテンプレートとして、構成を決める段階でそのまま使ってください。記載の内容は2026年10月6日時点の情報です。

ワイヤーフレーム パターン集とは｜LPの部品をワイヤーで選べる無料ツール

ワイヤーフレーム パターン集は、Webサイトの定番パーツ64種を12のカテゴリに分け、グレーの枠と線だけで描いたワイヤーフレームとして見比べられるブラウザ用ツールです。会員登録やインストールは要りません。カテゴリと収録数は次のとおりです。

電話番号の帯つきヘッダーや予約フォーム、会社概要の表、沿革のように、日本の店舗サイトや企業サイトでよく使う部品も入れています。英語版（English）にも切り替えられます。

ワイヤーフレームとは｜色を塗る前に「何をどこに置くか」を決める設計図

ワイヤーフレームとは、Webページの配置を、色や写真を入れずにグレーの枠と線だけで描いた設計図です。見出し・画像・ボタン・フォームを「どこに・どの順番で」置くかを、見た目の好みと切り離して決めるために使います。

ワイヤーの段階で決めるのは、主に次の3つです。

• 置く要素：そのページに必要なセクションと、各セクションに入れる見出し・文・画像・ボタン
• 並び順：上から何を見せ、どこで行動（申し込み・問い合わせ）を促すか
• 優先度：同じセクションの中で、何を大きく・目立つように置くか

並び順が重要なのは、ページの下の方ほど見られにくいからです。Nielsen Norman Groupの2018年の調査では、閲覧時間の約57%が最初の画面に、約74%が最初の2画面分に集中していました（Scrolling and Attention）。伝えたいことの順番を、色を塗る前に決めておく意味はここにあります。

ワイヤーを作る前に、参考サイトを集めて共通の構造を抜き出す手順はWebデザインの参考サイトの探し方で、サイト全体のページ構成（階層）の決め方はサイト構造の設計手順で解説しています。この記事が扱うのは、その間にある「1ページの中のセクション構成」です。

このツールでできること

パターンを見比べるだけでなく、そのままコーディングやデザインツールに持ち出せる形で書き出せます。主な機能は次のとおりです。

組んだページの構成はブラウザに自動保存され、サーバーには送信されません。

LPの定番構成｜上から何をどの順に置くか

LPのセクションは、読み手が上から順に抱く疑問に、1つずつ答える順番に並べます。サービス紹介のLPなら、次の8つが基本の並びです。ツールの「ページを組む」画面にある「基本のLP構成を入れる」ボタンも、この並びで読み込みます。

この並びは「興味→納得→安心→行動」の順になっています。料金を特長より前に出すと、価値が伝わる前に金額で判断されやすくなります。逆に、実績で選ばれる商材なら、ファーストビューに実績の数字や導入企業のロゴを入れて4番目の役割を前倒しにする形もあります。

ファーストビューの中身（キャッチコピー・CTA・表示速度）をさらに詰めたい場合は、ファーストビュー改善でCVRを上げる方法も参考にしてください。

セクションごとの選び方｜同じ部品でも狙いで形が変わる

同じ「ヘッダー」や「料金表」でも、サイトの目的によって適した形は変わります。主要なセクションについて、形の選び分けを整理します。ツールの詳細画面では、それぞれの「設計の狙い」も確認できます。

ヘッダー｜行動してほしい1つだけを塗りボタンにする

どの形でも、塗りつぶしのボタンは1つに絞ります。「資料請求」「お問い合わせ」「無料で試す」を全部同じ強さで並べると、どれも押されにくくなります。

ファーストビュー｜画像に頼るか、言葉で言い切るか

背景画像に文字を重ねる形は、画像の明るさによって文字が読めなくなります。実装時は画像の上に暗めのオーバーレイを敷く前提で選んでください。

特長・お客様の声｜数と読ませ方で選ぶ

特長が3つに絞れるならアイコンの3カラム、1つずつ丁寧に見せたいなら画像とテキストを左右交互に並べる形が合います。課題解決型の商材では、先に読み手の悩みを並べてから解決策を示す「悩み→解決の対比」も使えます。

お客様の声は、顔写真と所属を添えたカードにすると、実在する人の言葉として受け取られやすくなります。BtoBで成果を示せる場合は、事例ごとに「導入前の課題」と「成果の数字」をセットで見せる形を選びます。

料金表｜比べさせるか、迷わせないか

複数プランなら、売りたいプランを中央に置き、枠線と「おすすめ」のバッジで強調します。単一価格なら選択肢をなくし、価格の隣に「含まれるもの」を全部並べて、払う額に対して何が手に入るかで納得してもらいます。

FAQ・CTA・フォーム｜最後の一押しで離脱させない

FAQは質問が多ければ開閉式（アコーディオン）、6問前後なら全部の回答を最初から見せる2カラムが向きます。開閉式は details 要素で作っているので、JavaScriptなしで開閉できます。

CTAは、すぐ申し込みたい人と迷っている人が混ざる商材なら「申し込む／まず相談する」の2択に分けます。フォームは返信に必要な項目だけに絞り、必須・任意をラベルの横に明示します。フォームの実装手段はコンタクトフォームのおすすめツールと実装方法にまとめています。

使い方｜パターンを選んで1ページ組むまでの4ステップ

使い方は「探す→確かめる→積む→書き出す」の4ステップです。

1. 「パターン一覧」でカテゴリのチップを押して絞り込み、使いたいセクションを探す
2. カードの「詳しく見る」で、使いどころ・設計の狙い・構成を読み、PC／スマホの表示を切り替えて確かめる
3. 「＋ページに追加」を押す。追加したパターンは「ページを組む」画面に上から積み重なる
4. 「ページを組む」で▲▼で並べ替え、プルダウンで同じカテゴリの別パターンに差し替えてから、右上のボタンで書き出す

白紙から始めるなら、「ページを組む」画面の「基本のLP構成を入れる」で、ヘッダーからフッターまでの8セクションを一度に読み込めます。そこから業種に合わないセクションを差し替えていくのが早い進め方です。

書き出し方の使い分け｜HTML/CSS・SVG・PNG・AI用プロンプト

書き出しは、次に作業する場所に合わせて選びます。

Figmaで続きのデザインをする場合は、SVGで書き出してドラッグするだけで、テキストを書き換えられる状態で取り込めます。Figmaとほかのツールの使い分けはCanva・Figma・STUDIOの使い分けガイドで比較しています。

コピーしたHTML/CSSの中身｜コンテナクエリでスマホに切り替わる

コピーされるCSSは、全パターン共通の土台（.wf- で始まるクラス）と、パターンごとのCSSの2層でできています。各セクションは画面幅ではなく、セクション自身の幅を基準にスマホ向けの並びへ切り替わります。

たとえばヘッダー「ロゴ左・ナビ右・CTAボタン」のCSSは、次のように書かれています（抜粋）。1行目の共通土台でセクションをコンテナにし、幅640px以下ではナビとCTAを隠してハンバーガーボタンを出します。

.wf-section {
  container-type: inline-size;
}

.hd01__inner { display: flex; align-items: center; gap: 32px; }
.hd01__nav { display: flex; gap: 28px; margin-left: auto; }
.hd01 .wf-burger { display: none; }

@container (max-width: 640px) {
  .hd01__nav, .hd01__cta { display: none; }
  .hd01 .wf-burger { display: inline-flex; margin-left: auto; }
}

メディアクエリ（@media）ではなくコンテナクエリ（@container）を使っているので、同じセクションを2カラムの片側や細いサイドバーに置いても、置いた場所の幅に合わせて組み替わります。文字サイズは16px以上にそろえてあり、色はグレーの濃淡だけです。

本番に使うときは、土台の色と書体を自分のサイトのものに置き換え、画像の枠（斜線入りの .wf-img）を実際の画像に差し替えてください。

ワイヤーを作るときにつまずきやすいポイント

ワイヤーの段階で起きる手戻りは、ほとんどが「決める順番」の取り違えから生まれます。

色や写真を先に考えてしまう

配色や写真が入ると、配置の良し悪しより見た目の好みで議論が進みます。ワイヤーはあえてグレーのまま確認し、「この並びで疑問に答えられているか」だけを見ます。

セクションを足しすぎる

伝えたいことが多いと、特長・事例・声・実績のセクションが増えて、肝心のCTAまで読まれなくなります。1つのセクションには1つの役割だけを持たせ、役割が重なるものはどちらかにまとめます。

スマホでの並びを後回しにする

PCで横に並んでいた要素は、スマホでは縦に積まれます。画像が先か見出しが先か、料金表のおすすめプランを一番上に出すかなどは、ワイヤーの段階でスマホ表示も切り替えて確かめておきます。

次の工程へのつなぎ方

構成が決まったら、デザインの数値ルールを決める工程に進みます。ワイヤーで決めたのは「何をどの順に置くか」までなので、コンテンツ幅・カラム・余白などの数値は次の段階で決めます。

1. デザインの数値ルール（ウィンドウ幅・コンテンツ幅・カラム）を決める
2. Figmaでデザインカンプを作る（SVGで書き出したワイヤーを下敷きにできる）
3. コピーしたHTML/CSSの骨組みに、デザインを当てはめてコーディングする

数値ルールの決め方はデザインカンプ前に決めるWebデザインのルールで解説しています。LPのコーディングを練習したい場合は、模写初級のLPレイアウトから始め、模写コーディング一覧でレベルを上げていけます。

よくある質問

Q. 無料で使えますか？

無料で使えます。会員登録やインストールは不要で、すべてのパターンとページを組む機能を使えます。コピーしたHTML/CSSや書き出した画像は、商用のサイト制作にも使えます。

Q. コピーしたHTML/CSSはそのまま本番に使えますか？

レイアウトとスマホ対応の骨組みとしてそのまま使えます。色はグレーだけなので、配色・書体・画像を自分のサイトのものに差し替えて仕上げてください。

Q. Figmaで編集できますか？

SVGで書き出してFigmaにドラッグまたは貼り付けると、四角形・線・テキストのレイヤーとして読み込まれ、テキストも書き換えられます。

Q. 組んだページは保存されますか？

ページの構成はブラウザに自動で保存されます。サーバーには送信しないため、別の端末やブラウザでは引き継がれません。残したい場合は「HTMLファイルで保存」で書き出してください。

Q. ワイヤーフレームとデザインカンプは何が違いますか？

ワイヤーフレームは要素の配置と順番だけを決める設計図で、色や写真は入れません。デザインカンプは、配色・書体・画像まで入れて完成時の見た目を再現したものです。ワイヤーで構成を決めてからカンプを作ります。

Q. 英語のサイトにも使えますか？

使えます。ツール右上の「English」から英語版に切り替えると、パターンの説明とワイヤーの中の文言、コピーするHTML/CSSも英語になります。

まとめ

ワイヤーフレーム パターン集は、Webサイトの定番パーツをワイヤーで見比べ、積み重ねて1ページ分の構成を組めるツールです。要点は次の3つです。

• LPのセクションは、読み手が上から抱く疑問に答える順に並べる（興味→納得→安心→行動）
• 同じセクションでも、サイトの目的によって適した形が変わる。各パターンの「設計の狙い」を見て選ぶ
• 書き出しは次の作業場所に合わせて、HTML/CSS・SVG・PNG・AI用プロンプトから選ぶ

まずは「基本のLP構成を入れる」で8セクションを読み込み、自分のサイトに合わないセクションを差し替えてみてください。画面ごとの操作はワイヤーフレーム パターン集の使い方・FAQにまとめています。

関連記事

• Webデザインの参考サイト｜探し方と自分の案に落とす手順
• サイト構造の設計手順｜ページ洗い出しから階層を組み立てる情報設計のやり方
• デザインカンプ前に決めるWebデザインのルール｜ウィンドウ幅・コンテンツ幅・カラム設計
• ファーストビュー改善でCVRを上げる方法 — 構成要素と表示速度の最適化
• Canva・Figma・STUDIOの使い分け完全ガイド｜ノーコードでLP公開＆アニメーション設計まで
• DESIGN.mdとは｜AIが作るUIを「それっぽい」で終わらせない設計ファイル