HiGash.Net ホームページへ戻る

Home [Blog] » Webディレクター視点で考えるマークアップのチェックポイント

Webディレクター視点で考えるマークアップのチェックポイント

Webディレクター視点で考えるマークアップのチェックポイント

「Webディレクターが納品されたWebページをチェックするとき、マークアップが良いか悪いかって具体的にどうやってチェックすればよいの?」
今回のエントリーは、職場で一緒に働くWeb制作チームのディレクターさんからのそんな疑問に応えて—。

Webディレクターは上がってきたページのデザインチェック、文言チェック、リンクチェック、そして主要ブラウザでの表示チェックは基本絶対行うはず。あと、ページタイトル、descriptionやkeywordといった <title> タグ・<meta> タグなんかもきちんと考えて設定してやる必要がありますね。
でも、マークアップの良し悪しまできちんとチェックしてる人は少ないのかも。

特にマークアップが苦手だったり、自分ではあまり手を動かさないディレクターからすれば、「マークアップのクオリティをチェックしたくても、具体的にどこをどうチェックすればよいのかわからない」ってのも頷けます。

あんまり細かなとこまでチェックして文句付けると、デザイナーやマークアップエンジニアにいい顔されないのでアレですけど、ディレクターでもこれぐらいは押さえておこうと僕が思うチェックポイントを考えてみますね。

そもそもよいマークアップは何のため?

まずはよいマークアップって何のためにするのさ、っていう基本的なお話から。

HTMLを論理的に正しくマークアップして装飾要素はCSSに記述してやるという、いわゆる「Web標準準拠」のメリットは何なのかというと、

  • 見た目はともかく、構造上は 特定のブラウザに依存しないページになる
  • 文章が構造化されているので、 検索エンジンに拾われやすいページになる
  • 音声ブラウザやテキストブラウザに優しいページになる。つまり、 アクセシビリティに配慮したページになる
  • HTMLのファイルサイズが小さくなり、 ページのレンダリングに要する時間が短くなる
  • 更新作業やデザイン変更などの メンテナンスがしやすいページになる

ざっとあげればこんなとこですかね。
制作サイドからするとメンテナンスのしやすさがもっともメリットと言えますが、クライアントにアピールできるメリットはSEO効果やアクセシビリティ強化、ページ最適化(レンダリング速度向上)といった効果でしょう。

逆にデメリットは、HTMLとCSSに関するより深い理解が必要なので、制作の難易度が高くなるということでしょうか。
「難易度が高い」と言っても、今や「Web標準準拠」なんてWeb屋にとっては何の自慢にもならないので、あくまでも昔に比べればということですが。

Firefoxアドオン「Web Developer」で行うマークアップチェック

さて。ここからマークアップチェックの実践編。

ここでは、Firefoxのアドオン Web Developer を使うことにします。もしも、FirefoxにWeb Developerをインストールしていない場合は、便利なアドオンなのでぜひインストールしておきましょう。

まずはCSSを無効化してみる

ページがきちんとCSSでレイアウトされているかどうかをざっくり確認するために、まずCSSを無効化してみましょう。

CSSを無効化

「CSS」→「CSSを無効にする」→「すべてのCSS」でCSSを無効化できる

CSSでレイアウトされているページであれば、当然CSSを無効にすればレイアウトの情報はなくなります。
ただし、Firefoxがデフォルトで備えているCSSによるページの装飾は施されます。たとえばリストでマークアップされた箇所はビュレット付きで表示されます。

一方、テーブルレイアウトのページはCSSを無効化してもページのレイアウトは崩れません。
ページのデザイン(レイアウト)を決めるはずのCSSを無効化したのに、レイアウトが崩れないのはHTMLでレイアウトを決めているからです。これはあまり感心できません。
いわゆるテーブルレイアウトをしてしまっているってことですからね。

Yahoo!NHN Japan CorporationNHN Japan Corporation

Yahoo!NHN Japan Corporation のWebサイトをWeb Developerを使ってCSS無効化してみた例(画像をクリックして拡大)。この数年でテーブルレイアウトは圧倒的少数になった感がある

制作時間やコストの問題でテーブルレイアウトをやらざるをえない状況ってのもあるのかもしれないけれど、これだけCSSレイアウトが当たり前になった今となっては、テーブルレイアウトは最終手段と考えるべきでしょう。

もうひとつ、CSSを無効化してチェックしておきたいのがコンテンツの記述順。
理想的なマークアップは、重要な要素ほど上に(先に)書くこととされています。検索エンジンはソースの上部に書かれた文言ほど重要視する傾向があるからです。
普通は、 サイトロゴ → グローバルナビ → 本文 → サイドナビゲーション → フッター の順に記述していきます。

しかし、たまにサイドナビゲーションを本文よりも上に記述してしまっているサイトを見かけます。
特に左ナビゲーションの場合は、自然にソースを書こうとすれば本文よりも左ナビゲーションを先に記述しようとする気持ちは理解できます。

でも、CSSでレイアウトをするなら左右に並ぶ要素はどちらを先に書くかは選択できます。左ナビゲーションをfloat:left; にして、float:right; の本文よりも後に記述すればよいのだから。

これだけは押さえておきたいチェックポイント

そのほかにWeb Developerを使ってチェックしておきたい主要ポイントをまとめてみます。

文章構造をチェックする

見出しの <h1> 〜 <h6> タグはきちんと階層構造をとる必要があります。
<h1> がないのに <h2> があってはいけないし、 <h3> の直下の見出しが <h5> だったりするのはマークアップ的にはNGとされています。

Web Developerで、見出しが <h1> → <h2> → … → <h6> の順にきちんと並んでいるかチェックしましょう。

「情報」→「見出し(h要素)を表示する」で文章構造をチェックできる。
このキャプチャは アップル – Mac のページ。文章構造上、重要な <h1> が記述されていないことがわかる

背景画像を非表示にしてみる

重要な要素が背景画像によって画像置換で作られていないかどうかをチェックしてみましょう。

グローバルナビゲーションを画像置換で作るかどうかについては意見が分かれるところですが、少なくとも <h1> 〜 <h3> ぐらいまでの見出しとか、ページのメインイメージとなる画像は画像置換では作らないほうがいいでしょう。
背景画像を消したうえでパッと見て、大事な情報が隠されてしまわないかどうかチェックしてみるとよいと思います。
あと、背景画像が表示されない場合に背景色が適切に設定されているかどうかも同時にチェックしましょう。

アップル背景画像を無効化Yahoo!

アップル のトップページは実は画像置換を多用している(画像をクリックして拡大)

最近は 画像置換はやり過ぎないようにしようね、というのが多くのマークアップエンジニアたちの共通理解になっている ように思います。

たしかに画像置換はHTMLソースをきれいにします。CSSスプライトを使うことによってページを軽量化(最適化)することもできます。
一方で背景画像はブラウザのデフォルト設定では印刷されなかったり、OSのハイコントラストモード閲覧時におけるアクセシビリティ上の問題など、画像置換を使うことによるデメリットも多く取り沙汰されています。なので、画像置換のご利用は計画的に。

画像のalt属性をチェック

基本ですね。画像のaltが適切に設定されているかどうかチェックしましょう。

「適切なalt」とは何かについてはここでは触れません(HiGash.Netでのaltに関する考察は 「IMGのalt属性・title属性について考える」 をご覧ください)。

空のaltも含めてサイトのポリシーに則ってaltが正しく設定されているかどうかを確認しましょう。

「画像」→「alt属性値を表示する」を選んで、alt属性をチェックしよう

最後はValidatorで文法をチェック

一応、最後はWeb Developerに組み込まれているW3CのValidatorへのリンクをクリックして、HTMLの文法をチェックしましょう。

細かなエラーは出ても仕方ないけど、タグの閉じ忘れとか、必須属性の書き忘れとか、タグや属性のスペルミスとか、致命的なミスがないかどうかは軽くチェックしておくとよいでしょう。

「ツール」→「ローカルのHTMLファイルを検証」をクリックすれば、インターネット上に公開していないページでもW3CのValidatorでチェックできる

以上、Webディレクター視点で考えるマークアップのチェックポイントでした。
制作者視点でのチェックポイントではないので、細かいところについては触れずに「これぐらいはチェックしておきましょう」という基本的なところだけをピックアップしてみました。

実際には、作る前にこのルールは守って作ろうね、っていうガイドラインが存在すべきです。画像置換などに関しては、作る前にきちんとポリシーを決めておくべきです。
「作り終わった後にそんなこと言われても・・・」ってことにならないよう、デザイナーやマークアップエンジニアにあらかじめ伝えておくべきことは伝えておくようにしましょう。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

3 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. malkoski より:

    はじめまして。いつも参考にさせていただいております。

    今回のエントリーの中で「文章構造をチェックする」の記事に関連して、ご意見を伺いたいと思いトラックバックいたしました。

    FirefoxのWeb Developerでは、h要素の中にリンクが設定されていると見出し要素として認識してないようです。よくサイトIDのロゴをh1ではさんでトップページに戻るような構造のサイトをよく見かけますが、そういったサイトの場合、YAHOO!やGoogleのクローラーは、Web Developerと同様にh1としてみなしていないのでしょうか?
    SEOの観点から見ると、結構重要なことだと思うのですが、どう思われますか?
    W3Cの勧告では、
    「h要素にリンクを設定してはいけない」
    とされているのでしょうか?(←すみません、自分では確認できませんでした。)
    当のW3Cのサイト(http://www.w3.org/)も、サイトIDのロゴをh1でくくり、トップページに戻るようにしてあるのですが、ソースを見ると、ロゴの画像とテキストをわざわざspanタグで分けているようです。今回、サイトIDを例にとりましたが、基本的にh要素にはリンクを張らないようにしたほうが良いのでしょうか?
    ご意見伺えると幸いです。
    ご多忙の折、長文失礼致しました。

  2. HiGash.Net より:

    > malkoskiさん
    コメントありがとうございます。
    確かにWeb Developerで見出し情報を確認すると、h要素のなかにaタグがあるものは [見出し(h要素)ではありません] と言われてしまうようですね。おそらく、これはWeb Developerの「見出し(h要素)を表示する」という機能がh要素の直下の要素を参照しているために、そのような結果が表示されてしまうのだと思います。
    h要素にリンクを設定してはいけないというルールはないですし、検索エンジンがリンクを含むh要素の文字列を無視することもないでしょう。アンカーテキストのほうが通常のテキストよりも検索エンジンに重要視される傾向を考えれば、むしろh要素でかつリンクをもつ文字列(またはaltのついた画像)はより重要視されるのではないかと考えられます。
    W3Cのサイトロゴは確かに少し変わったマークアップがなされていますが、これはSEO対策ではなく、印刷用にスタイルを切り替えてページを表示させる都合でそうしたマークアップをしているのではないかと思います。印刷用表示のときはサイトロゴのimgタグをdisplay:none; で消して、タグ内の文字列を印刷させようとしているようですから。

  3. malkoski より:

    ご返信ありがとうございました。
    以前から気になっていたのでスッキリしました。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20090322/markup_checkup.html/trackback/

Preview

トラックバック
http://higash.net/20090322/markup_checkup.html/trackback/

Page Top