呑兵衛（飲食店サイトイメージ）を制作しました。

飲食店の店舗サイトを制作する依頼を頂いた想定で、簡単にプロトタイプを制作してみました。
飲食店に行く前にサイトを見て確認したいことは、どんな料理があるか、どのような雰囲気の店か、そして店舗営業情報だと考えます。
そのため、料理の写真を目立たせ、店舗の温かみをイメージできるようなデザインとしています。

トップとメニューの2ページのみですが、これを参考に提案などできればと考えます。

次のようなところにこだわって制作しています。

店の強み、雰囲気を表現するデザイン

呑兵衛の制作にあたって複数の飲食店サイトを巡り、気になったことが「見てほしいところが目に入りやすいところに表示されているか」でした。
飲食店なら料理を目立たせて、「これ食べたい！」と思ってもらえることが重要だと考えます。
これ食べたいと思ってもらえるように、料理の写真が上部に、たくさんあって、そしてとにかく目立つようなトップページとしました。

一番目立つ料理写真スライド

また、店の雰囲気もサイトから十分に伝わると感じました。どのような雰囲気か確認し、「ここなら入りやすそうだ」と思ってもらえたらいいと思います。
呑兵衛では「実家のような寛ぎの空間」をコンセプトとしています。落ち着きのある色合い、心理的に余裕を持たせる余白、営業感を感じさせない写真やライティングで寛ぎの空間を表現しています。

呑兵衛では掲載していませんが、店長さんやスタッフさんの写真などが載っているサイトもありました。どのように接客されるだろうかと想像できるので、来店の判断材料になると思います。

情報の順序

飲食店のサイトを訪問する閲覧者を2タイプに分けて想定し、サイト内の構成を整理しています。
誰に見てもらうか想像し、どのような順序で情報を閲覧できるとスムーズに来店まで結びつくか。そんなことを考えながら制作しました。

来店見込み、どんなお店か知りたい

未だ来店したことが無いというお客さまは、真っ先に「どんな料理があるか」が気になると思います。
“居酒屋”といっても、揚げ物が多い方が嬉しいかもしれないし、サラダの種類数も気になるかもしれません。
サイト上部に料理紹介を表示させることで、店舗への興味・理解を深めます。

既存客、店舗情報や新着情報を知りたい

来店したことがあるお客さま、常連さんもサイトを訪問します。
その目的は、下記のような店舗情報を調べることではないでしょうか。

• 営業時間は何時から何時まで？定休日は？
• クレジットカードで支払いできる？
• 店舗はどこにあるっけ？

また、状況の変化によって、必要とされる情報も変わってくると思います。

• 社会状況の影響による営業時間や定休日の変更はあるか？
• 昼時だけど混雑状況はどのようなものか？
• 季節の変遷でメニューの変更があるか？

これらの情報を分かりやすい場所に掲載しておくことが、店舗にとっても逆にチャンスにもなると考えます。
スタッフの対応なしにお客さまに情報を伝えられる。
そして現在の営業状況を正確に伝えることができ、他店より集客を強化できる可能性があると思います。

サイトの読込速度

これは飲食店のサイトに限らず、全てのサイトにとって重要なことです。
表示までに時間がかかってしまうとストレスを感じ、待っている間に来店意欲が減衰することも考えられます。
早めにたくさん美味しそうな料理を見せて、来店意欲を高めるべきです。

読込速度を向上させるためには、少し技術が必要です。

• 適切な画像の使用方法ができているか
• 無駄のないコードで書かれているか
• 読込速度を向上させるための工夫がされているか

少しでも速いサイトにして、来店に繋がるサイト作りを！

制作の流れ

以下のようになっています。

ヒアリング・要件決め
サイト制作でどのような目的があるか確認し、必要な機能やデザインコンセプトを固めます。
↓
構成・デザインフォーマット決め
サイト内のワイヤーフレーム（情報の位置決め）やデザインの型を決めていきます。
↓
デザイン・コーディング
確認したワイヤーフレームやデザイン型を基に、サイトの原型を制作していきます。
↓
第一稿
制作されたサイトを確認し、修正する部分をまとめます。
↓
修正
↓
第二稿
修正箇所を確認し、サイト制作の目的に沿っているか確認します。
↓
校了
↓
リリース（公開）
↓
確認
正常に作動しているか、実機で確認します。
↓
システム引き継ぎ
CMSやサーバー情報など、管理・運営に必要な情報を引き継ぎます。

制作期間・料金

ページ数やデザイン、原稿などによって制作期間や料金は変わってきます。
目安としては、おおよそ8ページ程度で2週間〜、¥20,000〜ほどだと考えられます。

最後になりますが、サイト制作で大切なことは、サイトを訪問してアクションに結びつくことです。
現状、ウェブサイト周りでお困りのことがありましたら、お手伝いさせていただけますと幸いです。