カードイラスト は何をしますか？
考え方
カードは、読者が必要とするものに簡略化された対象そのものを示し、意図を持ってフレーミングし、各アノテーションには理由があります。インターフェースやドキュメントの断片を、フラットで大きく、薄い灰色の背景の上に配置します。その周りに、細い線で結ばれた等幅フォントの技術的なメモをいくつか配置します。カードのテキストを読まなくてもリソースを理解できるようにする必要があります。
語彙
各シーンは、これら3～5つのピースで構成されます（すべてを使うことはありません）。
シーンを描画する前に参照する視覚的なリファレンス：
references/vocabulaire.png（および.svg）：12個のピースがそれぞれパネルに分離され、1行のルールとともに表示されています。references/exemple-noir-et-blanc.pngおよびreferences/exemple-accent-couleur.png（および.svg）：2つのモードでの同じ完全なシーン。アクセント要素の色のみが異なります。references/accent-palette.pngおよび.json：パレットの10色と、そのソフトバージョン。
| ピース | 説明 |
|---|---|
| 背景 | 薄い灰色のパネル（#F3F3F2 から #F5F5F4）、角丸16～24px、アスペクト比13:10。影や目立つ境界線はなし。 |
| ステージ | 点線のgray-300の長方形。内部には非常に薄いグリッド。作業領域を示します。オプションで、「これはデザインスペースです」という意味を持ちます。 |
| ウィンドウ | 白いウィンドウ。3つの灰色の点のタイトルバー、gray-200の枠線、ソフトな影。ステージまたはパネルからはみ出します（右または下でカットされます）。フレーミングは意図的です。URLが重要な場合はアドレスバーも表示。 |
| スケルトン | 丸みを帯びた灰色のバー（gray-200）の二次テキスト。区切り線で区切られたリスト行。灰色の円盤のアバター。意味を持つ要素だけが実際の単語（「Share」、「Publish」）を持ちます。 |
| スタック | わずかに縦にずらして積み重ねられた複数のカード。それぞれの上部（ファイル名、タイトル）のみが表示されます。一番上のカードはタイトルと段落を含めて完全に表示されます。一連のドキュメントを示すために使用します。 |
| ポップオーバー | ウィンドウの端（枠、セルの行）に重なる小さな白いカード。ウィンドウよりも強い影が付いており、上にあることを示します。 |
| アノテーション | gray-500の等幅フォント、11～13px。オブジェクトの外側に配置されます。属性（data-target="share"）、状態（小さなカード内の{ open: false }）、ファイルパス、決定事項など。イメージが示すものを、ワークショップの言語で命名します。 |
| コールアウトライン | アノテーションから始まり、要素の4pxの塗りつぶされた点で終わる細いgray-400の線。直線か、または緩やかな曲線1本。戻りを示す点線の矢印の場合もあります。 |
| ステップタイムライン | 空の円といくつかのラベルが付いた水平線。現在のステップは塗りつぶされています。プロセス内でのリソースの位置を示すために使用します。 |
| コンタクトシート | 番号が付けられた小さなサムネイル（01 から 06）のグリッド。1つだけ選択され、拡大バージョンに線で結ばれています。シリーズ内の1つの要素を見る場合に使用します。 |
| 寸法線 | 注釈付きのモックアップのように、測定値を示す線（線、2つのストッパー、「4px」）。精度が重要な詳細に使用します。 |
| 番号付きバッジ | 読む順に要素に配置された、塗りつぶされた1、2、3のディスク。アクションが進行中の場合はカーソルが表示されます。 |
2つのモード
このスキルは2つのモードのいずれかで起動します。変更されるのは、唯一のアクセント要素の色だけです。背景、サーフェス、スケルトン、アノテーション、構成、インタラクションはすべて同じままです。
| モード | 呼び出し方 | アクセント要素 |
|---|---|---|
| モノクロ | /card-illustrations noir et blanc、「モノクロで」、「白黒で」、「色なし」 | 塗りつぶしのgray-900インク（その上のテキストは白） |
| カラーアクセント | /card-illustrations accent、「アクセントカラーで」、「カラーで」 | 安定したIDから導出されたパレットの1色 |
モードの選択：まず引数またはリクエストの表現に従います。指示がない場合は、ライブラリの一貫性を保つために、すでにオンラインになっているシーンのモードを引き継ぎます。オンラインのシーンがない場合はモノクロを使用します。同じグリッド内で2つのモードを混在させないでください。モードを変更する場合は、表示されているすべてのカードを一緒に再レンダリングします。コード内では、モードは単一の定数（ACCENT_MODE: 'ink' | 'color'）であり、すべてのシーンが読み取って、ライブラリ全体を1行で切り替えます。
アクセント：グレーと、ほんの少しの色（カラーアクセントモード）
シーンはグレーのままです（背景、白いサーフェス、スケルトン、アノテーション）。1つの要素だけがアクセントカラーを持ちます：現在のステップ、選択されたサムネイル、寸法線、チェックされたボックス、プライマリボタン、選択された要素。他のすべてはグレーまたはインク色です。イラスト用に予約されたアクセントにより、サイトのインターフェース（ボタン、リンク、ナビゲーション）はモノクロームのままになります。
パレットは、同じ明るさと彩度（OKLCHでL 0.655、C 0.11）の10色で構成され、色相のみが異なります。これは、10色すべてをsRGB色域内に保ち、白に対するコントラスト比を3:1以上（グラフィカル要素のしきい値）に保つ最も鮮やかな設定です。各色には、色付きのバッジや薄い背景用のソフトバージョン（L 0.95、C 0.03）があります。色見本はreferences/accent-palette.png、値はreferences/accent-palette.jsonを参照してください。
| 名前 | アクセント | ソフト |
|---|---|---|
| 赤 | #CB756E | #FFE7E4 |
| コーラル | #C87A56 | #FFE9DE |
| オレンジ | #BF8242 | #FDEBDA |
| アンバー | #AF8B37 | #F8EDD8 |
| 緑 | #63A266 | #E3F4E2 |
| エメラルド | #42A680 | #DDF5E9 |
| ターコイズ | #0DA5A5 | #D8F5F5 |
| 空色 | #389DC7 | #DBF3FF |
| 青 | #6B90D4 | #E4EFFF |
| 紫 | #9284CE | #EEEBFF |
使用ルール：
- シーンごとに1色。ランダムですが安定した方法で選択します。
accentFor(id)関数がリソースのIDから色を導出し（単純なハッシュ）、サーバーとクライアントで同じ色を取得し、ハイドレーションエラーを防ぎます。Math.random()は使用しないでください。 - 塗りつぶしのアクセント上では、テキストは白で太字（最小11px）。ソフトな背景上では、テキストは塗りつぶしのアクセント色になります。
- 同じシーン内で2色を使用したり、色間のグラデーションを使用したりしないでください。緑とオレンジの空き状況バーは、色が主題となる例外です。
- 参考トーン：アクティブなタブが色付けされ、プライマリボタンが塗りつぶされ、チェックボックスが色付けされ、スライダーがよりソフトな色調のグレーの市松模様の背景上で鮮やかな色になっている、インターフェース要素のプレート。
色を追加するには：L 0.655、C 0.11で計算し、sRGB色域内にあり、白に対するコントラスト比が3:1以上であることを確認してから、色相で隣接する色の間に配置します。
構成
- オブジェクトは左または中央に配置し、アノテーションは右または下に配置し、コンテンツの上には決して重ねません。
- フレーミングは要素をカットします：パネルからはみ出すウィンドウは、縮小された完全なウィンドウよりも大きく、リアルに見えます。
- パネルのマージンは十分に取ります（8～10％）。3～5個のピース。追加をためらう場合は、追加しません。
- カードサイズ（約350px幅）で読みやすいこと：テキストは最小11px、等幅フォントも同様。
- フォント：シミュレートされたインターフェースにはサンセリフフォント、アノテーションにはシステム等幅フォント（
ui-monospace、font-mono）のみを使用します。
シーンが示すべきもの
断片は、リソースが何であるかと、それが何に役立つかを、内部の仕組みを示さずに伝えます。集合知ワークショップは、タイムテーブルではなく、そのボード（複数の人の付箋、選択された付箋とその投票）で示します。チェックリストは、チェックされたボックスで示します。儀式は、週の2つのミーティングで示します。断片が理解されるために説明を必要とする場合、それは適切な断片ではありません。アノテーションは明確にしますが、ぼやけたイメージを補完するものではありません。
ホバー時
シーンごとに1つのインタラクションのみで、ドキュメントの動作を示します：チェックボックスがチェックされる、次のバッジが塗りつぶされる、ポップオーバーが浮かび上がる、次のサムネイルが選択される。transformとopacityを使用し、300ms、スムーズなイージングカーブ。ポインティングデバイスのみで、最大でも数ピクセルの移動。
実装（ReactおよびTailwind）
- パネルごとに1つのコンポーネント（背景）と、リソースIDによって選択されるシーンごとに1つのコンポーネント。
- すべてのシーンで共有されるいくつかのビルディングブロック：サーフェス（白いカード、ソフトな影）、バッジ、スケルトンバー、ホバーアニメーションの定数（持続時間、移動量）。
- 同じレンダリング関数を使用して、グリッド、「続きを読む」カード、カルーセルを生成します。
- リソースの詳細ページでは、サムネイルの代わりに、対象そのもの（モデルの図、デッキのスライド）を開くことができます。
リソースの追加
- 1文で説明：どの断片がリソースを表現するか、色が適用される唯一の要素は何か、どのアノテーション（最大2つ）がそれを命名するか。
- 語彙から3～5個のピースを選択します。HTMLとTailwindでシーンを記述し、パネルに対するパーセンテージで配置します。単語は言語ごとに辞書に格納します（フランス語では改行しないスペースを使用）。
- シーンセレクターに、ホバーアニメーションとともに追加します。
- グリッドを1280px（2x）および390pxで、静止時とホバー時の両方をキャプチャします。確認事項：カードサイズで読みやすいこと、1つの要素にのみ色が使用されていること、アノテーションがオブジェクトの外側にあること、意図せずカットされたものがないこと。
採用されなかったもの
- アイソメトリックな「紙」のシート：物理的な素材のように読めてしまいます。
- 縮小された図のサムネイル：テキストが読めず、要素が多すぎます。
- ワークショップのタイムテーブル：仕組みを示しており、対象そのものを示していません。
- グラデーション、シーン内の複数の色、パレット外の彩度の高い色。