この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。

ブログやWebサイトに画像を追加することは、視覚的な魅力や情報伝達の効率を高め、ユーザーの離脱防止につなげることができます。

そこで今回は、Webサイトに画像が必要な理由と、画像を簡単に設定する方法を紹介します。

なぜWebサイトに画像が必要なのか

①内容を理解しやすくする

画像は、文章だけでは伝えきれない情報を視覚的に助ける役割を果たします。たとえば製品やサービスの詳細、地図や手順などは、画像を使うことで簡単に理解できるようになります。

• 商品説明：商品の特徴をテキストで説明するよりも、画像で実物を見せた方が効果的です。
• インフォグラフィック：データや統計をわかりやすくするために、画像やグラフを使うことも有効です。

②ユーザーの離脱を防ぐ

特に長いテキストが多いページでは、ユーザーの集中力が切れやすく離脱率が上がってしまいます。ほどよく画像を配置してユーザーを飽きさせない工夫をすることで、離脱を防ぐことにつながります。

③SEO対策としても効果がある

Google検索は、Webページだけでなく、画像、動画、ニュース、地図、ショッピング情報など、あらゆる情報を同じ検索結果画面に表示します（ユニバーサル検索、Yahoo!ではブレンド検索と呼ぶ）。

Webサイトに画像を挿入することで、ユーザーが画像検索を行った際に、関連性の高い画像とともに自社のWebサイトのリンクも表示され、少なからずWebサイトに流入する可能性が高まります。

画像の設定方法

設定は簡単です。HTMLにimgタグをいれて、src=””属性に画像のパス（［相対パス］または［絶対パス］）を指定するだけです！

同じサイト内にあるファイルであれば相対パスが好ましいですが、今回は絶対パスで書きます。

👇画像のパスについて詳しく知りたい方はこちら

画像の「絶対パス」と「相対パス」とは？

HTML

 <div class="img-box">
    <img src="https://autoproject.nagoya/wp-content/themes/autoproject/images/top/concept-img.jpg" alt="画像の説明文">
 </div>

CSS

img {

max-width: 100%;/*「画像の大きさの最大値」が「親要素のwidth幅の100%の値」にするための指定*/
height: auto;/*「「height:auto;」も指定して高さも最適化*/

}

.img-box{

height: 200px;/*高さ指定*/
width: 700px;/*横幅指定*/

}

説明

• 上記のパスは、autoproject.nagoyaのサイトにあるconcept-img.jpgを表示させたい時に使う絶対パスでの書き方です。

  ［/wp-content/themes/autoproject/images/top/concept-img.jpg］の箇所は、サーバー内でのファイルの場所を示すパスです。これにより、サーバー内の特定のファイルに直接アクセスできます。

• HTMLでは、画像のサイズを調整しやすいようimgタグをdivタグで囲む。またdivタグにクラス名を付ける（他で設定してあるdivタグに影響することがないので、つけてください。今回はdivタグに［img-box］というクラス名を付けてます）。
• ［alt=”画像の説明文”］の箇所は、画像が表示されない場合に必要です。また、ユニバーサル検索にもaltはあるといいので必ず設定してください。主に何の画像かを［画像の説明文］の箇所に書き込む。

このように、画像設定は簡単にできます！

Webサイトに画像を使用することは、情報をユーザーに分かりやすく伝えるほか、SEOの効果もあります！　適切な画像を選び、効果的に配置することを意識してWebサイトの成果につなげましょう。