この「今ある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サイトの成果に繋げましょう。