SEO WEBデザインコラム　arcreations.com

皆さん、こんにちは。

第二回目となる今回のコラムのテーマは「ホームページの閲覧環境を考慮に入れたwebデザイン」についてです。

このテーマはWEBデザインをする上で注意するべき大きな点でもあります。

まず、webサイトを閲覧される環境はWindowsなのかMacなのか、それとも携帯なのかスマートフォンなのかといったことが１点。

次に使っているブラウザはInternet Explorerなのか、Firefox、Google Chromeか、safari、Opera、とブラウザだけでもこれだけの数があります。

そして、さらに厄介なことに、OSごとにブラウザのバージョンによってホームページの見え方が全て異なるということを覚えておかなければなりません。

何故、こういうことが起きるのでしょうか？

各ブラウザのスタイルシートの解釈が微妙に異なるからです。また、何故、解釈が異なるのかというと、W3Cにおいてwebの標準規格を策定しているのですが、ブラウザの開発時期が、標準規格の策定が固まっていないタイミングに重なってしまうとその時点での仕様をブラウザが搭載してしまうことにあります。

WEBデザインの初心者がつまづくポイントの一つはここにあります。

初心者は自分の環境（OS、使用ブラウザ）のみでしか表示チェックをしないため、世の中には異なる環境で見ている人が沢山いて、なおかつ別のブラウザではデザインが崩れている可能性があるということをすっかり忘れていることが多くあります。

プロのWEBデザイナーはどのような環境でも見え方が同じになるようにきちんとサイトを作り込んできます。

具体的にはどうするのかというと、各OS、各ブラウザ、そしてバージョンごとに最適化したスタイルシートを用意し、その都度最適なスタイルシートを読み込ませるようにしているのです。

これらは、ブラウザーハックと呼ぶテクニックで、webデザイナーには必須のスキルとなっています。

しかし、近い将来、各ブラウザーがweb標準の規格に完全に準拠し、一つのスタイルシートを用意するだけでレイアウトが崩れることなく正しく表示されるようになるでしょう。

早くそのような時代が来て欲しいと願っています。

ウェブページはHTMLというマークアップ言語によって記述されており、インターネットエクスプローラや、グーグルクローム、Firefox、safari、operaなどをはじめとするブラウザが、そのHTMLタグを解釈してビジュアルとして表示します。

現在、ウェブサイトは、HTMLからデザインや装飾に関するタグを排除し、より文書としての構造を明確化したXHTMLと、文字の大きさ、装飾や色の指定など、WEBデザインの要素を記述するカスケーディング・スタイルシート（CSS）で構成されています。

他にも、ブラウザ上で動作するスクリプトとして、javascriptというものがあり、メニューのボタンのロールオーバー等で使用されることが多く見られ、古くから使われているポピュラーな技術です。

最近では、javascriptをベースとして、ドラッグアンドドロップや、画像のスライドショーのような動的なコンテンツを表現できるAjaxというという技術がよく使用されるようになってきており、google社がgoogleマップにその技術を使用したことで脚光を浴び、その後、急速に世の中に普及していっています。

あと、Adobe社が提供しているFlashという技術があります。Flashを使用するとムービーやアニメーションを使った表現力の高いリッチコンテンツをwebブラウザで表示できます。

しかしながら、Flashコンテンツはデータ容量が大きいことと、検索エンジンがFlashコンテンツと相性が悪いことなど、SEO対策に難があることから、一般のサイトでは敬遠されがちな傾向にあります。Flashコンテンツを使う際は、バナーなどスポット的に使用することでSEOに影響させずに運用することも可能です。

さらには、Apple社がリリースし急速に普及していっているiphoneやipadなどのデバイスがFlashのサポートをしていないという大きなデメリットもあり、今後の動向が気になります。また、このことからFlashの代替技術としてのHTML５に注目が集まっています。

webサイトには以上のような言語や技術が使用されています。