
理想の座席表ジェネレーターを作る
好きなアニメ・漫画・ゲーム・アイドルグループ・俳優陣etc…。
何かしらのキャラクターや実在の人物、はたまた架空の存在等で座席表を作成した過去は皆さんにありますでしょうか。
イメージが湧かない方に説明しますと、例えば一つの学級の座席表。
自分が好きなキャラクター等を年齢・立場問わず学生と見做し、同じクラスの同級生と扱い、時には自分自身を織り交ぜ任意の席に配置する事で周囲の座席のキャラクターとの関係性、学生としての生活態度等を想像し、よりコンテンツの解像度を深めたり結果を友達と共有して盛り上がれたりする行為の事です。

キャラクターの名前が分からなくても、なんとなく雰囲気は伝わるでしょうか。
上記画像はPhotoShopにて手動で作成しておりますが、如何せん手間がかかる。人数分の座席を用意しなきゃいけないし、一つ一つ名前を記入していかなきゃなりません。
クラス以外の配置を考える際は、また一からレイアウトを組み直したり…。
そんな手間を省く為、理想の座席表ジェネレーターを作成してみました。
WEBツールとして作成してるので、当然この記事をご覧の皆様もお使い頂けます。この記事の最後にリンクを貼っているので、是非遊んでみてネ!
(スマートフォン対応しておりませんので、PCでの使用を推奨しております)
設計
さて、理想といってもどう作ろうか。
とりあえず必要な機能をざっとまとめてみます。
ドラッグ&ドロップで任意の席と入れ替え可能
座席に直接名前を入力できる
入力したテキストに色をつけたい
直接名前を入力する他に、手間を省くため一括入力機能も実装
座席以外の要素(教室の場合、教卓など)も欲しい
上記要素にも汎用性があるとレイアウト設計の幅が広がる
作成した座席表を画像として保存可能
席の数、列も任意に設定可能
どんな座席表か分かるようにタイトルも入力できるようにしたい
特定の座席を非表示にする事も出来る
入力したテキストをリセット可能
……こんな感じでしょうか。
では、実際に作ってみましょう。
〜Now Loading〜

「げんこつ」みたいなとんかつ屋さんをご覧ください。
(とん膳というお店です。皆さんも足を運んでみてください)
〜Now Loading〜
実装
という訳で完成しました。

その名も「ざせきくん」です。
使い所の分からないレゴブロックみたいな見た目をしていますが、我ながら秀逸なツールが完成したと思っています。
使い方
さて、ではこのざせきくんを実際に使ってみましょう。
百読は一見にしかず。
まずは下記動画をご覧ください。
なんとなく大乱闘スマッシュブラザーズのキャラクター達で例を作ってみましたが、こんな感じで座席に入力・色付け・並べ替え、席・列数の設定、周辺環境の設定などが出来るようになってます。
動画では色を変える際に何も表示されてませんが、ブラウザ上では色を変更するカラーピッカーが表示されています。
これを応用すれば色々楽しめるんじゃないかと。
ちなみに、動画ではポチポチ入力していきましたが、
それが面倒な方には一括入力という方法もあります。

上記は予め書いていたキャラ一覧をコピペしてましたが、
勿論1行ずつ書いていっても問題ありません。
折角なんで、スマブラのキャラで遊んでみましょう。
(スマブラを存じない方はごめんなさい……面白いので遊んでみてください)
ケースその① 教室編
さて、まずはオーソドックスな遊び方です。
結果から報告すると、このような形になりました。

各キャラクターの配置について説明しておくと、
まずヨッシー、カービィ、プリン。こいつらは飲み込む、吸い込む、寝る。
寝る奴は担任の目が届くところに置いておきたいし、飲み込む奴と吸い込む奴が後ろの席だと被害者が出ます。
担任がマスターハンドですが、この方は飲み込めないし吸い込めないので安心です。
よって、一番前の席に置くのが無難でしょう。
では何故プリンの右隣がリンクなのかというと、位置的に教室の入り口なのでいきなり暴漢が教室に入ってきた際、すかさず↑Bで「シェアアアアアア!!!」してくれます。
相手の出方が分からない以上、リーチを持った範囲攻撃は有効ですしね。
しかし、そこで巻き添えを喰らうのが左・左後ろ、真後ろの席。
なので比較的耐久力の高そうなファルコンとドンキーをそれぞれ配置してます。あとプリンが寝てたら起こせる。
じゃあ後方の入り口から暴漢がやってきた時ルイージは対応できるかというと、多分怯えて縮こまるでしょう。なんかその姿が見たいからこの席に座らせました。前の席がドンキー、ファルコンなのもミソです。身長が高いので黒板が見辛い。そこでまたルイージが困る。
しかし、そこで左からフォローをかますのがフォックスです。
なんか遊撃隊の隊長だし、面倒みてくれるんじゃないすかね。
フォックス越しに心配そうに顔を覗かせるのがサムス。
彼と彼女が側にいるなら安心しますね。
ネスはなんか主人公っぽいから窓際に配置しました。
主人公が席は窓際と相場が決まっています。
窓の外を見つめながらポーラ・ジェフ・プーのこととか
考えてて欲しいな。
同じ理由でマリオも窓際です。
マリオの右隣がピカチュウですが、正直ピカチュウも窓際にしようかと迷いました。避難訓練の時、真っ先に窓から電光石火で逃げていって欲しい。
しかしマリオは任天堂の一番大きな顔だし、やはりメインとしての華を持たせたいのでこの位置になりました。
……こんな感じですかね。
我ながら非常に使いやすく、楽しめるツールができたと思います。
では、レイアウトを組み替えて遊んでみましょう。
ケースその② バス編
長方形の入力欄についてはそれぞれ上下左右に動かせるので、
例えばこんなレイアウトも可能です。

上部の長方形を右に寄せ運転席にし、
五列の真ん中を非表示にする事でバスの座席表にしました。
初期メンバーだと席数が少なく感じたので、
スマブラDXから数名呼んでおります。
運転手は勿論キャプテン・ファルコン。
何故かさっきまで生徒だった奴が運転手をしてますが、
それもこの遊びの醍醐味。
クッパとガノンドロフの隣に誰も座りたがらないのが
魔王たる所以を物語っていますね。
ピーチとデイジーは恋バナとかしててほしいな。
こういうレイアウトだと、
乗り物酔いしやすそう、隣に座りたがらなさそう、
窓際で景色を見るのを楽しんでそうなど、
教室の座席に配置するのとはまた違った視点で楽しめます。
ケースその③ マンション編
ざせきくんは「理想の座席表ジェネレーター」と銘打ってますが、
アレンジや考え方によっては座席以外にも応用できます。

左の長方形を下部に配置し入り口と見做し、
5×5で作成する事でマンションとしても扱えます。
今まで俯瞰視点だったものが急に横から目線になりましたね。
ドンキーが↓Bでドンドコしてるのに耐えられなくなったフォックスが
↑Bで「ファイヤー!!」としてる様が目に浮かびますね。
ガノンドロフがすぐ下のゼルダを常に狙ってますが、リンクは間に合うのでしょうか。
ここでよく見て欲しいのですが、
アイスクライマーとMr.ゲーム&ウォッチが
文字数の関係でI.C.とMr.G&Wと表記しています。
入力欄の幅の関係でどうしても7文字しか入力できず、
表記にも工夫が必要なのはご容赦ください。
また、列数も最大6列までとなっております。
しかし、制限の中にこそ工夫が生まれるので
そこも含めて楽しんで頂ければ。
ケースその④ 握手会編

最早座席もクソもありませんが、
こんな事もできます。
どうやらピーチ姫がアイドルとなって握手会イベントを開催したようです。
彼女の前に行列が出来てますね。
ロイは思春期特有のアイドルへの憧れなのでしょうか。
マリオがいるのはさておき、なんでガノンドロフがいるんでしょうね。
ゼルダと勘違いしてる?
あと、カービィが並んでるのも不可解です。
ピーチが引っこ抜くカブを求めているのでしょうか。
炊き出しと勘違いしてる?
最後に
さて、四つのケースを紹介しましたが、
人の可能性は無限大。
上記以外にも様々な配置の仕方を見つけて是非楽しんでみてください。
余談ですが、画像をX(Twitter)でシェア出来るように
しようとも考えた所、その機能を実装するには
API(Twitterが提供してるTwitter機能の一部みたいなもの)の
実装が必要らしく、最近の仕様変更が続く状況では
いつ使えなくなるのか分からないのでやめときました。
保存した画像を手動でアップロードして楽しんでみてね!
それでは。
↓ざせきくんのリンクはこちらから↓
https://zaseki-kun.net/
※ロゴに使用しているフォントは
ふぉんとな様作のラノベPOPフォントというフリーフォントです。
ここにクレジットを残させて頂きます。