整理メソッド「樹のワーク」テキスト販売中 ≫

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

【事例解説】ホームページのつくり方 ①ホームページの必要性って? 【事例解説】ホームページのつくり方 ②事業や活動の全体像を整理する 【事例解説】ホームページのつくり方 ③ホームページ作成サービスを選ぶ前に 【事例解説】ホームページのつくり方 ④グーペ<Goope>を使って

 

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

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

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

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

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

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

 

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

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

 

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

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

 

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

【事例解説】ホームページのつくり方 ②事業や活動の全体像を整理する

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

 

  1. あなたのバックグラウンド
  2. 軸となる思い
  3. ビジョン・目指すところ
  4. 商品・サービス
  5. 提供する商品やサービスの魅力、価値
  6. どんな人/場面が対象か
  7. その人の悩み・理想・憧れ 

 

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

 

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

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

 

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

 

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

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

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

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

 

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

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

 

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

 

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

 

 

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

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

 

  1. あなたのバックグラウンド →トップページ、はじめての方へ、プロフィール
  2. 軸となる思い →はじめての方へ、プロフィール
  3. ビジョン・目指すところ →はじめての方へ、プロフィール、サロン写真
  4. 商品・サービス →トップページ、はじめての方へ、プロフィール、カウンセリング、ヘアケア相談、よもぎ蒸し、サロン写真
  5. 提供する商品やサービスの魅力、価値 →はじめての方へ、プロフィール、カウンセリング、ヘアケア相談、よもぎ蒸し、サロン写真
  6. どんな人/場面が対象か →はじめての方へ、プロフィール、カウンセリング、ヘアケア相談、よもぎ蒸し
  7. その人の悩み・理想・憧れ  →はじめての方へ、カウンセリング、ヘアケア相談、よもぎ蒸し

 

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

 

ところで…

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

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

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

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

 

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

 

error: Content is protected !!