デザインツールのアイコンをCSSで実装する手順

Webサイトやスマートフォン向けアプリでは、ボタンやナビゲーションに使う小さなアイコンが操作性を大きく左右します。デザインツールで整えたアイコンを、そのまま画像として配置するだけでなく、CSSと組み合わせて管理すると、色変更やサイズ調整がしやすくなります。

Figma、Sketch、Illustratorなどで作成したデータは、SVG、PNG、WebPといった形式で書き出せます。用途に応じてファイル形式を選び、HTMLへの配置方法とCSSの指定を使い分けることが、見た目と保守性を両立するポイントです。

この記事では、アイコンの書き出しからCSSでの表示、色の変更、アクセシビリティ、表示速度を意識した最適化までを順番に整理します。iPhoneアプリの画面設計や、アクセサリー紹介ページのような小さなUIパーツにも応用できます。

デザインデータを整えて書き出す

最初に、デザインツール上でアイコンの大きさと余白を確認します。アートボードの端に余白が偏っていると、CSSで同じ幅に揃えてもアイコンだけがずれて見えます。線の太さや角の丸みも、縮小表示したときに潰れないか確認しておきます。

色をCSSで変更したい場合は、SVG形式での書き出しが適しています。パスを統合し、不要な背景や非表示レイヤーを削除してから書き出すと、ファイル容量を抑えられます。写真や複雑な質感を含むアイコンは、PNGやWebPのほうが扱いやすい場合もあります。

SVGをHTMLに配置する

最も簡単な方法は、SVGを画像として読み込むことです。HTMLにimg要素を置き、CSSで幅と高さを指定します。

<img class="icon" src="/images/icon-search.svg" alt="検索">

.icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

この方法は実装が安定し、装飾用の画像を再利用しやすい点が魅力です。リンク先のページでiPhone 5sの購入記録を紹介するような場合も、記事内の検索ボタンや外部リンクに同じアイコンを使えます。実機の印象をまとめた購入時の記録のような読み物では、本文を邪魔しない控えめなサイズが適しています。

CSSでアイコンの色を変える

imgで読み込んだSVGは、通常の文字色指定では内部の色を変更できません。テーマカラーに合わせて色を変えたいときは、SVGをHTMLへ直接記述し、fillやstrokeにcurrentColorを指定します。

<svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
  <path d="M5 12h14M13 6l6 6-6 6" />
</svg>

.icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #3568a8;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

複数のボタンで色を切り替える場合は、親要素にクラスを付ける方法が便利です。通常状態をcolor: #555、ホバー状態をブランドカラーにするなど、CSS変数と組み合わせると配色変更にも対応できます。

背景画像とマスクを使う

装飾目的のアイコンなら、CSSのbackground-imageで読み込む方法もあります。要素の大きさや背景位置をCSS側で管理できるため、カードやバッジの背景として配置する場合に向いています。

.external-link {
  padding-right: 1.75rem;
  background: url("/images/icon-external.svg") right 0.25rem center / 1rem
    no-repeat;
}

単色のSVGであれば、mask-imageを使って背景色だけを変えることもできます。デザインツールから書き出したパスをマスクとして利用し、background-colorで表示色を指定します。ただし、古いブラウザへの対応が必要な案件では、-webkit-maskも併記して検証してください。

Retina表示とアクセシビリティを確認する

高解像度ディスプレイでは、ビットマップ画像の輪郭がぼやけることがあります。小さなPNGを書き出すときは、表示サイズの2倍程度で用意するか、可能ならSVGを選びます。ファイル名はicon-menu.svgのように役割が分かる形にすると、後から探しやすくなります。

意味を持つアイコンには適切な代替テキストを設定します。imgならalt="お気に入りに追加"のように具体的に記述し、文字情報を持たない装飾アイコンには空のaltを使います。インラインSVGではaria-hidden="true"を付け、隣接するボタンのラベルと情報が重複しないようにします。

実装後の管理と表示速度

同じ形のアイコンを複数ページで使うなら、共通コンポーネントやCSSクラスにまとめます。サイズを--icon-size、色を--icon-colorとして変数化すれば、スマートフォン表示とデスクトップ表示で一括調整できます。命名規則も決めておくと、ページごとの個別修正を減らせます。

画像を多用するレビュー記事では、関連する写真とUIアイコンの役割を分けることが重要です。たとえば木製ケースの質感を見せるページでは、木製ケースのレビューの写真はWebPで軽量化し、操作用アイコンはSVGで管理すると、見た目を保ちながら読み込みを効率化できます。

ブラウザの開発者ツールで、実際の表示サイズ、コントラスト、フォーカス状態、通信量を確認します。個性的なケースを紹介するケースの使用感のようなページにも、本文の雰囲気に合うアイコンを配置しつつ、リンクやボタンが見つけやすい状態を保ちます。

デザインツールから書き出したアイコンは、形式を選び、HTMLとCSSの役割を分けて実装すると扱いやすくなります。まずは検索や外部リンクなど使用頻度の高い一つからSVG化し、色、サイズ、代替テキストを確認してから共通化していきましょう。