【事例解説】ホームページのつくり方　⑤ページ構成をしてつくりこむ

↑　この記事は、こちらの記事の続きです　↑

グーペ＜Goope＞のテンプレート選びや設定で気をつけたこと

デザインのテンプレート選びでは、ご相談をしながら、スマホで見たときの見え方を重視しました。

いまや「スマホファースト」なわけですが、よくある「メニューバー」のアイコン（横三本線マークや、menuなどと書かれている）が見つけやすいこと。

クリックしたとき、メニュー一覧が画面中央に見やすく展開されるテンプレートを選びました。

（メニューバーが目立たず、スルーされるものも多いんですよね…）

カラーも、サロンやオーナー様の雰囲気に近い、落ち着いたピンクに変更。

文字も、メインに読む方の年代に合わせた、大きめスッキリめの書体に。

グーペのテンプレートで個々に変更できるのは、このあたりまでになります。

サイト全体に登場する素材（タイトルロゴ、トップページのスライドショー画像、文中のラインイラスト、小さなお花のアイコンなど）は、統一感が出るように、デザイナーさん（Sato工房さま）にオリジナルで制作していただきました。

ページ構成をどう考えるか

↑　こちらの記事でもちょっとふれましたが、読む人（お客様となる人）がサービス購入時の検討材料として知りたいのは、このようなことです。

これが、サイト全体で伝わるように、読む人がスッと受け取れるようにページの構成を考えていきます。

ただ、いきなりサイト作成の管理画面を開いてもなかなか進まないもの。

上記の要素の「取りこぼし」があるといけないので、ここでも「全体像」をかるく設計します。

このとき、わたしが具体的にやっていることは

●1枚のふせんを1ページに見立て、おおまかな内容を書き出す

（ふせんは縦横無尽に動かせるので、階層構成を考える時も手放せません！）

↓

●エクセルで簡単な表をつくり、おおまかな内容を足したり引いたりして、バランスをみる

※こんな感じ、あくまでイメージです

これを、ホームページの輪郭（全体像）が見えてくるまで続けます。

書き始めるのは、そのあとです。

７つの要素は伝えられそうかチェックする

最終的に、サロンうららか様のサイトでは、下の画像の通り12ページ構成になりました。

（文章をどうまとめたのか、という話はまた別にして）

結論からお見せしてしまいますが、上記７つの伝えるべき要素は、このような感じで散りばめられています。

そのほかのページは、安心して、迷いなくアクションいただけるための機能を担っています。

ところで…

この中で「ブログやSNSはどうしてるの？」と感じられた方もいるかもしれませんね。

オーナー様は、ブログ（アメブロ）の更新をコツコツ継続的にされているので、そちらにリンクされるページを1枚入れてあります。

ブログは単体としても存在し、アメブロ側でも、記事と信頼感が蓄積されていきますし、オーナー様の「人柄」もよく伝わり、こちらの方からもお問い合わせが多いとのことです＾＾

このほか、LINE公式アカウントでも情報発信をされていますので、「友だち追加」ボタンも全ページに表示されるようにしています。

ホームページは、ともすると「動きのない」印象になりがちですが、ブログ更新やSNSを組み合わせることで、「静と動」が相互補完されるのが理想的だと思います。