ワイヤーフレームスケッチテンプレートは何をしますか？

明示的にドラフト段階であることを示す手描きローファイワイヤーフレーム。レイアウトフィードバックを促し、「出荷可能ではない」ことを伝え、またはビジュアルデザインにコミットせずに IA を文書化するために使用します。

⚠️ 最初に骨格を選択してください

このスキルで最もよくある失敗：モデルが筆致（震え、破線、手書き）を受け継ぐものの、誤った文書構造を生成してしまうこと。例えば、マルチスクリーンフロー文書が必要な場面で 3 つの独立したアプリ画面を生成したり、サイトマップにエディトリアル用の図を詰め込んだりすることです。

何かを書き始める前に、使用する骨格とその理由を応答で宣言してください。 ユーザーの言葉を以下のいずれかに照合します：

ユーザーの発言	骨格	理由
新聞 / 雑誌 / ランディングページ / 公式サイト / パンフレット / シングルページ / ワンページャー / エディトリアル	A. シングルページエディトリアル	1 つの長いページ、セクションが積み重なり、コンテンツ密度が高い
アプリ / モバイル / スマホ / デスクトップアプリ / SaaS フロー / ユーザーパス / サインアップフロー / チェックアウトフロー / マルチスクリーン / マルチページ / 登録 / ログイン / オンボーディング / 設定 / タブ / フォームフロー	B. アプリマルチスクリーンフロー	複数画面、ナビゲーション、状態、トリガー
情報アーキテクチャ / IA / サイトマップ / フローチャート / 関係グラフ / ノードグラフ / データフロー / ステートマシン / 権限マトリックス	C. IA / サイトマップ図	ノード＋エッジ、実際の画面はなし
不明 / ユーザーが言及していない / どちらでも可	ユーザーに確認 — デフォルト選択はしない	—

ユーザーがトピックを指定したが骨格のヒントがない場合は、どれを使用するか尋ねてください。間違った選択は作業のやり直しにつながります。

骨格 A — シングルページエディトリアル

foolscap-wireframe.html がこの骨格のリファレンスです。アーティファクトが 1 つのスクロール可能なページ（新聞、雑誌見開き、ランディングページワイヤーフレーム、パンフレット、シングルページ PRD 図解）の場合に使用します。

必須セクション（順序通り。1〜2 つ省略可ですがリズムは維持）：

マストヘッド / バナー — タイトル、号/バージョン、日付
ヒーロー特集 — 見出し＋イントロ＋手描きイラストプレースホルダーを含む 1 つの大きなリードブロック
3〜5 個のコンテンツセクション — それぞれに h2、テキスト図とスケッチイラストの混合
サイドバー / ブリーフ / リストブロック — 短い項目、密なタイポ、リズムを変える
CTA / サインアップ / フッター

密度：foolscap リファレンスの 1 平方インチあたりのコンテンツ量を目指してください。スパースなシングルページワイヤーフレームはドラフトではなく、スタブのように感じられます。

骨格 B — アプリマルチスクリーンフロー ⛔ ハードな最低条件

foolscap-wireframe.html はこの骨格のリファレンスではありません — SVG フィルタ、フォントスタック、破線セルの美学のみを借用します。文書構造は以下のチェックリストから組み立てる必要があります。

必須セクション（すべて存在する必要があります — 不足している場合は不完全なページとみなします）

カバー — アプリ名＋バージョン＋役割/ペルソナ＋1行のスコープ（「MVP / ベータ / v0.3 / 経費管理のみ、投資なし」）
サイトマップ / ナビダイアグラム — すべての画面とそれらの関係を示すビジュアルツリーまたはグリッド。リストではなく、ボックス＋線による実際の図。
6〜8 以上のコア画面を figure ブロックとして。経費管理アプリの場合、最低限：起動/ウェルカム → ホーム（概要） → 追加（金額 → カテゴリ → メモ → 保存） → 明細詳細 → 月次統計 → カテゴリ管理 → 予算設定 → プロフィール/設定。3 画面はワイヤーフレーム文書ではなく、スケッチサンプルです。
少なくとも 1 つのフロー矢印図。画面間のユーザーパスを示す（例：「ホーム → '+'をタップ → 追加 → 保存 → トースト → ホームに戻る」）。画面間に単に ↓ を置くのではなく、矢印にトリガーを記述してください。
状態を持つ各画面に対して少なくとも 1 つの状態バリアント：空/ローディング/エラー/成功。重要と思われる画面を選んでください（リストページ → 空状態、フォーム → エラー状態）。
エンドマター — 未解決の質問 / TBD リスト / バージョンログ / 次に決定すべき事項

画面ごとの要件

すべての画面ブロックには以下が必要です：

図番号 — 図. 02（中国語で記述する場合はローカライズされた形式を使用）、フロー図からの参照用に連番
1 行の責任 — 「追加 · ホームの'+'ボタンからアクセス。保存時にトーストを表示し、ホームに戻る」
トリガー注釈 — どのエントリポイントがここに至るか、どの出口がどこに行くか
マージナリア — 自明でない各画面に少なくとも 1 つの手書きサイドノート（制約、エッジケース、「TBD」、未解決の質問）

レイアウト

画面の垂直スタック と各画面間の明示的な矢印＋トリガーラベル（受動的な ↓ ではありません）
または 水平フローストリップ で画面を左から右に配置 — オンボーディングやチェックアウトなどの線形フローに適しています
フロー表示のないグリッドに画面を配置しないでください — それはスクリーンギャラリーであり、フロー文書ではありません

コンテンツ密度のレッドライン

< 5 画面 → 自分で却下し、ユーザーにさらにフローを追加するか、正直にスコープを縮小するよう依頼する
サイトマップなし → 自分で却下する、文書はそれなしでは読めない
状態バリアントなし → 描画しなくても、少なくとも空/エラーの箇所に印をつける（「空状態：図. 04a / TBD を参照」）
どこにもマージナリアがない → 筆致はコピーしたが言葉はコピーしていない。戻って注釈を付けること

骨格 C — IA / サイトマップ図

純粋な構造文書 — 実際の画面はなく、情報アーキテクチャ、ナビゲーション、データフロー、またはステートマシンのノードエッジ図のみ。

必須セクション：

タイトル＋凡例 — ボックスの意味、線種の意味（実線 = 直接ナビ、破線 = 条件付き、二重線 = データバインディング）
メイン図 — ツリー/グラフ自体、中央、大
ノードごとのミニスペック — 自明でないノードについては、そこに何があるかを 1〜3 行で
権限 / ロールマトリックス（該当する場合）
未解決の質問 を下部に

震えと手書きは引き続き適用されます。ボックスアンドラインのレイアウト、十分な余白、「現在のパス」/「デフォルト」のハイライトには単一のアクセントカラーを使用します。

マージナリア言語（骨格 B と C では必須、A では任意）

マージナリアこそが、真のローファイワイヤーフレームと「ローファイを装ったハイファイドラフト」を区別するものです。以下のテクニックを使用します：

マーク	いつ	方法
サイドノート	制約または根拠	`<aside class="margin">` を手書きフォント、アクセントカラーで、マージンに配置
サークル＋矢印	特定の要素を指摘	SVG `<circle>` + `<path>` に `filter:url(#wobble)` を適用、アクセントストローク
TBD / ?	未解決の決定	アクセントカラーで手書きの「TBD」、震える円の中に配置することもある
取り消し線	コンテキスト保持のための古いアイデア	`text-decoration:line-through` + わずかな回転 `transform:rotate(-1deg)`
下線 + !	重要 / 必ず議論すべき	用語の下に波線の SVG 下線
番号付きコールアウト	以下の凡例テーブルへの参照	アクセントカラーの丸数字で、セクション末尾に `<ol>` 凡例

マージナリアのインク色 = 1 つのアクセントカラー（テンプレートでは明るい青）。本文のインクはモノクロームのままです。

手描きマーク

ローファイワイヤーフレームは、実際のアイコンや写真ではなく、その場で描かれたマークに大きく依存します。ファイルの先頭で小規模なライブラリを構築してください：

X 印のボックス — 画像プレースホルダー：<rect> + 2 本の交差する <line>、すべて filter:url(#wobble) 下に配置
波線テキスト — コピープレースホルダー：3〜5 の水平波線 <path> を幅を減らしながら配置
スティックアイコン — ナビアイコンを 8〜16 px の SVG パス（家、プラス、グラフ、歯車）、1.4 px ストローク＋震え
ローディングスピナー — ギャップのある震える円、静的デリバラブルではアニメーション不要
アバターサークル — 円＋手書きフォントのイニシャル
チャートの骨格 — 震える棒/点/線、図番号以外の軸ラベルはなし

アイコンフォント、lucide、heroicons などをインポートしないでください。 実際のアイコンは震えと競合し、瞬時にローファイ感を損なわせます。

必読

この SKILL.md を最初に、最初から最後まで読んでください。骨格を選択するまで foolscap-wireframe.html を開かないでください。

その後：

骨格 A → foolscap を構造と筆致語彙の両方について完全に読む
骨格 B → foolscap は 以下のためだけに 開く：<filter> SVG 乱流値、点線の背景パターン、破線/波線の区切りパス、手書きフォントスタックをコピーするため。マストヘッド/ヒーロー/長文記事の構造はコピーしないでください — 間違った骨格です。
骨格 C → B と同じ、筆致のみの抽出

foolscap のプレースホルダーエディトリアルコピー、図のキャプション、クラス名をそのままコピーしないでください。

デザイン戦略

忠実度の範囲を最初に固定します：

純粋な構造（ボックス＋ラベルのみ、フィールド名以外の実際のタイポなし）→ 最大の震え、最小限のコンテンツ
構造＋サンプルコンテンツ（プレースホルダーの見出し、実際のラベル、¥3,280 のようなダミーの数字）→ 中程度の震え、より高い密度
構造＋注釈（矢印、マージナリア、「TBD」、トリガーラベル）→ 震え＋マージナリア＋アクセントカラーコールアウト

1 つを選択し、文書全体で一貫して守ってください。忠実度を混在させると、一貫性がないように読めます。骨格 B はほとんどの場合、ティア 3 を必要とします。

レイアウトの優先事項

推奨：

純白の紙背景 — 黄色いリーガルパッド風にしない
モノクロームインク（黒＋2〜3 階調のグレー）、マージナリアと「カレント/デフォルト」のハイライトには最大 1 つのアクセントカラー（明るい青または赤）
1 つの手書き CJK フォント（Ma Shan Zheng / Long Cang）＋1 つの手書きラテンフォント（Caveat / Kalam）
ラベル/図番号/コールアウトにはモノスタイル（大文字、タイトな文字間隔）
セクション間の区切りは破線または波線 — 実線のクリーンな罫線は絶対に使用しない
一貫した震えの強度 — 要素ごとに強弱を変えない。1 つのグローバルフィルタ＋小さな形状用に 1 つの「より強い」フィルタのみ
文書内の他の場所から参照されるすべてのものに番号付きの図（「図. 01」。中国語で記述する場合はローカライズされた形式を使用）
マージナリアのための十分なサイドマージン

避けるべきこと：

実際のプロダクションアイコンや洗練された SVG イラスト（スケッチフレームと競合します）
カラー写真（スケッチプレースホルダー — X 印のボックスまたは波線テキストを使用）
絵文字
同じページ内でのワイヤーフレームとハイファイコンポーネントの混在
ページがうるさくなるまで全ての要素に震えフィルタを強制適用（震えは味付けであり、塗りつぶしではありません）
フロー注釈として単一の ↓ を使用する（矢印にトリガーを記述してください）
アプリシナリオで 3 つの独立した画面だけを提供する（それは画面サンプルであり、ワイヤーフレーム文書ではありません）

アンチパターン（納品前のセルフチェック）

プラットフォーム / サイズ

ウェブページとしてレンダリングされ、通常は長尺スクリーンショットとしてキャプチャされ、PRD / Notion / Confluence / Lark ドキュメントに埋め込まれます。ランタイムインタラクション用には設計されていません — 手描きに見える静的なデリバラブルです。

骨格 B の場合、ページ幅 720〜960 px が適切です（ドキュメントツールの読み取り幅に合います）。骨格 A の場合、960〜1100 px（エディトリアル形式）。骨格 C の場合、サイトマップに合わせてより広く（1200+）なることがよくあります。

ワイヤーフレームスケッチテンプレート