ウェブサービス ／ カフェ・動画口コミ
Cafe Mog
写真では伝わらない席を、
30秒の縦動画で確かめる。
架空の運営会社を題材にした、カフェ専門の口コミ・予約サービスです。トップは暗い画面いっぱいに縦動画を1本だけ映し、上下に送って店を選びます。口コミは30秒以内の縦動画だけに限り、点数をつけない代わりに、順位に使う6つの要素と割合をすべて見せる設計にしました。
作品を開く架空の運営会社を題材にした自主制作です。予約による店舗への請求は模擬で、実際の課金や送金は行いません。
点数ではなく、
席と空気で選ぶ。
写真と文章では、席の広さも隣との距離も店内の音も伝わりません。口コミを30秒以内の縦動画だけに絞り、実際に見て確かめてから店を選ぶ順序にしました。
点数は出さず、動画の右に「この順位の内訳」を置きます。条件との一致、動画の充実度、保存数、来店報告、動画の新しさ、店舗情報の更新の6つが、それぞれ何パーセントで効いているかを店ごとに読めます。
暗い上映室に、
縦の動画を1本だけ。
エスプレッソ色の地に、フィルムの橙をボタンと選択中の印だけに使いました。常設のバーは置かず、動画の上に透明な帯を重ね、左にカップの記号、中央に「おすすめ／今あいてる／保存」、右に赤い録画ボタンを並べています。
見出しは明朝体で組み、動画は9対16の縦長のまま中央の列に置きました。右のパネルには席の種類ごとの席数と順位の内訳を並べ、動画の下には店名と最寄りの駅を重ねています。
1本ずつ送って、
時刻のチップで予約する。
動画は↑↓またはJ・Kで次の店へ送り、Spaceで一時停止、ダブルクリックで保存できます。見えている1本だけを再生するので、送るたびに映像と字幕が切り替わります。
予約は画面の下から上がるシートで、席の種類・人数・滞在時間・日付を選ぶと、30分刻みの時刻のチップに空き数が出ます。投稿は「撮る順」から「字幕を確認」までの5段で、外観・席・注文品の3カットを続けて撮る流れを、9対16でプレビューしながら前後を切って整えます。利用者が予約時に支払う画面はなく、来店分の店舗への請求はすべて模擬です。
小さな画面では、
動画を画面いっぱいに。
スマートフォンでは動画が画面全体に広がり、コピーは上端の透明な帯のすぐ下に置きます。字幕、店名と最寄りの駅、順位の内訳をたたんだ細い色の帯、「予約する」「詳しく見る」は映像の下部に重ねます。透明な帯は1行のまま上端に残しました。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- TypeScript / React / Next.js
Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン
