日替わりメニューやおすすめ商品が毎日入れ替わる飲食店に向けて、メニュー表のCSVから掲示用の画像を自動生成するWebツールを開発しました。
クライアント / プロジェクト概要
複数店舗を運営する飲食業の企業様です。日替わりメニューやおすすめ商品が毎日入れ替わり、昼・夜の営業帯でも内容が変わるため、店頭サイネージやSNSに出すメニュー画像を毎日・時間帯ごとに作り直す必要がありました。従来は担当者が画像編集ソフトで、背景・商品写真・キャンペーンバナーを毎回組み直していました。
課題
- メニュー画像の作成が毎日の手作業で、1日あたり複数枚×複数店舗分の画像編集が発生していた
- 日替わりの品数が日によって大きく変わり（数品の日も20品を超える日もある）、同じレイアウトでは対応できなかった
- 商品写真の入れ忘れやメニュー表の表記ゆれによる作り直しが頻発し、更新が営業開始に間に合わないことがあった
ご提案・アプローチ
「現場のオペレーションを変えずに導入できること」を最優先に、普段メニュー管理に使っているスプレッドシートをCSVのままアップロードすれば完成画像が出る、というワンステップのツールを提案しました。CSVの作り直しやフォーマット統一をお願いするのではなく、表記ゆれを吸収するのはツール側の仕事と位置づけています。
制作のポイント
- 現場のCSVをそのまま読めるパーサー。 列名のゆれ、日本語の日付表記、全角半角の混在、「売切」「本日休み」のような提供しない品の各種表記まで自動で吸収します
- 品数に応じてレイアウトが自動で変わる設計。 掲載する品数の段階ごとに列数・カード幅・文字サイズを切り替え、規定の品数を超えた日は自動でページ分割。何品並んでも1枚絵が崩れません
- プレビューと出力画像を同じ画面部品で描画。 「見た目と出力がズレない」ことを構造で保証し、出力はヘッドレスブラウザで1920×1080のJPGに焼き込みます
- 事故を防ぐフェイルセーフ。 商品写真が1枚でも見つからない場合は生成を中断し、確認すべきファイルの一覧と対処手順を表示。壊れた画像のまま店頭に出ることを防ぎます
制作の流れ
- ヒアリング：実際のメニュー表CSVと掲示画像のサンプルをもとに要件を整理
- 設計：品数別レイアウトのパターン設計と、店舗・バナー情報のデータベース設計
- 制作：約2ヶ月で開発し、実データでの検証を繰り返しながら調整
- 納品・運用：2店舗目の追加にも設定とデータ登録のみで対応。商品マスタやバナーの更新にも伴走
成果
- 毎日の画像編集作業が「CSVを選んで数クリック」に短縮されました
- 「おすすめ枠は最低◯品分を確保する」といった暗黙の運用ルールがツールに組み込まれ、誰が作っても同じ品質の掲示物になりました
- 出力形式は店頭サイネージ機材との互換性を現場フィードバックで調整し、本番運用に定着しています