ホームページのレイアウトとHTMLの順序

【投稿日】 【最終更新日】2014年10月1日

ホームページのレイアウトとHTMLの文書の流れを考えて見ましょう。SEOにとってはもちろん、アクセシビリティの観点からも大変重要なポイントです。
ホームページのレイアウトの多くは一番上に「タイトル」「ロゴ」があり、ちょっとした「ナビゲーション(メニュー)」があります(ヘッダー)。そしてその下が左右に分かれていて、いずれかに「本文」があり、もう一方に「メニュー」があります。そして一番下にもちょっとした「ナビゲーション(メニュー)」があります(フッター)。大体のサイトがこんな感じではないでしょうか。

そこで、問題なのがHTMLでは文書がどのような順序で書かれているかと言う事です。パソコンにおいては基本的に横書きですので、左上から右下に向かって文書は書かれ、読まれていきます。

右メニューのレイアウト

右メニューのレイアウトホームページのレイアウトで右側にメニューがあった場合、HTMLは「ヘッダー」→「本文」→「メニュー」→「フッター」と言う流れで記述されます。

左メニューのレイアウト

左メニューのレイアウト続いて、ホームページのレイアウトで左側にメニューがあった場合、通常であればHTMLは「ヘッダー」→「メニュー」→「本文」→「フッター」と言う流れで記述されます。この流れは良くありません。何故だかわかりますか?

検索エンジンのロボットも同様にページを読んでいきますが、ロボットは最初のほうに書かれていることを重要と判断すると言われています。ページの最初の方はいつも「ヘッダー」→「メニュー」で肝心の本文が読まれるまでに時間がかかってしまいます。視覚障がい者の利用する音声ブラウザでも同様にいつも「ヘッダー」→「メニュー」がまず読まれます。実際に試してみるとわかりますが、どのページを見ても(聴いても)…

「全部同じじゃねぇか!!」

と思ってしまいます。だからと言って左にメニューがあるのがダメというわけではありません。きちんとCSSでレイアウトしてやれば問題ないのですが、時々それをやっていない制作業者を見かけます。基本中の基本です。

さらにアクセシビリティに配慮し、視覚障がい者の方に「ヘッダー」を毎回読ませないためには、「ブロックスキップ」という「このページの本文へ」みたいなリンクを作成したりします。

ホームページ制作のヒントカテゴリの最新記事

ヤプログ! サービス終了

先日の「Yahoo!ブログのサービス終了」に引き続き先月ヤプログ!もサービスを終了するという発表がありました。ここ数年次々と無料のブログサービスがサービスの提供を終了しています。私、個人的には現在まだサービスを続けている […]

Yahoo!ブログのサービス終了に思う

今年春に発表された「Yahoo!ブログサービス終了」のお知らせ。以前から当オフィスでは無料ブログを活用することについてのリスクについての記事を投稿してきましたが、今回は影響大きそうですね。 移行ツールの公開が先日されたよ […]

無料で企業やお店のホームページを運営するリスク

無料で企業やお店のホームページを運営するリスク

断言します。「無料で簡単に集客できるホームページができる方法」はありません!!

Adobe Flash Player

Flashコンテンツのあるウェブサイトは早めに対応しよう

以前はこぞってフルFlashのクールなウェブサイトを制作していましたが、今はどのブラウザでも残念な表示になってます。

BURTONのホームページの404エラーページ

オリジナルの404エラーページをいくつかまとめてみた

見る側を楽しませてくれる404エラーページ作成しているサイトをいくつかピックアップしてみました。

バラク・オバマ氏のサイトの404エラーページ

404エラーページ(Not Found)はオリジナルにしよう

ページが見つからないときの「404エラーページ」。オリジナルにしておけばサイトからの離脱の心配も減ります。

とにかく何でも「DIY」

これをするとたぶんホームページで失敗する(2)

ホームページは素人でも簡単に作ることが出来ます。インターネットでちょっと検索すればいくらでもそのようなサービスがあります。

ホームページ制作・運営パック
ホームページ制作おすすめパック
WordPress格安パック
WordPressエントリーパック
WordPressスタンダードパック
WordPressビジネスパック
愛知県豊橋市のホームページ制作 | クロスロードお急ぎ電話番号は080-7023-9643お問い合わせ電話番号は0532-74-5099メール相談

ホームページ制作&運営パック

ホームページ制作プラン

クロスロードのホームページ制作

クロスロードについて

コラム

ウェブデザインオフィスクロスロード