お菓子屋さんの『あいうえお』
菓子屋が綴る、小さなお菓子屋さんの作り方。 私の体験をもとに開業・経営に役立つ ノウハウや情報を発信しています。
サイト設計

ホームページの基本構成【お菓子屋さんが初めてつくるwebサイト】

シトロンくん
シトロンくん
ホームページを作るとき何を基準に作成したらいいのかな?基本が全然わからないんだ。
yuuki
yuuki
ホームページには目的があって作るんだよ。その目的が達成される様にお客様の動きを導くことが必要なんだ。そのための基本を解説していくよ

お菓子屋さんが自分でホームページ作る…といっても、どのような構成にしていいかわからない…という方も多いのではないでしょうか?

ホームページを作る際は、3つの構成とサイト設計を意識して作成すると、お客様が分かりやすいホームページを作成することができます。

 

3つの構成とは、以下となります。

  • ファーストビュー(ヘッダー)
  • 本文(メインコンテンツ)
  • フッター

 

この3つの構成要素が基本となりホームページを作り上げていきます。
では、詳しく解説していきましょう。

 

 

 

ホームページを運営する一番の目的はブランディングです。オンラインショップのみの運営は、『売りたい!』の気持ちが全面に出すぎてしまい、ブランドの構築が難しくなります。そういった意味でも、ホームページは重要な役割を果たしてくれます。

「ブランディングってなんだ?」という段階の方は、以下の『ブランディングの構成要素』でブランドの組み立て方を詳しく解説しています。

図解 | 小さなお菓子屋さんのブランディング【価格競争からの脱却方法】 【記事内ブランディング資料画像を無料でご利用頂けます。】 注意…著作権はyuukiにあります。  【...

 

 

 

 

ホームページの3つの構成要素

先にも述べた様にホームページの構成要素は、以下の3つが基本となります。

ファーストビュー(ヘッダー)

目的➡︎集客

お店の名前を検索して、お店のページを開いたときに最初に表示される画面。第一印象。
お客様がページを開いた時に瞬時に理解しやすい様な作りが望ましい。

店名やキャッチコピー、ホームページの内容をイメージさせる画像や、インパクトのある画像でお客様を惹きつけて、興味を持たせる目的で作る。

 

ファーストビューで全てを伝える事は出来ない為、次のコンテンツへのスクロールを進めて貰う必要がある。
スクロールを進めて貰うには。この時点で惹き付けられるか、ページを閉じてしまうかの別れ道でとても重要になってきます

 

 

 

 

 

本文(メインコンテンツ)

目的➡︎商品やお店の紹介

フーストビューの下にくるコンテンツ。それぞれのページの内容はここで説明します。

 

ヘッダーで興味を惹きつけたお客様へ商品やお店のストーリー・思いを伝え購買欲を掻き立てる役割。
購入へ進んで貰う為の力強いアプローチが必要。

 

 

 

 

フッター

目的➡︎お客様に次のアクションを促す

ホームページ全体の内容の総括。

  • 店名・住所・電話番号
  • お問い合わせ
  • メルマガ登録
  • 関連ページへ誘導するバナーボタン
  • 購入ページへの誘導するボタン
  • SNSの共有ボタンや『いいね!』ボタン

 

 

 

 

3つの構成要素の活かし方

上記で解説した様に

集客

商品・お店の紹介

お客様へのアクションを促す

この三つの流れがホームページに必要です。
ページを最後まで読み終わったお客様は『商品』や『お店』に対する興味や購買欲が高まっている状態です。
つまり、商品ページへアクセスや購入ボタンを押すなどの行動を起こしやすい状態にあります。
ページを最後まで読んで貰い、興味を掻き立てる事が出来た時に、他のページへの案内がなければ、その時点で離脱してしまいます。

そこで以下の様にホームページの下部にお客様が次の行動へ移りやすいように誘導するボタンを作成する事が重要となります。

 

  • お問い合わせ
  • 注文
  • 他のページへの案内(リンク)
  • メルマガ登録

 

 

そこから来店・お問い合わせ・注文へ繋がり、売上げに貢献。また、関連する情報の掲載ページへ誘導する事で、
興味を持ったお客様は、自ら他のページへ移動・回遊を始め、ページからの離脱を防ぐ事ができます。

 

以上の理由により、3つの構成要素が重要な役割を発揮します。

 

 

 

 

 

 

サイト設計

サイト設計とは

サイト設計とは、お客様がホームページ内を回遊し易くする為の仕組み作り。

 

サイト設計の目的

  1. 閲覧者がストレスなく目的のページに辿りつける様にする。
  2. 元々の目的以外にも興味を惹きつけ、購入に繋げる為にホームページ内を回遊しやすくする。

 

 

1.お客様がストレスなく目的のページに辿りつける様にする

目的を持ってお店のホームページに辿り着いた場合、ストレスなく欲しい情報に辿り着ける事が第一条件で重要事項になってきます。

 

沢山の情報を詰め込みすぎたり、複雑な作りにすると、欲しい情報が探しにくい『サイト設計』となり、目的の情報にたどり着く前に離脱(ホームページを閉じる)してしまいます。

 

 

 

 

 

2.元々の目的以外に興味を惹きつけ、購入に繋げる為にホームページ内を回遊しやすくする。

お客様が自ら検索して辿り着いた情報の近くに、魅力的な情報を提案する事で、他のページも見て貰ったり、購入に繋げたりする事ができます。

 

わかりやすく例えると、オンラインショップで良く目にする以下の例です。

  • 『この商品をみた方はこんな商品も見ています』
  • 『同梱包で発送できる商品はこちら』

この様な例は、このタイプのサイト設計にあたります。
※回遊して貰う事は、SEO対策として検索順位を上げる事にも繋がります。

 

 

 

 

ホームページ作成をする際に頭に入れておきたい事

  1. 一度に視野に入る範囲が限られているのでスクロールして貰えなくては見て貰えない。
  2. 下層ページにはダイレクトに訪問者がアクセスしてくる事を頭に入れた構成。

以上の2点を理解しているか、していないかで、サイト作り方が変わってきます。

 

 

一度に視野に入る範囲が限られている

WEBサイトはポスターや折り込みチラシと違い、一度に視野に入るスペースが限られています。つまり、スクロールされして貰えなければ、お客様の目に入る事はありません。

見て貰えないページは存在しないと同じで、全く意味を成しません。
常にお客様へ興味を与え、次へ進めて貰える為の、コンテンツやサイト設計が必要になります。

 

お客様が何を見たくて、何を知りたくて、
『貴方のホームページ』を閲覧しているのか、客観的に考えて視野の範囲で理解できる作りです。

 

 

 

 

 

下層ページに、ダイレクトに訪問者がアクセスしてくる

ホームページは、TOPページから順番に閲覧していく訳ではなく、
トップページを経由せずに、ダイレクトに下層ページにアクセスすることが良くあります。

 

最初から下層ページにアクセスしてくるパターンは以下となります。

  • Yahoo!やGoogleなどの検索エンジンからお店の名前ではなく、その他のキーワード検索がヒットした場合。
  • SNSやニュースで特定のページが拡散されたとき。

 

TOPページへのお客様は、貴方のお店に興味を持ち、自らお店を検索してくれたお客様ですが、
その他キーワードから下層ページにアクセスしたお客様はお店の事を知らない、新規のお客様の可能性が高くなります。

 

つまり、TOPページ以外の下層ページ単独では新規のお客様の集客の可能性を持っているという事になります。
新規のお客様の興味を惹きつける事が出来れば、他のページへの回遊を促し、読み進めさせる事が可能です。その為には、

 

ホームページ全体を読まなくても、1ページ、1ページが単独で理解可能な作りにする事、更に、他のページへの回遊を促すリンクを設置してる事が、読み進めて貰う為の条件となります。

 

 

 

 

 

お菓子屋さんがホームページに記載したい項目

ホームページを作成する上で、記載しておきたい項目にはどんなものがあるでしょうか?以下の項目があれば、コーポレートサイト(企業の公式サイト)の役割が成立します。

 

 

コーポレートサイト

店舗情報

  • 店名
  • 住所
  • 電話番号
  • 営業時間
  • 営業日

 

 

 

 

コンセプト・プロフィール

  • お店のコンセプト
  • シェフのプロフィール

 

 

 

インフォメーション

  • 今月の定休日
  • 新作の紹介
  • 催事やイベントの出店情報
  • SNSの掲載

 

 

 

アクセス

住所だけでなく、来店してもらい易い説明。
駅からの道のりやバイパスからの道のりなど。

 

 

お菓子の紹介

販売しているお菓子や過去に販売していたお菓子の紹介

 

 

お問い合わせ

お客様から店舗への連絡フォーム

 

 

利用規約

ホームページやオンラインショップ内で、正しい営業を行う為のルールや、お客様に対する公約。

この公約やルールはお客様を守ると同時にお店守るためのものでもあります。

 

 

 

プライバシーポリシー

ホームページやオンラインショップで得た個人情報をどう扱うかを記載します。

 

プライバシーポリシーを掲載する事で、お客様の個人情報を守る事を約束し、
安心・信頼を構築する上で大切な項目となります。

 

 

 

cookieポリシー

Cookieを利用しお客様の情報を取得し利活用することをお客様へ知らせる役割を持った文言、またその文言を含むページを指します。

 

cookieは、お客様の情報はお店が情報を利用するのではなく、インターネット上のユーザー体験を向上させる仕組みの一部です。

 

 

 

 

 

利益を上げるサイト

バースデーケーキご予約フォーム

バースデーケーキのご予約フォームを設置して、24時間バースデーケーキの予約受付を可能にする事が可能です。

 

 

 

オンラインショップ

  • 商品
  • 購入ボタン(カート)
  • 購入案内

 

 

 

ホームページを活かすにはスマホ対応表示が必須。

ホームページを効果的に活用する為には、レスポンシブレイアウト対応は必須!
レスポンシブレイアウト対応とは、パソコン・スマホで作成した内容が、お客様の端末に応じて自動で切り替わるシステム。

 

スマホ対応していないホームページは、スマートフォンの小さな画面にパソコンの画面がそのまま圧縮されて表示されます。
スマホでパソコン画面を閲覧する場合、文字やボタンが小さく、指で拡大しないと文章を読んだり、ボタンを押すことができない為、
お客様へストレスを与えてしまう事になります。

 

世の中の70%20代、30代では90%】がスマホでネットサーフィンをする時代です。
ホームページ作成はスマホ対応が絶対条件です。
この事を考慮した上で、私が選択したホームページ作成サイトは『ジンドゥー』です。

 

スマホ対応、ホームページ作成、ネットショップ機能があり、私のように小さなお菓子屋さんを営む方にはおすすめです。
他にもおすすめポイントがあるので、私が『ジンドゥー』を選んだ理由を以下で詳しく紹介したいと思います。

ホームページ・オンラインショップを『ジンドゥー』で開設した4つの理由【お菓子屋さんの開業】 ホームページやオンラインショップを作成するツールを提供している会社は沢山ありますが、その中で、『ジンドゥー』を選択しました。『ジ...

 

 

 

 

また、お店を運営して行く上で、準備段階からコンセプト設定やブランディングを行い、他店と差別化を行っていくことで、小さなお菓子屋さんでも運営がうまく進むようになります。

お店の運営についてのマーケティング戦略は以下で詳しく解説しています。

攻略 | 小さなお菓子屋さんのマーケティング戦略【売り方を学ぶ】 小さなお菓子屋さんであっても、闇雲にお菓子を作る訳ではなく、マーケティングが大切です。 しかし…菓子職...

 

 

 

 

まとめ

ホームページ作成の基本

ホームページの構成要素は以下の3つ。

  • ファーストビュー(ヘッダー)
  • 本文(メインコンテンツ)
  • フッター

 

3つの構成要素の役割。

  • 集客
  • 商品・お店の紹介
  • お客様へのアクションを促す

 

お客様が回遊しやすいサイト設計

  • お客様がストレスなく目的のページに辿りつける様にする
  • 元々の目的以外にも興味を惹きつけ、購入に繋げる為にホームページ内を回遊しやすくする。

 

ホームページ作成をする際に頭に入れておきたい事

  • 一度に視野に入る範囲が限られているのでスクロールして貰えなくては見て貰えない。
  • 下層ページにはダイレクトに訪問者がアクセスしてくる事を頭に入れた構成。

以上の事を意識してホームページを作成すると、お客様のストレスをかける事なく、ホームページの意義を活かす事が出来ます。

シトロンくん
シトロンくん
なるほど!こんな風に考えて作ればいいんだね!!
yuuki
yuuki
サイト設計をしっかりして、お客様がストレスなく回遊できる仕組みを作るんだよ!
NEW TOPIX
ジンドゥー•ビジネスプランがおすすめ
ビジネスプランのおすすめポイント

私のお店は、実際にジンドゥービジネスプランを利用しています。

◉ホームページもオンラインショップもひとまとめにできる。

◉かっこいいホームページが、簡単にできる。

オンラインショップの販売手数料がかからない。

◉コスパが最高。

◉ブランディングがしやすい。

◉バースデーケーキの予約ページで予約が増えた。

お菓子屋さんの『あいうえお』編集長
yuuki
🍋好きなお菓子*タルトシトロン 🍋現在の仕事*お菓子職人・お菓子屋経営者 🍋職人歴*21年 🍋独立*10年目🍋 0からの立ち上げ経験*3店舗 🍋海外渡航歴*フランス4年間
\ Follow me /
ConoHaWINGでWordPressテーマ【JIN】を利用しています