Google Stitch を使っていて、一番「言葉の限界」を感じるのが、アイコンを設計するときだ。
「設定画面に歯車アイコンを使って」という指示は通じる。「お気に入りにハートアイコンを使って」も通じる。でも「このアクションの意味を表すアイコンを作って」と言おうとしたとき、どう言葉にすればいいか迷う。
アイコンは視覚的な記号だ。形・大きさ・スタイル（Outlined / Filled / Rounded）・文脈によって意味が変わる。その「意味」を言語化してAIに渡すことの難しさを、Stitch を使いながらずっと感じている。
これは単なる「プロンプトの書き方」の問題ではないと思っている。アイコンの意味を言語化しようとすることで、「アイコンがなぜそこにあるのか」「何を伝えようとしているのか」という問いと向き合うことになるから。
結論から言うと——Google Stitch にアイコンを伝えるには、「形の名前」ではなく「そのアイコンが担う機能・意味・文脈」を言語化することが重要だ。その過程で「なぜこのアイコンが必要か」を自問することが、UIの質を上げることにつながっている。
アイコンとは何か、改めて考える
アイコンとは、UIにおいてある機能・状態・概念を視覚的に表す記号のことです。文字を使わずに情報を伝える手段として、デジタルUIには不可欠な要素であり、適切に使われれば情報の走査速度と理解を助けますが、不適切に使われればかえって混乱を生みます。
アイコンには大きく2つの役割がある。
- 機能を示すアイコン：「このボタンを押したら何が起きるか」を示す（例：ゴミ箱＝削除、プラス＝追加）
- 状態を示すアイコン：「今の状態がどうなっているか」を示す（例：チェックマーク＝完了、警告三角形＝エラー）
この区別を持っておくと、Stitch へのアイコン指示が整理しやすくなる。
「形」だけでは伝わらないアイコンの意味
同じ「三本線（ハンバーガーメニュー）」のアイコンでも、使われる文脈によって意味が変わる。
- ナビゲーションメニューの開閉ボタンとして使われる三本線
- リスト表示モードを示す三本線
- ドラッグで順序変更できることを示す三本線
同じ「形」でも、文脈が変われば意味が変わる。AIに「三本線アイコンを入れて」と言うだけでは、どの意味として使いたいかが伝わらない。
実際にStitchでこれを体験したのは、リスト画面を設計しているときだった。「各リストアイテムに三本線アイコンを入れて」とプロンプトを書いた結果、ナビゲーション用の三本線がアイテムの横についてしまい、意味が全く違うUIが生成された。
正しいプロンプトは「各リストアイテムの左端に、ドラッグで並び順を変更できることを示すハンドルアイコン（三本横線）を表示。色はグレー、タップ領域44px以上確保」だった。
アイコンスタイルの選択と言語化
アイコンには複数のスタイルがあり、それぞれがUIに与える印象が異なる。
Outlined / Filled / Rounded の違いと選び方
Googleが提供するMaterial Symbolsを例にすると、主なスタイルは以下の通り：
- Outlined（アウトライン）：線だけで構成。軽く・クリーンな印象。非アクティブ状態のアイコンに使いやすい
- Filled（塗りつぶし）：面で構成。強く・重い印象。アクティブ状態・選択済み状態のアイコンに使いやすい
- Rounded（丸み）：角が丸いアウトライン。柔らかく・親しみやすい印象。子ども向けや生活系アプリに合う
Stitch にアイコンスタイルを指示するとき、「Outlined スタイルのアイコン」「アクティブ状態はFilled、非アクティブはOutlined」のように明示すると、デザインの一貫性が保たれやすい。
アイコンの「意味の一貫性」を保つ重要性
同じUIの中で、アイコンの使い方に一貫性がなくなると、ユーザーは混乱する。
例えば「ハートアイコン」を「お気に入り」として使っているのに、別の場所で「高評価（いいね）」としても使うと、同じアイコンが2つの意味を持つことになる。
Stitch で複数画面を設計しているとき、この「アイコンの意味の一貫性」を保つために私が使うようにしたのが「アイコン辞書」だ。DESIGN.mdに「このアイコンはこの意味で使う」というルールを書き加えるようにしたら、複数画面での一貫性が格段に改善された。
「アイコンなしでも伝わるか？」という問い
Stitch を使いながら、アイコンについて一番考えるようになったのは「このアイコンは本当に必要か？」という問いだ。
アイコンが「飾り」になっていないか
UIにアイコンを入れると、なんとなく「できた感」が増す。Stitch が生成するUIも、アイコン付きの方が見栄えが良くなることが多い。でも「見栄えが良い」ことと「情報が伝わる」ことは別問題だ。
特に「テキストラベルのあるボタンにアイコンを添える」というパターンは、注意が必要だ。テキストで意味が伝わっているなら、アイコンは装飾でしかない。装飾的なアイコンが増えると、本当に意味のあるアイコンが埋もれる。
実際に使ってみてわかったのは、「テキストなしでも意味が伝わるアイコン」のみをシングルアイコンとして使い、テキストがある場所のアイコンは最小限に抑えるという原則が、UIをすっきりさせる鍵だということだ。
アイコンの「テキスト代替」はいつ必要か
アイコンだけを使う場合（テキストラベルなし）、そのアイコンが一般的に認知されているかどうかを慎重に判断する必要がある。
ゴミ箱・シェア・検索・ホーム・設定（歯車）——これらは多くのユーザーが意味を知っている「普遍的なアイコン」だ。一方で、プロダクト独自のカスタムアイコンや、業界特有の記号は、初めて使うユーザーには意味がわからないことがある。
Stitch でカスタムアイコンを使う際は、「アイコン単独 vs アイコン+テキストラベル」の2パターンを生成して比較するようにしている。テキストラベルがある方が明らかに理解しやすい場合は、ラベル付きを採用する。
Stitch へのアイコン指示を上手に書くコツ
試行錯誤を経て、アイコンを Stitch に伝える効果的な方法が見えてきた。
「形の名前」より「機能と文脈」を書く
伝わりにくい例：「リストアイテムにアイコンを入れて」
伝わりやすい例：「リストアイテムの左端に、そのカテゴリを示すアイコンを表示。カテゴリと対応するアイコン：食費→フォーク+ナイフ（Outlined）、交通費→電車（Outlined）、買い物→ショッピングバッグ（Outlined）。全アイコン24px、カラー #6B7280。」
具体的なアイコンとカラーを指定することで、意図に近い結果が得られる。
アクティブ/非アクティブの状態変化をセットで指定する
ナビゲーションバーのアイコンや、チェックボックスなど「状態が変わる」要素のアイコンは、アクティブ状態と非アクティブ状態をセットで指定すると完成度が上がる。
例：「ボトムナビゲーション。4タブ構成（ホーム・検索・お知らせ・設定）。アクティブタブ：Filledアイコン+カラー #2A5FD8。非アクティブタブ：Outlinedアイコン+グレー #9CA3AF。」
よくある失敗と対処法
- 失敗1：アイコンと意味が一致しない——アイコンが生成されたときに「なんとなく意味がわかる」と思ってそのまま使ってしまうことがあります。異なる背景を持つユーザーにとっては意味不明なアイコンかもしれません。テストユーザーに「このアイコンは何を表していると思いますか？」と聞いてみましょう。
- 失敗2：アイコンのスタイルが混在する——OutlinedとFilledが混在したり、サイズがバラバラになったりすると、UIの統一感が失われます。DESIGN.mdに「アイコンはすべてMaterial Symbols Outlined、24px」のように明記することで防げます。
- 失敗3：装飾目的のアイコンが増えすぎる——「見栄えをよくするために」アイコンを追加し続けると、本当に情報を伝えるアイコンが埋もれてしまいます。「テキストなしでも意味が伝わるか」を基準に、アイコンの使用を絞りましょう。
- 失敗4：モバイルでタップターゲットが小さすぎる——アイコン自体は24pxでも、タップ可能な領域が24pxしかないと、誤タップが頻発します。アイコンのタップターゲットは44px以上を確保し、プロンプトにも明示しましょう。
- 失敗5：アイコンの色でのみ状態を伝える——色覚多様性（色盲）のユーザーには、色だけでの状態表現が伝わりません。アクティブ/非アクティブの区別は、色＋形（Filled vs Outlined）の組み合わせで伝えましょう。
よくある質問（FAQ）
Q. Google Stitch はどんなアイコンセットを使って生成しますか？
A. Stitch が生成するUIで使われるアイコンは、プロンプトで指定しない場合、Googleが開発したMaterial Symbolsに準拠したものが多く使われます。プロンプトに「Material Symbols Outlined」「Heroicons」「Lucide Icons」などのアイコンセット名を明示することで、そのスタイルに近いアイコンが生成されます。ただし完全に一致するとは限らないため、最終確認は必ず行ってください。
Q. カスタムアイコン（独自のSVGアイコン）をStitchのデザインに組み込めますか？
A. Stitch で生成したUIにカスタムSVGアイコンを組み込む最も現実的な方法は、Stitch でベースのUIを生成してFigmaにエクスポートし、Figma上でカスタムアイコンに差し替えることです。DESIGN.mdにカスタムアイコンの使用ルール（どの要素にどのアイコンを使うか）を記述しておくと、Stitch がアイコンを配置する位置やサイズの一貫性を保ちやすくなります。
Q. アイコンだけでUIを構成するパターン（テキストなし）は Stitch で作れますか？
A. 作れます。「アイコンのみのボトムナビゲーション（テキストラベルなし）」のようなプロンプトで生成できます。ただし、テキストなしのアイコンUIはユーザーの認知コストが高くなるため、一般的なユーザーに馴染みのない独自アイコンを使う場合は、ツールチップやラベルとの組み合わせを検討しましょう。
Q. アイコンのアクセシビリティ対応（スクリーンリーダー対応）はStitchの生成物に含まれますか？
A. Stitch が生成するHTML/CSSには、alt属性やaria-labelが適切に含まれないことがあります。特にアイコンのみのボタンには「このボタンは削除を実行します」などのaria-labelが必要です。Stitch の生成コードをそのまま実装に使う場合は、アクセシビリティの観点から必ずコードレビューを行ってください。
Q. ダークモードでアイコンの視認性を確保するにはどうすればいいですか？
A. ダークモードでのアイコン視認性を確保するには、ライトモードで濃いグレー（#374151など）を使っているアイコンをダークモードでは明るいグレー（#D1D5DB）または白系（#F9FAFB）に変更する必要があります。プロンプトに「ダークモード対応。アイコンはライトモード：#374151、ダークモード：#D1D5DBを使用」と明示することで、両モードの視認性を確保したデザインが生成されます。
まとめ：アイコンの言語化は、UIの「なぜ」を問い直すこと
Google Stitch にアイコンの「意味」を伝えようとすることで、私はUIに置かれるすべての視覚要素の「存在理由」を問い直すようになった。
「なぜここにこのアイコンがあるのか」「このアイコンはユーザーの理解を助けているか、邪魔をしているか」——そういった問いを持つようになったのは、Stitch というツールを使い始めてからだ。
AIにアイコンを「言語化」して伝えようとするプロセスが、デザインの「思考」を言語化するプロセスを強制する。それはときに面倒だが、UIの質を上げるために必要な問いだと今は思っている。
アイコンは小さい。でも、そこに込める「意味」の深さは、UIの誠実さを映すものだ。
この記事で解説した主なポイント：
- アイコンの「機能を示す」「状態を示す」2つの役割の整理
- Outlined / Filled / Rounded スタイルの違いと選び方
- 「形の名前」より「機能と文脈」をプロンプトに書く重要性
- DESIGN.mdにアイコン辞書を書いて一貫性を保つ方法
- よくある失敗5パターンと対処法
次のステップ：自分のプロダクトで使っているアイコンを一覧にして「このアイコンがなぜここにあるか」を1文で説明してみましょう。説明できないアイコンは、本当に必要か再検討する価値があります。
