はじめに
ホームページでは、文章だけでなく画像も大切な情報です。
店舗の雰囲気。
商品。
スタッフ。
施術例。
アクセス。
文章では伝わりにくいことも、写真があると一瞬で理解できる場合があります。
ただし、
画像を入れれば入れるほど良い
わけではありません。
この章ではまず、
- WordPressへ画像を入れる
- ページへ配置する
- 表示サイズを調整する
- 必要な画像を選ぶ
という、画像を「正しく使う」基本を整理します。
画像の容量を軽くする方法は第27章。
altの詳しい考え方は第39章。
サイト全体の表示速度は第40章で扱います。
画像は飾りではなくコンテンツ
最初に考えたいのは、
この画像は何のためにある？
です。
たとえば美容室なら、
店内写真には、
「どんな空間なのかを伝える」
役割があります。
スタッフ写真には、
「誰が対応するのかを伝える」
役割があります。
施術写真には、
「どんな仕上がりを目指しているのかを伝える」
役割があります。
画像を選ぶときは、
きれいな写真だから使うだけではなく、
この画像によって何が伝わる？と考えます。
WordPressへ画像を入れる
メディアライブラリとは
WordPressへアップロードした画像やファイルは、メディアライブラリで管理できます。
管理画面では一般に、
メディア
↓
ライブラリから確認できます。
メディアライブラリでは、画像を選ぶと、
- ファイル情報
- タイトル
- キャプション
- 代替テキスト
- ディスクリプション
などを確認・編集できます。
ただし、タイトル、キャプション、altはそれぞれ役割が違います。
altについては第39章で詳しく整理します。
ページへ画像を入れる
ブロックエディターでは、画像ブロックを使って画像を入れられます。
方法は主に、
- 新しい画像をアップロード
- メディアライブラリから選ぶ
- URLから挿入
などです。
初心者は基本的に、
自分のWordPressへアップロードした画像をメディアライブラリから使う
方法が管理しやすいでしょう。
外部URLの画像をそのまま使うときの注意
WordPressでは、画像URLを指定して表示する方法もあります。
しかし、外部画像を自分のメディアライブラリへ保存せず参照すると、元の画像が移動・削除された場合に表示できなくなることがあります。
また、他人の画像を使用する場合は著作権や利用条件も確認します。
「Webにある画像だから自由に使える」
とは考えません。
画像の表示サイズを調整する
表示サイズと元画像サイズは違う
ここは初心者が混同しやすいところです。
たとえば、4000px幅の写真をアップロードして、
ページでは600px幅で表示しているとします。
画面上は600pxでも、元画像そのものが巨大であれば、必要以上にデータが大きくなる場合があります。
WordPressはアップロード時に複数の画像サイズを生成し、Themeやブラウザーが適切なサイズを利用できる仕組みを持っています。
それでも、必要以上に巨大な元画像を無制限にアップロードする理由はありません。
詳しいリサイズや圧縮は第27章で扱います。
WordPressは複数サイズの画像を作る
WordPressでは画像をアップロードすると、設定やThemeに応じて、
- Thumbnail
- Medium
- Large
- フルサイズ
など複数サイズが作られることがあります。
さらにWordPressはレスポンシブ画像に対応しており、srcsetやsizesを使ってブラウザーが画面条件に合う画像を選べるようにしています。
これは、
PC用画像
スマートフォン用画像を毎回自分で別々に貼る必要がある、という意味ではありません。
WordPress側にも画像配信を助ける仕組みがあります。
画像ブロックで解像度を選べる場合がある
画像ブロックでは、画像やThemeの状況によって、
- フルサイズ
- Large
- Medium
- Thumbnail
など解像度を選べます。
常にフルサイズを使う必要はありません。
その場所に必要な大きさを選びます。
画像をトリミングする
画像の縦横比が揃っていないと、Cardや一覧がガタガタに見える場合があります。
画像ブロックにはトリミングやアスペクト比を調整できる機能があります。
たとえば、
1:1
4:3
3:2
16:9など、デザインに合う比率を選びます。
ただしトリミングすると、写真の端が切れます。
人物の顔や商品の重要部分が消えないか確認します。
焦点位置という考え方
画像をトリミングするときは、
どこを一番見せたいか
を考えます。
人物写真なら顔。
商品写真なら商品。
店内なら見せたい空間。
ブロックによっては焦点位置を調整できる場合があります。
「中央で切ればよい」とは限りません。
アイキャッチ画像とは
投稿や固定ページでは、アイキャッチ画像を設定できる場合があります。
日本語では「アイキャッチ画像」と呼ばれることもあります。
Themeによって、
- 記事一覧
- 記事上部
- SNS共有
- 関連記事
などで使われることがあります。
どこに表示されるかはThemeによって違うため、設定後に実際のページを確認します。
画像を使うときの基本ルール
キャプションは必要なときだけ使う
写真の下に説明を付けたいときはキャプションを使えます。
たとえば、
- 商品名
- 場所
- Before / Afterの条件
- 図の補足
などです。
すべての画像へキャプションを付ける必要はありません。
本文だけで意味が分かるなら不要な場合もあります。
画像の中へ文字を入れすぎない
画像に文字を入れるデザインもあります。
ただし、重要な情報を画像だけにすると、
- スマートフォンで小さく読みにくい
- 検索やコピーがしづらい
- スクリーンリーダーで伝わりにくい
- 画像差し替え時に修正が大変
などの問題があります。
重要な見出しや説明は、できるだけ通常のテキストとして配置します。
画像内テキストについては第39章でもアクセシビリティの観点から扱います。
同じ意味の画像を増やしすぎない
「写真があると華やかだから」
という理由だけで、似た画像を何枚も並べるとページが長くなります。
表示速度にも影響します。
画像は、
伝える役割があるものを選ぶ
と考えます。
画像を入れたらモバイルでも見る
PCではきれいでも、スマートフォンでは、
- 顔が切れる
- テキストと画像のバランスが悪い
- 縦長になりすぎる
- 重要部分が見えない
ことがあります。
画像を入れたら、PCだけでなくモバイル表示も確認します。
altはこの章では入力場所だけ覚える
WordPressでは画像ブロックやメディアライブラリで代替テキストを設定できます。
ただし、
「画像を入れたら全部同じようにaltを書く」
わけではありません。
画像が、
- 情報を伝える画像
- 装飾画像
- リンクとして使われる画像
- 文字を含む画像
のどれなのかで考え方が変わります。
詳しくは第39章で扱います。
重い画像は第27章で整える
この章では「画像を使う」ことを扱いました。
しかし、Cameraやスマートフォンの写真をそのままアップロードすると、必要以上に大きい場合があります。
次の第27章では、
見た目を大きく損なわず、画像データを必要十分な大きさにする方法
を整理します。
今回のポイント
- 画像は飾りではなくコンテンツの一部
- WordPressではメディアライブラリで画像を管理する
- 画像ブロックからアップロードやメディアライブラリの画像を使える
- 表示サイズと元画像のピクセルサイズは別
- WordPressは複数の画像サイズやレスポンシブ画像を利用する
- トリミングするときは重要部分が切れないか確認する
- アイキャッチ画像の表示方法はThemeによって異なる
- 重要な情報を画像内テキストだけへ閉じ込めない
- モバイルでも画像の見え方を確認する
- altの詳しい使い分けは第39章で扱う
今回の視点
画像は、
「ページを華やかにするためのもの」
だけではありません。
写真一枚で、
文章より早く伝えられる情報があります。
だからこそ、
この画像で何を伝えたいのか
を先に考えます。
画像を置くことが目的ではなく、
利用者の理解を助けることが目的です。
Part 4｜URL・画像・Plugin・問い合わせを整える