WordPressを利用したWEBサイトの構成を考える【WP第3回】

前回の講義でテーマを利用したカスタマイズとウィジェット解説を行いました。
慣れている方であれば、これでサイトの構築ができるわけですが、初めての方はここから先を進めたいときに手が止まりがちになるでしょう。
そこで、本講義ではWEBサイト(HP)の構成を一緒に考えていきます。

構成例

HPサンプル

サンプルHPを例に構成を解説してみます。
まずは上のサンプルページを開いてください。

デモテーマから採用したブロック

サンプルページは、元となるデモテーマで使えそうなものだけ採用して構成しています。
デモページを見る

採用したのは以下のブロックです。

  • ヘッダーバー
  • メインナビ
  • 切り替えメインビジュアル
  • 当サイトについて
  • サービス
  • アクセス
  • メニュー
  • 投稿記事(ニュース)
  • ギャラリー
  • フッター

デモページと比べると随分、ブロックが減ったことがわかると思います。
次の項では残したブロックの目的と理由を解説します。

解説

ヘッダーバー

最低限必要な情報として電話番号と住所を残しました。
飲食店ですからメールで予約されても対応できないので、この二つだけにしてあります。
同じ理由でお問い合わせブロックも削除しました。

SNSは使っているものだけ表示してあります。

メインナビ

ページ遷移ではなく、ページ内リンクにしてあります。
理由は、スマホで見た時にページをポンポン飛ぶのは煩わしいと考えたからです。
飲食店であれば、1ページでほとんどの情報が載せられるというのもあります。

切り替えメインビジュアル

HPを開いてまず目に入るファーストビューと呼ばれる位置には、お店の雰囲気がわかる写真を載せました。
ここで客の目を引き付けられないと、すぐ離脱されてしまうので、写真の選別が重要です。

当サイトについて

お店の外観とコンセプトを載せました。
雰囲気づくりのブロックと言えます。

サービス

お店が行っているサービスを簡潔に伝えられるこのブロックには、重要な4項目だけ載せました。
多すぎると見づらいので、重要なものだけ載せるといいでしょう。

アクセス

お店の雰囲気が気に入ったら、そのお店がどこにあるのか気になると思います。
なので、この位置にお店の地図を表示しました。

メニュー

お店の地図とメニューのどちらを上に表示するかを悩みましたが、地図を上に、こちらを下にしました。
全てのメニューを載せてもいいですし、人気のメニューだけを載せて、あとはお店で・・・というのもいいでしょう。

見易さを考えて、食べ物と飲み物は分けました。

投稿記事(ニュース)

投稿記事ではニュースやブログを載せられますが、あえてニュースという形にしました。
ブログとしてしまうと、更新し続ける負担が増えてしまうからです。

それよりも、ニュースとして割引情報や臨時定休日の情報を出す程度がちょうどいいと考えました。

ギャラリー

ギャラリーには、店内写真や食材等の写真を載せました。
最近で言うとインスタ映えを意識した写真を選ぶといいかもしれません。

フッター

フッターには様々な情報を詰め込むことができますが、あえてシンプルにしました。
これまでのブロックで見せたいものは見せるこができていますから。

構成を考える上での心構え

何の為のサイトなのか

今回は飲食店という事で、来客を促すことが目的になります。
それであればお店に来るための情報として、地図や電話番号、飲食物メニューは欠かせないでしょう。

これが会社HPになると、取り扱っている商品、会社概要、求人情報などが主となります。
見る人にどういう行動を促すかを考えることが重要です。

客(ユーザー)目線で考える

自分が客だった場合、何がきっかけで足を運ぶのか。
興味を持った経験をもとに構成すると良いでしょう。

それとは逆に、どういうものが見られずに素通りされるのか。
文字が多すぎると読みたくなくなる等、嫌がる方法もユーザー目線ならわかると思います。

作る側に回ると、どうしても派手さやカッコよさなどに偏りがちですが、シンプルに訴求効果の高い情報に限定すると良いものが出来上がります。

スマホ目線を主とする

サイト作成はほとんどがPCです。
その結果、PCでの見た目に注力しすぎる場合があります。

現在では、どこのHPもスマホでのアクセスが圧倒的に多いので、スマホの見え方を意識して作ると良いでしょう。

こだわりすぎない

WEBの良いところは、いつでも編集できて無料でのやり直しが可能という事です。
これがチラシ広告だったりすると、やり直しがきかず、次のチラシの印刷にはまたお金がかかってしまうので慎重にならざるを得ません。

最初に作ったものがダメなら、また変更すればいいだけです。
そうしてやり直していくうちに質が高まります。
良いものを作ろうとするのは良いですが、それで手を止めるよりも、まずは作ってそこから質の向上を考えていきましょう。

PCの前でなくとも考えることはできる

車の中でもいいですし、散歩中でも考えることはできます。
ぼんやりと思いついたら、どこかにメモ書きして後でまとめましょう。

構成してみる

まずは書き出す

PCのエディタでもいいですし、ノートに手書きでもいいです。
どのような要素を盛り込みたいか、必要なブロックを書き出してみましょう。

箇条書きでもいいですし、実際に絵で書き出してもいいです。
手を動かすうちにイメージが湧いてきます。

手が止まったら文章を書く

要素が決まると、文章が必要になってくるでしょう。
お店のコンセプトやサービスの説明、料理の解説など、用意しておかなければいけない文章は沢山あります。
これらはHPでなくともお店を説明する上で必要なものですから、手が止まったときに書くのが良いでしょう。

書いているうちに新たな思い付きがあるかもしれませんので、手を動かし続けましょう。

画像を用意する

画像一枚で全体のイメージが決まる場合があります。
良い画像があれば全体が見えることもあるので、核となる画像を探して用意するのも良いでしょう。

よそのHPを参考にする

何も思いつかないときはいろんなHPを見てみましょう。
完成されたHPは沢山のヒントを持っています。
良いと思った要素を引っ張って、それで構成するのもいいでしょう。

まとめ

本講義ではHPの構成についてを考えました。
他者が作ったHPを複製するのは簡単ですが、自分のお店を想定して作るとなると、これが意外と難しいもので、考え込んでしまうとあっという間に時間が過ぎてしまいます。
無理に講義内で完成させる必要はないので、空いた時間に考えて後でまとめておくといいでしょう。

次回の講義ではその構成を形にしていきましょう。

自主学習のススメ