アイコンを自在に使う指示方法

「アイコンを置いて」だけでは地獄を見る

UIデザインを作り始めた頃、こんな指示をしていた。

「検索アイコンを左上に置いてください」

結果は毎回バラバラ。虫眼鏡っぽいものが出てくることもあれば、まったく違う記号、テキスト「🔍」の文字、アイコンスペースに「検索」という文字が入ることすらあった。

Claude Designはアイコンフォントを直接レンダリングする機能がない。「アイコンを使う」という指示は、Claudeがそれっぽいものを解釈して描画するか、プレースホルダーを置くかのどちらかになる。この前提を知らないと延々と出力を修正し続けることになる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

実際に効いた指示パターン

① SVGコードで直接渡す（一番確実）

検索ボタンに以下のSVGアイコンを使用してください：
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="11" cy="11" r="8"/>
  <path d="M21 21l-4.35-4.35"/>
</svg>

SVGを直接貼ると、ほぼ意図通りに出てくる。Lucide IconsやHeroiconsのSVGコードはそのままコピペできるのでおすすめ。

② アイコンシステム名 + アイコン名で指定する

Material Iconsの「search」アイコンを使用してください（24px、color: #666666）

Material Icons・Lucide Icons・Heroiconsはある程度通じる。完全な再現性はなく「近いもの」が出ることも多いが、雰囲気を伝えるには有効。

③ 絵文字で代替する（資料系なら意外と使える）

プレゼン資料やモックアップなら絵文字をアイコン代わりにする手もある。実装を伴わない段階のデザインレビュー用途なら十分に機能する。プロダクトUIの本番デザインには向かないが、速度優先の場面では割り切って使っている。

ハマった罠 3選

罠1：アイコンとテキストのアライメントがずれる

「ハートアイコンの右に『お気に入り』と表示して」と指示すると、アイコンとテキストの垂直位置がずれて出てくることが多い。

対処法：

アイコンとテキストをflexboxで横並びにし、align-items: centerで縦中央揃えにしてください。
アイコンサイズは20px、テキストはfont-size: 14pxです。

数値まで含めた指示が必要。「なんとなく横並び」はClaudeの解釈に丸投げするので、デザインの精度が落ちる。

罠2：SVGのカラーが固定されてダークモードで見えなくなる

fill: blackで描画されたアイコンがダークモード背景で完全に消える。これは実装段階で気づくことが多く、修正が面倒。

対処法：SVGにstroke: currentColorまたはfill: currentColorを明示する。親要素のテキストカラーを継承させることで、テーマ切り替えに自動で追随する。

罠3：アイコンサイズがバラバラに出てくる

複数箇所にアイコンを配置すると、指定していないと勝手に大小バラバラになることがある。

対処法：「全アイコンは24×24pxで統一してください」と一言添えるだけで揃う。

NANAKAZOKUの実運用

よく使うアイコン（search、home、user、settings、close、menu、arrow-right）のSVGコードをスニペットとして管理している。プロンプトを書くときにそのままコピペする運用で、アイコンの一貫性を保っている。

最初は「毎回SVGを貼るの面倒だな」と思っていたが、これをやらないとアイコンが毎回別物になる。UIのアイコン一貫性はブランドの印象に直結するので、省略できないポイントだと今は思っている。

アイコンライブラリとしてはLucide Iconsが特に使いやすい。MITライセンスで商用利用も自由、SVGのコードがシンプルで貼りやすい。まだ使っていないなら一度試してみる価値がある。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。