Wireframe（ワイヤーフレーム）

自己完結型の単一HTMLファイルとして、ミッドファイ（中忠実度）ワイヤーフレームを作成します。複数の画面を横に並べ、レスポンシブ対応、グレースケールに1つのアクセントカラー、実際のコピーを使用します。

基本原則

ミッドファイとは:

グレースケールパレット（下記トークンを参照）に、1つのアクセントカラー（--accent）を主要アクションとアクティブ状態に使用します。これにより、主要なアクションが一目でわかります。他の色は使用しません。
実際のラベル、タイトル、見出しを使用し、「Lorem ipsum」は使いません。製品のエンドユーザーが見る言語でコピーを書きます。不明な場合は、リクエストの言語を使用します。これにより、会話が別の言語で行われている場合でも、そのままワイヤーフレームを関係者に提示できます。
画像のプレースホルダーブロック（実際のアセットは使用しません）
意味を持つ箇所にはLucideのラインアイコン（「アイコン」を参照）
クリック可能なすべての要素にホバー状態（「ホバー状態」を参照）
明確なタイポグラフィ階層
装飾、影はなし、控えめな境界線のみ

絶対にしないこと:

ブランドカラーや、アクセントカラー以外の色の使用
実際の画像、写真、ロゴ、イラストの使用
絵文字やテキスト記号（☰、×、›）をアイコンとして使用：代わりにLucideを使用
アニメーション（ホバー時の短いtransitionは可）
ワイヤーフレーム内部での説明（注釈は外部に配置）

創造的プロセスを支援する

ワイヤーフレームは思考ツールです。ユーザーが「何を」「なぜ」を明確にするために、声に出して考え、疑問を持ち、反復するのを助けます。あなたの仕事はそのプロセスを支援することであり、主導することではありません。これは両方に当てはまります：何の議論もせずにただ作成するのではなく、キャンバスに何かが現れる前にユーザーを議論で埋め尽くしてもいけません。画面は会話のきっかけであり、成果物ではありません。

入力の種類ごとに

新しいリクエスト: 返信の冒頭に短いスパーリング（対話による検討）ブロックを配置します：最も重要な2〜3の選択肢と、それぞれのオプション、あなたの好みとその理由を含めます。レイアウトだけでなくインタラクションも含めます：タップやクリックで何が起こるか、フィードバックがどこに表示されるか、何を元に戻せるか、モーダルか別ページか、インラインか追加ステップか。その後、あなたの好むオプションを構築し、具体的に反応できるものにします。箇条書き数個で、長文は不要です。（あいまいな要求で複雑な範囲の場合？最初に「最適化の意図」から1つの質問をします。）
探索的リクエスト（「〜で迷っている」「〜に何が機能するか」など、考えを声に出している場合）：スパーリングのみ。選択肢とそのトレードオフ、あなたの好みを示し、そのうちの1つを構築するかどうか、そしてどれを構築するかを尋ねます。
フォローアップ入力: まず本質的に応答します：一緒に考え、追加し、弱点や代替案を提示します。何かが決定された場合にのみワイヤーフレームを変更し、すべての思いつきで変更しません。スパーリングか決定かわからない場合？簡潔に尋ねます：「これを適用しますか、それとも先に検討しますか？」

スパーリングの方法

声に出して反論する。 パターンがこのコンテキストで機能しない可能性がある場合（例：アイテムが2つしかないのに短いリスト）、盲目的に構築せずにそう伝えます。
完了済みではなく方向性を示す。 選択肢が本当に開かれている場合、単に説明するだけでなく、ワイヤーフレーム内でAとBを並べて表示し、どちらを好むかを伝えます。
小さなステップで反復する。 要素ごとに変更が発生することを想定します。ユーザーが選択または指摘したものに基づいて構築します。
決定を強制しない。 目標は明確化であり、選択は後で行うことができます。
軽く保つ。 各オプションにつき1行、合計で数個の箇条書き、そして最大で1つの焦点を絞った質問。ワイヤーフレーム自体が語るので、中身を説明する必要はありません。仮定やクリック時に何が起こるかなど、ユーザーが見えないことだけに言及します。

UXの原則

レイアウトだけでなく、コンセプトに疑問を持つ。 基礎となる機能が実際に成立するかを常にチェックし、挑戦します。「見た目がどうか」だけでなく。
システムが知り得ない状態を主張しない。 利用可能なデータに基づいてUIを構築します。何かがわからない場合は、状態の代わりにアクションを表示するか、ユーザー自身にマークさせます。
コンテンツの忠実度を画面の目的に合わせる。 構造やナビゲーションが目的の場合、コンテンツは低忠実度（プレースホルダー行）にして、焦点を主題に保ちます。
主要な状態を並べてワイヤーフレーム化する。 ログイン中/ログアウト中、空/満杯、開/閉：これにより、本当の決定が可視化されます。
ナビゲーションを小さな画面に意図的に変換する。 1つの永続的なアンカーを維持して遷移が不快にならないようにし、すべてを表示する代わりに優先順位を付けてグループ化します。1つのナビゲーション構造、複数のシェル、1つのソース。

提供方法

各ワイヤーフレームは自己完結型の単一HTMLファイルとして提供します。 別のJS/CSSファイルは隣に置きません：プレビューではファイルが単独でレンダリングされることが多く、兄弟ファイルが読み込まれません。ベーステンプレート内の2つのCDNリンク（Google Fonts経由のIBM Plex Sans、jsDelivr経由のLucide）は例外で、プレビューで正常に読み込まれます。再利用したい場合？マスターテンプレートをインライン化し、コピーを同期します。
多数の画面がある場合、固定の画面切り替え機能（例：ドロップダウン）を追加して、画面間をジャンプできるようにします。
複数の製品パートにまたがるコンセプトの場合、コンセプトサイトを構築します（下記参照）。

コンセプトサイト

コンセプトが製品の複数のパート（オンボーディング、検索、アカウントなど）をカバーし、ユーザーが全体として表示またはレビューしたい場合、コンセプトサイトを構築します：各パートに1ページ、同じメニューバーで接続します。関係者はコンセプト全体を1か所でウォークスルーでき、他の部分に触れずに1つのパートを反復できます。

メニューバー すべてのページの上部、キャンバス上、フレームの上に配置。左側：コンセプト名と、バージョン、日付、1行の説明を保持するツールチップ付きのinfoアイコン。次に区切り線、そして各パートへのリンク1つずつ。現在のページはaria-current="page"を取得し、--text-primary/600でスタイル設定。その他は--text-secondary。リンクが収まらない場合、バーは折り返しではなく水平スクロールします。大規模なコンセプト（約15画面以上）の場合、バーの右端に「画面に移動」ドロップダウンを追加し、任意のページの任意の画面にジャンプできるようにします。小規模なコンセプトではメニューで十分です。
IA（情報アーキテクチャ）が最初。 最初のリンクはIAページです：製品の構造と各パートへのリンクを含みます。これがエントリーページでもあります。
各パートページ は通常のワイヤーフレームです：フレームを横に並べ、フレームラベル、点線のキャンバス。
一緒に開かれる場合は別ファイル。 ユーザーがブラウザで開いたりホストしたりできるフォルダを作成できる場合（ローカルで作業、リポジトリ内）、index.htmlをIA用に、各パートに短いスラッグ（onboarding.html）を付けた1ファイルを作成し、相対リンクします。
単独でプレビューされる場合は1ファイル。 単一のアーティファクトやチャットプレビューは1ファイルを単独でレンダリングするため、他のファイルへのリンクはそこで機能しません。すべてのパートを1つのファイルにセクションとして配置し、メニューから#hashリンク（#onboarding）で切り替えます。
メニューはどこでも同一に保つ。 1つのマスターコピーからすべてのファイルにインライン化し、各ページが単独でも機能するようにします。パートが追加、名前変更、削除された場合、同時にすべてのファイルのメニューを更新します。

デザイントークン

:root {
  --bg:        #F5F5F5;   /* ページ背景 */
  --surface:   #FFFFFF;   /* カード、パネル */
  --border:    #D1D1D1;   /* 境界線 */
  --muted:     #E8E8E8;   /* プレースホルダーブロック */
  --text-primary:   #1A1A1A;
  --text-secondary: #595959;   /* メタ情報、プレースホルダー、画像ブロック内のラベル */
  --text-disabled:  #AAAAAA;   /* 無効化されたコントロールのみ */
  --accent:       #1560D0;   /* 唯一の色：主要アクション、アクティブ状態 */
  --accent-hover: #1250B0;
  --hover-bg:     #F0F0F0;   /* 明るい要素または透明要素のホバー */
  --border-hover: #AAAAAA;   /* 境界線付き要素のホバー */
  --font: 'IBM Plex Sans', system-ui, sans-serif;
}

これらのトークンはWCAG AA（4.5:1）向けに調整されています：--text-primaryと--text-secondaryは、ここにあるすべてのサーフェスカラー（--surface、--bg、--hover-bg、--muted、--border）上で合格します。テキストとしての--accentは、--borderを除くすべての上で合格します。白は--accent上で合格します。アクセシビリティはワイヤーフレームから始まるので、この状態を維持します：テキストに薄いグレーを追加しないでください。唯一の例外は--text-disabled（2.3:1）で、WCAGが例外とする無効化されたコントロールにのみ使用し、メタデータなどの読み取り可能なテキストには決して使用しません。

HTML構造

ベーステンプレート

langをコピーの言語に設定します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wireframe: [件名]</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    /* トークン */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font: inherit; }  /* フォームコントロールはデフォルトでフォントを継承しません */
    /* レイアウト + コンポーネント */
  </style>
</head>
<body>
  <div class="wireframe-canvas">
    <div class="frame-row">
      <!-- ここにフレーム -->
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lucide@1/dist/umd/lucide.min.js"></script>
  <script>lucide.createIcons();</script>
</body>
</html>

複数フレームのレイアウト

このキャンバスは出力を一目でワイヤーフレームと認識させるものなので、そのまま使用します。

.wireframe-canvas {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #C8C8C8 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 40px;
  min-height: 100vh;
  font-family: var(--font);
}

.frame-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* デバイスごとの幅 */
.frame.mobile  { width: 375px; }
.frame.tablet  { width: 768px; }
.frame.desktop { width: 1280px; }
.frame.auto    { width: 100%; max-width: 1280px; }

フレームラベル（各画面の上）

<div class="frame-label">画面 1: [名前]</div>
<div class="frame mobile">
  <!-- コンテンツ -->
</div>

.frame-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

コンポーネント

コンポーネントのHTMLとCSSは自分で記述しますが、これらの値に従ってセッション間でワイヤーフレームの見た目が一貫するようにします。ボタンと入力には、パディングだけに頼らず、min-heightをinline-flexのセンタリングと組み合わせて使用します。パディングだけだと40pxに微妙に届かず、40pxは最小クリックターゲットだからです。

コンポーネント	仕様
プライマリボタン	`--accent`塗りつぶし、白テキスト、14px/600、`min-height: 40px`、パディング 0 20px、半径 6px
セカンダリボタン	透明、`--accent`テキスト、1.5px `--accent`境界線、それ以外はプライマリと同じ
テキストボタン / インラインアクション	「編集」「ステータス設定」「変更」：`--accent`テキスト、14px/500、境界線なし。それでも40pxのターゲット：`min-height: 40px`に`inline-flex`、または行内にある場合はパディングと等しい負のマージン
入力	ラベルを上部に（13px/500、`--text-primary`、4pxのギャップ）。フィールド：1px `--border`、半径 6px、`min-height: 40px`、パディング 0 12px、14px、プレースホルダーテキストは`--text-secondary`
画像プレースホルダー	`--muted`ブロック、固定の`aspect-ratio`、中央に`--text-secondary`の13pxラベルでコンテンツと比率を指定（「製品写真 16:9」）
カード	`--surface`、1px `--border`、半径 8px、`overflow: hidden`。ボディパディング 16px、ギャップ 4px：オーバーライン 11px 大文字 `--text-secondary`、タイトル 15px/600、メタ 12px `--text-secondary`
タグ	12px/500、パディング 2px 8px、半径 4px（カードより小さい）、`--muted`背景、`--text-secondary`テキスト
モバイルナビゲーションバー	パディング 12px 16px、下部境界線。ロゴテキスト 16px/600 左、Lucide `menu` を40×40ボタン内で右、`aria-label`付き
デスクトップナビゲーションバー	パディング 16px 32px、下部境界線。ロゴ、リンク（14px、`--text-secondary`、ギャップ 24px、アクティブ `--text-primary`/500）、プライマリボタン右
ステッパー	28pxの円に13px/600の数字、32pxの接続線は`--border`。未完了：`--muted`/`--text-secondary`。アクティブ：`--accent`/白。完了：`--border`/`--text-secondary`

リストにないコンポーネントが必要ですか？新しいものを発明するのではなく、これらの値（同じ半径、タイプスケール、状態）から導出します。

最適化の意図

リクエストに方向性（「ステップ数を減らして」「スキャンしやすく」「ごちゃごちゃしてないように」「もっと簡単に理解できるように」）が含まれている場合、それをレンズとして使用します。その方向性を強化するコンポーネント、階層、コピー構造を選択します。

リクエストがあいまいで、かつ範囲が複雑（3画面以上またはフロー）の場合、1つの焦点を絞った質問をします：「何を改善したいですか？概要、速度、信頼性、それとも他に？」

単一画面の場合や意図がすでに明確な場合は質問しません。

入力タイプごとのアプローチ

言葉で説明された画面またはフロー

説明内の画面を特定します（各画面 = 1つのフレーム）
デバイスタイプを決定します（アプリの場合は明示されていなければモバイル、ウェブの場合はデスクトップ）
すべてのフレームを1つのファイルに、横に並べて配置します
コンテキストに合った実際のコピーを、エンドユーザーの言語で使用します（基本原則を参照）

フレーム数

1画面：デバイス幅で表示
2〜4画面：1行に横に並べる
5画面以上：2行にするか、水平スクロール

ホバー状態

常に追加します。ワイヤーフレームはクリック可能であることを意図しており、ホバーは何がインタラクティブかを示します。3つのパターンがあります。固定リストではなく、このワイヤーフレームで作成するクラスに適用します。

/* 1. アクセント塗りつぶし：プライマリボタン、アクティブチップまたはタブ、FAB */
.btn-primary:hover   { background: var(--accent-hover); cursor: pointer; }

/* 2. 明るいまたは透明：セカンダリボタン、アイコンボタン、リストアイテム */
.btn-secondary:hover,
.nav-menu:hover      { background: var(--hover-bg); cursor: pointer; }

/* 3. 境界線付き：クリック可能なカード、チップ、選択オプション */
.card:hover          { border-color: var(--border-hover); cursor: pointer; }

すべてのインタラクティブ要素はcursor: pointerを取得します。非インタラクティブ要素（テキスト、ラベル、プレースホルダー、クリックできないカードやセクション）はそのままにします。

Lucideアイコン

アイコンが必要な場合は、lucide.dev で検索して適切な名前を見つけます。名前ベースで検索します。Lucideの名前はアイコンの内容を正確に表しています。

<i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>

アイコンのサイズは、行内の場合は16px、ボタン内の場合は18px（中）、主要な空の状態や見出しの場合は24px（大）を使用します。親のテキストの色と一致させるために stroke="currentColor"（デフォルト）を使用します。ツールバーやアクション行では、とにかくすべてのアイコンボタンにラベルがあるわけではありません。関連する場合はaria-hidden="true"を使用するか、アクセシブルなラベルを追加します。

段階的詳細化

ワイヤーフレームを段階的に構築します：

フレーム（空のキャンバス）、必要な数だけ配置します
主要な構造ブロック（ヘッダー、サイドバー、メイン領域）
主要なコンポーネント（ナビゲーション、検索バー、テーブル）
実際のコピー
細かい調整：ホバー、アクセントの配置、整列

よくある落とし穴

テキストにグレーが多すぎる。 --text-primaryは #1A1A1A で、#333 や #444 ではありません。デフォルトの選択として--text-secondaryを使用しないでください。まず--text-primaryを使用し、本当にメタ情報や補足情報の場合にのみ--text-secondaryに下げます。
スクロールについて考えていない。 <body> は min-height: 100vh、コンテンツが長い場合はスクロールします。overflow: hidden でコンテンツを切り取らないでください。
一貫性のない境界線。 すべての境界線は 1px solid var(--border)、半径は 6px または 8px です。これらを混在させないでください。
アクセントの使いすぎ。 アクセントカラーはページごとに最大2〜3か所、優先順位の高い場所にのみ使用します。

なぜこれが機能するのか：概念実証

信頼は規模に応じて異なります。ワイヤーフレームは、製品に取り組む全員が「絵を描く」ことができる中立的な言語を作り出します。詳細化ではなく統合です。

ワイヤーフレームが機能するのは、本来の創造性のモード（発散と収束）を、これらのモードが入り乱れて曖昧になるのではなく、構造化するからです。適切な粒度のレベルを定義することで（実用的なコピー、実際のアクセントカラー、クリック可能なプロトタイプ）、ワイヤーフレームはそれ自体が成果物となり、画面の背後にある意思決定を明らかにします。単なる準備段階ではありません。

floorvanriet/wireframe

wireframe とは？

お気に入りのAIに質問する

ドキュメント