今回はHP(ブログ)運用について載せていきます。
HPについて外注はせず、すべて独自に作成しています。
HP作成の一連の流れについて載せていきます。
これから自分のお店でも自前のHPを作っていきたいという方の参考になればと思っています。
WorldBurgerのWebマーケティング実践内容全体像についてはこちらからどうぞ！
STEP1 HP事前準備
worldburgerのHPにかかっている費用
レンタルサーバ費用 500円/月
ドメイン費用 1000円～3000円/年（.jpドメイン 初年度は1000円程度、更新は価格が上がる）
レンタルサーバ契約
まずはHPが稼働する場所（サーバ）を契約することが必要です。
どのレンタルサーバでも良いですが、まずは下記のサービスあたりが安価でよいかと思います。
ユーザー数が増えてきた場合にはサイトの引っ越し等も可能です。
月数百円程度ですのでHPがあるという効果の方がはるかに大きいと思います。
ドメイン取得
レンタルサーバを契約した初期段階では独自ドメインではなくレンタルサーバで用意されたドメインのにすることしかできません。
このままではSEOなどでも弱い状態であり、場合によってはセキュリティ対策等ではじかれることも多いです。
worldburgerではjpドメインを取得しています。
こちらは日本を拠点にしているという意味合いがあります。
他に有名なものは.comや.netなどもありますが特に現在は強い差異はあまり無いようです。
ドメイン購入に利用するサービスに指定はありません。下記のサービスなどを比較して検討してみてください。
ドメインを購入したら、ドメイン購入したサイトの設定でレンタルサーバのネームサーバーを利用するよう設定を行ってください。
本記事では全体の流れを把握してもらうことを目的としているので詳細については割愛しますが選択したサービスの内容をよく確認してください。
設定等が心配な場合はドメインとレンタルサーバ提供会社を併せると簡単に設定できることが多いです。
HP作成（ツール）
一番の有名どころではwordpressを利用したものですね。
こちらについてはレンタルサーバにHP作成ツールが項目として準備されていることが多いのでとても楽ですね。
worldburgerでもwordpressを利用しています。
wordpressのメリットしてプラグインが充実しており様々な表現方法をプログラミング等無く、構成できるところがあります。一方でデメリットとして利用が多い分、サイバー攻撃の対象ともされやすいのでセキュリティ対策等も必要となってくるので重要な情報等の扱いには気を付けた方がよいでしょう。
SSL対応
worldburgerのHPはhttpsから始まっています。
通常はhttpですがsの部分にはSSLというセキュリティ対策が施されているという意味合いがあります。最近ではChromeなどのブラウザでhttpsでないサイトで警告メッセージが出るようになる場合もあるなど可能であれば設定しておいた方がよいでしょう。
STEP2 HPのイメージ策定
まずどのようなページが必要かを並べていきます。
内容について目指すべき姿があればそちらも踏まえて初期段階で洗い出しておきましょう。
ロゴや必要な画像素材などもこの時点でイメージしておきましょう。
worldburgerの場合はさらに商品自体の構想やコンセプトなども改めてこのタイミングで議論を繰り返しました。
参考にworldburgerの作成例を載せていきます。
①トップページ
worldburgerの場合はハンバーガーなのでより画像でおいしさが伝わることを意識しました。
背景のベースは黒でシックなイメージ、可能であれば背景が画面一面に出てくるような画像効果を使いたいというとこまで決めていました。
連携要素としてはinstagramやYoutube、注文への紐づけ、ブログ内容へのアクセスをトップページから行えるよう考えました。
②注文ページ
注文につながるアクションができるページです。
テイクアウトやデリバリーサービスとも連携させていきたいと考えています。
③メニュー
メニューページで画像のみで作りこみなし
④アクセス
GoogleMapのリンクと看板などで店舗前の特徴もわかるようにしています。
⑤ブログ
SNSシェアのボタン設置もしています。
内容はハンバーガーの宣伝内容とWEB集客の実践内容と決めていました。
YOUTUBEについてはこれから載せていければと思います。
⑥問い合わせページ
問い合わせできるようにしています。
⑦プライバシーポリシー
個人情報等についての取り扱いについて載せています。
⑧運営者情報
お店の運営者を明確にするためにしています。
STEP3 素材作成
素材画像については他のSNSなどでも利用できるように複数のパターンの写真を取っておきましょう。
PC用は横長（instagram利用もある場合は正方形にトリミングしても大丈夫なようにする）、スマホ用は縦長、それぞれ寄りと引きの写真を撮るなど材料はいろいろあるほど後で利用できるのでよいです。
ロゴは商品やコンセプトなどがわかるようなものでデザインするようにします。
worldburgerの場合はハンバーガーと世界地図を合わせたものとしています。
メニューなども画像と合わせて作成しました。
ロゴ作成が自分では厳しいという方はココナラなどで外注するのもよいかと思います。（HPすべて外注ではなくロゴのみなど部分的に利用することで費用を抑えるなど）
STEP4 HP公開
トップページからの動線を意識してSTEP2で決めたページを実際に作成し、STEP3の素材画像を当てはめていきます。
ここで違和感がある場合は構造の変更やデザインの調整を行っていきます。
細かい調整についてはCSSやJavascript等のデザイン技術を用いています。
また実際に複数のデバイス（iphone、Android、iPad、PC）で動作を見てみて修正を重ね、
デバイスのOSや画面サイズで処理を変えています。
オープンの日などの期限もあったのである程度の品質で切り上げた部分もあります。
細かい部分についてはユーザーの利用に影響も出ない部分もあったりするので様子を見ていきます。
STEP5 運用・改善
運用していく中でブログの内容やデザインなども改善修正を行っています。
定期的な写真のアップデートに加えてデザイン修正や追加も行っています。
ブログについては先頭に固定表示するものを2つ設定しています。
①1つはオープンした日の内容でアクセスから商品内容まで一連の内容を網羅したものです。
これだけ見ればお店の雰囲気がわかるというものにしています。
②2つ目はWebマーケティングの全体像に関するもので、このページにWebマーケティングの要素を追記していくことでこのページから取り組みの内容や結果をたどれるようにしています。
また、GoogleAnalyticsで日々のHP流入人数と経路の把握、GoogleSearchConsoleによってキーワードの効果の確認と次のブログの内容の改善を図っています。
この辺の内容についてもいずれまとめていきたいと思います。