画像の挿入はホームページの運用において非常に重要ですが、同時によくミスのあるポイントでもあります。
画像挿入のミスって何ですか？
「適切なサイズ」「データ容量」「使い方」など、画像ってただ挿入すればOKというわけではないんだ。
画像を正しく取り扱わないと「ページ表示速度の低下」「画像が表示されず空白が生じる」など、様々な問題につながる可能性があります。結果として、ユーザーエクスペリエンスが低下しSEOに影響を及ぼしかねません。
こちらではWeb担当者なら知っておきたい、適切な画像サイズや画像の挿入時に留意すべきポイントをわかりやすく解説します。
この記事のレベル
| 重要度 | (5) |
|---|---|
| 初心者度 | (4) |
| 難易度 | (2) |
この記事で学べること
- ホームページで使用する画像の最適サイズとは？
- ホームページにおける画像の重要性
- 画像設定のチェックリスト
ホームページで使用する画像の最適サイズは？
最適な画像サイズって何ですか？
パソコンの一般的な画面サイズは1920px×1080pxですので、ホームページに適した画像サイズも「1920px×1080px」が目安となります。
ちなみに「px」とは、デジタル画像を構成する最小単位である「pixel（ピクセル）」を省略したものだよ。
画像サイズは「最適」であることが重要です。
例えば、小さすぎる場合と大きすぎる場合にどう影響があるかを簡単にまとめると、以下のようになります。
| 画像サイズ | 影響 |
|---|---|
| 目安より小さすぎる |
|
| 目安より大きすぎる |
|
画像ファイルのデータ容量は、「200KB」を目安に、できるだけ軽い画像を利用しましょう。
Googleでは、速度が遅くなりがちなモバイル回線を考慮し、1.6MB以内のファイルサイズを目指すことを推奨しているよ！
データ容量の大きな画像をいくつも使うと、あっという間にファイルサイズが1.6MBを超えてしまいます。
表示速度が低下し、ユーザーが使いにくさを感じると「ユーザーエクスペリエンスの低下」「結果としてGoogleからの評価の低下」が懸念されるため、注意が必要です。
読み込み速度を速くするには工夫が必要です。
例えば、以下の方法が挙げられます。
- 色数の少ない画像を使用する
- 画像形式のPNGとJPGを使いわける
画像の最適化が重要なんですね！
「表示速度の向上」「高画質の担保」などが可能になり、結果としてSEOのよい働きにつながるんだ。
ホームページにおける画像の重要性
冒頭で「画像の使い方」とおっしゃっていましたよね？
画像をどう使うかによって、ホームページ全体の印象が左右されるんだ。
画像は、テキストだけでは表現できない雰囲気やイメージを伝えられるため、様々なホームページで積極的に使われています。
こちらでは、画像を活用している事例を3つご紹介します。
CASE 1イメージ画像を使っているホームページ事例
town
小田急沿線の街の魅力を、インタビューを通して伝えているのが、プロモーションサイトの「town」です。デザインはシンプルですが、メインの写真に縦書きと横書きのテキストを組み合わせているため、まるで雑誌のようなおしゃれなデザインが特徴です。
イメージ画像を使うことで、ユーザーの興味を惹き付け、内容を読み進めたくさせるメリットがあるよ。
CASE 2商品画像を使っているホームページ事例
株式会社トンボ鉛筆
株式会社トンボ鉛筆のコーポレートサイトでは、主力商品の画像が掲載されているため、何を扱っている会社なのかがひと目でわかります。
「百聞は一見にしかず」のことわざどおり、テキストを並べるよりも画像を使ったほうが、ユーザーが理解しやすくなるため、商品の購入などのコンバージョンにつながります。
CASE 3イメージイラストを使っているホームページ事例
ボラギノールタウン
ロート製薬グループの「天藤製薬株式会社」が運営する「ボラギノールタウン」は、商品に関する豆知識や歴史を学べるサイトです。
単に商品の情報を提供するのではなく、「街」を楽しみながら閲覧できる工夫がされています。また、イラストが動くことで躍動感が生まれていることも、サイトの特徴の一つです。
画像の使い方によって、各社サイトの個性が出ていて面白いですね！
「自社のサイト運営目的」「商品・サービス」によって、適切な画像や使い方も異なるんだ！
よく見られるホームページには多くの画像が使われていた！
そういえば、なぜ「画像の使い方」と「SEO」が関連するのですか？
それは、ユーザーファーストを大切にしているGoogleの評価と関わりがあるからだよ。
ここで、Googleがどのように検索順位を決定しているのか、検索の仕組みとサイト評価基準について解説します。
Google検索の仕組み
Googleは検索結果画面にページを表示するために、3つの作業を行っています。
① クロール
クロールとはインターネット上の情報を収集することで、Googleでは「クローラー」と呼ばれるロボットが、インターネット上を巡回し、世界中から情報を集めています。
② インデックス
クローラーが集めたWebサイトの情報を、Googleのデータベースに登録する作業がインデックスです。
インデックスする際には、キーワードや情報の新しさなどを手がかりにし、ユーザーが求めている情報と関連性が高いかを判断したうえで、適した場所に登録します。
③ ランキング
最後に行う作業が、検索順位を決めるランキングです。ランキングはGoogleのアルゴリズムの総合得点によって決まります。
「ランキング」をつける段階で、重要なのがユーザーファーストなんだ。
サイト評価基準
Googleがランキングを行う際に最も優先するのが、ユーザーファーストです。
「ユーザーが求めている情報が書かれているか」「ユーザーにとって使いやすいか」などを第一に考え、検索順位を決めています。
「Google が掲げる 10 の事実」の冒頭では、ユーザーファーストについて以下のように述べています。
1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
引用：「Google が掲げる 10 の事実」
Google は、当初からユーザーの利便性を第一に考えています。新しいウェブブラウザを開発するときも、トップページの外観に手を加えるときも、Google 内部の目標や収益ではなく、ユーザーを最も重視してきました。
また、弊社の独自調査の結果、上位サイトほど多くの画像を使用していたことが判明しました。検索上位の平均画像枚数は「平均17枚」で、上位になるほど使用枚数が多くなっています。
ただし、画像が多ければ多いほど上位になるわけではなく、上位サイトは画像を多用したわかりやすい内容になっていると考えられます。
画像を挿入する目的は「ユーザーの理解を助けること」なんだ。だから適切に画像を使おう！
「画像の使用枚数について、調査結果が気になる！」という方は、こちらをご覧ください。
上位サイトの平均使用画像は17枚！調査してみてわかったやるべき4選
Webページの内容は、テキスト以外に画像も評価の対象です。画像をコンテンツ内で適切に使用し、ユーザーにわかりやすいページを作ることは、SEOの面でも効果的です。ここでは、SEO対策と画像の関係や画像サイズ、alt(代替)テキストについてご紹介します。
ホームページで使用する画像形式は何が適切？
ホームぺージで使用する画像には、様々な画像形式がありますので、目的に応じて使いわけましょう。
写真ならJPEG
写真に最適な画像形式のJPEGは、フルカラーに対応しており、繊細なグラデーションを使った画像や風景写真に適しています。圧縮率も柔軟に変更できますが、一度圧縮してしまうと、元のサイズには戻せないため注意が必要です。
イラストは背景透過できるPNG
フルカラーで表現できるPNGは、主にWebサイトのロゴやイラストなどに使用される画像形式です。圧縮しても元のサイズに戻せるため、画質を劣化させることなく保存を繰り返せます。また、背景を透過できる機能もあります。
データ容量を重視するならWebP
SEOタイムズでは拡張子としてWebPを採用しています。
Googleが開発した、Webサイト向けの画像フォーマットのWebPは、優れた圧縮とサイズ縮小が特徴です。画像のWebP化で表示速度を高めることで、SEO効果とユーザーエクスペリエンスの向上が期待できます。
WebPに変換できるツールには以下があります。
JPG/PNGの変換ツールもあり
画像形式は変換ツールを使って変換できます。使いやすいツールを活用しましょう。
無料で使えるツールは、以下のとおりです。
「JPEG」と「JPG」って何が違うんですか？
実は、拡張子が違うだけで、機能面の違いはないんだ。
ホームページで使用する画質はどうすれば良い？
ホームぺージで使用する画像は「大きさ」だけではなく「画質」も重要だ！
たしかに。ECサイトの掲載画像の画質がよくないと、「買いたい！」とは思いにくいですよね。
画像はサイズの他にも、画像密度である解像度を設定できます。解像度が高ければ高いほど、細やかな画像となり、写真がきれいに表示されます。
ただし、解像度は印刷する場合に反映されるため、Webサイトではそれほど大きな影響はありません。
一般的なモニターのモニター解像度（スクリーン解像度）は72ppi、Windowsのパソコンは96ppiですので、画像の解像度も72～96ppiであれば、きれいに表示できます。
サイズと同じく解像度も、画像のデータ容量に大きな影響を与えます。高解像度の画像を使用するとデータ容量が大きくなるため、解像度は72～96ppiを目安に設定することをおすすめします。
ホームページで使用できるおすすめの画像素材サイト4選
ホームページで使用できる画像サイトの中でも、編集部おすすめの4選を紹介しよう！
NO 1PhotoAC（写真AC）
| 特徴 |
|
|---|---|
| 料金プラン |
|
| 商用利用 |
|
| 利用時の注意点 （無料会員） |
|
NO 2Pixabay
| 特徴 |
|
|---|---|
| 料金プラン |
|
| 商用利用 |
|
| 利用時の注意点 |
|
NO 3PIXTA
| 特徴 |
|
|---|---|
| 料金プラン |
|
| 商用利用 |
|
| 利用時の注意点 |
|
NO 4Unsplash
| 特徴 |
|
|---|---|
| 料金プラン |
|
| 商用利用 |
|
| 利用時の注意点 |
|
今日から使える！画像設定のチェックリスト
画像を使うときは、このチェックリストで正しく使えているかを確認しよう！
CHECK 1ファイルサイズは1.6MB以下か？
ファイルサイズが大きすぎると、ぺージの読み込みに時間がかかって表示速度が遅くなり、ユーザービリティの低下につながります。目安は1.6MBです。
CHECK 2画質が粗くないか？
軽量化を求めるあまり、画質が荒くなっていないかを確認しましょう。
サイト内で使用したときに「画像が見えづらくないか」と、必ず目視してみよう。
CHECK 3altタグは設定されているか？
altタグとは、Webサイト上の画像を説明するためのhtmlコードです。
altタグを適切に設定して画像の代替テキストを指定することで、画像が表示されない場合でも、どのような画像なのかをユーザーに説明できます。
また、Googleの検索エンジンも、altタグを利用して画像の意味を理解しています。
そのため、altタグを使ってコンテンツの内容を伝えることによって、検索エンジンが正しく内容を理解できるようになるため、SEO効果が期待できます。
altタグは、以下のように記述します。
<img src=”画像URL” alt=”画像の説明“>
CHECK 4著作権に問題はないか？
ホームぺージで使用する画像や写真、文章や音楽には著作権があります。
画像や写真がフリー素材でも、著作権がフリーとは限らないため、利用規約の確認が必要です。
無断で画像や写真を使用すると、著作権侵害によって企業イメージダウンしたり、炎上したりするため、フリー素材を使う場合も、商用利用の可否をしっかり確認することが重要です。
ホームページの画像・写真に関するよくある質問
ホームページ画像のサイズは変更できますか？
htmlで画像のサイズを変更する場合は、imgタグで属性として幅と高さを指定します。記述は以下のとおりです。
<img src="画像ファイル名またはURL" alt="画像の内容" width="幅" height="高さ">
ホームページの画像サイズは自動で変わりますか？
モバイル対応のサイト作成ツールを利用したり、プラグインなどの無料機能を使ったりすることで、パソコン・タブレット・スマホのデバイスに応じて自動で画像サイズを変えることもできます。
Webサイトの最適な解像度は？
解像度とは画像密度のことです。一般的なモニターのモニター解像度（スクリーン解像度）は72ppi、Windowsのパソコンは96ppiですので、画像の解像度も72～96ppiであれば、きれいに表示できます。
まとめ
ホームページに画像は欠かせません。画像を使用したホームぺージは、ユーザーが内容を理解しやすくなり、Googleから有益なサイトだと判断されるため、SEO効果が期待できます。
ただし、適切なサイズの画像を使用していない場合は、表示速度の低下などの問題が生じるため、ユーザーエクスペリエンスが低下し、Googleからも評価されなくなってしまいます。
ホームページに画像を追加する際には、適した画像サイズや画像形式から、解像度や著作権まで、事前にしっかりと確認することが欠かせません。
