モバイルWebアプリコンセプト
Maris レストランメニュー
海辺のカフェのための2言語モバイルメニュー。どのスマートフォンでも速く、オーナー自身で編集でき、アプリのインストールは不要。
制作の舞台裏
テーブルの上のメニュー。
スマートフォンのフレームに収めたモック、テーブルに置くQR、そして厨房で実際に使うアレルゲンタグ。
概要
Marisは、チェシュメの海辺のカフェを想定したコンセプトです。温かなおもてなし、少人数で回す厨房、そして最新の状態に保つのがひと苦労な紙のメニュー。ブリーフは「ラミネートのメニューを卒業し、温かさはそのままに」。
ブリーフ
- 課題
- ラミネートしたその日に古くなる、紙のメニュー。
- 制約
- どのスマートフォンでも、強い日差しの下でも、アプリなしで1秒未満で開くこと。
- 解決策
- オーナーがスマートフォンで編集できる、1スクロールのモバイルメニュー。各テーブルのコードから開きます。
デジタルメニューに価値があるのは、紙のメニューを手渡すより速いときだけです。つまり、初めて開くスマートフォンでも1秒未満で表示され、カテゴリーをタップするたびに通信を待たせず、パラソルの下の真昼の日差しでも読みやすいこと。
メニューは1本のスクロールで設計しました。画面上部に固定されるカテゴリーチップ、写真をゆったりと見せるレイアウト、そして凡例に埋もれさせず品目の上に直接表示するアレルゲンタグ。2言語の表示はリロードなしで切り替わります。同じ品目をトルコ語と英語で。2つの内容が食い違うことはありません。
画面の裏側では、オーナーが厨房からスマートフォンで価格と在庫を編集します。各テーブルには、テーブルIDを埋め込んだ専用のQRコードを印刷。将来、ブリーフが注文機能へと広がったときにも役立ちます。
このコンセプトについて
架空のクライアントのためのコンセプト作品です。私たちがクライアント案件で実践するプロセスと品質基準をご紹介しています。
アプローチ
カフェそのものを感じるメニュー。
写真ファースト
作り込んだ3枚の切り抜きより、1枚の本物の写真。引き締まったグリッドにゆとりある余白、カルーセルは使いません。
2言語を1行に
上にトルコ語、下に英語。行の高さは同じです。どちらの言語も二の次にはしません。
オーナーが編集
スタッフのスマートフォンがCMSです。値上げも、品切れも、新しい日替わりメニューも、1分以内で完了します。
搭載機能
カフェに必要なものは、すべて。不要なものは、何も。
数値はコンセプトのブリーフに基づくものです。
速度
< 0.8秒で初回表示
静的なメニューをエッジでキャッシュ。ネットワークにアクセスするのは最初のタップだけです。
テーブル
テーブルごとにQRコード
テーブルごとに印刷できるQRシート。URLが、お客様の座っている席を把握しています。
アレルゲン
凡例ではなく、品目の上に
グルテン、乳製品、ナッツ、甲殻類。お客様がすでに見ている品目の上に、タグで表示します。
言語
2言語、同じメニュー
ヘッダーで切り替え、設定は記憶されます。同じ内容を、2つの声で。
技術スタック
- Next.js
- React
- TypeScript
- Tailwind
- Sanity
- Vercel
実際に試す
画像ではなく、動く制作物。
デモを開いて、ゲストやクライアントになったつもりで使ってみてください。すべてのタップ、すべてのタブが動作します。