動的・静的コンテンツの選択

静的コンテンツとは

静的コンテンツと動的コンテンツの比較通常ホームページを構成するコンテンツ(文章や画像)は2種類に分けられます。静的コンテンツとはコンテンツ自体が「静的」すなわち、時間が経っても変わらない、動かないコンテンツのことを指します。

主な例として、HTMLで表される文章、テキスト、静止画などが挙げられます。

これらはブラウザに読み込まれ、画面に表示された後には、時間に関係なく特にそのコンテンツ自体が変化することはありません。

動的コンテンツとは

一方、動的コンテンツは時間とともに何らかの変化をするコンテンツのことを指します。

ホームページを見ている人にとって、これらは視覚や聴覚として捉えることができます。

例えば、「FLASH、動画、GIFアニメーション、音楽」などがそうです。

使い方には細心の注意を

ホームページを作成することに慣れてくると、多くのWEBマスターは視覚的に目を引きやすいもの、珍しいもの、かっこいいものをページに取り入れたくなります。

トップページに誘導のためのFLASHを使用したり、バナーをGIFアニメーションにするといった試みです。

動的なコンテンツは人間の目を引くにはもってこいのコンテンツです。

しかし、これらは使い方を間違えると、訪問者にとっては「意味がない、イライラする、目が疲れる」といった不快な要素に成りかねないので注意が必要です。

ほどほどに…

ネットサーフォンをしていると、いきなり重たいFLASHを見せられる、ページ自体がFLASHなのはかっこいいけど、操作が面倒といった問題のあるサイトや、GIFアニメーションだらけで目が休まない。といった不快を与えるサイトも見かけます。

このような自分勝手なサイトにならないように、これらの動的コンテンツの使用は以下のようにすると良いでしょう。

  1. 1ページあたり1コンテンツ程度にする
  2. ページ本文に近いところには載せない
  3. 静的コンテンツだけのページも作り、訪問者に選ばせる
  4. 動画やFLASHを見せる場合は、注意書きを設ける
  5. FLASHはあくまでプラグイン(見られない環境の人もいる)であることを自覚する(※)

このような気配りや認識が必要です。

※FLASHはプラグインですから見られない環境の人もいます。

ですから、ページ全体をFLASHにしたり、メニューをFLASHにするという使い方は本来の使い方ではありません。

FLASHはあくまで作品としてのコンテンツという認識をすべきです。

静的コンテンツを甘く見ないこと

静的コンテンツは、検索エンジンにとっても有効なコンテンツです。

自動登録ロボット型の検索エンジン(GoogleやMSNなど)の登録用の巡回ロボットは静的コンテンツのページを重要視します。

というのも、現在の技術では動的なコンテンツの内容までを認識することは出来ないのです。(最近は内容を認識可能なFLASHが登場しましたが…)

このような理由から、ロボットは基本的にHTML内の文字を優先的に認識しますので、静的コンテンツの多いページ作りを心がけましょう。

画像にはかならずALT属性を

画像をページ内に使用する場合は、その画像の説明文のためのALT属性を必ず付けるようにしてください。

これはかなり重視されているもので、これを書かない場合は本来はHTML構文エラーです。

ALT属性を記すことで、検索ロボットに認識させることのほかに、目の不自由な方のための解説文にもなります。

静的ページと動的ページ

このページで述べた「静的」と「動的」という表現は必ずしもこの限りではありません。

たとえば、業界用語で「動的ページ」といえば、ユーザがフォームなどに入力した後に表示されるページ(検索結果など)といったサーバー側やクライアント側で何らかの処理がなされた後に表示されるページのことを指し、特にSEOなどの観点で比較される言葉です。

たとえば、「このページはSEOを重視したいから静的ページで制作する」とか、「このページは動的に出力されるページだから、簡単にはいじれない」といったケースで使用します。

このような抽象的な修飾語は、形容詞の後に来る名詞によってその意味が異なることは、WEBに限ったことではありませんね。

コンテンツには、静的なものと動的なものがあることを理解しましょう。

ページを作成する上では、動的コンテンツの使用に注意しながら、静的コンテンツを多く含むページ作りを目指しましょう。

画像を挿入する方法を教えて

画像の挿入

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

CSSを駆使したモダンなWebデザインを学ぶなら

SEOについて学ぶなら

最新情報をチェックしよう!

デザインを見直す(1)の最新記事4件