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

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

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

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

右メニューのレイアウト

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

左メニューのレイアウト

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

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

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

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

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

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

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

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

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

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

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

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

とにかく何でも「DIY」

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

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

レスポンシブウェブデザイン

レスポンシブウェブデザインってどんなの?

スマホ対応のホームページが必要であることが言われるようになって久しいですが、まだまだ未対応のホームページが多いことに気付かされますね。

これをするとホームページで失敗する

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

ホームページはきちんとやれば成果は上がります。しかし私の経験上、こんな人は成果を上げられないことが多いです。

検索でヒットしなきゃ問い合わせはない

JimdoやWixについて検索してくる人が多いので

「Jimdo」「Wix」関連のキーワードでのアクセスが相変わらず多いので。

Wordpressが動かないんですヽ(TдT)ノ

ホームページ制作を自分でやるのか業者に任せるのかどちらがいい?

検索サイトで見つけてもらえるようなホームページを自分で作成するのはそれなりの時間と努力が必要です。

ホームページ制作・運営パック
ホームページ制作おすすめパック
格安WordPressパック
WordPressエントリーパック
WordPressスタンダードパック
WordPressビジネスパック
ウェブデザインオフィスクロスロードお急ぎ電話番号は080-7023-9643お問い合わせ電話番号は0532-39-6413メール相談

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

ホームページ制作プラン

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

クロスロードについて

コラム

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