アイコン

ほとんどの画像はコンテンツの一部ですが、アイコンはユーザー インターフェースの一部です。 UI のテキストのスケーリングと適応と同じ方法でスケーリングと適応を行う必要があります。

スケーラブルなベクター グラフィック

写真画像に関しては、JPG、WebP、AVIF などさまざまな画像形式を選択できます。写真以外の画像の場合は、Portable Network Graphics（PNG）形式か Scalable Vector Graphics（SVG）形式のどちらかを選択できます。

PNG と SVG はどちらもフラットカラーの領域の処理に適しており、どちらでも画像の背景を透明にできます。PNG を使用する場合は、サイズの異なる画像のバージョンを複数作成し、img 要素で srcset 属性を使用して画像をレスポンシブにする必要があります。SVG を使用する場合は、デフォルトでレスポンシブです。

PNG（および JPG、WebP、AVIF）はビットマップ画像です。ビットマップ画像はピクセルとして情報を保存します。SVG では、情報は描画指示として保存されます。ブラウザが SVG ファイルを読み取ると、指示はピクセルに変換されます。なお、これらの手順は相対的なものです。ラインとシェイプの表現に使用する寸法に関係なく、すべてが適切な鮮明さでレンダリングされます。サイズが異なる SVG を複数作成する代わりに、1 つの SVG を作成してあらゆるサイズに対応できます。srcset 属性を使用する必要はありません。

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML を使用して、手順を SVG ファイルに記述します。これは、HTML のようなマークアップ言語です。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

HTML 内に SVG を含めることもできます。

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

このような SVG を埋め込むことで、ブラウザが行う必要のあるリクエストが 1 つ減ります。画像は HTML ... と一緒に配信されるため、ダウンロードが完了するまで待つ必要はありません。また、まもなく説明するように、このような SVG を埋め込むことで、スタイル設定もより細かく制御できます。

アイコンとテキスト

アイコンの画像は多くの場合、透明な背景の上にシンプルな形をしています。SVG はアイコンに適しています。

テキストと内部にアイコンを含むボタンやリンクがある場合、アイコンはプレゼンテーション用です。重要なのはテキストです。img 要素を使用する場合、空の alt 属性は、画像がプレゼンテーション用であることを示します。

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

CSS は表示用であるため、アイコンを CSS に背景画像として配置することもできます。

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

SVG を HTML 内に配置する場合は、aria-hidden 属性を使用して支援技術に表示されないようにします。

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

スタンドアロンのアイコン

目的を明確にしたい場合は、ボタンやリンクの内側にテキストを使用します。テキストのないアイコンを使用できますが、すべてのユーザーが特定のアイコンの意味を理解しているとは限りません。判断に迷う場合は、実際のユーザーでテストしてください。

テキストなしでアイコンを使用すると、アイコンは見栄えが良くなくなります。CSS の背景画像は、アイコンを表示する適切な方法ではありません。アイコンには、HTML でユーザー補助機能用の名前を付ける必要があります。

img 要素を使用する場合、アイコンには alt 属性からアクセス可能な名前が付けられます。

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

もう一つの方法は、リンクやボタン自体にユーザー補助機能用の名前を付け、画像がプレゼンテーション用であることを宣言することです。aria-label 属性を使用して、ユーザー補助機能用の名前を指定します。

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

SVG を HTML 内に配置する場合は、リンクやボタンに aria-label 属性を使用してわかりやすい名前を付けて、アイコンには aria-hidden 属性を使用します。

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

スタイル設定のアイコン

SVG アイコンを HTML に直接埋め込むと、ページ内の他の要素と同様に、アイコンの一部のスタイルを設定できます。img 要素を使用してアイコンを表示する場合、これはできません。

次の例では、SVG 内の rect 要素の fill 値が blue になっており、ボタンのテキストのスタイルと一致しています。

button {
 color: blue;
}
button rect {
  fill: blue;
}

hover スタイルと focus スタイルも適用できます。

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

関連情報

• CSS の背景画像である SVG にスタイルを設定する必要がある場合は、SVG の背景の色の設定に関する Una の記事をご覧ください。
• Sara Soueidan はアクセス可能なアイコンボタンについて執筆しています。
• Scott O'Hara はアクセス可能な画像と SVG をコンテキストに基づいてマークアップすることについて執筆しています。
• グラフィック デザイン ツールを使用して SVG をエクスポートする場合は、SVGOMG を使用して出力を最適化します。

アイコンは、サイトのブランディングの重要な要素です。次は、テーマ設定を活用して、ブランディングの他の要素をレスポンシブにする方法を説明します。

理解度チェック

アイコンに関する知識をテストする