「文章でうまく伝える事が難しいのですが…」
ある温泉ホテルさんから、こんな書き出しでお問い合わせをいただいたのが、このプロジェクトの始まりでした。
実際にいただいた相談は、こんな内容でした。
ご宿泊者のご夕食会場は複数ありますが、レストラン食事会場の場合。 エクセルで作成したレストランのレイアウトがあり、割り振りたい卓にお客様の情報を打ち込みます（又は手書き）。 レストラン卓も約30卓程あり、他の会場も合わせると50卓程になります。
宿泊客の情報は、ホテル基幹システム（PMS）から毎朝CSVで吐き出される。それを担当スタッフが、Excel上に作られた「卓番表」のテンプレートに、ひとつひとつ手入力していく。
紙に手書きする日もある。
レストランスタッフはPCスキルがあまり高くない方も多く、業務が属人化してしまう ── そんな現場の課題でした。
「もっと誰でも簡単に操作できれば」というご要望に対して、まず動くHTMLモックを作ってお見せすることにしました。今回は、その制作過程と完成したアプリの中身をご紹介します。
課題：紙とExcelの限界
頂いた現場の情報を整理すると、こんな構造でした。
毎朝の流れ
PMSから当日宿泊客のCSVを出力
「夕食を取るお客様」だけを目で選別
各お客様情報を、Excelの卓レイアウトに手入力（または手書き）
アレルギー・記念日・同席希望などの特記事項を備考欄に追記
厨房・ホールに共有
地味につらいポイント
30卓×複数会場で、人が動く前提の運用
5名以上のお客様が来ると、卓を物理的に動かして「結合」する。Excel側も都度書き換え
「卓3と卓4で6名まで」のような会場固有のルールが頭の中にだけある
アレルギー情報の見落としが事故につながる
スタッフ間の引き継ぎが口頭頼り
ヒアリングで一番印象的だったのは、「できる人にしかできない仕事になっている」という言葉でした。
アプリのコンセプト：1画面で完結する卓割ボード
提案したのは卓を割り当てするシンプルなWebアプリです。
コア体験
顧客カードをマウスで掴んで、卓にドロップする。それだけ。
特別な操作も、学習コストの高い画面遷移もない。Excelで「Ctrl+C → Ctrl+V」を覚えるのと同じくらいの直感性を目指しました。
メイン画面は3ペイン構成。
左に「まだ卓が決まっていないお客様一覧」、中央に「実物に近い卓レイアウト」、右に「大広間（席自由）」。これが1画面に収まっています。
機能ハイライト
1. ドラッグ&ドロップでの卓割
顧客カードを掴んで、行きたい卓にドロップ。それだけで配席完了。
「Excelっぽく文字を選択してコピーする」より、「物理的なテーブルに人を案内する」イメージに近いので、現場スタッフの直感と合致します。
2. 定員オーバーは自動で弾く
4名定員の卓に5名の組をドロップしようとすると、卓が赤くなり、配席が拒否されます。
「定員4名を超えるため割り当てできません（4名 + 5名）」
人為的ミスを物理的に起こせないUIにする ── ホスピタリティ業界では特に効きます。
3. 縦・横どちらも結合できる卓
「卓を物理的に動かして結合する」運用を、UIに落とし込みました。
編集モードに入って、隣接する2卓をクリックで選択 → 結合確認 → ひとつの大きな卓ができあがる。横方向（左右の卓を並べる）も縦方向（上下の卓を並べる）も両方対応しています。
結合後の卓は1つの「大定員のテーブル」として扱えるので、5〜8名のグループも一発で配席できます。
「卓3・4で6名まで」のような会場固有ルールも、卓側面にメモとして残してあります。
4. 大広間（席自由会場）
団体客が入る大広間は、レストランと違って席が決まりません。「誰が大広間にいるか」のリストさえあればOK、という会場です。
なので大広間ペインは、定員チェックなしのリスト表示。お客様カードをドロップすると名簿に追加されます。
レストランと大広間が1画面で同時に見えるので、「今日の全体像」が一目で把握できます。
5. 顧客情報の見やすさ
CSVから取り込んだ宿泊客データは、こんな粒度でカードに展開されます。
部屋番号 と 顧客名
大人料理（大人+子供A） と 子供料理（子供B） を分けて表示 ※宿泊客の人数構成をホテル業界の料理区分に揃えています
料理プラン（STD / グレードアップ / 滞在料理）
アレルギー は赤バッジで強調 ⚠
同席希望（「R506様と同席」など）は青バッジで明示
記念日・車椅子・配膳順指定などの特記事項
スタッフが見落とすと事故になる情報を、目立つ位置に配置しました。
7. CSV毎朝アップロード
「毎朝CSVをドロップするだけ」の運用フロー。
朝、PMSからCSVを出力
卓割アプリのCSV取込画面にドラッグ&ドロップ
自動的に「夕食対象（料理プランがSTD/グレードアップ/滞在料理）」のみを抽出
朝食付き・素泊りなどは除外
「大人+子供A=大人料理」「子供B=子供料理」の換算も自動
将来的にPMS APIと直接連携することも可能ですが、最初はこの手軽さを優先しました。
デザインで意識したこと
温泉ホテルらしさを残しつつ、現場で長時間使っても疲れない配色にしました。
ベース: 和紙のような温かいクリーム色
主役カラー: 深い緑（落ち着いた料亭の照明をイメージ）
アクセント: 琥珀色（結合卓・特別対応の強調に）
卓番号のフォント: 明朝体（紙の卓番表の文化を残す）
「アプリっぽさ」を出しすぎないことを心がけました。50代60代のスタッフが初日から触れることを優先しています。
操作性の面では、
ボタンの最小タップ領域を 48px 以上に
フォントは最低 14px
ドラッグ中のフィードバックを「色」「枠」「カーソル」の3つで表現
タブレットを共有端末として使うことも想定して、デスクトップ・タブレット両方の幅に対応しました。
まとめ
今回のアプリは、完全にお客様固有の業務、固有の卓のレイアウトに合わせて作り上げたシステムです。
数年前とは異なり、今は中小企業でも自分たち固有の、専用システムを低コストで作れる時代です。
似たような課題感をお持ちの旅館・ホテル・飲食業の方、コストを抑えつつも「どのように業務改善したら良いか」の分析・提案からさせていただきますので、よろしければお声がけください。