席順を自動で決めるHTMLツールをAIとつくってみた｜座席表｜飲み会幹事｜Claude Code

飲み会の席決め、毎回けっこう大変じゃないですか。

「AさんとBさんは仲がよくないから離してほしい」「新入社員は役員の近くに」「Cさんは耳が遠いから端の席は避けて」——そういうオーダーが、声をかけるたびに増えていきます。

Excelに名前を並べて、条件を付箋に書き出して、また並べ直して。気づいたら2時間が経っていた、みたいなことになりがちです。

そのしんどさをもう少し楽にするために、HTMLツールをつくりました。

🪑 SeatPlanner とは

SeatPlanner は、飲み会や歓送迎会などの席順を自動で組み立てるブラウザアプリです。HTMLファイル1枚で動くので、インストールは不要です。ダブルクリックするだけで開きます。

データはブラウザに自動保存されます。途中で閉じても、次回そのまま続きから再開できます。インターネットにもつながっていません。

Claude Code と一緒につくりました

コードはほぼ Claude Code に書いてもらっています。「こういう機能がほしい」と伝えると、だいたい動くものができてきます。自分で書いたのはほとんどないと思います。たぶん。

📋 5つのステップで席順が決まります

画面の上にステップが並んでいます。左から順番に進めるだけです。

ステップ 1｜レイアウト

最初に、会場のテーブルと席をキャンバスに並べます。

テーブルの種類は4つあります。長方形、円卓、カウンター、単独席です。追加するとキャンバスに置かれるので、あとはドラッグで動かすだけです。回転もリサイズも、選択したときに出るハンドルをドラッグするだけで済みます。

会場の見取り図を背景画像として読み込むこともできます。それに合わせてテーブルを置いていくと、実際の会場に近いレイアウトができます。

最初に席を並べるのが少し手間といえば手間なのですが、一度つくっておくと次回もそのまま使い回せます。

席の重みを設定する

席をクリックすると、その席に −10〜+10 の「重み」を設定できます。プラスが「賑やかな席」、マイナスが「落ち着いた席」のイメージです。

この重みは、名簿で設定する「属性」と連動します。アクティブな人はプラスの席へ、非アクティブな人はマイナスの席へ、自動配置のときに引き寄せられるようになります。

「上座はベテラン、下座は若手」のような配慮を、細かく刻みたいときに使えます。使わなくても動くので、最初はスキップしてもかまいません。

ステップ 2｜名簿

参加者の情報を入力します。名前のほかに、グループ・固定席・近づけたい人・離したい人などを設定できます。

入力できる項目をまとめておきます。

大グループ / 中グループ / 小グループ

部署・チームなど、階層で分けたいまとまりを自由に定義できます。空欄でも構いません。

固定位置

「この人は必ずこの席に」という場合に指定します。役員席や司会席など、動かせない席がある場合に使います。

属性

アクティブ（賑やかな席が好き）/ 非アクティブ（落ち着いた席が好き）/ どこでもいい、の3つから選べます。

近い人

隣にしたい人をフルネームで指定します。片方向だけの指定でも機能します。

離したい人

同じテーブルにしたくない人を指定します。

CSV で一括インポートもできます。既存の参加者リストがあれば、そのまま流し込めます。テンプレートのダウンロードボタンもあるので、フォーマットを確認しながら用意できます。

「近い人」の指定は片方向だけでも機能します。両方から入力しなくても、なるべく近づける動きをします。このあたりは試してみると感覚がつかめると思います。

ステップ 3｜自動配置

「おすすめ配置を作る」ボタンを押すと、入力した希望をなるべく満たす席順を自動で計算します。

結果が出たあと、右側のパネルでスコアの内訳が確認できます。「近い人の達成率が低い」「グループの分散がうまくいっていない」など、どこが効いていてどこが弱いかを把握できます。

スライダーで重視度を調整することもできます。「とにかく近い人優先」「グループをバラけさせることを優先」など、優先順位を変えて「もう一度試す」で再計算できます。

探索回数のデフォルトは6000回です。30〜40名規模であれば数秒で終わります。「何回が正解？」と聞かれると、正直まだよくわかっていません。6000でだいたい問題ない、くらいの肌感です。

ステップ 4｜レビュー

配置結果を座席図で確認します。テーブルに名前が入った状態で全体を見渡せます。

席をクリックすると、その人の「叶えられた希望」と「叶えられなかった希望」が右のパネルに表示されます。どうしても条件が競合してしまう場合は、席をドラッグして手動で入れ替えることができます。

全体の達成状況は「満たした / 部分的 / 未達」の3段階で集計されます。条件が複雑になるほど、全員が「満たした」になることは難しくなります。どこかで折り合いをつける感じになります。

ステップ 5｜書き出し

座席表ができたら、あとはファイルに書き出すだけです。形式はいくつか選べます。

PowerPoint（.pptx）

16:9スライドで書き出されます。1枚目が全体図、続いてテーブル別のスライドが並びます。図形とテキストボックスで構成されているので、PowerPoint上でそのまま編集できます。

CSV（座席表）

誰がどの席かを1行1名で出力します。Excelで加工したい場合に。

CSV（テーブル別）

テーブルごとにメンバーをまとめて出力します。受付や進行管理に使いやすい形式です。

PNG

座席図をそのまま画像化します。印刷したいときや、社内チャットで共有するときに。

JSON

プロジェクトを丸ごと保存します。別の PC に持ち越したり、次回また続きから編集したりするときに使います。

PowerPoint で書き出したファイルは図形とテキストボックスで構成されています。名前の修正や色の変更がそのままできるので、「ここだけ直したい」というときに、わりと助かります。

🏠 こんな場面で使えます

テーブルの形や並べ方は自由なので、会場に合わせていろいろ組めます。

居酒屋（長方形テーブル複数）

会社の飲み会・歓送迎会・忘年会・新年会など、オーソドックスな宴会場に。

ホテル（円卓複数）

結婚式二次会・周年パーティ・社員総会など、円卓メインの会場に。

会議（ロの字）

キックオフ・ワークショップ・役員会など、全員が向き合う形式に。

セミナー（スクール形式）

研修・勉強会・受講者の配席など、前を向いて座る場面に。

複合（円卓＋長方形＋カウンター）

立食混じりのカジュアルパーティや、会場の形が複雑な場合に。

会場の見取り図を背景に読み込んで、そのままなぞるようにテーブルを置くこともできます。最初に少し手間がかかりますが、一度つくってしまえば次回もそのまま使えます。

📝 使うときに知っておいてほしいこと

• 動作環境は PC のブラウザ（Chrome / Edge / Firefox / Safari）です。スマートフォンには対応していません

• データはブラウザのローカルストレージに保存されます。ブラウザのデータ消去を行うと消えてしまいます。長期間保存したい場合は JSON で書き出しておいてください

• 商用・社内利用はご自由にどうぞ。再配布・転売はご遠慮ください

席決めが、少しだけ軽くなれば。

※ ここから先に HTML ファイルを添付しています。