ホーム > ホームページの作り方 > 下層ページをデザインする!統一フォーマットで!

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

これからコンテンツ部分を抜き取ったデータをコピーして、他のページもデザインします。


因みにトップページ以外のページを「下層ページ」と呼びます。


下層ページを全部違うデザインにするサイトもありますが、これはNGです。


元のページに戻れなくなるどころか、ユーザーが迷子になって離脱します。


せめてトップページだけにとかにしておきましょう。


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




161209_img_01 ・ヘッダー

・フッター

・パンくずリスト

・サイドナビ(必要に応じて)

・ページ大見出し(h2)

・ページ小見出し(h3)


下層ページのWebデザイン


「パンくずリスト」は、ユーザーが迷子にならないための対策です。


おそらくヘンゼルとグレーテルの話から来ているのでしょう。


ホームページの閲覧者は、トップページから来るとは限りません。


リピーターでない限り、閲覧者はGoogleなどの検索エンジンをつかってホームページをみにきます。


特定の単語によっては、トップページ以外のページが上位にひっかかり直接下層ページにくる場合もあります。


その時にパンくずリストがあると、ユーザーは「このページがトップページでないこと」が判断でき、もしページに興味を持ってもらえれば、他のページにも移動する導線もつくれる、割と重要なものなのです。


パンくずリストの重要性


ページ大見出しとは「イラスト」だったり、ページのタイトル部分だったりします。


ページ小見出しはそのページ内のコンテンツをあらわします。


コーディングの時におはなししますが、大見出しを「h2」、小見出しを「h3」と呼びます。


ちなみに「h1」はホームページのタイトルです。


これが実は検索エンジン対策(SEO)にものすごく重要になってきますが、それはまた後ほど。


サイドバーは必要に応じて。


今回は複数でのサークルを想定にて、作者紹介でのみ表示させます。


これを元に、他のページもつくりこみます。


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


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


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


これで全部のデザインの雛形がそろいました。


いよいよ次回は、コーディング(プログラム化)にはいります。


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.