Markup Guideline

ページリンク: `<a>`

<a href="https://xxxx.com" target="_blank">外部リンク<img src="xxxx" alt="別ウィンドウで開きます" /></a>

ページリンクにのみ <a> を利用します。メニュー開閉ボタン等のページリンクでないものには、<button> を利用してください
外部サイトへやPDFファイル等のリンクには、target="_blank" を付けます。また、「別ウィンドウで開きます」という内容をリンクコンテンツに明示します
rel="noopener" は、モダンブラウザでは付ける必要はありません
rel="norefferer|noffolow" は、基本的には付ける必要はありません。しかし、意図する理由がある場合は付けても構いません
広告バナー等の「対価が発生してるリンク」には、rel="sponsored" を付けます

画像表示: `<img>`, `<svg>`, `<figure>`, `<picture>`

`<img>`

<img src="/sample.jpg" witdh="400" height="200" alt="サンプル画像" loading="lazy" />

画像の内容を示す alt 属性を必ず付与して下さい
- 装飾目的の画像は、空の値（alt=""）を付与します
- 画像の内容を示すテキストが近接要素に存在する場合は、空の値（alt=""）を付与します
画像のサイズを示す width, height 属性を付与して下さい
loading 属性を付与し、遅延読み込みを有効化して下さい
- 基本的にすべての画像には、loading="lazy" を付与します
- ヒーロー画像等、ファーストビューに配置され、遅延読み込みをする必要がない場合は、loading="lazy" を削除するか、loading="eager" を付与します
  - 更に、fetchpriority="high" を付与することで、LCPの最適化が見込めます

`srcset` / `sizes` 属性

DPR（Device Pixel Ratio）とviewportによって、最適なサイズの画像を出し分ける機能です。スマートフォンでは小さいサイズの画像を出力したりなど、パフォーマンスの最適化が可能です。

広範囲に手動で対応するのは現実的ではありません。コンポーネントやテンプレートを用いて自動化の仕組みを取り入れる。または、局所的な対応を推奨します。

<img
  src="/img/hero-800.jpg"
  srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w"
  sizes="
    (max-width: 600px)  100vw,
    (max-width: 1200px) 50vw,
    800px
  "
  alt="ヒーロー画像"
  width="800"
  height="450"
/>

`srcset x|w` 記述子

srcset 属性のサイズ指定には、x（DPR only）と w（DPR x Viewport）の記述子指定があります。x 記述子を利用することは殆どなく、基本的には w 記述子を指定して下さい。

`sizes` 属性

srcset 属性で w 記述子を利用している場合は、sizes 属性を省略しないで下さい。意味のない srcset 指定となってしまいます。

`<svg>`

<svg src="/sample.svg" witdh="400" height="200" aria-role="img" aria-label="サンプル画像"></svg>

それ自体に内容があるSVGには、内容を示す aria-label 属性と aria-role="img" を付与して下さい
装飾目的のSVGには、aria-hidden="true" を付与します
SVGのサイズを示す width, height 属性を付与して下さい

`<figure>`

「図版」や「図表」のように、「本文の流れから切り離しても成立する自己完結したコンテンツ」に利用します。

<figure>
  <img src="/img/architecture.png" alt="Astroのアーキテクチャ図" />
  <figcaption>図1. Astro SSR on Cloudflare Workers の構成</figcaption>
</figure>

利用の判断基準として、「キャプションを付けたい・付ける可能性があるコンテンツ」に利用して下さい
装飾目的のコンテンツには利用しません
殆どの場合、画像表示に利用しますが、動画や音声等にも利用可能です
画像の alt 属性が <figcaption> と同等である場合は、alt="" を設定します
キャプションが必要ないコンテンツの場合は、<figure> を利用しなくても問題ないです

`<picture>`

Viewportによって、そもそも別の画像を表示したい（アートディレクションを変えたい）ときに利用します。

<picture>
  <!-- 600px以下: 縦長の表画像を表示 -->
  <source media="(max-width: 600px)" srcset="/table_vertical.png" />
  <!-- 601px以上：通常の表画像を表示 -->
  <img src="/table_horizonal.png" alt="成分表" />
</picture>

画像フォーマットの出し分け機能

主要機能として、avif や webp 等のWebブラウザに適した画像フォーマットファイルの出し分け機能があります。しかし、殆どの場合は開発者が利用することはありません。

画像フォーマットの出し分けは、メディアサーバー・DAM（Digital Assets Management）等の画像配信サービスや、それに準じた仕組みを利用する方が適しています
AstroやNextjs等、開発フレームワーク側で、<Image> コンポーネントとして機能提供されている場合もあります
手動で対応する場合、対応のための労力と恩恵が釣り合うことはありません

アートディレクションの変更機能

「アートディレクション変更」とは、「同じ内容を持つが、構図が異なる画像」のことです。「別の内容の画像」を出し分けする用途ではありません。

図や表の画像で、スマートフォンでは縦長の画像を用意する
スマートフォンでは、画像のデザインや構図が異なるため、専用の画像を用意する

レスポンシブデザインの場合は、デザイン変更用途は稀であり、大抵は図や表の画像出し分け用途でのみ利用します。

フォーム関連

TBD

装飾用途のタグ

TBD

Markup Guideline

ページリンク: <a>

画像表示: <img>, <svg>, <figure>, <picture>

<img>

srcset / sizes 属性

srcset x|w 記述子

sizes 属性

<svg>

<figure>

<picture>