ラインアイコンと塗りアイコン、使い分け方
ラインアイコンと塗りアイコンは同じ意味を表せますが、インターフェース内での振る舞いは同じではありません。違いは単なる見た目の好みではありません。ストロークの太さ、ネガティブスペース、コントラスト、背景条件は、ユーザーがどれだけ速くアイコンを認識できるか、そしてそのアイコンが状態変化、画面サイズ、密度の高いレイアウト全体でどれだけ機能するかに影響します。どちらを選ぶかは、結局のところ明確さとトーンの問題です。
簡単に言えば、ラインアイコンは輪郭線と開いた形を使い、塗りアイコンは面で構成された形と強い視覚的な重みを使います。ラインスタイルは一般に軽く、精密に感じられます。塗りスタイルは一般により力強く、素早く見分けやすく感じられます。どちらかが自動的に優れているわけではありません。正しい選択は、そのアイコンがどこに現れるか、どこまで小さくなるか、そしてインターフェースがユーザーに何を先に気付いてほしいかで決まります。
UIに余白と抑制が必要なときはラインアイコンが向いています
より軽い印象が必要な製品では、アウトラインアイコンのほうが適していることがよくあります。ツールバー、設定パネル、副次的な操作、そして余白の多いデスクトップUIの中で、より静かに収まります。そのためラインアイコンは、生産性向け製品、管理ツール、そして騒がしさよりもクリーンさを重視する編集系インターフェースでよく使われます。
また、ミニマル、テクニカル、あるいはプレミアム寄りのビジュアルシステムを持つブランドとも相性が良いです。タイポグラフィが細く、レイアウトに余裕があるなら、ラインアイコンのほうが自然になじみやすい傾向があります。無料のラインアイコンセットを見る のようなライブラリは、一貫性を保ったまま軽い見た目を得たいときに役立ちます。
その代わり、読みやすさには注意が必要です。小さいサイズでは、線が細すぎたり内側の空きが広すぎたりすると、ラインアイコンはすぐに細部を失います。32ピクセルでは上品に見えるラインアイコンも、16ピクセルでは曖昧になることがあります。小さなアイコンで素早い認識を支えるUIなら、より慎重な検証が必要です。
塗りアイコンは小サイズと高注意場面でより強いです
塗りアイコンは、細部が減ってもシルエットが残るため、小さいサイズでも読み取りやすいことが多いです。そのため、認識速度が繊細さより重要になるモバイルのナビゲーションバー、コンパクトなアクションボタン、ステータスマーカー、通知面で特に効果を発揮します。スマートフォンでホーム、検索、プロフィールを半秒で見つける必要があるなら、繊細なアウトラインより塗りアイコンのほうが持ちこたえやすいことが多いです。
塗りアイコンは暗い背景でも機能しやすい傾向があります。特に、インターフェースが重なった面やグロー効果を使う場合、細い線よりも強い形のほうが安定してコントラストを保てます。アウトラインアイコンもダークモードで洗練して見せられますが、より丁寧なカラ―システムが必要です。
同じ理由で、塗りスタイルは主要アクションや現在状態のインジケーターにも安全な選択になりやすいです。多くのアプリでは、デザイナーは非アクティブなナビゲーション項目にアウトライン版を使い、項目がアクティブになったら塗り版に切り替えます。このパターンが機能するのは、色に気付く前でも状態変化がすぐ伝わるからです。より強い状態フィードバックが必要なら、UIプロジェクト向けの塗りアイコンを見る で、実際の製品サイズにおけるシルエットの強さを比較してください。
状態変化とスタイルの混在は、明確なルールがある場合だけ機能します
デザイナーは同じ製品の中でラインアイコンと塗りアイコンを混在させることがありますが、その混在が意図的に見えるのはシステムに従っている場合だけです。最も一般的なルールは状態ベースです。非アクティブにはライン、アクティブには塗りです。もう一つのよいルールは階層ベースです。副次的なツールにはラインアイコン、主要ナビゲーションやアラートには塗りアイコンを使います。混在がランダムになると問題が始まります。
ここで重要になるのが Gestalt 的な考え方です。ユーザーは似た形、太さ、振る舞いをひとつのパターンとしてまとめて認識します。ひとつのアイコンファミリーに一貫した比率とストロークの論理があれば、インターフェースは統一感を持って見えます。セットの半分が軽く幾何学的で、もう半分が密で重たいと、製品は継ぎはぎに見え始めます。
デュオトーンアイコンも同じルールに従います。追加の奥行きが本当に役立つ場所、たとえばオンボーディング、機能のハイライト、マーケティングパネル、より豊かな空状態に限定するのが最適です。密度の高い製品UIでは、単色アイコンのほうが通常は適しています。素早く見渡しやすく、状態をまたいで一貫性を保ちやすいからです。
ダッシュボード、データ量の多い製品、モバイルUIでは優先順位が異なります
ダッシュボードやデータ量の多いインターフェースでは、ラインアイコンは表、フィルター、密な内容の周辺にある副次的な操作を支える場面でうまく機能することがよくあります。チャート、数値、ラベルが主役のままでいられるように、UIの枠組みを軽く保てます。ただしそれは、アイコンが小さすぎない場合に限ります。コントロールがコンパクトになると、塗りアイコンのほうが識別しやすくなることが多いです。
つまり、ダッシュボードに万能なルールはありません。情報を補助するアイコンならラインアイコンを使います。操作の重みを担うアイコンなら塗りアイコンを使います。余裕のあるツールバーのフィルターアイコンはアウトラインのままで問題ありません。制約のあるパネルの小さな警告、通知ベル、選択中のナビゲーション項目は、塗り処理の恩恵を受けやすいです。
モバイルインターフェースでは、使えるサイズがさらに小さく、環境も厳しいため、選択はより塗りアイコン寄りになりがちです。人は移動中や注意が分散した状態でスマートフォンを使います。より強いシルエットが助けになります。これは、すべてのモバイルアイコンを塗りにすべきという意味ではありません。コアナビゲーション、ステータス、アクティブ状態に結びつくアイコンほど、より強い認識性が必要になるという意味です。
ブランドとアクセシビリティ基準に合うスタイルを選びましょう
最適なアイコンスタイルは、視覚的なトーンと使いやすさの基準の両方に合うものです。ブランドが正確、落ち着いている、編集的、あるいは技術的に感じられるなら、ラインアイコンはその声を補強できます。自信がある、親しみやすい、直接的、あるいはアプリらしい印象なら、塗りアイコンのほうが合いやすいかもしれません。選択はタイポグラフィ、角丸の半径、イラストスタイル、色の振る舞いとも響き合うべきです。
アクセシビリティもその判断の一部であるべきです。SVG アイコンはきれいに拡大縮小でき、意味のあるインターフェースグラフィックとして使う場合は適切にラベル付けできます。SVG が画像やグループ化された記号として機能する場合、MDN はそれを適切なラベルを持つ単一の意味あるグラフィックとして扱うことを推奨しています。スタイルだけで明確さは生まれません。アイコンには十分なコントラスト、十分なサイズ、そして認識できる形が必要です。
実用的なルールはシンプルです。視覚的な抑制を求め、細部を保てる十分なサイズがあるならラインアイコンを使います。速度、強調、小サイズでの判読性がより重要なら塗りアイコンを使います。混在させるのは、システムがその理由を定義している場合だけにします。多くのチームにとっては、抽象的にどちらが見た目に優れているかを問うより、この枠組みのほうが役立ちます。