Remoではご自身で作成したカスタムフロアプランを適用できます。
カスタムフロアプランの追加オプションをご購入いただくことでカスタムしたフロアプランをアップロードすることが可能となります。
アップロードがご希望の場合はお問い合わせください。
問い合わせ先：jpsuccess@remo.co
※アップロードのプロセスにはお時間を要する場合がございます。必要なお日にちから十分余裕をもってお問い合わせください。（土日祝日を除く営業日のみ対応可）
こちらの記事ではデザイン初心者から上級者まで、役立つ情報を紹介しています。
カスタムフロアプランのデザイン例こちらでも紹介しています。
目次
カスタムフロアプランの作成の前に
フロアの構成
カスタムフロアプランのアップロード
デザインソフトウェア
はじめに、使い慣れたデザインソフトをご利用ください。SVG形式でエクスポートできるものであれば、どのツールをお使い頂いても構いません。
デザイン経験がなくどのソフトがいいのか分からない、という方は、カスタムフロアプラン作成に使えるオススメのソフトを簡単にまとめたページがありますので、そちらをご覧ください。
オススメソフト一覧
カスタムフロアプランのデザインをする場合、Adobe Illustratorまたは最新版のSketchをおすすめしています。これらのソフトを利用したカスタムフロアプラン作成のチュートリアルビデオは以下のリンクからご覧になれます。
Adobe イラストレーターを使ったカスタムフロアプラン作成のチュートリアルビデオはコチラ
スケッチを使ったカスタムフロアプラン作成のチュートリアルビデオはコチラ
フロアプランの内訳
ここで、Remoのフロアマップを構成する様々な要素を簡単に説明します。
フロアをデザインする際は、これらの各要素を別の「レイヤー」にし、Remoのシステム上で認識するために、各レイヤーには特定の名前を設定する必要があります。
重要なポイント
デザインを始める前に知っておくべき重要なポイントをいくつかご紹介します。
- こちらからカスタムフロアプラン作成の際によくあるご質問をご確認ください。
- ファイルの最大サイズは4MBです。これは、イベントスペースに最初に入るときのあなた自身、スピーカー、およびゲストの読み込み時間に大きく影響を与えないファイルサイズとなります。
- デザインをする際にファイルサイズを小さくするための役立つヒントをご紹介します。
- マップの構成要素が多いとファイルサイズが大きくなり、ロード時間が長くなりますので、不要な要素はカットしてください。
- フロアプランに追加する前に、画像圧縮機を使用して、様々なデザイン要素（例えばテーブルの上の食品など）のファイルサイズを最小化してください。
- 要素をデザインする際は、不要なパスのポイントを減らしてください。
- SVGファイルを最適化するための他の方法についてはこちらの記事をご覧ください。
- イベントの7日前までにカスタムフロアプランを提出してください。それ以降に提出された場合は、イベントにお客様のフロアプランが適用されることを保証することはできません。
- 各ステップで、SVG形式でデザインをエクスポートし、 カスタムフロアプランバリデータにアップロードし、その要素が正しく作成されているかどうかを確認してください。
- 選択したフロアプランは全てのフロアに適用されます。そのため、フロア1やフロア2などは全て同じフロアプランが表示されます。
テンプレート
カスタムフロアプランをデザインするのが初めての方、どうデザインすれば良いのか分からない方は、こちらのテンプレートをお使いください。下記のいずれかをダウンロードして、そこから作業してみてください。（デザインする時間がない、またはデフォルトのものからあまり多くの変更を必要としない方にもオススメです）
サンプル：6席、4スポンサーバナー SVGファイル
サンプル：6席、スポンサーバナーなし SVGファイル
サンプル：6席、4スポンサーバナー AIファイル
サンプル：6席、6スポンサーバナー AIファイル
サンプル：６席、スポンサーバナー なしAIファイル
他にも色々なテンプレートをこちらからご覧いただけます。
マップ背景
まず、最初にデザインしたいのはマップの背景です。こちらはデフォルトのフロアプランの木や茂みがある緑の長方形です。
マップの背景にイベントの機能的な要素は含まれていないことを確認してください。背景はイベント会場の良い雰囲気作りになります。例えば、宇宙や天体ファンが集うイベントを主催している場合、会場が宇宙のように見えるマップ背景をデザインすることができます。
マップの背景をデザインする際には、以下の点に注意してください。
- 長方形でなければなりません。
- 長方形の画像でも構いません。（⚠️ 画像を背景にする場合は著作権などをご確認ください。）
画像を使用する場合、ファイルサイズをできるだけ小さくするために、デザインファイルに追加する前に画像を圧縮してみてください。こちらからオススメの画像圧縮ソフトのウェブサイトをご覧いただけます。マップ背景が作成できたら、すべての要素を1つのレイヤーにグループ化する必要があります。このレイヤー名を "map-background"とします。
会話エリア
会話エリアはゲストがイベントスペースに入室した際に見えるものとなります。そのため、ゲストに見せたいものは全て会話エリア内に設置してください。
例えば以下の画像の場合、全てのテーブル、座席、看板、スタッフルーム、スポンサー、フロアが会話エリア内に設置されており、ゲストに見えるものとなっております。
会話エリアも長方形である必要があります。サイズは自由に変更できますが、ここで注意して頂きたいことが、アスペクト比を16:10にすることです。こちらのサイトでは、サイズがこの比率に適合しているかを確かめられる計算機があります。Remoの推奨サイズは2060 x 1200ピクセルです。 このエリアは、ゲストのブラウザ表示に合わせてズームされます。
上記が完了したら、会話エリアのみを含んだレイヤーを作成します。このレイヤー名は"conference-area"とします。
CHECKPOINT 1: 下記の画像のように、"map-background" と"conference-area"の2つのレイヤーを用意しましょう。"conference area"レイヤーには会話エリア用の長方形が含まれている必要が悪ります。
テーブル、バナー、看板などに追加したい要素（例：フロアや壁）がある場合は、この時点で追加しましょう。1. テーブル（部屋）
テーブルは、ゲストが他のゲストとプライベートな会話をすることができるエリアです。あなたのフロアプランでは、各テーブルはそれぞれ別のレイヤーにします。
まず、テーブルエリアをデザインします。（テーブルをデザインする際は座席のことを考えなくて大丈夫です）
下記でいくつか例をご紹介します。
 |  |
こちらの "テーブル"（または部屋）にはラグ、丸いテーブルがあり、テーブルの上にはパソコン、タブレット、マグカップがあります。 自分だけのテーブルをデザインできます。 | テーブルをバーに見立てて、色々な料理が並んでいるようにデザインできます。 |
テーブルのデザインが完了したら、すべての要素をグループ化してレイヤーを作成します。
このレイヤーの名前は"table-あなたのテーブル名"とします。レイヤー名は、テーブルを識別するために使用されるので、そのテーブル独自の名前でなければなりません。例えば、テーブルをLounge 1としたい場合、そのテーブルのレイヤーを “table-Lounge 1”とします。もし雨の日（Rainy days)というテーブル名の場合、そのテーブルレイヤーに “table-Rainy days”という名前にします。
テーブルやラグ、その他要素のイメージを部屋に入れたくない場合でも、テーブル用のレイヤーを作成する必要があります。テーブルや部屋の大きさに合わせて見えない（透明の）長方形を作成し、その長方形からレイヤーを作成し、上記と同じように名前を付けます。テーブルのデザインを全て同じにしたい場合は、テーブルレイヤーをコピーして貼り付けてください。ただし、テーブルレイヤーの名前はテーブルごとに変更してください。
テーブルをデザインする際に注意すべき点がいくつかあります。
- テーブルはどのようなサイズであっても構いませんが、それらはすべてConferenceエリア内に収まっている必要があります。
- ゲストがイベントスペースに入室した際にテーブルを見えるようにしたい場合、先に作成した"conference-area"の長方形内に配置してください。
- すべてのテーブルレイヤーの名前は独自のものでなければなりません。（例えば、すべての部屋（テーブル）をLoungeと呼びたい場合は、各レイヤーに"table-Lounge 1" "table-Lounge 2"などの名前を付ける必要があります。）
- すべてのテーブルレイヤー名は英語でなければなりません。
- 座席、ホスト席、テーブル名などの他のすべての要素はこのレイヤーの下に配置します。
参加するゲストをイベント会場内のテーブル・座席に着席させるアルゴリズムは「ランダム」となります。できる限り、ゲストが1人にならないよう設計されています。詳細については、お伝えしておりませんので、予めご了承ください。
「座席の割当」機能について：一部の上位プランでは、事前にゲストの座席を指定する機能もございます。詳しくはこちらのガイド記事をご確認ください。【任意】Clickable-Area (クリック可能なエリアの作成）
こちらの方法はAdobe Illustratorを使用している場合のみ可能です。こちらのレイヤーは他のソフトウェアでは認識されませんので、ご注意ください。こちらのレイヤーは立体的なフロアプランにのみ追加可能です。立体的なフロアプランのデザインでテーブル同士が近い距離で配置されている場合、こちらのレイヤーを追加してください。このレイヤーを追加すると、以下の画像のようにテーブルエリアをカスタマイズできます。
立体的なフロアプランのSVGファイルはこちらからダウンロードできます。
このレイヤーを追加する場合、はじめに多角形 [多角形ツール]を追加・ダブルクリックし、テーブルエリアに合うように形を編集してください。
追加した形の名前を"clickable-area"に変更し、テーブルレイヤーの下に追加してください。
例：
ご注意：テーブルレイヤーにはパスではなく多角形を追加する必要がございます。
上記の手順で、クリック可能なエリアを他のテーブルエリアレイヤーに追加していきます。
2. テーブル名
テーブル名を設定することでゲストがイベントスペースを移動しやすくなります。
これらのテーブル名は、イベント内でゲストに見える部分で、先ほどのテーブルレイヤーの名前とは異なります。こちらのテーブル名に関しては、イベントホストであればイベント中でも名前の編集ができます。テーブル名を追加するには、テキスト要素を挿入し、テーブル名を書き込んでください。現在対応しているフォントはMyriad Proのみで、最大フォントサイズは25です。
別のフォントを使用した場合、フロアプランがアップロードされると自動的にMyriad Proに変更されます。テキスト要素を任意の位置に配置してください。
テーブル名は、自動的に各テーブルレイヤーの中央に配置されますのでご注意ください。テーブル名をテーブルの左側または右側に配置する方法はありません。このテーブル名用にレイヤーを作成し、レイヤー名を “name”とします。このレイヤーは、各テーブルレイヤーの下に配置します。以下の例をご参考ください。
このプロセスを繰り返し、名前を付けたいすべてのテーブルにテーブル名を追加します。その際、追加する各テーブルレイヤーを間違えないようご注意ください。
立体的なフロアプランをデザインしており、なおかつ上記の"clickable-area"レイヤーを追加した場合、斜めにデザインされたテーブル名レイヤーを追加できます。
1. 上記の手順に記載された手順でテーブル名レイヤーを追加し、テーブルの形に合うように斜めにします
2. 線を引いてパスにし、テーブル名の下に配置します
3. エレメント名を"text-path-name"と改めます
4. パスを透明にし、テーブルレイヤー内に配置します
ご注意：斜めになったテーブル名レイヤーは、上記の「clickable-area」エレメントを作成した場合のみ追加可能です。
3. 座席
座席は、ゲストがテーブル（部屋）に入った時に「座る」場所です。形や大きさは問いませんが、アバターは直径55pxの円なので、サイズはこのサイズに近いものにしてください。
カスタムフロアプランにあった座席の例をいくつかご紹介します。
 |  |  |
| ソファ | 丸い椅子 | ビーチチェア |
座席が作成できたら、各座席を構成するすべての要素をグループ化してレイヤーを作成します。このレイヤーの名前を“seat”とします。下記は座席のレイヤーの例です。
オススメの方法として、その座席が属するテーブル番号と座席番号を追加することもできます。例えば、table 1の最初の席の場合、対応するseatレイヤーを“seat-1-1”とします。
座席レイヤーがそれぞれのテーブルレイヤーに追加されていることを確認してください。たとえば、「Lounge 1」のテーブルの座席を作成する場合、前のステップで作成した“table-Lounge 1”レイヤーに座席レイヤーを追加する必要があります。
同じ座席デザインを続けて使用する場合は、座席レイヤーをコピーして貼り付けます。座席を作成する際には、いくつかの制限があります。
- 1テーブルあたりの最大席数は、現在ご利用のプランによって異なりますので、料金ページをご確認ください。(もちろん、その座席数以上の席を持つテーブルをデザインすることができますが、実際にテーブルに座れるゲストの数は料金ページにある通りです。)
- また、待機スペース用の1人掛けのテーブルや、よりプライベートな商談などにご利用いただける2人掛けや3人掛けのテーブルなど、最大席数以下のテーブルをデザインすることもできます。（それらをミックスすることもできるので、フロアプランでは様々なサイズのテーブルを用意することができます。）
 |  |
| 二人掛けのテーブルのみのデザイン セッションやプライベートな会話に最適！ | 2人、4人、6人掛けのテーブルが合わさった デザイン 状況に応じて好きなタイプの座席を選べます！ |
- ゲストが移動できるように、フロアプランに予備の座席を追加する必要があります。（予想されるゲスト数以上）Remoのアルゴリズムは自動的に1フロアの80%の席が埋まると、次のフロアに移動します。例えば、40人のゲストを想定していて、1つのフロアにすべてのゲストを配置したい場合、少なくとも50席（50席の80％＝40席）を設置する必要があります。
- ただし、座席数の合計は最大125席、最小で25席に設定してください。これらの座席数には参加者用の席のみ含まれており、スタッフルーム（参考：セクション5）とホスト席（参考：セクション4を参照）は含まれていません。
- 1テーブルに設定できる最大の席数は20席です。（2023年11月時点）
4. ホスト席
ホスト席とは、テーブルが満席の場合にイベントホストが使用できる追加の席のことです。
イベントホストは、ゲストが混乱しないようにこの席を「見えない（透明）」の状態にする方が多いですが、自由な設定が可能です。 見えないようにしたい場合は、円（サイズ：55px x 55px）を挿入して、塗りつぶしや枠線の色を削除します。
ホスト席を表示させたい場合は、先ほどデザインした座席レイヤーをコピー＆ペーストするか、普通の座席と同じ方法で新しくデザインしてください。
いずれにしても、ホスト席を作成したら、すべての要素をグループ化して別のレイヤーを作成します。このレイヤー名を "admin-seat"とします。このレイヤーは各テーブルレイヤーの下に配置してください。
これを、ホスト席を作成したいすべてのテーブルに対して繰り返します。
1つのテーブルにつき1席までホスト席を作成することができます。CHECKPOINT 2: 各テーブルレイヤーは "table-"で始まり、座席（"seat"で始まるレイヤー）、名前（"name"で始まるレイヤー）、ホスト席（ "admin-seat"で始まるレイヤー）を含んでいて、以下のようになっていることを確認してください。
5. スタッフルーム
スタッフルームはイベントホストと登録スピーカーのみ入ることができるため、プレゼンテーション前のイベント主催者側だけの会議などに使用できます。
スタッフルームの形や大きさは問いません。また、マップ上のどこにでも設置することができます。（ゲストにも見えるようにスタッフルームを設置する場合、会話エリア内に収めてください）
ホストやスピーカーがスタッフルームに入ることができるようにしたい場合、スタッフルーム上にも座席を追加する必要があります。これらの席は見えないようにすることもできますし（塗りつぶし・縁なし）、見えるデザインにしていただくことも可能です。どちらを選ぶにしても、各席には "seat"という名前のレイヤーが必要になります。（テーブルに座席を追加する時と同じです。）
スタッフルーム上の最大座席数は、1テーブルあたりの最大座席数と同じです。
 |  |
| 座席が見えないデザインのスタッフルーム | 座席が見えるデザインのスタッフルーム |
スタッフルームとスタッフルーム上の座席を作成したら、これらの要素をまとめて別のレイヤーを作成します。このレイヤー名を“table-stage”とします。
下記のような感じになります。
6. コンテンツバナー（旧スポンサーバナー）
コンテンツバナーは柔軟な表示が可能であり、イベントスペース内で寄付フォーム、ビデオ、座席計画などさまざまなコンテンツを表示することができます。詳細な使用方法については、こちらの記事をご参照ください。
ご利用のプランによって、フロアプランに追加できるコンテンツバナーやイベントで使用できるコンテンツバナーの最大数が決まりますので、ご利用のプランがいくつコンテンツバナーを利用可能かは別途ご確認ください。 ※追加オプション無しの場合初期では６つバナーの設置が可能です。 フロアプラン内の設定枠はそのレイアウトによります。 コンテンツバナーの追加購入については、弊社の担当者にご連絡ください。 問い合わせ先：jpsuccess@remo.co
バナーを追加するには、長方形を挿入します。（サイズは問いませんが、推奨サイズは245 x 120ピクセルです。）フロアマップ上で任意の場所にバナーを配置します。その長方形には"sponsor"という名前を付けます。もっと多くのバナーが必要な場合は、長方形をコピーして貼り付けることができますが、それを "sponsor-2"、"sponsor-3" のように名前を付けます。
バナーの作成が終わったら、すべてのバナーを選択してレイヤーを作成します。このレイヤー名を"Sponsors”とします。（各長方形に名前が付いていることを確認してください。）例として下記の画像を参考にしてください。
バナー作成に関していくつか注意点があります。
- イベント中に使用しない場合を考慮し、バナーをマップ上では見えないようにするのがベストです（塗りつぶしの色、枠線の色を削除します。）
- バナーは様々なサイズにすることができますが、形は長方形のみです。
- ゲストがイベントに参加した際にバナーが見えるようにするには、バナーを“conference-area”レイヤーにある必要があります。
CHECKPOINT 3: 以上でカスタムフロアプランの作成は終了です。以下の画像を確認し、全てのレイヤーの名前に間違いがないか、また、正しい順番に並べられているかをご確認ください。
カスタムフロアプランには"map-background"レイヤー、"conference-area"レイヤー、"table-stage"レイヤー、"table-left-billboard"レイヤー、"table-right-billboard"レイヤー、"sponsor"、そして"seat"、"admin-seat"、"name"レイヤーを含む全ての"table-"レイヤーが含まれている必要があります。
レイヤーの名前についてはこちらをご参照ください。
最後に
SVGファイルとしてフロアプランのデザインをエクスポートしてください。エクスポートの際にいくつか注意点があります。
- エクスポートをするときは、以下に示すように 'Responsive'オプションがチェックされていないことを確認してください。（ご利用されたデザインツールがこのオプションを持っている場合）
- Decimalを2に設定してください。（ご利用のデザインツールにこのオプションがある場合）
- エクスポート後、作成されたデザインが歪んでしまうことがありますので、提出前にデザイナーまたはご自身で確認してください。
デザインを検証する
デザインを検証するには
- アカウント設定のページにあるカスタムフロアプラン検証ツールにアクセスしてください。
- 「カスタムフロアプラン」のタブ内の「カスタムフロアプランをアップロードする」をクリック。
- カスタムフロアプランをSVG形式でアップロードしてください。
- エラーがあるかどうかを確認し、エラーが見つからなければ画面のスクロールを続け、エラーが見つかった場合は、デザイン作成画面に戻ってエラーを修正してください。（レイヤーの名前に関係しているエラーがよくあります。）
⚫︎イメージが表示されている右下に「詳細を確認」とあるのでそちらをクリック。
- カスタムフロアプランのイメージを確認して、すべてがイメージ通りであるかを確認してください。
- Conferenceエリアは赤色で表示されます。
- テーブル、ステージ、看板、スポンサーは灰色で表示されます。
- ホスト席は星のアイコンで表示されます。
- テーブルと座席が埋まる順番は、数字で表示されます。
