この記事は信州大学工学部 W1棟6F Advent Calendar 2018 - Adventarの6日目の記事として投稿します。
数ヶ月前に知り合いの飲食店を経営している方に、Webサイトを作って欲しいという相談をいただきホームページの作成と公開をしました。その話を今回はしたいと思います。
はじめに
飲食店（焼き肉店）の経営をしている方からホームページを作って欲しいという相談をいただき、すごく簡単にですが作成・公開をさせていただきました。作成にかかった時間は1日ぐらいで作成することが出来ました（大半が調べ物ですが(笑)）。
http://hayashiya.starfree.jp/hayashiya.starfree.jp
上記のサイトが実際に作成したサイトになります。こちらのサイトを作成・公開するのにどんなことをしたのか簡単に紹介したいと思います。
サイトの要件
ホームページを作成するのにあたり、これだけは最低でも備えて欲しいというような要望は以下のものでした。
- ホームページはどんなデザインでも良い
- できればお金はかけたくない
- お客さんがクーポンを利用できるようにしたい
- スマホでも見れるようにして欲しい
特に、お客さんがクーポンを使えるようにして欲しいとの要望が一番強い希望でした。お客さんがクーポンをスマホなどでサイト表示を行い、それをお店側が確認して割引などを行うという簡単な方式で良いとのことなので、クーポンの実装はホームページにアクセスすればクーポンを使用できるという状態で良いとのことでした。なので、クーポンの実装は単純にホームページにクーポンリンクを貼り付け、そのリンクにアクセスすればクーポン画面を表示できるという簡単な表示方法にしました。
また、当たり前ですがスマホでもホームページを見れるようにするためにレスポンシブデザインなサイトの構築を考慮して作成しました。
ホームページの作成
さて、実際にホームページの作成を行うのですがサイトを0から作るのはとても大変です。デザインをどうするのか、どういった設定が必要なのか、レスポンシブデザインにしなければならない、など多くの事柄を考慮して作成しなければなりません。
そこで、ある程度完成しているホームページのテンプレートを利用しました。今ではホームページを簡単に作成できるサービスが数多くありますが、その中で自分はHTMLのテンプレートを提供している下記のサイトを利用しました。
無料ホームページテンプレート.comは、商用でも利用可能な無料のHTMLテンプレートやWordPressテーマを提供しているサイトです。結構種類があり、どれもレスポンシブに対応しているテンプレートになります。こちらを利用し、サイトのレスポンシブデザインや作成を大幅に工数カットしました。
次に、テンプレートのデザインを元に写真や文章を置き換え、クーポンサイトの作成を行いました。置き換える画像などはそれぞれスマホで撮影したり、フリーの写真素材を利用しました。
そして、一番の要望でもあるクーポンサイトの作成に関しては、自分が作成したクーポン画像を表示するだけのサイトを自分で作成しました。このサイトを画像などを置き換えたテンプレートから画像リンクでクーポンサイトにサクセスできるように紐づけ、クーポンサイトの表示を実現しました。クーポン画像の作成にはAdobeのIllustratorを用いてクーポン画像を作成しました。スマホでもクーポンを見やすくできるようにスマホとPCのアクセス時の表示する画像を少しだけ違うものを用意し、レスポンシブに画像を対応できるようにしました。
サーバーをどうするか
ホームページの公開にはサーバーが必要不可欠であり、そのサーバーをどうするのかという問題がありました。どのサービスを利用するのか悩みましたが、今回、サーバーを用意するにあたって必要な条件は、ただホームページとクーポンサイトの表示ができれば良いという条件なので、StarServerFreeというサービスを用いました。
StarServerFreeは無料のレンタルサーバーを提供しているサーバーです。容量などはすごく少ないですが、今回のホームページではほとんど容量を使わないのでこちらのサービスを利用しても何も問題はありませんでした。このサービスを使うことでレンタルサーバーの維持費は無料でホームページの公開をすることが可能となりました。とてもありがたいです。
サーバーへのアップロードもWebFTPが使用でき、簡単にファイルや画像をアップロード出来ました。
細かな設定
ホームページを作成するのにいくつか設定をしたものがあったのでそちらも説明したいと思います。
GoogleMapsの表示情報設定
皆さんが飲食店を探すときには色んなサービスを使用して探すと思います。その中で、ホットペッパーや食べログなどのサービスもありますが飲食店が掲載するにはお金がかかります。また、自分が飲食店を友達と探したりするときにはよくGoogleMapsを使用して飲食店を探します。GoogleMapsで飲食店を探すとその飲食店までの距離や投稿されたレビューを見ることが出来ます。その情報を元に飲食店を決めたりしています。なので、GoogleMapsのお店情報を充実させることを行いました。ビジネスアカウントを作成し、営業時間やウェブサイトのURL設定などを行いGoogleMapsで表示される情報を確実な情報にしました。
OGP設定
飲食店ではよく口コミやSNSで話題になり人気店になった話はたまにあると思います。SNSに拡散するときにちゃんとした情報として拡散されるように設定できるのがOGP（Open Graph Protcol）というものです。サムネイルやタイトル、説明文をSNSなどで拡散するときにちゃんと表示されるように設定できるHTML要素です。この設定を行うことでFacebookやTwitterなどで拡散するときにも情報表示がされますので、この設定を行いました（はてなブログに貼り付けるときもちゃんと表示されているのがわかると思います）。下記のサイトを参考に設定を行いました。
画像のサイズや容量調整
ホームページを作成し公開をしたのですが、初めのうちはページの表示速度がとても遅くUXが良くないサイトとなっていました。その原因として、画像のサイズや容量が大きいことが原因でした。スマホで撮影した画像などは解像度が高く容量も大きな画像であり、その画像を何も加工せずにホームページに利用していました。したがって、Webページやスマホで表示したときに適切なサイズと容量になるように画像を加工し直して、ホームページに利用しました。その結果、ページの表示速度が格段に早くなりUXが向上しました。下記のサイトを見て画像のサイズなどを加工しました。
まとめ
ホームページを色々便利なツールやサービスを使い作成・公開をしました。HTMLやCSSなどは昔にちょこっと触ったぐらいだったので、サイトの構築に時間かかるのかなと思いましたがテンプレートを使ったおかげですごく簡単に作成出来ました。また、OGPの設定などは全く知らなかった情報なのでそういった知識をつけれたという面で勉強にもなりました。少しずつSEO対策なども取り入れていきたいと思っているので、今後も少しずつサイトの改善ができればなと思っています。
長野市に立ち寄った時にはぜひhttp://hayashiya.starfree.jp/に立ち寄って、クーポンを使い、美味しいお肉をたくさん食べていただければと思います！（本当に美味しいですよ！）
