2026.10.08
- 設計
ワイヤーフレームの書き方：作り方の手順とテキストで作る例・テンプレート
ワイヤーフレームとは、色や装飾を決める前に「何を・どの順で・どこに置くか」だけを決める画面の骨組み図です。 線と箱と文字だけで描くので、作り直しが速く、関係者と配置の合意を取るのに向いています。うまく進めるコツは、いきなり箱を並べ始めず、先に要素の一覧と優先順位を作ってから配置することです。
この記事では、作り方を5つの手順にまとめたうえで、架空の会員サイト（講座をさがして申し込むサイト）のトップ・一覧・詳細・申し込みフォームの4画面を、パソコン用とスマートフォン用の両方で載せます。形式は、テキスト版、表計算ソフトに貼れるタブ区切りの配置表、HTML と CSS だけで組むグレーの箱版の3つです。どれもコピーしてそのまま使えます。
確認環境（2026-10-05）：Ubuntu 24.04 / Chromium 141.0.7390.37（Playwright 1.56.0 から操作）/ Python 3.11.15。HTML 版は幅 1280px と 375px で表示して配置を確かめ、テキスト版は行の幅がそろうことをフォントごとに測りました。
この記事の結論
- ワイヤーフレームで決めるのは「要素・優先順位・配置」の3つです。色、書体、写真の中身、正確な文言は決めません。
- 手順は、目的 → 要素の洗い出し → 優先順位 → 配置 → レビューの5つ。 配置は4番目です。
- スマートフォン用を先に描くと、1列に並べるために優先順位を決めざるを得なくなり、パソコン用の配置も迷いにくくなります。
- 道具は何でも構いません。テキスト・表計算ソフト・HTML のどれでも描けます（この記事に3形式のひな形があります）。
- 項目の型・桁・必須の定義や、画面どうしのつながりはワイヤーフレームに描き込まず、画面設計書・画面項目定義・画面遷移図の側で決めます。
ワイヤーフレームの作り方 5つの手順（早見表）
| 手順 | やること | できあがるもの | 目安の時間（1画面） |
|---|---|---|---|
| 1. 目的を1文で書く | だれが、この画面で、何をできれば成功かを書く | 画面ごとの目的 1文 | 5分 |
| 2. 要素を洗い出す | 画面に載せたいものを、配置を考えずにすべて書き出す | 要素一覧表 | 15分 |
| 3. 優先順位を付ける | 各要素を A（無いと目的を果たせない）／B（あると助かる）／C（無くても困らない）に分ける | 優先度つきの要素一覧表 | 10分 |
| 4. 配置する | スマートフォン用を上から優先度順に並べ、次にパソコン用で横に広げる | ワイヤーフレーム（2種類の幅） | 30分 |
| 5. レビューして直す | チェックリストで確かめ、指摘を反映する | 合意済みのワイヤーフレーム | 20分 |
時間は例です。大切なのは配分で、箱を描く前の手順1〜3に全体の3〜4割を使うと、手順4で手が止まりにくくなります。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「ワイヤーフレームの書き方：作り方の手順とテキストで作る例・テンプレート」
ワイヤーフレーム・モックアップ・プロトタイプ・デザインカンプの違い
4つは「何を確かめるための成果物か」が違います。呼び方の境目は組織によって幅があるので、関係者の間で最初にこの表をそろえておくと話が早く進みます。
| 成果物 | 目的（何を確かめるか） | 作り込みの度合い | 作る時期 | 動くか |
|---|---|---|---|---|
| ワイヤーフレーム | 要素・優先順位・配置 | 低い。線と箱と文字、白黒かグレー | 要件が見えてきた直後 | 動かない |
| デザインカンプ | 見た目の完成イメージ（色・書体・写真・余白） | 高い。完成品と同じ見た目の静止画 | ワイヤーフレームの合意後 | 動かない |
| モックアップ | 見た目を実物に近い形で確かめる | 高い。端末の枠にはめるなど、使う場面に近づけた見本 | デザインカンプと同じ頃 | 動かない（または一部だけ） |
| プロトタイプ | 操作の流れと使い心地 | 低〜高。確かめたい部分だけ作る | どの時期でも。確かめたいことが出たとき | 動く（画面の行き来や入力ができる） |
デザインカンプとモックアップはほぼ同じ意味で使われることも多い言葉です。この記事では、静止画の完成見本をデザインカンプ、それを使う場面に近づけた見本をモックアップとして分けています。
どれを作るかは、次の条件で決められます。
| いま確かめたいこと | 作るもの |
|---|---|
| 載せる要素に過不足がないか、順番はこれでよいか | ワイヤーフレーム |
| 色や写真を入れたときの印象 | デザインカンプ（またはモックアップ） |
| ボタンを押して次の画面へ進む流れが自然か | プロトタイプ |
| 入力の途中でつまずく場所がないか | プロトタイプ（フォーム部分だけでよい） |
| 開発に渡す正確な寸法や色の指定 | デザインカンプ＋共通の画面ルール |
| 項目の型・桁・必須・エラー文言 | 画面設計書・画面項目定義（ワイヤーフレームの外） |
手順1：画面の目的を1文で書く
最初に、画面ごとの目的を1文で書きます。形は「（だれ）が、この画面で、（何）をできる」です。
| 画面ID | 画面名 | 目的（1文） | いちばんしてほしい行動 |
|---|---|---|---|
| WF-01 | トップ | はじめて来た人が、どんな講座があるかを知り、さがし始められる | キーワードでさがす |
| WF-02 | 講座一覧 | 会員が、条件に合う講座を見比べて1つ選べる | 講座の行を選ぶ |
| WF-03 | 講座詳細 | 会員が、内容と日時を確かめて申し込むかを決められる | 「この講座に申し込む」を押す |
| WF-04 | 申し込みフォーム | 会員が、迷わず必要な項目を入れて確認画面へ進める | 「確認画面へ進む」を押す |
「いちばんしてほしい行動」は1画面に1つだけにします。ここが2つ3つあると、手順3の優先順位が決まりません。
手順2〜3：要素一覧表を作り、優先順位を付ける
次に、画面に載せたいものを配置を考えずに書き出し、A・B・C を付けます。トップ画面の記入例です。
| No | 要素 | 載せる理由 | 優先度 | 中身の量 | 備考 |
|---|---|---|---|---|---|
| 1 | ロゴ | どのサイトかが分かる | B | 1個 | 全画面共通 |
| 2 | メニュー | ほかの画面へ行ける | B | 3項目 | 全画面共通 |
| 3 | ログイン／会員登録 | 会員は申し込みに進める | A | ボタン2個 | |
| 4 | 見出しとキーワード検索 | さがし始められる（目的そのもの） | A | 見出し1行、入力欄1、ボタン1 | いちばんしてほしい行動 |
| 5 | 新着の講座 | どんな講座があるかが分かる | A | 3件 | 画像・講座名・開催日・残席 |
| 6 | お知らせ | 運営からの連絡を伝える | B | 3件 | スマートフォンは2件 |
| 7 | はじめての方へ | 使い方の不安を減らす | C | 3ステップ | スマートフォンはリンクだけ |
| 8 | フッター | 規約などへ行ける | C | リンク3個 | 全画面共通 |
優先度の付け方は次の基準にそろえます。
| 優先度 | 基準 | 配置での扱い |
|---|---|---|
| A | 無いと画面の目的を果たせない | スクロールしなくても見える範囲に置く。スマートフォンでも省かない |
| B | あると助かる | A の下。スマートフォンでは件数を減らす・畳む |
| C | 無くても目的は果たせる | 下のほう。スマートフォンではリンクだけにする・出さない |
A が全体の半分を超えたら、目的の1文に戻ります。 全部が大事という一覧からは、配置は決まりません。
空の要素一覧表（タブ区切り）です。表計算ソフトの A1 セルに貼り付けて使えます。
No 要素 載せる理由 優先度 中身の量 備考
1
2
3
手順4：配置する（テキスト版のひな形と4画面の例）
配置は、スマートフォン用を先に、上から優先度順に1列で並べるところから始めます。そのあと、パソコン用で横に余った幅へ B・C の要素を広げます。
テキスト版の書き方の約束
テキスト版は、メモ帳でもチャットでも書ける手軽さが利点です。次の記号だけで足ります。
| 書き方 | 意味 |
|---|---|
+---+ と | |
領域の枠 |
[ロゴ] [画像] |
画像や部品が入る場所 |
[______] |
入力欄 |
(ボタン名) |
ボタン |
[ ] / ( ) |
チェックボックス / ラジオボタン |
[選択 v] |
選択リスト |
> |
リンク、次へ進む |
＜ ＞ |
補足（固定表示など、動きの説明） |
空のひな形です。パソコン用は半角78文字ぶん、スマートフォン用は半角34文字ぶんの幅にしています。
+----------------------------------------------------------------------------+
| ヘッダー： |
+----------------------------------------------------------------------------+
| |
| メインの領域： |
| |
| |
+----------------------------------------------------------------------------+
| フッター： |
+----------------------------------------------------------------------------+
+--------------------------------+
| ヘッダー： |
+--------------------------------+
| |
| メインの領域： |
| |
| |
+--------------------------------+
| 固定ボタン： |
+--------------------------------+
枠は、罫線文字（─ や │）ではなく、半角の + - | で書いています。理由は後半の「確かめて分かったこと」に書きました。全角1文字が半角2文字ぶんの幅になる等幅フォントで表示すると、右端がそろいます。
WF-01 トップ
パソコン用です。
+----------------------------------------------------------------------------+
| [ロゴ] 講座をさがす | お知らせ | よくある質問 [ログイン] (会員登録)|
+----------------------------------------------------------------------------+
| |
| ＜メインの案内＞ 見出し：学びたい講座が見つかる |
| 説明文 1〜2行 |
| [キーワード____________________] (さがす) |
| |
+----------------------------------------------------------------------------+
| 新着の講座 すべて見る > |
| [画像] [画像] [画像] |
| 講座名 講座名 講座名 |
| 開催日 / 残席 開催日 / 残席 開催日 / 残席 |
+----------------------------------------------------------------------------+
| お知らせ 一覧を見る > |
| 2026-10-01 お知らせの見出し |
| 2026-09-24 お知らせの見出し |
| 2026-09-10 お知らせの見出し |
+----------------------------------------------------------------------------+
| はじめての方へ：使い方を3ステップで (1)さがす > (2)申し込む > (3)参加 |
+----------------------------------------------------------------------------+
| フッター： 利用規約 | 個人情報の取り扱い | お問い合わせ (C) 表記 |
+----------------------------------------------------------------------------+
スマートフォン用です。メニューはボタンの中へ、新着の講座は縦に3件、「はじめての方へ」はリンク1行にしています。
+--------------------------------+
| [メニュー] [ロゴ] [ログイン] |
+--------------------------------+
| 見出し：学びたい講座が |
| 見つかる |
| [キーワード__________] |
| ( さがす ) |
+--------------------------------+
| 新着の講座 |
| [画像] 講座名 |
| 開催日 / 残席 |
| [画像] 講座名 |
| 開催日 / 残席 |
| [画像] 講座名 |
| 開催日 / 残席 |
| ( すべて見る ) |
+--------------------------------+
| お知らせ |
| 10-01 お知らせの見出し |
| 09-24 お知らせの見出し |
| 一覧を見る > |
+--------------------------------+
| はじめての方へ > |
+--------------------------------+
| 利用規約 | お問い合わせ |
| (C) 表記 |
+--------------------------------+
WF-02 講座一覧
パソコン用です。左に絞り込み、右に一覧の2列です。
+----------------------------------------------------------------------------+
| [ロゴ] 講座をさがす | お知らせ | よくある質問 [ログイン] (会員登録)|
+----------------------------------------------------------------------------+
| トップ > 講座をさがす |
+--------------------+-------------------------------------------------------+
| 絞り込み | 講座一覧 全 48 件 並び順 [開催日が近い順 v] |
| | |
| 分野 | [画像] 講座名（最大2行） (詳細) |
| [ ] プログラミング | 開催日 / 形式 / 残席 |
| [ ] デザイン | 説明の冒頭 1行 |
| [ ] 語学 | ---------------------------------------------------- |
| | [画像] 講座名（最大2行） (詳細) |
| 形式 | 開催日 / 形式 / 残席 |
| ( ) 会場 | 説明の冒頭 1行 |
| ( ) オンライン | ---------------------------------------------------- |
| | [画像] 講座名（最大2行） (詳細) |
| 開催月 [選択 v] | 開催日 / 形式 / 残席 |
| | 説明の冒頭 1行 |
| (絞り込む) | |
| 条件をクリア | < 前へ 1 2 3 4 5 次へ > |
+--------------------+-------------------------------------------------------+
| フッター： 利用規約 | 個人情報の取り扱い | お問い合わせ (C) 表記 |
+----------------------------------------------------------------------------+
スマートフォン用です。絞り込みはボタンで開く形にして、一覧を先に見せます。 ページ送りは「もっと見る」に置き換えています。
+--------------------------------+
| [メニュー] [ロゴ] [ログイン] |
+--------------------------------+
| 講座をさがす 全 48 件 |
| (絞り込み v) [開催日順 v] |
+--------------------------------+
| [画像] 講座名（最大2行） |
| 開催日 / 形式 |
| 残席 > |
+--------------------------------+
| [画像] 講座名（最大2行） |
| 開催日 / 形式 |
| 残席 > |
+--------------------------------+
| [画像] 講座名（最大2行） |
| 開催日 / 形式 |
| 残席 > |
+--------------------------------+
| ( もっと見る ) |
+--------------------------------+
| 利用規約 | お問い合わせ |
+--------------------------------+
WF-03 講座詳細
パソコン用です。申し込みに必要な情報（開催日・時間・残席）とボタンを右の列にまとめています。
+----------------------------------------------------------------------------+
| [ロゴ] 講座をさがす | お知らせ | よくある質問 [ログイン] (会員登録)|
+----------------------------------------------------------------------------+
| トップ > 講座をさがす > 講座名 |
+--------------------------------------------+-------------------------------+
| 講座名（見出し） | 申し込み |
| 分野タグ / 形式タグ | |
| | 開催日 2026-11-14 |
| [ ] | 時間 19:00〜21:00 |
| [ メイン画像 ] | 残席 あと 6 席 |
| [ ] | |
| | ( この講座に申し込む ) |
| | 注：ログインが必要です |
+--------------------------------------------+-------------------------------+
| 講座の内容 説明文（3〜5行） |
| こんな方に向いています 箇条書き 3点 |
| 当日の流れ 1. 〜 2. 〜 3. 〜 |
| 講師の紹介 [写真] 名前・経歴2行 |
+----------------------------------------------------------------------------+
| 同じ分野の講座 [画像]講座名 [画像]講座名 [画像]講座名 |
+----------------------------------------------------------------------------+
| フッター： 利用規約 | 個人情報の取り扱い | お問い合わせ (C) 表記 |
+----------------------------------------------------------------------------+
スマートフォン用です。申し込むボタンは画面下に固定し、長い本文を読んでいる途中でも押せるようにします。「当日の流れ」「講師の紹介」は見出しだけ出して開閉する形です。
+--------------------------------+
| [<] 講座の詳細 [メニュー] |
+--------------------------------+
| [ メイン画像 ] |
| 講座名（見出し） |
| 分野タグ / 形式タグ |
+--------------------------------+
| 開催日 2026-11-14 |
| 時間 19:00〜21:00 |
| 残席 あと 6 席 |
+--------------------------------+
| 講座の内容 |
| 説明文（3〜5行） |
| こんな方に向いています |
| ・箇条書き 3点 |
| 当日の流れ [+] |
| 講師の紹介 [+] |
+--------------------------------+
| 同じ分野の講座（横送り） |
| [画像]講座名 [画像] |
+--------------------------------+
| ＜画面下に固定＞ |
| ( この講座に申し込む ) |
+--------------------------------+
WF-04 申し込みフォーム
パソコン用です。入力に集中できるよう、メニューは出していません。
+----------------------------------------------------------------------------+
| [ロゴ] 山田さん [v] |
+----------------------------------------------------------------------------+
| (1) 入力 --- (2) 確認 --- (3) 完了 |
+----------------------------------------------------------------------------+
| 講座の申し込み |
| 申し込む講座： 講座名 / 2026-11-14 19:00〜21:00 |
| |
| お名前 [必須] [______________________________] |
| メールアドレス [必須] [______________________________] |
| 例：taro@example.com |
| 参加形式 [必須] ( ) 会場 ( ) オンライン |
| 参加人数 [必須] [ 1 v] 名 |
| 連絡事項 [任意] [______________________________] |
| [______________________________] 0/400字 |
| [ ] 利用規約に同意する [必須] |
| |
| 注：エラーは各項目のすぐ下に赤字で表示 |
| |
| (戻る) ( 確認画面へ進む ) |
+----------------------------------------------------------------------------+
| フッター： 利用規約 | 個人情報の取り扱い | お問い合わせ (C) 表記 |
+----------------------------------------------------------------------------+
スマートフォン用です。ラベルを入力欄の上に置き、1列に並べます。 主ボタン（確認画面へ進む）を上、戻るを下にしています。
+--------------------------------+
| [<] 講座の申し込み |
+--------------------------------+
| (1)入力 - (2)確認 - (3)完了 |
+--------------------------------+
| 講座名 / 11-14 19:00〜 |
+--------------------------------+
| お名前 [必須] |
| [______________________] |
| メールアドレス [必須] |
| [______________________] |
| 参加形式 [必須] |
| ( ) 会場 ( ) オンライン |
| 参加人数 [必須] |
| [ 1 v] 名 |
| 連絡事項 [任意] |
| [______________________] |
| [______________________] |
| [ ] 利用規約に同意 [必須] |
+--------------------------------+
| ( 確認画面へ進む ) |
| ( 戻る ) |
+--------------------------------+
表計算ソフトに貼れる配置表（タブ区切り）
図を描く代わりに、「どの要素を、どこに置くか」を表で書く方法もあります。図より場所を取らず、パソコンとスマートフォンの違いを1行で見比べられるので、レビューの指摘を番号で言いやすくなります。4画面ぶん・32行の記入例です。A1 セルに貼り付けると列に分かれます。
画面ID 画面名 No 領域 要素 優先度 パソコンでの位置 スマートフォンでの位置 備考
WF-01 トップ 1 ヘッダー ロゴ B 左上 上部中央 全画面共通
WF-01 トップ 2 ヘッダー メニュー（講座をさがす／お知らせ／よくある質問） B 上部に横並び メニューボタンの中 全画面共通
WF-01 トップ 3 ヘッダー ログイン／会員登録 A 右上 右上（ログインのみ） 会員登録はメニューの中へ
WF-01 トップ 4 メインの案内 見出しとキーワード検索 A 1段目・全幅 1段目 この画面でいちばんしてほしい行動
WF-01 トップ 5 新着の講座 講座カード 3件 A 2段目・3列 2段目・縦に3件 画像／講座名／開催日／残席
WF-01 トップ 6 お知らせ 見出し 3件 B 3段目 3段目・2件 スマートフォンは2件に減らす
WF-01 トップ 7 はじめての方へ 使い方 3ステップ C 4段目 リンク1行 スマートフォンは別画面へ
WF-01 トップ 8 フッター 規約などのリンク C 最下部 最下部 全画面共通
WF-02 講座一覧 1 ヘッダー 共通ヘッダー B 上部 上部 WF-01 と同じ
WF-02 講座一覧 2 パンくず 現在地の表示 C ヘッダーの下 表示しない
WF-02 講座一覧 3 絞り込み 分野／形式／開催月 A 左の列（幅240px） ボタンで開く スマートフォンは一覧を先に見せる
WF-02 講座一覧 4 件数と並び順 全件数、並び順の選択 B 一覧の上 一覧の上
WF-02 講座一覧 5 講座の行 画像／講座名／開催日／形式／残席 A 右の列・縦に並べる 全幅・縦に並べる 講座名は最大2行
WF-02 講座一覧 6 講座の行 説明の冒頭 1行 C 各行の3行目 表示しない
WF-02 講座一覧 7 ページ送り 前へ／番号／次へ B 一覧の下 「もっと見る」ボタン
WF-02 講座一覧 8 フッター 共通フッター C 最下部 最下部 WF-01 と同じ
WF-03 講座詳細 1 ヘッダー 共通ヘッダー B 上部 戻る＋画面名＋メニュー
WF-03 講座詳細 2 見出し 講座名、分野・形式のタグ A 左の列・上 メイン画像の下
WF-03 講座詳細 3 メイン画像 講座の画像 1枚 B 左の列 最上部・全幅
WF-03 講座詳細 4 申し込み 開催日／時間／残席 A 右の列 見出しの下
WF-03 講座詳細 5 申し込み 申し込むボタン A 右の列の下 画面下に固定 この画面でいちばんしてほしい行動
WF-03 講座詳細 6 本文 講座の内容／向いている方 A 2段目・全幅 3段目
WF-03 講座詳細 7 本文 当日の流れ／講師の紹介 B 2段目・全幅 見出しだけ出して開閉
WF-03 講座詳細 8 関連 同じ分野の講座 3件 C 3段目・横に3件 横送り
WF-04 申し込みフォーム 1 ヘッダー ロゴ、会員名 C 上部 戻る＋画面名 メニューは出さない
WF-04 申し込みフォーム 2 進み具合 入力・確認・完了の3段階 B ヘッダーの下 ヘッダーの下
WF-04 申し込みフォーム 3 対象の講座 講座名、開催日時 A フォームの上 フォームの上 申し込む対象の取り違えを防ぐ
WF-04 申し込みフォーム 4 入力項目 お名前、メールアドレス A ラベル左・入力欄右 ラベル上・入力欄下 必須
WF-04 申し込みフォーム 5 入力項目 参加形式、参加人数 A 同上 同上 必須
WF-04 申し込みフォーム 6 入力項目 連絡事項 C 同上 同上 任意・400字まで
WF-04 申し込みフォーム 7 同意 利用規約への同意 A 入力項目の下 入力項目の下 必須
WF-04 申し込みフォーム 8 ボタン 確認画面へ進む／戻る A 右に「進む」、左に「戻る」 上に「進む」、下に「戻る」
先頭の数行を Markdown の表にすると次のようになります。
| 画面ID | 画面名 | No | 領域 | 要素 | 優先度 | パソコンでの位置 | スマートフォンでの位置 | 備考 |
|---|---|---|---|---|---|---|---|---|
| WF-01 | トップ | 4 | メインの案内 | 見出しとキーワード検索 | A | 1段目・全幅 | 1段目 | この画面でいちばんしてほしい行動 |
| WF-02 | 講座一覧 | 3 | 絞り込み | 分野／形式／開催月 | A | 左の列（幅240px） | ボタンで開く | スマートフォンは一覧を先に見せる |
| WF-03 | 講座詳細 | 5 | 申し込み | 申し込むボタン | A | 右の列の下 | 画面下に固定 | この画面でいちばんしてほしい行動 |
| WF-04 | 申し込みフォーム | 8 | ボタン | 確認画面へ進む／戻る | A | 右に「進む」、左に「戻る」 | 上に「進む」、下に「戻る」 |
HTMLとCSSだけで組むグレーの箱版
ブラウザで開いて幅を変えられるのが HTML 版の利点です。1つのファイルで、幅を狭めるとスマートフォン用の配置に切り替わります。 色はグレーだけ、画像は「画像」と書いた箱で代用します。
まず、4画面で共通に使う CSS です。wire.css という名前で保存します。
/* wire.css : グレーの箱だけで組むワイヤーフレーム用スタイル */
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; font-size: 14px; color: #333; background: #fff; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.box { background: #e5e5e5; border: 1px solid #999; padding: 12px; }
.img { background: #ccc; border: 1px solid #999; min-height: 96px;
display: flex; align-items: center; justify-content: center; }
.btn { display: inline-block; padding: 10px 20px; border: 2px solid #333; background: #fff; font-weight: bold; }
.btn.main { background: #333; color: #fff; }
.field { display: block; width: 100%; height: 40px; border: 1px solid #666; background: #fff; }
.row { display: flex; gap: 16px; margin: 16px 0; }
.row > * { flex: 1; min-width: 0; }
.side { flex: 0 0 240px; }
.stack > * + * { margin-top: 8px; }
.sp-only { display: none; }
.note { font-size: 12px; color: #666; }
/* 767px 以下はスマートフォン用：横並びを縦積みに変える */
@media (max-width: 767px) {
.row { flex-direction: column; gap: 8px; margin: 8px 0; }
.side { flex: none; }
.btn { display: block; text-align: center; min-height: 44px; }
.pc-only { display: none; } /* .btn より後ろに書く（順番が逆だとボタンだけ隠れない） */
.sp-only { display: block; }
.fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px;
background: #fff; border-top: 1px solid #999; }
body.has-cta { padding-bottom: 72px; }
}
使うクラスは次のとおりです。
| クラス | 役割 |
|---|---|
box |
グレーの箱。領域や部品を表す |
img |
画像が入る場所 |
btn / btn main |
ボタン / いちばん押してほしいボタン |
field |
入力欄 |
row |
横に並べる。767px 以下では縦に積む |
side |
幅240px の列（絞り込みや申し込みの枠） |
stack |
縦に並べて間をあける |
pc-only / sp-only |
パソコン用だけ / スマートフォン用だけに出す |
fixed-cta |
スマートフォン用で画面下に固定する |
WF-01 トップ（完成形のファイル）
top.html として wire.css と同じフォルダに保存し、ブラウザで開きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WF-01 トップ</title>
<link rel="stylesheet" href="wire.css">
</head>
<body>
<div class="wrap">
<header class="row">
<div class="box">ロゴ</div>
<nav class="box pc-only">講座をさがす｜お知らせ｜よくある質問</nav>
<div class="box">ログイン／会員登録</div>
<div class="box sp-only">メニュー</div>
</header>
<section class="box stack">
<h1>見出し：学びたい講座が見つかる</h1>
<p class="pc-only">説明文 1〜2行</p>
<span class="field"></span>
<span class="btn main">さがす</span>
</section>
<h2>新着の講座</h2>
<section class="row">
<div class="box stack"><div class="img">画像</div><div>講座名</div><div class="note">開催日／残席</div></div>
<div class="box stack"><div class="img">画像</div><div>講座名</div><div class="note">開催日／残席</div></div>
<div class="box stack"><div class="img">画像</div><div>講座名</div><div class="note">開催日／残席</div></div>
</section>
<h2>お知らせ</h2>
<section class="box stack">
<div>2026-10-01 お知らせの見出し</div>
<div>2026-09-24 お知らせの見出し</div>
<div class="pc-only">2026-09-10 お知らせの見出し</div>
</section>
<section class="box" style="margin-top:16px">はじめての方へ：使い方を3ステップで</section>
<footer class="box" style="margin-top:16px">利用規約｜個人情報の取り扱い｜お問い合わせ</footer>
</div>
</body>
</html>
WF-02 講座一覧
head の部分は top.html と同じ（title だけ変える）なので、body だけを載せます。
<body>
<div class="wrap">
<header class="row">
<div class="box">ロゴ</div>
<nav class="box pc-only">講座をさがす｜お知らせ｜よくある質問</nav>
<div class="box">ログイン／会員登録</div>
</header>
<div class="note pc-only">トップ > 講座をさがす</div>
<div class="row">
<aside class="side box stack">
<strong>絞り込み</strong>
<div class="pc-only">分野（チェックボックス 3件）</div>
<div class="pc-only">形式（ラジオボタン 2件）</div>
<div class="pc-only">開催月（選択）</div>
<span class="btn pc-only">絞り込む</span>
<div class="sp-only note">タップで条件を開く</div>
</aside>
<main class="stack">
<div class="box">全 48 件 ／ 並び順（選択）</div>
<div class="box row"><div class="img side">画像</div><div class="stack"><div>講座名（最大2行）</div><div class="note">開催日／形式／残席</div><div class="pc-only">説明の冒頭 1行</div></div></div>
<div class="box row"><div class="img side">画像</div><div class="stack"><div>講座名（最大2行）</div><div class="note">開催日／形式／残席</div><div class="pc-only">説明の冒頭 1行</div></div></div>
<div class="box row"><div class="img side">画像</div><div class="stack"><div>講座名（最大2行）</div><div class="note">開催日／形式／残席</div><div class="pc-only">説明の冒頭 1行</div></div></div>
<div class="box pc-only">前へ 1 2 3 4 5 次へ</div>
<span class="btn sp-only">もっと見る</span>
</main>
</div>
<footer class="box">利用規約｜個人情報の取り扱い｜お問い合わせ</footer>
</div>
</body>
WF-03 講座詳細
body に has-cta を付けると、スマートフォン用で固定ボタンのぶんだけ下に余白ができます。
<body class="has-cta">
<div class="wrap">
<header class="row">
<div class="box">ロゴ</div>
<nav class="box pc-only">講座をさがす｜お知らせ｜よくある質問</nav>
<div class="box">ログイン／会員登録</div>
</header>
<div class="note pc-only">トップ > 講座をさがす > 講座名</div>
<div class="row">
<main class="stack">
<h1>講座名（見出し）</h1>
<div class="note">分野タグ／形式タグ</div>
<div class="img" style="min-height:200px">メイン画像</div>
</main>
<aside class="side box stack">
<strong>申し込み</strong>
<div>開催日 2026-11-14</div>
<div>時間 19:00〜21:00</div>
<div>残席 あと 6 席</div>
<div class="fixed-cta"><span class="btn main">この講座に申し込む</span></div>
<div class="note">ログインが必要です</div>
</aside>
</div>
<section class="stack">
<div class="box">講座の内容：説明文（3〜5行）</div>
<div class="box">こんな方に向いています：箇条書き 3点</div>
<div class="box">当日の流れ</div>
<div class="box">講師の紹介</div>
<div class="box">同じ分野の講座（3件）</div>
</section>
<footer class="box" style="margin-top:16px">利用規約｜個人情報の取り扱い｜お問い合わせ</footer>
</div>
</body>
WF-04 申し込みフォーム
<body>
<div class="wrap" style="max-width:720px">
<header class="row"><div class="box">ロゴ</div><div class="box pc-only">山田さん</div></header>
<div class="box">(1) 入力 ― (2) 確認 ― (3) 完了</div>
<h1>講座の申し込み</h1>
<div class="box">申し込む講座：講座名／2026-11-14 19:00〜21:00</div>
<form class="stack" style="margin-top:16px">
<label>お名前［必須］<span class="field"></span></label>
<label>メールアドレス［必須］<span class="field"></span><span class="note">例：taro@example.com</span></label>
<label>参加形式［必須］<span class="box">会場／オンライン（ラジオボタン）</span></label>
<label>参加人数［必須］<span class="field" style="width:96px"></span></label>
<label>連絡事項［任意］<span class="field" style="height:96px"></span><span class="note">0/400字</span></label>
<div class="box">利用規約に同意する［必須］（チェックボックス）</div>
<div class="note">エラーは各項目のすぐ下に表示</div>
<div class="row">
<span class="btn">戻る</span>
<span class="btn main">確認画面へ進む</span>
</div>
</form>
<footer class="box pc-only" style="margin-top:16px">利用規約｜個人情報の取り扱い｜お問い合わせ</footer>
</div>
</body>
2つの幅で表示して確かめた結果
4つのファイルを Chromium で開き、幅 1280px（パソコン）と 375px（スマートフォン）で測った結果です。
| 画面 | 幅 | 横スクロール | ページの高さ | 横並びの箱 | パソコン用だけの要素 | ボタンの高さ（最小） |
|---|---|---|---|---|---|---|
| トップ | 1280px | なし | 814px | 横並び | 3個とも表示 | 42px |
| トップ | 375px | なし | 1246px | 縦積み | 3個とも非表示 | 44px |
| 講座一覧 | 1280px | なし | 800px | 横並び | 10個とも表示 | 42px |
| 講座一覧 | 375px | なし | 880px | 縦積み | 10個とも非表示 | 44px |
| 講座詳細 | 1280px | なし | 800px | 横並び | 2個とも表示 | 42px |
| 講座詳細 | 375px | なし | 960px | 縦積み | 2個とも非表示 | 44px（画面下に固定） |
| 申し込みフォーム | 1280px | なし | 800px | 横並び | 2個とも表示 | 42px |
| 申し込みフォーム | 375px | なし | 771px | 縦積み | 2個とも非表示 | 44px |
（パソコンの高さ 800px は表示領域の高さと同じで、1画面に収まっていることを表します。）
スマートフォン用のトップは高さ 1246px で、高さ 667px の画面ならおよそ1.9画面ぶんです。「最初の1画面に A の要素が入っているか」を数字で確かめられるのが、HTML 版ならではの使い道です。
3つの形式の選び方
| 条件 | 選ぶ形式 |
|---|---|
| 打ち合わせ中やチャットで、その場で案を出したい | テキスト版 |
| 文章の仕様書や課題管理のコメントに貼りたい | テキスト版 |
| 画面数が多く、要素の過不足を一覧で確かめたい | 配置表（表計算ソフト） |
| パソコンとスマートフォンの違いを要素ごとに見比べたい | 配置表（表計算ソフト） |
| 実際の幅で見たときの長さや折り返しを確かめたい | HTML 版 |
| そのあとプロトタイプに育てたい | HTML 版 |
| 見た目のデザインまで同じ道具で続けたい | デザインツール |
1つに絞る必要はありません。配置表で要素を固め、いちばん大事な1〜2画面だけ図にするという組み合わせが、手間と効果のつり合いがよい進め方です。
どこまで描き込むかの判断基準
ワイヤーフレームは描き込むほど直しにくくなります。「配置の合意に必要か」を物差しにして線を引きます。
| 項目 | ワイヤーフレームに描く | 描かない（別の成果物で決める） |
|---|---|---|
| 要素の有無と順番 | 描く | — |
| おおよその大きさ・列の数 | 描く | 正確な寸法（デザインカンプ、共通の画面ルール） |
| 見出しやボタンの文言 | 役割が分かる仮の文言を描く | 最終の文言 |
| 件数・行数 | 「3件」「最大2行」のように描く | — |
| 画像 | 「画像」と書いた箱 | 写真やイラストの中身 |
| 色・書体・角の丸み | 描かない（グレーのみ） | デザインカンプ |
| 入力項目の必須・任意 | 印だけ描く | 型・桁・入力チェック・エラー文言（画面項目定義） |
| 画面の行き先 | ボタンに「〜へ」と書く程度 | 分岐や条件を含む流れ（画面遷移図） |
| 0件・エラー・読み込み中の表示 | 主要な画面だけ、別の図で描く | すべての組み合わせ（画面設計書） |
| ログイン前後の出し分け | 違いが大きい画面だけ描く | 権限ごとの細かな違い（権限の一覧） |
迷ったときの基準は3つです。
| 聞くこと | はい の場合 |
|---|---|
| それが変わると、ほかの要素の位置や大きさが変わるか | 描く |
| それは色・書体・写真の話か | 描かない |
| それは1画面の中では決まらない話か（項目の定義、遷移、権限） | 描かず、該当する設計書に書く |
手順5：レビュー用チェックリスト（記入例つき）
レビューは「なんとなく良さそう」で終わらせず、同じ項目で確かめます。講座詳細（WF-03）を見たときの記入例です。
| No | 確かめること | 結果 | 指摘・メモ |
|---|---|---|---|
| 1 | 画面の目的が1文で書かれている | ○ | |
| 2 | いちばんしてほしい行動が1つで、ボタンがすぐ見つかる | ○ | スマートフォンは画面下に固定 |
| 3 | 優先度 A の要素が、スクロールしなくても見える範囲にある | △ | スマートフォンで残席が画像の下になる。画像の高さを下げる |
| 4 | 要素一覧表にあるものが、すべて図にある | ○ | |
| 5 | 図にあるのに要素一覧表に無いものがない | × | 「注：ログインが必要です」が図だけにある。一覧に足すか図から外す |
| 6 | スマートフォン用で省いた要素に、省いてよい理由がある | ○ | 関連講座は横送りに変更 |
| 7 | 件数・行数の上限が書かれている | △ | 講座名が長いときの行数が未記入 |
| 8 | 0件・エラー・長い文字のときの形を考えてある | △ | 満席のときのボタン表示を追加で描く |
| 9 | 共通部分（ヘッダー・フッター）がほかの画面とそろっている | ○ | |
| 10 | ボタンやリンクの行き先が分かる | ○ | |
| 11 | 色・書体・写真の中身の議論になっていない | ○ | |
| 12 | 指摘が番号（画面ID＋要素No）で言える | ○ | WF-03 の No.4 のように指す |
空のチェックリスト（タブ区切り）です。
No 確かめること 結果 指摘・メモ
1 画面の目的が1文で書かれている
2 いちばんしてほしい行動が1つで、ボタンがすぐ見つかる
3 優先度Aの要素が、スクロールしなくても見える範囲にある
4 要素一覧表にあるものが、すべて図にある
5 図にあるのに要素一覧表に無いものがない
6 スマートフォン用で省いた要素に、省いてよい理由がある
7 件数・行数の上限が書かれている
8 0件・エラー・長い文字のときの形を考えてある
9 共通部分がほかの画面とそろっている
10 ボタンやリンクの行き先が分かる
11 色・書体・写真の中身の議論になっていない
12 指摘が番号（画面ID＋要素No）で言える
レビューで色や写真の話が出たら、「それはデザインカンプで決めます」と受け止めて記録だけ残し、配置の話に戻します。
確かめて分かったこと
- 罫線文字（─ │ ┌ など）で枠を描くと、日本語の等幅フォントでは枠の行だけ幅が約2倍になりました。 Noto Sans Mono CJK JP で測ると、中身の行が 640px のところ、罫線だけの行は 1248px でした。罫線文字は、フォントによって半角幅にも全角幅にもなる文字だからです。
- 枠を半角の
+-|に置き換えると、同じフォントで8つの図すべての行幅が1種類にそろいました。 この記事のひな形を半角の記号で書いているのは、この結果によります。 - 日本語を含まない等幅フォント（DejaVu Sans Mono）で表示すると、どちらの書き方でも右端はそろいませんでした。 日本語の文字が別のフォントで補われ、幅がちょうど半角2つぶんにならないためです。テキスト版は、日本語の等幅フォントを指定したエディタで開くのが確実です。
- 「※」「→」「…」も、同じフォントでは全角幅（半角 8px に対して 16px）でした。 半角幅で表示するフォントもある文字なので、ひな形の中身では「注：」「>」に置き換えています。
- CSS は書く順番で結果が変わりました。 最初の版では、スマートフォン幅で隠すはずの「絞り込む」ボタンが表示されていました（パソコン用だけの要素10個のうち非表示は9個）。ボタンの表示指定を、隠す指定より後ろに書いていたためで、順番を入れ替えると10個とも隠れました。
- HTML 版のボタンは、スマートフォン幅で高さ 44px、パソコン幅で 42px でした。 CSS で
min-height: 44pxを指定したのはスマートフォン用だけだからです。押しやすさに関わる寸法は、図の印象ではなく測った値で確かめられます。 - テキスト版と HTML 版を並べて作ると、順番の食い違いに気づけます。 最初の HTML 版では、スマートフォン幅で開催日と残席が本文より下に回っていました。テキスト版の順番に合わせて、HTML の構造を組み直しています。
よくある質問
Q. ワイヤーフレームとは何ですか？ A. 色や装飾を決める前に、要素・優先順位・配置だけを決める画面の骨組み図です。線と箱と文字で描き、関係者と配置の合意を取るために使います。
Q. ワイヤーフレームとモックアップの違いは？ A. ワイヤーフレームは配置を、モックアップは見た目を確かめるためのものです。モックアップは色・書体・写真まで入れた、完成品に近い見本を指します。
Q. ワイヤーフレームとプロトタイプの違いは？ A. 動くかどうかが違います。ワイヤーフレームは動かない図で、プロトタイプはボタンを押して画面を行き来でき、操作の流れを確かめるために作ります。
Q. ワイヤーフレームは何で作ればよいですか？ A. 手元にある道具で構いません。その場の案出しならテキスト、要素の過不足の確認なら表計算ソフト、実際の幅で確かめるなら HTML が向いています。
Q. パソコン用とスマートフォン用、どちらから描きますか？ A. スマートフォン用から描くのがおすすめです。1列に並べるために優先順位を決めることになり、その順番がパソコン用の配置の土台になります。
Q. ワイヤーフレームがうまくまとまらないときは？ A. 手順1の「目的の1文」と手順3の優先度に戻ります。優先度 A が半分を超えている、いちばんしてほしい行動が2つ以上ある、のどちらかに当てはまることが多いです。
まとめ
- ワイヤーフレームは、要素・優先順位・配置だけを決める図です。色・書体・写真は決めません。
- 手順は目的 → 要素の洗い出し → 優先順位 → 配置 → レビューの5つ。箱を描く前の3つに時間を使います。
- スマートフォン用を先に、上から優先度順に並べ、パソコン用で横に広げます。
- 形式はテキスト・配置表・HTMLの3つ。配置表で要素を固め、大事な画面だけ図にすると手間が少なく済みます。
- テキスト版の枠は半角の記号で書くと、日本語の等幅フォントで右端がそろいます。
- モックアップとデザインカンプは見た目、プロトタイプは操作の流れを確かめるものです。
- 項目の定義や画面どうしのつながりは描き込まず、画面設計書・画面項目定義・画面遷移図に任せます。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「ワイヤーフレームの書き方：作り方の手順とテキストで作る例・テンプレート」
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか？
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください！
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ！
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨（休暇 or 金一封）、11期連続の黒字決算。
