効果的なWEB制作

第2章 ホームページ(WEBサイト)制作のテクニック

ホームページを作る、この意味では各種ツールやソフトを使用することで、比較的容易に目的を達成することが出来ます。
しかし、「何でも良いから作る」わけでは無いはずです。
守るべきルールや、ちょっとしたコツを知ることで、見違えるように「効果」が期待できるホームページが完成します。

2. 派手さじゃ負けない!…でも負けてます。 -画像とテキスト情報 GIF編-

ホームページのインパクトを考えると、GIF・JPGやFlashなどの「画像」が多く使われます。
それは他の広告媒体と同じように、文字だけのホームページは読んでいてもつまらないからです。
しかし画像やFlashはその使用方法を誤ると、ホームページとしての質を落とすばかりでなく、ユーザーからも敬遠されてしまう結果を招くことがあります。

例えば、下記の二つを見比べて下さい。

画像
本日特売、先着5名様に限り
1個100円!

一見すると両者は全く同じように見えます。
実際は、左がGIFを使用した「画像」で、右はHTMLタグとCSSで記述された「テキスト情報」です。

ブラウザ(インターネットを使用しホームページ等を見るプログラム、InternetExploerなど)では、両方ともHTMLタグを視覚的に表現するため、一見してその差はわかりません。
もちろん、どちらにもその特性を活かした使用法があるので、どちらが良いという話ではありませんが、ここで注目したいのは、ホームページを構成する「HTMLタグ」です。
この二つをHTMLタグで見ると、以下のようになります。

GIF画像

<img src="./images/pic01.gif" width="200" height="50" alt="画像" />

HTML+CSS(※class="sample"は外部設定)

<div class="sample">本日特売、先着5名様に限り1個100円!</div>

つまり、上の画像はブラウザでは「画像」としか認識されないのに対し、下のHTML+CSSは「本日特売、先着5名様に限り1個100円!」というテキスト情報が認識されているのです。
上の画像は視覚的には情報が掲載されているのですが、ブラウザには「画像」としてしか認識されていないため、情報が掲載されていないのと同じ状態なのです。

この「人間の目には見えるが、検索エンジンには見えない」という状況は画像だけではなく、「フレーム」というHTML作成方法にも同じことが言えます。
フレームの弊害については、別途ご説明します。
see also:URLについて考える -フレーム、AJAX、FLASHサイト-

もちろん「画像」であっても、「alt属性」や「title属性」を記述することで「画像」に「情報(説明)」を埋め込むことが可能なので、テキスト情報の代替として利用する方法が一般的です。
ところが、現在公開されているホームページの中にはこのような状態をあまり考慮せず、全面に「画像」を使用したホームページも多く見かけます。
しかしそれでは「ブラウザに対し、その情報を伝える」という意味においてHTMLの良さをうまく活かしていないこととなり、誤った方法で画像を多用すると、ユーザーにとって必ずしも使いやすく見やすいホームページとはならないのです。

ご相談・お問い合わせは随時受付中

ホームページ制作、リニューアルに関するお問い合わせは、お電話・メールフォームで承っております。良くあるご質問をまとめておりますので、そちらもご参考下さい。

良くあるご質問 お問い合わせフォーム

TOPへ戻る