このページではWordpressで作られているホームページの事例を紹介します。

トップページの一般的な構造

事例を紹介する前に、トップページの構造について説明をしておきます。

トップページは、各コンテンツへの導線を訪問者に対してわかりやすく提示する

ことが求められます。

その結果、webサイト全体の情報を俯瞰して把握してもらうことができるようになるのです。

 

下図にトップページの一般的な構造を示し、続けて各項目の簡単な説明をします。

ここで「導線エリア」とありますが、

ヘッダー、サイドバー、フッターにも導線はもちろん確保できます。

 

ここでは、最も読んで欲しいコンテンツを目立たせるため場所という意味で

”導線エリア”と呼んでいると理解してください。

トップページの一般的な構造

トップページの一般的な構造(クリックで拡大表示)

 

ロゴ①

ヘッダー

ヘッダー画像やグローバルメニューを設置するところです。

トップページで一番目立つ箇所ですから、訪問者に提供できるコンテンツをうまく提示しておきたいところです。

ロゴ②

サイドバー

検索窓やコンテンツ一覧表、SNSボタンなどを掲示します。

広告を貼ることもあるでしょう。

 

ロゴ③

フッター

メニュー一覧やサブメニューなどを設置する場所です。サイト運営者情報が掲示されることも多いと思います。

フッターをうまく使うことで、コンテンツをさらに読んでもらう行動を訪問者に促すことができます。

ロゴ④

メインコンテンツへの導線

メインコンテンツへの導線は、トップページの上部に置くべきです。

なぜなら、そこがトップページを開いたとき最初に目が行くところだからです。

用意しているコンテンツの存在を訪問者に知ってもらうことが重要です。

ロゴ⑤

新着情報

新着情報は、企業サイトであればプレスリリースのことであり、ホームページに関する最新情報を伝えるものと、ここでは考えます。

当サイトのようなホームページであれば、コンテンツの修正や新しいコンテンツの追加など、絶対に知ってほしい情報をまとめて掲示するという使い方が考えられます。

ロゴ⑥

ブログ

ブログは、必ずしも必要ではありません。

ただ、最近はホームページにブログも併せ持つサイトが多くなっています。当サイトもそうしています。

ホームページの固定的な情報だけでなく、コラムや関連知識を発信することで注目してもらおうという狙いがあります。

この後紹介するWordpressを使って作られたホームページの事例は、

トップページの一般的な構造にある項目を組み替えたり、場所を変えたりして

見た目の美しさと機能性を兼ね備えたwebサイトに仕上がっています。

 

では、ホームページの事例を見てみましょう。

【広告】

手前味噌で恐縮ですが、

私が初めてWordpressで作成したホームページをご紹介させてください。

 

これを紹介するのは、

先に説明したトップページの一般構造

そのままのレイアウトになっているからです。

 

一般構造に忠実に作ったら、こんな風になるというのを

知っていただきたいと思います。

All Aboutコーポレートサイト

 

こちらはご存知、

All Aboutというサイトを運営している会社のコーポレートサイトです。

少しおもしろい動きをしていますね。

 

ヘッダーがバーンと大きくあって、

下にスクロールするとヘッダー画像が隠れていきます。

これは、コンテンツへの導線を最大限に表示したいという意図かなと思います。

尾道市立美術館

 

こちらのwebサイトは、上で説明した構造通りになっています。

ブログはありません。

 

メインコンテンツの導線として、展示会のお知らせだけが掲示されています。

これを絶対に見てほしい!という意図が見えてきます。

その他の参考サイト

探せばまだまだWordpressで作成されたwebサイトは、たくさんあります。

今回のサイト紹介では、こちらのサイトを参考にさせていただきました。

ありがとうございました。

 

いろんなホームページを見て、

どんなサイトを作ろうかなあ?って考えを巡らせてみてください。

こうやって考えることが、とても楽しいのです。

まとめ

ホームページを作ろうという時には、

実際に作られているサイトを見ながら完成形のイメージを作ることが大事です。

 

そして、参考にするサイトを見ながら

このコンテンツは固定ページで作れるなとか

あのコンテンツなら投稿だなと考えてイメージを膨らませてください。

 

イメージを膨らませると、

ホームページを作りたいという意欲がどんどん掻き立てられます。

早く作りたくてしかたがなくなります。

 

このウズウズした気持ちが、

ホームページ作成中でも高いモチベーションを維持したまま

完成まで導いてくれるのです。

 

では、次のページからは、

具体的にホームページの作り方について話を進めていきます。

 

<< 前のページへ

次のページへ >>

一覧に戻る