🎭 印象から引くUI表現
「疾走感」「癒し」など、伝えたい印象からWebで使える表現テクニックを逆引き。AIへの指示プロンプトに使える語彙も併記します。
このページでわかること
- 「疾走感」「癒し」など伝えたい印象から、具体的な表現テクニックを逆引きできる
- 各表現には動くデモ・コード例・AIへの指示プロンプトテンプレを用意
- CursorやClaude CodeなどAIコーディング時の「指示語彙」として使える
- 印象タグは順次追加予定
印象から引く、とは
Webサイトの依頼や構想は「疾走感のあるLPにしたい」「癒される雰囲気で」のように、印象の言葉で始まることが多い。しかし印象の言葉のままでは実装に落とせず、AIに指示しても意図と違うものが返ってくる。
このハブでは、印象の言葉を具体的な表現テクニック（動き・色・構図）に変換する。印象→表現→実装コードの順に具体化していく流れで使う。
印象タグ一覧
⚡ 疾走感
速さ・前進感・勢いを視覚で伝える
🌿 癒し（準備中）
ゆったりした動きと柔らかな色で安らぎを伝える
🌺 温かみ（準備中）
暖色・湯気・柔らかな光でぬくもりを伝える
❄️ 清涼感（準備中）
寒色・透明感・きらめきで涼しさを伝える
🎉 躍動感（準備中）
弾む動きとリズムでエネルギーを伝える
使い方ガイド
- 印象タグを選ぶ：伝えたい雰囲気に近いタグページを開く
- 表現カードからデモを見る：動くデモで「これだ」と思える表現テクニックを探す
- AIプロンプトテンプレをコピーして使う：カード内のテンプレをCursorやClaude Codeに貼り、自分の文脈に合わせて調整する
ほかの軸から引く
よくある質問
「モチーフから引く」「シーンから引く」との違いは？
印象（形容詞）・モチーフ（名詞）・シーン（用途）の3つの軸で同じ表現群を引けます。入口が違うだけで、行き着く表現テクニックは共通です。自分の頭にある言葉に近い軸から入るのがおすすめです。
印象タグは増えますか？
順次追加予定です。高級感・ノスタルジック・静寂・緊張感などを計画中です。
実装はReact前提ですか？
デモはCSS/SVG中心でフレームワーク非依存です。コードはコピーしてそのまま使えます。
AIプロンプトテンプレはどのAIでも使えますか？
Claude・ChatGPT・Cursor・v0など汎用的に使える書き方にしています。モデルや文脈で結果は変わるため、たたき台として調整しながら使ってください。
Zenn