正しいコーディングとホームページの表示速度の高速化^※は、検索エンジンの高評価とユーザーのストレス軽減につながります。
※検索エンジンGoogleは、検索結果ランキングの決定要素としてホームページ表示速度を追加したことを2010年４月９日の公式ブログ（「Using site speed in web search ranking」英文）で発表しています。

お客様からの特別な指定がない限り、デザインクロスのホームページ制作は、検索エンジンも推奨するウェブ標準（W3C準拠）と呼ばれる【XHTML＋CSS】^※で行います。

※W3C（ダブリュー・スリー・シー）とは、World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）の略で、World Wide Web（＝ウェブ）で使用される各種技術（ホームページの制作も含む）の標準化を推進するために設立された標準化団体。

※XHTML（Extensible HyperText Markup Language）とは、 拡張可能なHTMLのこと。インターネット上でのXML文書（Extensible Markup Language。XMLでは統一的な記述方法を用いながら独自の意味や構造を持ったマークアップ言語＝タグを作成することができる）のデータ送受信を想定しながら、従来のHTMLに対応した言語。XHTMLは、装飾のための記述を含むHTMLと異なり、現在は装飾を省いた文書構造の記述に特化した言語となっている。
（拡張子はHTMLファイルと同じ .html です。）

※CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略（単にスタイルシートとも呼ばれる）で、ホームページのレイアウトや装飾を定義する規格。CSSファイルによって、装飾を省いて文書構造の記述に特化したXHTMLファイルのホームページ上での見栄え、すなわちレイアウトや装飾が可能となっている。
CSSで装飾されていないXHTMLファイルの例として、このページ（一部）を例にとると、次のような感じになります。
CSSで装飾されていないXHTMLファイルの例｜このページ（一部）> > >
（「ひとつ前のページにもどる」で現在のページにお戻りください。）

ウェブ標準のホームページ制作は、検索エンジンが推奨する作成方法でもあり、検索エンジン対策的にも一定の効果が望めます。

なお、ウェブ標準には従来の【HTML】でのホームページ制作も含まれます。

間違いだらけのウェブ標準【XHTML＋CSS】

一部のホームページ制作会社（一部と言っても、実際には相当な数のホームページ制作会社）が【XHTML＋CSS】で作らないと検索エンジン対策的に不利になる（極端な場合、検索されなくなる）とユーザーやお客様をあおっているのはとんでもない間違い。ただの無責任な営利目的か無知の極みと言っても過言ではありません。

むしろ事実はその逆で、不適切なHTMLファイルでできたホームページであっても、検索エンジンの高性能化によって、以前よりきちんと検索されるようになってきていると言ってもいいくらいです。
（Google検索では、以前は検索に弱かった動的URLでも、現在ではちゃんと評価できるように進歩しています。動的URLにしろPDFファイルにしろどんどん検索対象とするファイルの種類を増やしていると言ったほうが良いでしょう。）

XHTML が HTMLファイルより少しでも優れている点があるとしたら〔１〕

XHTMLファイルにあっては、装飾系の記述を含まないため、装飾系の記述を多く含むHTMLファイルより軽量となるため、検索エンジン側にとっても多少本文中のテキストが判読しやすく、その分ほんの少し検索エンジン的に有利と言えなくもありませんが、営利目的の無知なホームページ制作会社が大袈裟に流布するほど大きな差が検索エンジンの結果順位として現れることは決してありません。（そのことは検索エンジン側に立ってホームページというものを考えればすぐに分かるはずです。）

むしろ、装飾系の記述（=CSS）と分離することにより、検索エンジン最適化へのこだわり〔４〕の「検索エンジンの高評価につながる的確なリンク設定とは？」で示しているような、検索エンジン対策的に有利なカタチに持っていくことが可能であることによるメリットのほうが大きいと言えます。

つまり、単に形式をHTMLからXHMLに変えることに優位性があるのではなく、XHTML＋CSSのほうが検索エンジン最適化を施しやすいということに優位性があるのであって、そもそも検索エンジン最適化の知識やノウハウがないホームページ制作者にとってはただの宝の持ち腐れとも言えます。（あくまで検索エンジン最適化におけるXHTMLファイルという観点においての話です。）

この点を履き違えているホームページ制作会社があまりに多すぎる点は危惧に値します。

XHTML が HTMLファイルより少しでも優れている点があるとしたら〔２〕

XHTMLファイルがHTMLファイルより検索エンジン対策的に優れていると一般に誤解を与えることになったもう一つに原因について取り上げておきたいと思います。

今ではHTML＋CSSというホームページ制作は珍しくありませんが、かつて（2000年代前半から中頃）は、ブラウザー側のCSSへの対応の悪さもあり、HTML＋CSSではなく、HTMLオンリーでのホームページ制作が主流でした。

ところが、HTMLオンリーでホームページを制作しようとした場合、ホームページ本文中の見出しを作成す時に大きな問題がありました。見出しを指定するタグの初期設定が使い物になるレベルになかったのです！　

【ウェブページの見出しサイズと文字サイズ見本】
（画像は85％に縮小、 Firefox 3.6の初期設定。実際の見出しサイズ見本ページ > > > ）

サイズ見本の画像では85％に縮小されていますから、実際の大きさはこれより約118％大きなものとなります。（厳密には表示するブラウザーの初期設定により異なります。）

文法上、１ページのウェブページ内では〈見出し１〉を１回使うことになります。ところが〈見出し１〉の表示サイズが大きすぎて使い物にならなかったのです。

そこでHTMLオンリーのホームページ制作では、〈見出し１〉を使わず、〈文字サイズ４〉や〈見出し４〉のタグで代用していたものです。

これは、今で言えば、明かな文法上の誤りに該当します。
検索エンジン側が〈見出しタグ〉を検索順位の評価の対象にした時点で、〈見出し１〉を使わないホームページは、検索エンジン対策的にマイナスとなってしまったわけです。

つまり問題はXHTMLファイルとHTMLファイルの優劣ではなく、〈見出しタグ〉の使用法が正しくおこなわれているかどうかだったんですね。

今では普通にHTML＋CSSでホームページを作成しますから、HTMLファイルでも、CSSファイルを使って自由自在に〈見出し〉の大きさを変えることができ、正しい文法でのコーディングが実現できるようになっています。その意味で、検索エンジン対策的に、XHTML＋CSSによるホームページ制作に対して劣るというようなことはなくなっていると言えます。

デザインクロスではウェブ標準（W3C準拠）の【XHTML＋CSS】をベースに、表示速度高速化コーディングとセマンティック・ウェブに基づくサイト制作の手法を適宜取り入れたホームページ制作を行っています。

ここで「適宜」とお断りしているのは、完全に取り入れると、逆にホームページの表示速度が遅くなったり、ホームページに動作について不適切な挙動になることがあるためです。

矛盾しているように思われるかもしれませんが、ホームページ制作においては、トレードオフ（＝二律背反）の状況が非常に多いも事実です。ホームページ制作の際、沢山ある選択肢にはそれぞれ長所と短所があり、両者のバランスを考えて可能な限り最善のホームページ制作になるようデザインクロスは心がけています。

下の【図１】と【図２】は、機能的には全く同じJavaScriptファイルです。JavaScriptファイルとしては記述の少ないほうと言えます。

【図１】は、プログラマーが好む通常のJavaScript記述形式で、設定を変えたり、エラーを見付けやすい記述形式ですが、その分、データサイズは5,943バイトと重くなります。

【図２】は、同じJavaScriptデータを圧縮したもの。単にスペースやタブ・改行を省くだけでなく、記述自体もコンピュータ用に変更されています。その結果、データサイズは3,215バイトと軽くなっています。そのかわり再編集や変更がとても面倒です。

例に挙げた下のJavaScriptデータは、もともとデータ量の多いほうではないので、さほど読み込み時間に差はでませんが、もっとデータ量の多いものになるとホームページの表示速度に差が現れます。デザインクロスでは、再編集の有無などの状況に合わせて、できるだけ軽いデータのを使用するよう心がけています。

【図１】通常の記述方法のJavaScriptファイル（5,943バイト、クリックで拡大画像）

【図２】同じものを圧縮したJavaScriptファイル（3,215バイト、クリックで拡大画像）

加えてデザインクロスでは、トレードオフ（＝二律背反）の状況下で、最善･最良のホームページ制作ができるよう日々、鋭意知識の吸収と検証を行っています。
（実際その成果の一部は、デザインクロス-ブログなどで公開しています。）

ホームページ表示速度高速化コーディング

一般にはあまり知られていないCSSコーディングの特性（後述）やPCブラウザーによるファイル（HTML、イメージ、CSS、JavaScriptファイルなど）の読み込み特性、とりわけ厄介なJavaScriptファイルの読み込み順序（JavaScriptファイルを読み込ませる位置＝タイミングが最もホームページの表示速度に影響する可能性がある）にまでこだわったコーディングをデザインクロスでは行っています。

１．CSSコーディングの軽量化・最適化によるホームページの表示速度高速化

【CSSの記述例】

内容が少し専門的にりますが、上述２の「セレクタの最下層（記述で言えばセレクタ内の一番右）の重複を最小限に抑える」に関連した例をひとつ挙げましょう。
下に挙げる【例１】・【例２】・【例３】は、PCブラウザー上ではすべて同じホームページとして表示されます。

例えばリストタグにおいて、CSSによるリストの定義付けは、一般には【例１】より【例２】の方が洗練されていると言えます。

【例１】
#nav ul li.items { font-size: 100%; ... }
:
<div id=”nav”>
<ul>
<li class=”items”>項目１</li>
<li class=”items”>項目２</li>
<li class=”items”>項目３</li>
</ul>
</div>

【例２】
#nav ul li { font-size: 100%; ... }
:
<div id=”nav”>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
</div>

ところが真の高速化の手法として、米Yahoo!のパフォーマンス担当責任者 Steve Souders氏は【例３】の記述方法を挙げています。

【例３】
.list-items { font-size: 100%; ... }
:
<div id=”nav”>
<ul>
<div class=”list-items”>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</div>
</ul>
</div>
（この場合、リスト行頭に表示されるマーク画像は背景画像としてではなく、リスト画像を使用する必要がある。）

確かに理論的には【例３】が最速だと言えます。
とは言え【例３】のようなリストタグの場合、CSSの文法からすると必ずしも正しいマークアップとは言えなくなる可能性があります。（ここにもホームページ制作におけるトレードオフという難しい問題が現れます。）

そのため、デザインクロスでは、「CSSにおけるセレクタ部分の階層化をできるだけ避け、セレクタの最下層の重複を最小限に抑える」ことを念頭に置き、最適なホームページ制作を行うようにしています。

２．CSSファイルやJavaScriptファイルの外部ファイル化と最善の位置への配置によるホームページ表示速度高速化

XHTMLファイル内の最善な位置に配置するという点では、グーグルの公式サイト（英文、Google code｜Page Speed の本文中にあるコーナー「Optimize the order of styles and scripts」）で取り上げている配置最適化の内容では必ずしも充分ではなく、とりわけJavaScriptファイルは、実際のスクリプトの内容から判断して、場合によってはメタ・ヘッダー内に、また他の場合には、本文中（body）最下層に配置したほうが高速に読み込まれるので、デザインクロスでは細心の注意を払ってJavaScriptファイルの配置を行います。
（外部ファイル化したCSSファイルやJavaScriptファイルの読み込み速度は、FirefoxのアドオンFirebugやSafariのWebインスペクタなどを使って検証します。）

セマンティック・ウェブに基づくサイト制作

ここで使っているセマンティック・ウェブ（Semantic Web）とは、W3Cのティム・バーナーズ＝リーによって提唱されたセマンティック・ウェブとは厳密言えば、少し異なります。セマンティック・ウェブという最先端のウェブページ制作の理想形の考え方を取り入れたウェブ制作の手法と言ったほうが正しいかもしれません。

最初の章で、XHTMLファイルは、装飾を省いた文書構造の記述に特化したものだと説明しました。セマンティック・ウェブの考え方は、文書構造の記述に意味を加えようということになります。
（装飾を省くという点では、XHTMLファイル自体セマンティック・ウェブという考え方を内包していると考えられなくはありません。）

次の例をご覧ください。少し専門的な内容となります。
ホームページ上で果物の説明をした本文です。わかりやすくなるように本文に色をつけます。色を付けるためのCSSの記述例として、【例１】はセマンティック・ウェブに基づかない記述方法、【例２】はセマンティック・ウェブに基づく記述方法となっています。

結果的には、【例１】と【例２】は、どちらもホームページ上で同じに表示されます。

【例文はホームページ上で次のように表示されます（画像）】

【例１】
#main .red { font-color: red; ... }
#main .green { font-color: green; ... }
:
<div id=”main”>
<p class=”red”>このリンゴは赤く色づき美味しい。</p>
<p class=”red”>このイチゴも赤く色づき美味しい。</p>
<p class=”green”>このメロンは緑に色づき美味しい。</p>
</div>

【例２】
#main .apple{ font-color: red; ... }
#main .strawberry { font-color: red; ... }
#main .melon { font-color: green; ... }
:
<div id=”main”>
<p class=”apple”>このリンゴは赤く色づき美味しい。</p>
<p class=”strawberry”>このイチゴも赤く色づき美味しい。</p>
<p class=”melon”>このメロンは緑に色づき美味しい。</p>
</div>

【例１】と【例２】は、どちらも上画像のように、ホームページ上で同じに表示されます。ですがXHTMLファイル上のコーディングは異なります。その違いをみていきましょう。

【例１】では、XHTML上において、１行目と２行目の本文を「赤」と分類し、３行目を「緑」と分類しているにすぎません。

【例２】では、XHTML上において、１行目は「リンゴ」、２行目は「イチゴ」、３行目は「メロン」と、本文の意味に合わせて分類し、その分類に対してそれぞれの色付けしているとみなせます。
つまり【例２】では、「リンゴ」と「イチゴ」の色が同じ赤色であることにはなんら意味的なつながりはありません。

XHTML上のコーディングでは、【例２】のようになコーディングがが望ましいとされています。ただし完全に取り入れようとすると、上の例からも分かるように、CSSの記述が増大し、かえってホームページの表示を遅くするこにもつながりかねません。
CSSの記述が増え、さらに本文の意味を毎回考える分だけ、制作の時間がかかり、かえって非効率的なホームページ制作となることもあります。

そこでデザインクロスでは、セマンティック・ウェブという考えを100％取り入れるのではなく、適宜、このセマンティック・ウェブという考えを取り入れ、それに基づきバランスのいい効率的なホームページ制作を行っていきます。

☆ホームページの検索エンジン対策につていの

お電話でのお問い合わせ・ご相談・お見積依頼も承っております。
お電話の際は「ホームページをみて電話しました . . . 」とお伝えください。

▲このページの先頭へ

☆ホームページ制作はWeb制作会社デザインクロスへ
有限会社 デザインクロス〔通称 デザクロ 〕「デザクロ」で検索してください！