10. 画像・リンク・メディアの扱い

この章では、画像、リンク、アイコン、動画や地図の埋め込みなど、Webページでよく使うメディアの扱い方を学びます。

画像やリンクは、ページの印象と使いやすさに大きく関わります。

ただ表示できればよいのではなく、読み込み、代替テキスト、リンク先、サイズ、権利にも注意します。

画像の基本

HTMLで画像を表示するには、imgを使います。

画像

<img src="./images/service.jpg" alt="スタッフがパソコンでWebサイトを確認している様子">

srcには画像ファイルの場所を書きます。

altには画像の代替テキストを書きます。

画像が表示されない時や、スクリーンリーダーで読み上げる時に使われます。

altの考え方

altは、画像の役割に合わせて書きます。

情報を伝える画像なら、内容が伝わるように書きます。

情報を持つ画像

<img src="./images/team.jpg" alt="会議室で打ち合わせをする制作チーム">

装飾目的の画像なら、空のaltにすることがあります。

装飾画像

<img src="./images/wave.png" alt="">

画像の近くに同じ内容の説明文がある場合は、altを短くすることもあります。

大切なのは、画像が表示されなくても情報が伝わるかを考えることです。

画像サイズ

画像は、表示サイズに対して大きすぎると読み込みが遅くなります。

たとえば、画面上で幅600px程度に表示する画像に、幅4000pxの写真をそのまま使うと重くなります。

Webサイトでは、必要なサイズに合わせて画像を書き出します。

CSSでは、画像が親要素からはみ出さないようにします。

画像の基本CSS

img {
    max-width: 100%;
    height: auto;
    display: block;
}

画像形式

画像形式には、それぞれ向き不向きがあります。

形式	向いているもの
JPG	写真
PNG	透過が必要な画像、ロゴ
SVG	アイコン、ロゴ、図形
WebP	写真や画像の軽量化

実務では、写真はJPGやWebP、ロゴやアイコンはSVGを使うことが多いです。

ただし、案件や環境によって使える形式が変わることもあります。

picture要素

画面幅や画像形式に応じて画像を出し分けたい場合は、pictureを使うことがあります。

picture

<picture>
    <source srcset="./images/hero.webp" type="image/webp">
    <img src="./images/hero.jpg" alt="オフィスで働くスタッフ">
</picture>

まずWebPを読み込み、対応していない場合はJPGを表示するような使い方ができます。

最初から必ず使う必要はありませんが、画像最適化の選択肢として知っておくと便利です。

リンクの基本

リンクにはaを使います。

リンク

<a href="/contact/">お問い合わせ</a>

リンクテキストは、リンク先がわかる言葉にします。

よい例:

お問い合わせフォームへ
サービス詳細を見る
採用情報を見る

避けたい例:

こちら
詳細
クリック

「こちら」だけでは、リンク先の内容がわかりにくくなります。

内部リンクと外部リンク

同じサイト内へのリンクを内部リンク、別サイトへのリンクを外部リンクと呼びます。

外部リンクを別タブで開く場合は、target="_blank"を使います。

外部リンク

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
    外部サイトを見る
</a>

rel="noopener noreferrer"は、セキュリティや参照情報に関わる指定です。

別タブで外部リンクを開く時はセットで書くとよいです。

電話リンクとメールリンク

電話番号やメールアドレスをリンクにすることもあります。

電話リンクとメールリンク

<a href="tel:0312345678">03-1234-5678</a>
<a href="mailto:info@example.com">info@example.com</a>

スマホでは、電話リンクをタップすると電話アプリが開きます。

ただし、PCでは意図しない動きになることもあるため、案件に合わせて使います。

アイコンの扱い

アイコンは、SVGやアイコンフォント、画像として使うことがあります。

装飾目的のアイコンなら、スクリーンリーダーに読ませないようにします。

装飾アイコン

<span class="button-icon" aria-hidden="true">→</span>
<span>詳しく見る</span>

アイコンだけのボタンの場合は、何のボタンかわかる名前が必要です。

アイコンだけのボタン

<button type="button" aria-label="メニューを開く">
    <span aria-hidden="true">☰</span>
</button>

見た目だけでなく、意味が伝わるかを確認します。

埋め込み

Googleマップ、YouTube、SNS投稿などを埋め込むことがあります。

埋め込みでは、iframeを使うことが多いです。

iframeの例

<iframe
    src="https://www.youtube.com/embed/xxxxxxxxxxx"
    title="サービス紹介動画"
    loading="lazy"
    allowfullscreen>
</iframe>

titleは、iframeの内容を説明するために指定します。

loading="lazy"を使うと、必要になるまで読み込みを遅らせることができます。

画像利用権

画像やアイコンには権利があります。

インターネットで見つけた画像を、許可なく使うことは避けます。

確認したいことは次の通りです。

自分で撮影した写真か
クライアントから掲載許可を得ているか
有料素材を正しく購入しているか
無料素材の利用規約に合っているか
人物写真の掲載許可があるか
ロゴやキャラクターの使用許可があるか

Web制作では、見た目だけでなく、素材を安全に使うことも大切です。

この章のまとめ

画像にはsrcとaltを指定する
altは画像の役割に合わせて書く
画像は表示サイズに合わせて軽量化する
リンクテキストは、リンク先がわかる言葉にする
画像やアイコンは利用権を確認して使う