No.009 / Websites / —
走る炙り屋「おぶり。」|営業予定と運用をつなぐ事業サイト
営業予定、デジタルメニュー、出店・相談導線と、Calendar・CMSによる予定更新を統合したキッチンカー事業サイト。
Project facts
- Role
- Direction
- Deliverable
- キッチンカー事業サイト / 営業予定検索・カレンダーUI / カレンダー・CMS同期フロー / インタラクティブデジタルメニュー / CMS読み取りプロキシ / 透過動画イントロ / 静的サイト公開パッケージ
- Industry
- 飲食・キッチンカー運営 / キッチンカー事業支援
- Capability
- 情報設計 / フロントエンド開発 / CMS構築 / API設計 / 運用設計 / UI設計 / UX設計 / レスポンシブデザイン / バックエンド開発 / パフォーマンス最適化 / Webセキュリティ設定 / リリースエンジニアリング
- Technology
- React / TypeScript / PHP / Google Apps Script / microCMS / HTML / CSS / Vite / Google Calendar / FFmpeg / Node.js / Apache HTTP Server
- Audience
- 営業予定やメニューを確認する来店候補者 / 出店を依頼する会場・イベント運営者 / 事業連携を検討する企業・地域パートナー / キッチンカーの開業・運営について相談したい事業者
課題
営業予定、メニュー、出店・連携案内、事業相談という異なる情報を利用目的別に一つのモバイル向けサイトへ整理し、変化する予定を秘密値を公開せず更新できる仕組みが必要だった。
解決策
検索・カレンダー付き営業予定、拡大可能なデジタルメニュー、相談導線を構築し、Google Calendar、GAS、microCMS、PHP APIをつなぐ予定更新フローと透過動画イントロを統合した。
主要機能・工夫
- 営業予定の一覧・検索
今日・未来・過去を整理し、場所や説明を横断して検索・並べ替えできる。
- 月間カレンダー
月単位で予定日を把握し、同日に複数の予定がある場合も詳細を確認できる。
- 公開予定の正規化
公開状態、日付、表示順を検証し、不正な予定を表示前に除外する。
- デジタルメニューブック
見開き、ページめくり、モーダル、wheel・gesture・pinchによる拡大に対応する。
- 目的別の事業導線
来店、出店依頼、事業連携、開業・運営相談を目的別に案内する。
- Calendar・CMS同期
運用カレンダーの予定を整形し、決定的な識別子でCMSへ反映する。
- 安全なCMS読み取り
秘密値をブラウザへ渡さず、公開対象フィールドだけをsame-origin APIで返す。
- クロスブラウザ透過動画
Apple系とその他の環境で互換形式を選択し、再生失敗時も本編へ進める。
- 取得失敗時の継続表示
予定取得に失敗した場合も空状態へ移行し、サイト全体の閲覧を継続できる。
- 検証付き静的配布
参照ファイル、許可対象、checksumを確認した公開パッケージを生成する。
成果・変化
- 顧客向け情報と運用フローを統合
予定、メニュー、事業案内、相談導線と予定更新処理を一つのサイト構成へまとめた。
- 透過イントロを2形式で構成:1280×720・24fps・4秒
VP9 WebMとHEVC MOVのローカル成果物を計測。
- CMSの秘密値をブラウザから分離
PHP APIがメソッド、公開フィールド、取得元、キャッシュを制限する構成を実装した。
- 相談サービスUIの設計判断を反映
スポット相談、サービスアイコン、区切り、導線配置の指定がレビューで採用された。
営業予定、メニュー、事業相談をつなぐサービスサイト
- サービス
- 走る炙り屋「おぶり。」
- 種別
- Kitchen Car Service Website
- プラットフォーム
- Mobile-first Web
- 運用連携
- Calendar / CMS / API
顧客が見る画面と日常の予定更新を一つの仕組みへ
サイトはHero、営業予定、デジタルメニュー、事業紹介、相談サービス、問い合わせ導線を持ち、来店候補者と事業者の異なる目的を同じブランド体験で案内します。
公開内容はUIとデータ連携の構造に限定し、個別の営業予定、会場、住所、連絡先、料金、契約条件、内部設定は登録していません。
来店から事業相談までを目的別に案内
- Visit
- 営業予定とメニューを確認する来店候補者。
- Event
- 出店を依頼する会場・イベント運営者。
- Partnership
- 事業連携を検討する企業・地域パートナー。
- Consulting
- キッチンカーの開業・運営を相談する事業者。
変化する営業予定を探しやすい閲覧UIへ
営業予定は今日・未来・過去へ分類し、場所や説明の検索、未来・過去の絞り込み、表示順の切り替えに対応します。
取得に失敗した場合は予定がない状態へ移行し、他の事業情報や問い合わせ導線の閲覧を妨げません。
日本時間を基準に月間カレンダーを生成
予定の日付はAsia/Tokyoを基準に扱い、公開状態と日付を正規化してから未来・過去へ分類します。
月曜始まりの月間カレンダーを生成し、同じ日に複数の予定がある場合も日付から一覧を確認できます。
ページめくりと拡大に対応するデジタルメニュー
メニューは見開きのブックとして構成し、ページ移動とモーダル表示を切り替えられます。
詳細表示ではwheel、gesture、pinchによる拡大と移動を扱い、モバイルでも料理情報を確認できるようにしています。具体的な価格と販売状況は時点確認が必要なため登録していません。
出店・連携・相談を目的別の導線へ分離
来店者向けの情報とは別に、出店依頼、企業・地域との連携、キッチンカー事業相談へ進む入口を設けています。
相談サービスは支援領域、スポット相談、計画型支援、継続支援を説明しますが、料金、契約条件、実績成果、削除済みの納品物表現は公開データへ含めません。
CalendarからCMSへ公開予定を同期する設計
日常運用ではGoogle Calendarを入力元とし、Google Apps Scriptが公開に必要な予定を整形して決定的な識別子でmicroCMSへ反映します。
コード上の同期処理と実環境での継続稼働は別の事実として扱い、トリガー頻度、稼働期間、成功率は確認できるまで成果として断定しません。
秘密値をブラウザへ渡さないCMS読み取りAPI
ブラウザからCMSへ直接接続せず、same-originのPHP APIが公開対象の予定情報だけを返します。
APIは利用可能なメソッド、取得元、公開フィールド、キャッシュを制限し、CMSの秘密値と環境固有設定をフロントエンドから分離します。
環境に応じて形式を切り替える透過動画イントロ
Apple系の環境ではHEVC MOV、それ以外ではVP9 WebMを選択し、透過表現の互換性を確保します。
確認した動画成果物はいずれも1280×720、24fps、4秒です。再生終了だけでなく、読み込み失敗時にも本編へ進む制御を備えます。
外部データや動画の失敗をサイト全体へ波及させない
予定取得に失敗した場合は空状態へ、イントロの再生に失敗した場合は本編へ移行します。
外部サービスやメディアの一部が利用できない場合でも、事業紹介、メニュー、相談、問い合わせの主要導線を継続できる構成です。
おぶり。専用の静的配布パッケージを検証
専用の配布処理で、公開ページから参照される資産、許可対象ファイル、checksumを確認します。
公開対象外の内部ファイルや設定を含めず、必要な画面、画像、動画、API連携用ファイルを再現可能な公開物へまとめます。
相談サービスの指定UIをレビュー結果へ反映
スポット相談のフラットな表示、サービスアイコン、区切り線、利用の流れの配置は、対象範囲を限定したレビュー結果として採用されています。
この記録はUI判断の受け入れを示すものであり、相談件数、売上、来店数などの事業成果を示すものではありません。
自動同期と手動運用の境界を明示
Calendarの予定追加・更新をCMSへ反映する処理はありますが、Calendar側で削除した予定をCMSへ自動反映する運用は別途確認が必要です。
本番のCalendar、GAS、microCMS、PHP APIが現在稼働しているかは未確認のため、Sanityでは実装済みの構成と現在の運用実績を分けて記録しています。
公開権利・時限情報・改善項目を登録内容から分離
制作年、制作期間、個人担当、現在の公開状態、同期の継続稼働、来店・出店・相談成果は確認できていないため断定していません。
車両、料理、人物、ロゴ、動画の二次利用権、実在する営業予定、会場、住所、連絡先、料金、契約条件、秘密設定は登録対象外です。動きの低減、検索ラベル、モーダルのフォーカス管理、固有機能の追加テストは継続改善項目として扱います。



