一枚画像でユーザーの想像力を喚起する－ウェブ制作チュートリアル

一枚画像でユーザーの想像力を喚起する

パソコン向けサイトの場合、モバイル向けサイトなどと比べると比較的広い画面のモニタで表示されます。
せっかく大きな面積を使えるので、想像力を喚起する大きめの一枚画像を挿入して、ユーザーの視覚にアピールするデザインにしていきましょう。

ここで表示する画像は実際にはあまり意味は無いのですが、やはり見栄えのする画像があると雰囲気も良くなりますし、ウェブサイトのコンセプトなどを視覚的に伝えやすくなります。

ダウンロードしたサンプルファイルから画像ファイルのimg_index.pngをコピーしてimagesフォルダに入れます。

画像ファイル：img_index.png

画像ファイルの用意ができたら、index に以下の記述を追加してください。

HTMLソース（index ）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index ">ホーム</a></li>
	<li><a href="product ">製品紹介</a></li>
	<li><a href="profile ">会社概要</a></li>
	<li><a href="contact ">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社">

	<!-- インフォメーション -->
	<h2>新着情報</h2>
	<h3>新商品のご案内</h3>
	<p>
	あいうえおかきくけこさしすせそ（中略）
	</p>
	<h3>展示会への出展</h3>
	<p>
	あいうえおかきくけこさしすせそ（中略）
	</p>
	<h3>環境への取り組み</h3>
	<p>
	あいうえおかきくけこさしすせそ（中略）
	</p>
	
	<!-- フッタ -->
	<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>

</div>
</body>
</html>

保存をしたらブラウザで表示してみましょう。画像が表示されれば成功です。

変更前を確認する

もし、画像が表示されない場合には、指定したパスに対応するフォルダ内に画像ファイルが保存されているかどうか、指定した画像ファイル名が間違っていないかなどを確認してみてください。

img要素のsrc属性

img要素のsrc属性で指定した “./images/img_index.png” という値は、表示させる画像ファイルのURL（ファイルの所在地）を指定します。
このURLに画像ファイルが存在しない場合、単に画像が表示されないだけで、エラーメッセージなどが表示されるわけではありません。

img要素のalt属性

img要素のalt属性はalternativeの略で“代替するもの、代わりになるもの”といった意味合いです。
alt属性の値には、この画像の代替テキスト、つまり、画像が表示されない場合にその代わりとなるテキストを指定します。

alt属性に指定するべき適切な代替テキストとは？

img要素で画像を表示する際には、alt属性で代替テキストを指定します。
alt属性を省略しても画像は表示されますが、何らかの理由で画像ファイルが読み込まれなかった場合には、代替テキストが無ければユーザーに何も情報が伝わらなくなってしまうからです。

alt属性の値には、「画像が利用できない場合の代わりになる代替テキスト」を指定します。
ウェブページに指定していた画像が表示されなくても、言葉だけでもウェブページの意味が伝わるような内容のテキストにします。
代替テキストの役割を理解して、適切なテキストを入れるようにしましょう。

なんとなく「画像に関する説明テキスト」を入れてしまいたくなりますが、その画像だけを単体で考えるのではなくウェブページ全体の流れを意識します。
例えば、そのウェブページの内容を電話で伝えたり、ラジオで放送されることを想定してみると、適切な代替テキストを選びやすくなるかもしれません。

場合によっては、単なる飾り程度の意味しかないアイコンやイラストなどの画像であれば、alt属性の値は空文字でも良いのかもしれません。

まとめ

パソコン向けサイトでは、広い画面が使えることを活かしたデザインを心掛ける
大きめのグラフィックがあると、それだけでウェブサイトの印象が変わる
できれば、ウェブサイトのコンセプトを端的に表すグラフィックにしたい

<前へ

目次へ

次へ>

★一枚画像でユーザーの想像力を喚起する