wireframe-sketch

ワイヤーフレームスケッチスキル

手描き風のワイヤーフレームページを1つ作成します。大切なのは「これはスケッチです」ということです。ラフさがブランドの持ち味です。鉛筆やマーカーの色合い、ハッチング塗り、破線の境界線、わずかな傾きを活用してください。

ワークフロー

1. デザインの完成形を求める内容なら、DESIGN.md は無視してください。このスキルでは、明確に低忠実度の見た目を求めています。タイポグラフィのトークンは大まかにだけ反映してください（見出しにはシステムのセリフ体、注釈には等幅フォント、フォントがない場合はマーカー風フォント）。
2. ブリーフから画面のバリエーションを選びます。通常は「01 · A · ORGANIZED」「02 · B · DASHBOARD」のようなタブラベルを3〜4個使います。1つを「アクティブ」にし、残りは非アクティブなスケッチタブにします。
3. レイアウトは次の順にします。
   • ページヘッダー — 太字のセリフ体タイトルの横に、偽の「WIREFRAME v0.1」タグをピン留めします（破線の境界線、わずかな傾き）。その下に、マーカー風のイタリック体で1行のサブタイトルを配置し、右側に日付／デバイス／忠実度を示すデータラインを等幅フォントで表示します。
   • タブストリップ — マーカー風のチェックボックス記号を添えたラベルを4〜5個配置します。アクティブなラベルの背後には、蛍光ペンで引いた線を入れます（黄色／オレンジ系の色合い＋わずかな傾き）。
   • スケッチキャンバス — 方眼紙風のカードを使います（背景は linear-gradient で描く24px × 24pxのグリッド）。太く丸みのある線で、マジックペンで描いたような境界線を付けます。
   • ブラウザーのクローム行 — スケッチ風の丸を3つと、手書き風のURLが入った偽のURLバーを配置します。
   • サイドバーナビゲーション — ナビゲーション項目ごとに、スケッチ風のチェックボックスとマーカー風イタリック体のラベルを配置します。1つにはアクティブ状態を示す蛍光ペンの線を引きます。
   • KPIタイル — ボックスを3〜4個配置し、それぞれにマーカー風の線で描いた、太くラフな数字、小さなアクセントスタンプ、1行のラベルを入れます。
   • チャートのプレースホルダー — 手描き風の軸と、波打つ折れ線を入れたカードを配置します。点のマーカーを3〜4個追加します。
   • 棒グラフのプレースホルダー — 高さを変えたハッチング塗りの長方形をカード内に配置します。
   • 付箋 — マーカー文字を入れた黄色／ピンクの付箋を1〜2枚使います。少し傾けたテープで留め、重要な領域に重ねて「次のステップ」「ページ1」「要確認」などを示します。
4. 単一のHTMLドキュメントを記述します。
   • <!doctype html> から </html> までを記述し、CSSはインラインにします。
   • Google Fontsからシステムで利用できる「Caveat」「Patrick Hand」「Architects Daughter」フォントを使います。利用できない場合は、イタリック体のセリフ体にフォールバックします。
   • グリッドを崩して手描き感を出すため、あらゆる場所にわずかな傾き（transform: rotate(-0.6deg)）を付けます。
   • ヘッダー、タブ、サイドバー、KPI、チャート、棒グラフ、付箋に data-od-id を付けます。
5. セルフチェック：
   • ページがピクセル単位で完璧に見えてはいけません。そう見える場合は、描き込みすぎです。
   • マーカー／鉛筆、方眼紙、ハッチング塗り、付箋がすべて揃っていることを確認します。足りないものがあれば追加します。
   • アクティブなタブには蛍光ペンの線を引き、ほかのタブには引きません。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文だけ記述し、その後には何も書きません。