前回の記事

ページ構成

各コンテンツはページ上部から、以下のような順番で掲載することにしました。

ヘッダー

ロゴ
コンバージョンボタン
ナビゲーション

ファーストビュー

雰囲気が伝わる写真＆キャッチコピー

コンセプト

イタリアの古き良き食文化と、先進的な価値観を取り入れたイタリアンレストラン。
イタリアで修業を積んだシェフが2013年に開業

💡レストランの色（特徴、魅力）を端的に表した文章をページ上部に掲載します。いわば自己紹介です。

更新情報

20xx/xx/xx 新作ワインが入荷しました
20xx/xx/xx 年末年始の営業について

💡既存顧客に向けても更新された情報が一目でわかるようにページ上部に配置しています。
たまにお店は普通に営業しているのに更新情報が1年以上前のもので止まっているサイトがあったりします。ウェブサイトというのは定期的に更新することが大事ですが、どうしてもそれが難しい場合はXやFacebookの埋め込みなどで代替するのも一つの手です。

ディナー

時間帯:18:00~23:00

自家製ピザ

自家製窯で焼いています。
※写真挿入

定番ミネストローネ

シーズン通して変わらず味を楽しめます。
※写真挿入

豊富なワイン

ワインを豊富に取り揃えています。
※写真挿入

💡飲食店なので、早めに料理の情報を魅力的な写真とともに掲載します。特に飲食店などの商材が『映え』るWebサイトに関しては、写真はとても大事です。

ランチ

リーズナブルなお値段でお楽しみいただけます。

日替わりランチ

※写真複数挿入

💡このレストランはディナーがメインとなるので、敢えてランチをディナーの後に置いています。

環境への取り組み

イタリアでは環境問題に関する関心が高いです。私たちもそれに共感し、環境配慮に勤めています。

毎週水曜は牛肉の提供を停止して植物性由来の食材を中心に提供

フードロス解消のために食べ残しの持ち帰り推奨

調理段階での廃棄ロス削減

💡最近は個人も法人も、環境問題への関心が高まっています。もちろんそれについて懐疑的な意見を持つ人もいたり、グリーンウォッシュとなってしまうリスクもありますが、普遍的の価値観として定着しつつあるのも事実です。

シェフについて

新宿本店オーナシェフ○○○○

写真＆経歴

池袋店オーナシェフ○○○○

写真＆経歴

錦糸町店オーナシェフ○○○○

写真＆経歴

店舗概要

※店舗別に掲載

営業時間
定休日
決済
席数
お問い合わせ
電話
フォーム
アクセス

よくあるご質問

14:00〜18:00は営業していますか？
来店時はドレスコード必須ですか？
食べ残しは必ず持ち帰る必要がありますか？

💡店舗概要などで掲載できていない情報や、よく聞かれる情報などを掲載し、ユーザーの疑問や不安を解消させてあげます。

Instagram

※直近の数投稿を表示

💡やはりInstagramと料理の相性は高しです。既存顧客で、わざわざWebサイトは毎回見に来ないけどInstagramなら、という方に向けInstagramへの導線を設置しておきます。

リクルート

ホールキッチンスタッフを募集しています

問い合わせフォーム

カテゴリ
店舗
テキスト入力欄

フッター

ロゴ
ナビゲーション

　
このような感じで、各項目の内容はおおまかに決めつつ、詳細はAIツールを活用しつつワイヤフレーム作成→デザインの段階で詰めていきました。

ワイヤフレーム作成

ワイヤフレーム作成とデザインにはFigmaを使用しました。

Figmaは無料で使えるデザインツールで、ノーコードでプロトタイプを作成できるほか、課金すればCSSも生成してくれます。その気になればノーコードでWebサイト制作ができちゃう優れものです。

上記画像のようにグレーベースでワイヤフレームを作っていきました。
本来のプロジェクトでは、ワイヤフレームはディレクターが作ったり、デザイナーが作ったり、クライアントが作ったり色々です。

デザインに入る前にワイヤフレームを作ることで、デザインの指針となり、クライアント-受注者や、制作メンバー間の共通認識となります。

　
次回はデザイン編&プロトタイプ作成編です。

次の記事↓