プロトタイプ スケッチ スキル
動作するWebアプリを手書き風に見せることで、クライアントに「これはプロトタイプであり、完成品ではない」と認識させます。これはルック＆フィールのスキンに過ぎません。純粋に付加的なものであり、完全に元に戻せます。
スコープのガードレール（最初に読むこと、決して破らないこと）
- スタイルのエントリーポイントと
index.htmlのみを変更すること。 スタイルシートの追加、1つのSVGブロックの貼り付け、2つの属性の設定のみを行います。それ以外は行いません。 - コンポーネント、テンプレート、
.ts/.tsx/.jsx/.vueのロジック、ルーティング、状態管理、サービス、テストは決して編集しないこと。 - スケッチ風のコンポーネントライブラリ（例：wired-elements）とコンポーネントを差し替えないこと。 それはマークアップを書き換えることになり、禁止されています。
- ロゴ、写真、チャート、アイコンなど、鮮明に保つ必要があるものの色を変更したり、歪めたりしないこと。 代わりにオプトアウトクラスを使用してください。
- 元に戻すのは簡単であること： 2つの
<html>属性を削除すれば、スキン全体がオフになります。
仕組み（一つの考え方）
- 1つのスタイルシート
assets/sketch-skin.cssが5つのスタイルすべてとスケッチ度の段階を定義します。 - 1つのSVGブロック
assets/sketch-filters.htmlが揺れフィルター（#sketch-25…#sketch-100）を定義します。 - 有効化は
<html>に2つの属性を設定することです：data-sketch="<style>"とdata-sketch-level="<0|25|50|75|100>"。 - 見た目は以下から作られます：手書き風のフォント置き換え + 手描き風のボックス（不規則なボーダー半径、平坦な塗りつぶし） + SVG変位フィルター（その強度がスケッチ度となります。フォントはテキストをそのまま表示し、フィルターはボックスの装飾のみを揺らし、テキストをぼかすことはありません）。
クイックスタート（この順序で行うこと）
- リクエストがスキンのみであることを確認する。 ユーザーが動作やレイアウトの変更を望んでいる場合は、そこで止めてください — それはスコープ外です。
- フレームワークを特定し、そのグローバルスタイルシートと
index.htmlを見つけます（以下のレシピ表を参照）。 - スタイル（「スタイル」の表）とレベル（
0、25、50、75、100）を選択します。 - スキンCSSを プロジェクトのグローバルスタイルに追加します：
assets/sketch-skin.cssをプロジェクト内にコピー（例：src/styles.scss）または@importします。フォントの@importはすでにそのファイル内に含まれています（オンラインで使用する場合）。
- SVGフィルターを
assets/sketch-filters.htmlからindex.htmlの開始<body>タグの直後に貼り付けます。（必須 —filter: url(#sketch-…)は、これらの定義がDOM内にある場合のみ解決されます。） - 有効化するには、
index.htmlの<html>タグを編集します：<html lang="ja" data-sketch="balsamiq" data-sketch-level="50"> - ブラウザで確認します。 元に戻すには、2つの
data-sketch*属性を削除します（追加したCSS/SVGは非アクティブのまま残ります — 属性がなければ何の効果もありません）。
スタイル
data-sketch | 見た目 | フォント | 使用目的 |
|---|---|---|---|
balsamiq | 清潔なグレースケールワイヤーフレーム、平坦なボックス | Balsamiq Sans | デフォルトの「これはモックアップです」 |
sharpie | 太い黒マーカー、強いストローク | Permanent Marker | ホワイトボード / ワークショップスケッチ |
pencil | 薄いグラファイト、柔らかいストローク | Gaegu | 優しい「紙に鉛筆」のドラフト |
doodle | 遊び心のある、薄い色のアクセント | Short Stack | フレンドリーで、フォーマルではないコンセプト |
blueprint | 青い紙に白インク | Patrick Hand | 技術的な「製図板」の雰囲気 |
スケッチ度
data-sketch-level は線の揺れ具合を制御します。異なるSVG変位フィルターを選択します：
| レベル | 効果 |
|---|---|
0 | 手描き風のボックス＋フォントだが、直線で安定した線（最もクリーン） |
25 | 微妙な揺れ |
50 | はっきりと手描き風（推奨デフォルト） |
75 | ラフでエネルギッシュなスケッチ |
100 | 非常にラフ、最大の「落書き」 |
data-sketch が設定されていて data-sketch-level が省略された場合、スキンはデフォルトでレベル 50 になります。
斜めの透かし（オプション）
画面全体にドラフトであることを示すスタンプを押すには、表示したいテキストを指定して3つ目の <html> 属性を追加します：
<html data-sketch="balsamiq" data-sketch-level="50" data-sketch-watermark="DRAFT">
data-sketch-watermark は、ビューポート全体に斜めに1語の薄い手書き文字を描画します。これは固定された非インタラクティブなレイヤー（pointer-events: none）であるため、クリックを妨げず、レイアウトを変更せず、ページやルートの変更があってもその場に留まります。任意のテキストが機能します（DRAFT、PROTOTYPE、CONFIDENTIAL、クライアント名など）。属性を削除すればオフになります。オーバーレイを使用する場合、透かしテキストフィールドでライブ設定できます。
モーダル、ポップアップ、SPAナビゲーション
スキンは <html> の属性によってアクティブ化され、グローバルな [data-sketch] … セレクターでスタイルが適用されるため、アクティブ化後に表示されるものはすべて自動的に継承します — ダイアログ、ポップオーバー、ドロップダウンメニュー、ツールチップ、トースト（ポータルにマウントされたものを含む）、およびシングルページアプリケーションでナビゲートするすべての画面が対象です。コンポーネントやルートごとに配線する必要はありません。
一貫性を保つための2つのポイント：
- セレクターリストはすでに
dialog、[popover]、[role="dialog"]、[aria-modal="true"]、.modal、.popover、メニュー、ツールチップ、トースト、そしてネイティブの::backdropをカバーしています。 - オーバーレイスクリプトは
<body>を監視し、フレームワークがルート変更時にボディを置き換えた場合にSVGフィルターを再注入するため、揺れが静かに消えることはありません。（静的な属性モデルの場合、sketch-filters.htmlを<body>の後に一度だけ貼り付けます。SPAフレームワークは子ルートにマウントされ、それをそのまま残します。）
フレームワーク注入レシピ
スキンはフレームワークに依存しません。以下は正確なターゲットです。詳細は references/implementation.md にあります。
| スタック | CSSを追加する場所 | SVGを貼り付ける場所 | 属性を設定する場所 |
|---|---|---|---|
| Angular | src/styles.scss （または styles.css） | src/index.html の <body> の後 | src/index.html の <html> |
| React / Vite | src/index.css （main.tsx からインポート） | index.html の <body> の後 | index.html の <html> |
| Vue | src/assets/main.css （main.ts からインポート） | index.html の <body> の後 | index.html の <html> |
| 静的HTML | <head> 内で sketch-skin.css をリンク | index.html の <body> の後 | index.html の <html> |
特定のアセットを鮮明に保つ（オプトアウト）
スキンはマークアップを編集しませんが、ユーザーが特定の要素（ロゴ、チャート）を保護するよう明示的に要求した場合に許可される唯一のマークアップ変更は、その単一の要素にオプトアウトフックを追加することです：
<img src="logo.svg" class="no-sketch" alt="Logo">
.no-sketch （または data-no-sketch）は、その要素から揺れフィルターと色のオーバーライドを削除します。控えめに、かつ要求された場合にのみ使用してください。
インタラクティブプレビューオーバーレイ（オプション）
ユーザーがスタイルをライブで切り替えたい場合（例：クライアントにスイッチを見せる）、静的な属性の代わりにオーバーレイを使用します：
- グローバルスタイルに
assets/sketch-skin.cssを追加します（クイックスタートと同様）。 </body>の前に1つのスクリプトタグを追加します：<script src="sketch-toggle.js" defer></script>- 完了です。スクリプトは、OFF ＋ テーマごとに1つのラジオボタン、0～100%のスケッチ度スライダー、透かしテキストフィールドを備えたフローティングパネルをレンダリングし、
<html>属性をライブで切り替え、選択内容をlocalStorageに記憶します。また、SVGフィルターを自動注入します（SPAがボディを置き換えた場合も再注入します）。そのため、クイックスタートのステップ5（sketch-filters.htmlの貼り付け）は不要です。
これもスキンのみで非破壊的です — スクリプトは属性を設定するだけです。タグを削除すれば無効になります。リクエストが「私/クライアントがスタイルを切り替えられるようにしてほしい」である場合にこのモデルを選択します。固定された、スクリーンショットで安定した外観が必要な場合は静的な属性を使用します。
スクリーンショットギャラリー
README.md には、demo/screenshots/ にあるPNGを使用して、すべてのスタイルと0→100%の段階が示されています。これらの画像は事前レンダリングされています。これらの画像を生成するインタラクティブデモアプリとPlaywrightキャプチャスクリプトは、プロジェクトの開発用ソースに含まれており、インストールされたスキルにはバンドルされていません。スキルそのものは assets/ + references/ のみです — ビルドステップも依存関係もありません。
例
例1 — Balsamiq、中程度のスケッチのAngularデモ
- 入力：「明日のデモのために、このAngularアプリをBalsamiqワイヤーフレームのように見せてください。」
- アクション：
sketch-skin.cssをsrc/styles.scssに追加。フィルターをsrc/index.htmlに貼り付け。<html data-sketch="balsamiq" data-sketch-level="50">を設定。 - 結果：アプリは全く同じように動作し、グレースケールのワイヤーフレームとしてレンダリングされます。
例2 — React、最大限のSharpie
- 入力：「Reactアプリ、完全にホワイトボードマーカー風で、非常にラフに。」
- アクション：
sketch-skin.cssをmain.tsxでインポート。フィルターをindex.htmlに貼り付け。data-sketch="sharpie" data-sketch-level="100"を設定。
例3 — オフにする
- 入力：「本当のUIに戻してください。」
- アクション：
<html>からdata-sketchとdata-sketch-levelを削除。完了 — 他に変更は必要ありません。
トラブルシューティング
| 症状 | 原因 | 修正 |
|---|---|---|
| ボックスは手書き風だが線が完全にまっすぐ | SVGフィルターがDOM内にない、またはレベルが0 | sketch-filters.html が <body> の後に貼り付けられていることを確認。レベルを25以上に設定 |
| 何も変わらない | 属性がない、またはCSSが読み込まれていない | <html data-sketch="…"> が存在し、sketch-skin.css がグローバルスタイルにあることを確認 |
| テキストがぼやけて見える | フィルターがテキスト/<body>全体に適用されている | filter: をボディやテキストに追加しないでください。スキンはボックス装飾のみをフィルターします — sketch-skin.css を変更せずにコピーし直してください |
| フォントが手書きにならない | オフライン / Googleフォントがブロックされている | フォントをセルフホスト — assets/fonts/README.md を参照 |
| 大きなテーブル/グリッドでページが遅く感じる | 大きなDOMでの feDisplacementMap のコスト | レベルを下げるか、揺れセレクターリストの範囲を限定する（references/implementation.md を参照） |
| ロゴの彩度が低下したり、歪んだりした | そのアセットにオプトアウトがない | その単一の要素に class="no-sketch" を追加 |
| アイコンフォント / SVGアイコンが消えた | 過度な平坦化 | アイコンコンテナに no-sketch を追加するか、references/implementation.md のアイコンに関する注記を参照 |
参考ファイル（必要なときのみ読むこと）
references/styles.md— 5つのスタイルそれぞれの正確なフォント/パレット/ストローク仕様、および新しいスタイルを追加する方法。references/implementation.md— SVGフィルターの計算、フレームワークごとの手順、セレクターの調整、オフラインフォント、パフォーマンス、元に戻す詳細。