下層ページをデザインする!統一フォーマットで!

これからコンテンツ部分を抜き取ったデータをコピーして、他のページもデザインします。因みにトップページ以外のページを「下層ページ」と呼びます。

下層ページを全部違うデザインにするサイトもありますが、これはNGです。元のページに戻れなくなるどころか、ユーザーが迷子になって離脱します。せめてトップページだけにとかにしておきましょう。

下層ページは以下内容を必ずのせ、雛形化します。


下層ページのレイアウト

161209_img_01 ・ヘッダー
・フッター
・パンくずリスト
・サイドナビ(必要に応じて)
・ページ大見出し(h2)
・ページ小見出し(h3)


下層ページのWebデザイン

「パンくずリスト」は、ユーザーが迷子にならないための対策です。おそらくヘンゼルとグレーテルの話から来ているのでしょう。ホームページの閲覧者は、トップページから来るとは限りません。リピーターでない限り、閲覧者はGoogleなどの検索エンジンをつかってホームページをみにきます。

特定の単語によっては、トップページ以外のページが上位にひっかかり直接下層ページにくる場合もあります。その時にパンくずリストがあると、ユーザーは「このページがトップページでないこと」が判断でき、もしページに興味を持ってもらえれば、他のページにも移動する導線もつくれる、割と重要なものなのです。

今ではパンくずリストがあることが、Googlの評価基準にもなっています。

パンくずリストの重要性

ページ大見出しとは「イラスト」だったり、ページのタイトル部分だったりします。ページ小見出しはそのページ内のコンテンツをあらわします。

コーディングの時におはなししますが、大見出しを「h2」、小見出しを「h3」と呼びます。ちなみに「h1」はホームページのタイトルです。これが実は検索エンジン対策(SEO)にものすごく重要になってきますが、それはまた後ほど。

サイドバーは必要に応じて。今回は複数でのサークルを想定にて、作者紹介でのみ表示させます。これを元に、他のページもつくりこみます。

作者紹介のホームページレイアウト

イラストページのホームページレイアウト

お問い合わせページのホームページレイアウト

これで全部のデザインの雛形がそろいました。いよいよ次回は、コーディング(プログラム化)にはいります。

次のお話