ワイヤーフレーム パターン集は、Webサイトの定番パーツ64種をワイヤーフレームで一覧し、HTML/CSSの骨組みとしてコピーできる無料ツールです。パターンを積み重ねれば、1ページ分のワイヤーを組んでHTMLファイルやSVG・PNGで書き出せます。登録は不要で、データはサーバーに送りません。
ワイヤーフレームとは
ワイヤーフレームは、Webページの設計図です。色や写真を入れる前に、見出し・画像・ボタン・フォームを「どこに・どの順番で」置くかを、グレーの枠と線だけで決めます。見た目の好みに引っぱられずに情報の優先順位を議論できるので、デザインやコーディングに入る前の手戻りを減らせます。
このツールの各パターンには、配置だけでなく「なぜその配置なのか（設計の狙い）」と「どんなサイトに向くか（使いどころ）」を添えています。
基本の使い方
- パターンを探す「パターン一覧」で、ヘッダー・ファーストビュー・料金表などのカテゴリを選んで絞り込みます。
- 詳細で設計の狙いを確かめるカードの「詳しく見る」で、使いどころ・設計の狙い・構成を確認します。PC／スマホを切り替えると、スマホでの組み替わり方も見られます。
- コピー・書き出し詳細画面のタブで HTML／CSS／AI用プロンプトを切り替えてコピーします。SVG・PNGのボタンで画像としても保存できます。
1ページ分のワイヤーを組む
- ページに追加する一覧や詳細の「＋ページに追加」を押すと、「ページを組む」画面の構成にセクションが積み重なります。「基本のLP構成を入れる」で、ヘッダーからフッターまでの8セクションを一度に入れることもできます。
- 並べ替え・差し替え▲▼で順番を入れ替え、プルダウンで同じカテゴリの別パターンに差し替えます。構成を保ったまま見比べられます。
- 書き出す右上のボタンから、HTML／CSSのコピー、1ファイルのHTML保存、SVG・PNG、AI用プロンプトを選びます。
組んだ構成はお使いのブラウザに自動保存されます。別の端末で続けたいときは「HTMLファイルで保存」で書き出してください。
書き出しの種類
| 形式 | 向いている使い方 |
|---|---|
| HTML／CSS | コーディングの骨組みとして使う。CSSには全パターン共通の土台（.wf-で始まるクラス）が入り、各セクションはコンテナクエリでスマホ表示に切り替わります。 |
| HTMLファイル | ブラウザでそのまま開ける1ファイル。クライアントや社内への共有、作業の保存に。 |
| SVG | Figmaに貼り付けて編集する。四角形・線・テキストのレイヤーとして読み込まれます。 |
| PNG | 資料やチャットに貼る画像として。等倍の2倍の解像度で書き出します。 |
| AI用プロンプト | ChatGPT・Claudeなどに貼り、同じ構成のワイヤーやページを作らせる指示として。 |
収録しているカテゴリ
ヘッダー（6）／ファーストビュー（8）／特長・メリット（6）／導入事例・お客様の声（5）／カード一覧（6）／流れ・ステップ（4）／料金表（6）／FAQ（4）／CTA（5）／お問い合わせフォーム（5）／会社概要・アクセス（4）／フッター（5）の、計64パターンです。電話番号の帯つきヘッダー、予約フォーム、会社概要の表、沿革など、日本のサイトでよく使う部品も入れています。
よくある質問
無料で使えますか？
はい。登録不要・無料で、すべてのパターンとページを組む機能を使えます。コピーしたHTML/CSSや書き出した画像は、商用のサイト制作にも自由に使えます。
コピーしたHTML/CSSはそのまま本番に使えますか？
骨組み（レイアウトとスマホ対応）としてそのまま使えます。色はグレーだけなので、配色・書体・画像を差し替えて仕上げてください。CSSには全パターン共通の土台（.wf- で始まるクラス）が含まれます。
Figmaで使えますか？
SVGで書き出し、Figmaにドラッグするか貼り付けると、四角形・線・テキストのレイヤーとして読み込めます。テキストはそのまま書き換えられます。
スマホ表示にはどう対応していますか？
各セクションをコンテナクエリ（@container）で組んでいるため、セクションが置かれた幅に応じてスマホ向けのレイアウトに切り替わります。PC／スマホのボタンで見え方を確認できます。
組んだページは保存されますか？
ページの構成は、お使いのブラウザに自動で保存されます。サーバーには送信しません。別のブラウザや端末では引き継がれないため、残したい場合は「HTMLファイルで保存」で書き出してください。
AI用プロンプトは何に使いますか？
選んだパターンの構成と設計の狙いを文章にしたものです。ChatGPTやClaudeなどのAIに貼り付けると、同じ構成のワイヤーフレームやページを作らせる指示として使えます。
ワイヤーフレームとは何ですか？
Webページの設計図です。色や写真を入れる前に、どこに何を置くか（見出し・画像・ボタン・フォームなど）をグレーの枠と線だけで決めるために使います。
あわせて使えるツール
- DESIGN.mdプレビュー — 配色・書体・余白のテーマを切り替えてLPで確認
- 見出しデザインプレビュー — 見出しの装飾を選んでCSSをコピー
- フォントペアリング プレビュー — 見出しと本文の書体の組み合わせを試す
- HTML見出し構造チェック — 組んだページの見出し階層を確認