この章では、写真や画像の使い方を学びます。
画像は、ページの印象を大きく左右します。
内容に合う画像を選び、適切なサイズや比率で見せることで、情報が伝わりやすくなります。
画像の役割
画像には、次のような役割があります。
- 商品やサービスを見せる
- 場所や雰囲気を伝える
- 人の表情や利用シーンを伝える
- 文章だけでは伝わりにくい内容を補う
- ページにリズムを作る
- 信頼感を補強する
画像は、ただ空いている場所を埋めるために使うものではありません。
そのページの目的に合う画像を選びます。
内容に合う画像を選ぶ
画像は、ページの内容と合っていることが大切です。
たとえば、実際の店舗サイトであれば、店内、スタッフ、商品、利用シーンの写真があると伝わりやすくなります。
一方で、内容と関係が薄い雰囲気画像ばかりだと、何のサイトなのかわかりにくくなります。
確認したい項目は次の通りです。
- 何を伝えるための画像か
- 実際の商品や場所が見えるか
- 見る人が内容を理解しやすくなるか
- 写真の雰囲気がサイトの目的に合っているか
- 画像が文章の内容を補っているか
画像を選ぶ時は、見た目のきれいさだけでなく、内容との関係を確認します。
素材感に注意する
無料素材やストックフォトは便利です。
ただし、素材感が強すぎる画像を使うと、サイトの信頼感が下がることがあります。
たとえば、次のような画像です。
- 実際のサービスと関係が薄い人物写真
- 海外の素材感が強い写真
- 表情やポーズが不自然な写真
- どのサイトでも見たことがあるような画像
- 内容より雰囲気だけを優先した画像
素材写真を使う場合でも、ページの目的に合っているかを確認します。
実際の写真が使える場合は、そちらを優先した方が伝わりやすいこともあります。
トリミング
トリミングとは、画像の見せる範囲を調整することです。
同じ画像でも、どこを切り取るかで印象が変わります。
トリミングでは、次のことを確認します。
- 見せたい対象が切れていないか
- 顔や商品が不自然に切れていないか
- 余白が多すぎないか
- 重要な部分が中央や見やすい位置にあるか
- スマホ表示で見切れないか
特に、横長画像をスマホで表示する場合は、上下や左右が大きく切れることがあります。
スマホでも見せたい部分が残るか確認します。
画像比率
画像比率とは、画像の横幅と高さの比率です。
一覧ページやカードでは、画像比率をそろえると見た目が整います。
たとえば、実績一覧や記事一覧で、画像の高さがばらばらだと、カードの見た目もばらつきます。
よく使う比率には、次のようなものがあります。
- 正方形
- 4
- 3
- 16
- 横長
- 縦長
どの比率がよいかは、画像の内容とレイアウトによります。
人物や商品写真は、切れてほしくない部分があるため、比率に注意します。
解像度と重さ
画像は、粗すぎると信頼感が下がります。
一方で、必要以上に大きい画像は表示速度に影響します。
Webで使う画像は、見た目に必要なサイズに合わせて調整します。
確認したい項目は次の通りです。
- 表示サイズに対して画像が小さすぎないか
- 必要以上に大きすぎないか
- ファイルサイズが重すぎないか
- スマホでも読み込みが遅くならないか
- 画像形式が適切か
画像は、見た目と表示速度のバランスが大切です。
明るさとコントラスト
画像の明るさも、ページ全体の印象に影響します。
暗すぎる画像が多いと、重い印象になります。
明るすぎる画像は、文字やボタンと組み合わせた時に見づらくなることがあります。
特に、画像の上に文字を置く場合は注意が必要です。
画像の上の文字が読みにくい場合は、次のように調整します。
- 文字を画像の外に出す
- 画像に薄いオーバーレイをかける
- 文字の背景を付ける
- 画像の位置を変える
- そもそも別の画像を使う
画像の上に文字を置く表現は、読みやすさを必ず確認します。
画像と余白
画像は、周囲の余白との関係も大切です。
画像とテキストが近すぎると窮屈に見えます。
逆に、離れすぎると関係が弱く見えます。
画像とテキストを組み合わせる時は、次のことを確認します。
- 画像と見出しの関係がわかるか
- 説明文が画像に近すぎないか
- カード内の画像と文字の余白がそろっているか
- セクション内で画像が大きすぎないか
- スマホで画像が連続しすぎていないか
画像は存在感が強いため、余白でバランスを取ります。
代替テキスト
画像には、必要に応じて代替テキストを設定します。
代替テキストは、画像が見えない場合やスクリーンリーダーで読み上げる場合に使われます。
装飾だけの画像なら空でもよい場合があります。
内容を伝える画像なら、その画像が何を伝えているかを書きます。
たとえば、スタッフ紹介の写真なら「スタッフの集合写真」のように内容がわかるテキストにします。
この章のまとめ
- 画像は、ページの内容や目的を補うために使う
- 見た目のきれいさだけでなく、何を伝える画像かを確認する
- トリミングや画像比率は、一覧やスマホ表示に大きく影響する
- 画像の重さ、明るさ、文字の読みやすさも確認する
- 次の章では、ボタン、リンク、フォームなど操作部分のデザインを学ぶ