表現の引き出し
伝えたい意味から、Web上で使える具体的な表現テクニックを引ける逆引き辞典。 AIへの指示プロンプトに使える語彙も併記します。
このページについて
- 何を解決するか：「こういう雰囲気にしたい」は決まっているのに、どんな表現テクニックを使えばいいかわからない——その橋渡しをします。
- 誰のためか：AIコーディングツール（Cursor / Claude Code / v0 / Bolt）を使う実装者、デザインの語彙を増やしたいエンジニア向け。
- 使い方の流れ：伝えたい「名詞」や「印象」のタグを選ぶ → 表現テクニックのカードを見る → 動くデモ・語彙・AIプロンプト・コードをそのまま使う。
🏷️ 名詞から探す
🚗車（準備中）
🌊海（準備中）
☁️空（準備中）
🌳木漏れ日（準備中）
🍴料理（準備中）
🎭 印象から探す
💡 既存セクションとの違い
| セクション | 何から引くか | 何を返すか |
|---|---|---|
| 表現の引き出し（本ページ） | 伝えたい意味（疾走感・癒し） | 表現テクニックの選択肢 |
| ブラウザ標準で作るUI | HTML/CSS/JSの仕様 | 正確な実装方法 |
| アニメーション | 動きのパターン（フェード・スライド） | ライブラリ別の実装比較 |
| 逆引きリファレンス | やりたい技術（ツールチップ・凡例） | ライブラリ別のAPI |
よくある質問
ブラウザ標準で作るUIセクションとの違いは？
ブラウザ標準セクションは「HTML要素やAPIをどう使うか」という仕様視点。表現の引き出しは「どんな印象を伝えたいか」という意味視点。同じ技術（例：@keyframes）が、ブラウザ標準では「文法解説」、表現の引き出しでは「疾走感を出すレシピ」として登場します。
アニメーションカテゴリとの違いは？
アニメーションカテゴリは「フェード・スライド・スプリングなど技術別の動きパターン」をライブラリ別に比較します。表現の引き出しは「車の疾走感・湯気の温かみなどシーン特化の演出」を扱い、動かないもの（グラデーション・装飾）も対象に含まれます。
タグはどんどん増えるか？
新しい印象・名詞・利用シーンが思いつき次第追加していきます。「拡張可能なアイデア置き場」として運用予定です。
Zenn