🍃 モチーフから引くUI表現
海・空・木漏れ日など、描きたいモチーフからWebで使える表現テクニックを逆引き。AIへの指示プロンプトに使える語彙も併記します。
このページでわかること
- 海・空・木漏れ日など、描きたいモチーフから具体的な表現テクニックを逆引きできる
- 写真素材に頼らない、CSS/SVGの軽量な表現でモチーフの空気感を再現する
- 各表現には動くデモ・コード例・AIへの指示プロンプトテンプレを用意（タグページで順次公開）
- モチーフタグは順次追加予定
モチーフから引く、とは
「海の中にいるような」「木漏れ日が差すような」と、自然物や物体のモチーフでイメージを持つことは多い。このハブでは、モチーフを起点にWebで使える表現テクニック（波の動き・光の揺らぎ・粒子）へ変換する。
写真素材に頼らず、CSS/SVGの軽量な表現でモチーフの空気感を再現することを目指す。
モチーフタグ一覧
🚗 車（準備中）
走り・金属の質感・スピード感を描く
🌊 海（準備中）
波の動き・透明感・深さのグラデーションを描く
☁️ 空（準備中）
雲の流れ・時間帯の色・広がりを描く
🌳 木漏れ日（準備中）
揺れる光と影・柔らかな緑のフィルターを描く
🍜 料理（準備中）
湯気・シズル感・温度を描く
使い方ガイド
- モチーフタグを選ぶ：描きたい自然物・物体に近いタグページを開く
- 表現カードからデモを見る：動くデモで「これだ」と思える表現テクニックを探す
- AIプロンプトテンプレをコピーして使う：カード内のテンプレをCursorやClaude Codeに貼り、自分の文脈に合わせて調整する
ほかの軸から引く
よくある質問
「印象から引く」「シーンから引く」との違いは？
印象（形容詞）・モチーフ（名詞）・シーン（用途）の3つの軸で同じ表現群を引けます。入口が違うだけで、行き着く表現テクニックは共通です。自分の頭にある言葉に近い軸から入るのがおすすめです。
写真素材との使い分けは？
写真はリアルさで勝りますが、読み込みが重く、トーンの統一も難しくなります。CSS/SVGの表現は軽量でテーマカラーに馴染ませやすく、動きも付けられます。ヒーローは写真＋装飾やアクセントはCSS/SVG、のように併用するのも有効です。
リアルさはどこまで追求すべき？
Webの装飾表現では「それらしさ（空気感）」が伝われば十分なことが多いです。波・光・粒子のような抽象化された表現のほうが、写実的な描き込みよりページに馴染み、パフォーマンスにも優しいです。
モチーフタグは増えますか？
順次追加予定です。雨・雪・炎・森・夜空などを計画中です。
Zenn