ホームページをテキスト主体で作成する理由

2016年 09月 20日

ホームページを作る要素を大きく分けると、文章と画像になりますよね。
この2つを用意して、レイアウトやカラーリングを整えながらHTMLとcssを組めばホームページが出来上がります。

しかしこのテキストと画像、基本的には画像ではなく、テキストを中心に組み立てた方がホームページには良いとされています。
それは何故かを今回ご紹介しようと思います!

検索エンジンはテキストを中心にサイトを探す

GoogleやYahooを利用していれば、ホームページの検索機能を使いますよね。
この検索ボックスに入力したテキストを検索エンジンは世界中のホームページから探し回り、関連性の高いものを表示している訳です。

例えばこのホームページは『ユキネコWEBデザイン』という名前です。
もちろん検索ボックスに『ユキネコWEBデザイン』と入力して検索をすればこのホームページが検索結果に表示されるのですが、これはこのホームページに『ユキネコWEBデザイン』という言葉が含まれているからなのです。
この説明ですと当たり前だと思われるかもしれませんね(笑)

ではなぜ、画像ではなくテキストを主体にホームページを制作した方が良いのでしょうか?

それは、検索エンジンはテキストを読んで理解をする事が出来ますが、画像については理解が出来ないのです。
例えば人間がホームページを開いて、猫の画像が表示されたとします。
私達人間はその画像を見て「可愛い猫の画像だ」と理解が出来るのですが、検索エンジンはロボットですので、何の画像か理解できずにただ「何かの画像がある」としか分からないのですね。

つまり、『ユキネコWEBデザイン』と書かれた画像をこのホームページにいくらたくさん配置しても、検索エンジンはその画像が何を意味しているのか分からず、無視してしまいます。
その為、画像ではなく必要な単語はテキストで記載する事が望ましいとされています。

ランディングページと言われる商品の紹介サイト等では、テキストを使わずに画像を並べて派手なデザインで作られたホームページも存在しますが、そのようなサイトを真似するとテキストの数が極端に減り、検索からなかなか表示されないホームページになってしまうので注意が必要です。

FlashやJavaScriptはどうなのか

いわゆる『動的なコンテンツ』と呼ばれるものです。
Flashとは特に一昔前に流行したツールで、スライドショーや簡単なアニメーションを作る時によく用いられていました。
ホームページのメイン画像をFlashで作成して、様々な動きを取り入れたホームページもありましたね。
中にはすべてをFlashで作成してしまい、HTMLやcssの記述がほとんどないホームページもありました。

JavaScriptは近年多くのWebデザイナーが利用しているプログラムで、今ではFlashの代わりにこちらでスライドショーやスクロールバーの表示など、様々な機能に用いられていると思います。

これらについて検索エンジンはどうかと言うと、画像に比べてすべてを理解しない訳ではありませんが、苦手としています。
私が英語を聞いても部分部分しか分からないように、検索エンジンもFlashやJavaScriptの断片的な部分しか理解が出来ないのですね。

その為、FlashやJavaScriptはホームページを彩る為にとても便利なものですが、検索される事を考えると過度な仕様は控え、やはりテキストをベースにホームページを制作した方がベターのようです。

特にFlashは近年古いツールと見られるようになり、急速に普及が進んでいるスマートフォンではFlashコンテンツが閲覧できない事も増えていますので、あまり使用しない方が良いでしょう。

画像には『alt』タグを使う

さて、画像や動的なコンテンツではなくテキストを主体にするべきだと紹介をしました。
しかし、そうは言ってもホームページに画像は欠かせないものですよね。
現にこのホームページにも多くの画像が使われています。

もしホームページで画像を利用する際には、『alt』というタグを付けるようにしましょう。

1枚の画像を例にご紹介すると…

これはこのホームページのトップにある画像の1枚ですね。

この画像をホームページに挿入するタグは

<img src=”http://yukineko-web.jp/wp-content/themes/default/image/top_about.jpg” />

となるのですが、これだけでは検索エンジンは何の画像だか理解をせず、ただ画像があるとしか認識しません。
この問題を、『alt』というタグを利用する事で解消できます。

<img src=”http://yukineko-web.jp/wp-content/themes/default/image/top_about.jpg” alt=”スマホとパソコン” />

タグの後ろの方に『alt』のタグが付いていますね。
『alt=”スマホとパソコン”』と書き足す事で、この画像はスマホとパソコンのものだと分かるようになるのです!

この画像のalt属性によってつけられた文章は、ホームページの読み上げ機能でも読み上げて貰う事が出来るようになります。
目の不自由な方でも、どのような画像が使われているかを伝える事が出来るようになりますので、可能な限りalt属性を付ける癖を付けましょう。

テキストベースでホームページを作る まとめ

テキストを主体にホームページを作る理由を紹介させて頂きましたが、いかがだったでしょうか?

一昔前はホームページと言えば文字もゴツゴツしていて画像で作った方が綺麗だったり、Flashの登場によってFlashを使わなければ時代遅れのサイトに見えてしまったりする事もありましたが、今ではそのままでも綺麗なフォントや、無理にFlashを使わなくても十分な機能を備えたホームページが作れるようになりました。

何より、画像だけでホームページを組み立てる事は画像さえ用意できれば作るのは簡単なのですが、なかなかホームページ制作のコツが掴めないと思います。

これからホームページの制作を考えている方は、是非テキストをメインに制作を考えてみて下さい!