MENU タップでメニューを表示

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

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

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

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

右メニューのレイアウト

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

左メニューのレイアウト

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

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

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

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

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

このページのトップへ

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

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

2015年11月11日
JimdoやWixについて検索してくる人が多いので

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

続きを読む

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

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

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

続きを読む

2015年3月27日
FacebookのLike Boxが廃止になりPage Pluginというのになるのだそうだ

Facebookの顔写真がずらっと並んだやつをウェブサイトに貼っている方、2015年6月23日には廃止になるようですよ。

続きを読む

2015年3月16日
モバイルフレンドリーじゃなくて困っている人が多いようです

モバイルフレンドリーじゃないからと慌てても仕方がない。これを機会にスマホ対応にじっくり取り組むのが賢明です。

続きを読む

2015年3月12日
スマートフォンからのアクセスがどの程度の割合かを把握

スマホからのアクセスがますます増える傾向にあります。業種によってはモバイル対応サイトが無いとやっていけない時期に。

続きを読む

DownThemAll!

2015年3月6日
無料ブログからWordPressへ移行させる時に…

地域ポータルサイトのブログをWordpressに完全移行!!

続きを読む

インストールをタップする

2015年3月4日
WordPressへの投稿をAndroidのアプリからやってみる

AndroidのアプリからWordpressへの投稿も試してみます。僕の持っている端末がかなり古く、しかも画面のキャプチャが出来ないので写真撮影です(汗)。

続きを読む