Remoではご自身で作成したカスタムフロアプランを適用できます。

(すでにカスタムフロアプランを作成しており、ご利用のアカウントにアップロードする方法をご確認したい場合はこちらの記事をご参照ください)


こちらの記事ではデザイン初心者から上級者まで、役立つ情報を紹介しています。


カスタムフロアプランのデザイン例こちらでも紹介しています。



デザインソフトウェア


はじめに、使い慣れたデザインソフトをご利用ください。SVG形式でエクスポートできるものであれば、どのツールをお使い頂いても構いません。


デザイン経験がなくどのソフトがいいのか分からない、という方は、カスタムフロアプラン作成に使えるオススメのソフトを簡単にまとめたページがありますので、そちらをご覧ください。
オススメソフト一覧


カスタムフロアプランのデザインをする場合、Adobe Illustratorまたは最新版のSketchをおすすめしています。これらのソフトを利用したカスタムフロアプラン作成のチュートリアルビデオは以下のリンクからご覧になれます。


Adobe イラストレーターを使ったカスタムフロアプラン作成のチュートリアルビデオはコチラ

スケッチを使ったカスタムフロアプラン作成のチュートリアルビデオはコチラ




フロアプランの内訳


ここで、Remoのフロアマップを構成する様々な要素を簡単に説明します。




フロアをデザインする際は、これらの各要素を別の「レイヤー」にし、Remoのシステム上で認識するために、各レイヤーには特定の名前を設定する必要があります。




重要なポイント


デザインを始める前に知っておくべき重要なポイントをいくつかご紹介します。


  • こちらからカスタムフロアプラン作成の際によくあるご質問をご確認ください。
  • 推奨ファイルサイズは1MB以下です。これは、あなた自身、スピーカー、ゲストがイベントスペースに入ったときのイベントのロード時間(画面読込・表示時間)を短縮するためです。これ以上のファイルサイズでも大きな問題は発生していませんが、よりスムーズなイベントの開催のために、ファイルサイズはできるだけ小さくしてください。
  • デザインをする際にファイルサイズを小さくするための役立つヒントをご紹介します。
  • マップの構成要素が多いとファイルサイズが大きくなり、ロード時間が長くなりますので、不要な要素はカットしてください。
  • フロアプランに追加する前に、画像圧縮機を使用して、様々なデザイン要素(例えばテーブルの上の食品など)のファイルサイズを最小化してください。
  • 要素をデザインする際は、不要なパスのポイントを減らしてください。
  • SVGファイルを最適化するための他の方法についてはこちらの記事をご覧ください
  • イベントの7日前までにカスタムフロアプランを提出してください。それ以降に提出された場合は、イベントにお客様のフロアプランが適用されることを保証することはできません
  • 各ステップで、SVG形式でデザインをエクスポートし、 カスタムフロアプランバリデータにアップロードし、その要素が正しく作成されているかどうかを確認してください。
  • 選択したフロアプランは全てのフロアに適用されます。そのため、フロア1やフロア2などは全て同じフロアプランが表示されます。


テンプレート


カスタムフロアプランをデザインするのが初めての方、どうデザインすれば良いのか分からない方は、こちらのテンプレートをお使いください。下記のいずれかをダウンロードして、そこから作業してみてください。(デザインする時間がない、またはデフォルトのものからあまり多くの変更を必要としない方にもオススメです)

サンプル:6席、4スポンサーバナー SVGファイル

サンプル:6席、6スポンサーバナー SVGファイル

サンプル:6席、スポンサーバナーなし SVGファイル

サンプル:6席、4スポンサーバナー AIファイル

サンプル:6席、6スポンサーバナー AIファイル
サンプル:6席、スポンサーバナー なしAIファイル

他にも色々なテンプレートをこちらからご覧いただけます。


マップ背景

まず、最初にデザインしたいのはマップの背景です。こちらはデフォルトのフロアプランの木や茂みがある緑の長方形です。



マップの背景にイベントの機能的な要素は含まれていないことを確認してください。背景はイベント会場の良い雰囲気作りになります。例えば、宇宙や天体ファンが集うイベントを主催している場合、会場が宇宙のように見えるマップ背景をデザインすることができます。


マップの背景をデザインする際には、以下の点に注意してください。


  • 長方形でなければなりません。
  • 長方形の画像でも構いません。(⚠️ 画像を背景にする場合は著作権などをご確認ください。)


画像を使用する場合、ファイルサイズをできるだけ小さくするために、デザインファイルに追加する前に画像を圧縮してみてください。こちらからオススメの画像圧縮ソフトのウェブサイトをご覧いただけます。


マップ背景が作成できたら、すべての要素を 1 つのレイヤーにグループ化する必要があります。このレイヤー名を "map-background"とします。



Conferenceエリア


Conferenceエリアはゲストがイベントスペースに入室した際に見えるものとなります。そのため、ゲストに見せたいものは全てConferenceエリア内に設置してください。

例えば以下の画像の場合、全てのテーブル、座席、看板、グリーンルーム、スポンサー、フロアがConferenceエリア内に設置されており、ゲストに見えるものとなっております。


Conferenceエリアも長方形である必要があります。サイズは自由に変更できますが、ここで注意して頂きたいことが、アスペクト比を16:10にすることです。こちらのサイトでは、サイズがこの比率に適合しているかを確かめられる計算機があります。Remoの推奨サイズは1903 x 1189ピクセルです。 このエリアは、ゲストのブラウザ表示に合わせてズームされます。



これが終わったら、Conferenceエリアのすべての要素を別のレイヤーにグループ化し、このレイヤー名を "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番目と2番目に入場するゲストはLounge1に、3番目と4番目のゲストは、Lounge2に配置されます。この順序を変更したい場合は、各テーブルのレイヤーの順番を変更してください。




2. テーブル名


テーブル名を設定することでゲストがイベントスペースを移動しやすくなります。


これらのテーブル名は、イベント内でゲストに見える部分で、先ほどのテーブルレイヤーの名前とは異なります。こちらのテーブル名に関しては、イベントホストであればイベント中でも名前の編集ができます。



テーブル名を追加するには、テキスト要素を挿入し、テーブル名を書き込んでください。現在対応しているフォントはMyriad Proのみで、最大フォントサイズは25です。



別のフォントを使用した場合、フロアプランがアップロードされると自動的にMyriad Proに変更されます。



テキスト要素を任意の位置に配置してください。


テーブル名は、自動的に各テーブルレイヤーの中央に配置されますのでご注意ください。テーブル名をテーブルの左側または右側に配置する方法はありません。



このテーブル名用にレイヤーを作成し、レイヤー名を nameとします。このレイヤーは、各テーブルレイヤーの下に配置します。以下の例をご参考ください。



このプロセスを繰り返し、名前を付けたいすべてのテーブルにテーブル名を追加します。その際、追加する各テーブルレイヤーを間違えないようご注意ください。






3. 座席


座席は、ゲストがテーブル(部屋)に入った時に「座る」場所です。形や大きさは問いませんが、アバターは直径55pxの円なので、サイズはこのサイズに近いものにしてください。


カスタムフロアプランにあった座席の例をいくつかご紹介します。

長方形で作成された
素敵なソファ
シンプルイズベスト!
そんな方には丸い椅子がオススメ
ビーチチェアでチルするのも良いですね!


座席が作成できたら、各座席を構成するすべての要素をグループ化してレイヤーを作成します。このレイヤーの名前をseatとします。下記は座席のレイヤーの例です。



オススメの方法として、その座席が属するテーブル番号と座席番号を追加することもできます。例えば、table 1の最初の席の場合、対応するseatレイヤーをseat-1-1とします。

 


座席レイヤーがそれぞれのテーブルレイヤーに追加されていることを確認してください。たとえば、「Lounge 1」のテーブルの座席を作成する場合、前のステップで作成した“table-Lounge 1”レイヤーに座席レイヤーを追加する必要があります。


同じ座席デザインを続けて使用する場合は、座席レイヤーをコピーして貼り付けます。


座席を作成する際には、いくつかの制限があります。


  • 1テーブルあたりの最大席数は、現在ご利用のプランによって異なりますので、料金ページをご確認ください。(もちろん、その座席数以上の席を持つテーブルをデザインすることができますが、実際にテーブルに座れるゲストの数は料金ページにある通りです。)

  • また、2人掛けや3人掛けのテーブルなど、最大席数以下のテーブルをデザインすることもできます。(それらをミックスすることもできるので、フロアプランでは様々なサイズのテーブルを用意することができます。)


二人掛けのテーブルのみのデザイン
セッションやプライベートな会話に最適!
2人、4人、6人掛けのテーブルが合わさった
デザイン

状況に応じて好きなタイプの座席を選べます!



  • ゲストが移動できるように、フロアプランに予備の座席を追加する必要があります。(予想されるゲスト数以上)Remoのアルゴリズムは自動的に1フロアの80%の席が埋まると、次のフロアに移動します。例えば、40人のゲストを想定していて、1つのフロアにすべてのゲストを配置したい場合、少なくとも50席(50席の80%=40席)を設置する必要があります。
  • ただし、座席数の合計は最大120席最小で25席に設定してください。これらの数字には予備の座席とグリーンルーム内の座席が含まれます(参考:セクション5)。なお、アドミン席は含まれません(参考:セクション4)。




4. アドミン席


アドミン席とは、テーブルが満席の場合にイベントホストが使用できる追加の席のことです。


イベントホストは、ゲストが混乱しないようにこの席を「見えない(透明)」の状態にする方が多いですが、この設定は自由です。 見えないようにしたい場合は、円(サイズ:55px x 55px)を挿入して、塗りつぶしや枠線の色を削除します。


アドミン座席を表示させたい場合は、先ほどデザインした座席レイヤーをコピー&ペーストするか、普通の座席と同じ方法で新しくデザインしてください。


いずれにしても、アドミン座席を作成したら、すべての要素をグループ化して別のレイヤーを作成します。このレイヤー名を "admin-seat"とします。このレイヤーは各テーブルレイヤーの下に配置してください。



これを、アドミン座席を作成したいすべてのテーブルに対して繰り返します。

1つのテーブルにつき1席までアドミン座席を作成することができます。



CHECKPOINT 2: 各テーブルレイヤーは "table-"で始まり、座席("seat"で始まるレイヤー)、名前("name"で始まるレイヤー)、アドミン座席( "admin-seat"で始まるレイヤー)を含んでいて、以下のようになっていることを確認してください。




5. グリーンルーム


イベントホストと登録スピーカーのみがステージエリアに入ることができるため、プレゼンテーション前のイベント主催者側だけの会議など、グリーンルームとして一般的に使用されます。


ステージの形や大きさは問いません。また、マップ上のどこにでも設置することができます。(Conferenceエリア内に収まることを条件とします。)


ホストやスピーカーがステージエリアに入ることができるようにしたい場合、ステージ上にも座席を追加する必要があります。これらの席は見えないようにすることもできますし(塗りつぶし・縁なし)、見えるデザインにしていただくことも可能です。どちらを選ぶにしても、各席には "seat"という名前のレイヤーが必要になります。(テーブルに座席を追加する時と同じです。)


ステージ上の最大座席数は、1テーブルあたりの最大座席数と同じです。

座席が見えないデザインのステージ座席が見えるデザインのステージ



ステージとステージ上の座席を作成したら、これらの要素をまとめて別のレイヤーを作成します。このレイヤー名をtable-stageとします。


下記のような感じになります。


前述のようにグリーンルームをゲストに見えるようにしたい場合、ステージは"conference-area"レイヤーに設定してください。




6. 看板(ビルボード)


マップの中に2つの看板を設置することができます。


  1. 左側の看板:これは動画用で、Youtube、Vimeo、Twitchの動画を貼り付けることができます。
  2. 右側の看板:これはテキスト用で、イベントのアジェンダや重要なお知らせなどのテキストを表示できます。


フロアマップに必ずしもこれらの看板を設定する必要はありません。片方だけ使う、またはどちらも使わないという設定にもできます。ただし、看板は左右で1つずつなので、例えば動画用看板を2つ、テキスト用看板を2つ持つことはできません。



看板任意のサイズに設定することができ、左右で同じサイズである必要はありません。例えば動画を強調させたい場合、動画用看板マップの中央に大きく配置して、反対にテキスト用の看板は端の方に小さく配置することができます。ただし、これらは両方とも長方形として設定する必要があります。


左側の動画用看板に関しては、推奨サイズ比は6:10です。
右側の看板は縦最大163pxです。

これらの各看板は別のレイヤーを作成する必要があります。


左の看板については、レイヤー名を"table-left-billboard"とします。

右側の看板については、レイヤー名を"table-right-billboard" とします。


ゲストがイベントスペースに入室した際に看板が見えるようにしたい場合、両方の看板レイヤーを"conference-area"レイヤーに配置してください。




7. スポンサー


スポンサーバナーはゲストを好きな場所にリンクさせることができます。スポンサーバナーには色々な使い方があります。こちらの記事をチェックしてみてください。


イベントで使用できるスポンサーバナーの数は、プランによって異なります。ご利用のプランでいくつ使用できるのかを料金ページよりご確認ください。


スポンサーバナーを追加するには、長方形を挿入します。(サイズは問いませんが、推奨サイズは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エリアは赤色で表示されます。
  • テーブル、ステージ、看板、スポンサーは灰色で表示されます。
  • アドミン席は星のアイコンで表示されます。
  • テーブルと座席が埋まる順番は、数字で表示されます。



デザインやレイヤーに問題がないことをご確認後、カスタムフロアプランをアップロードしてください。




アップロードをする場所


フロアプランをアップロードするには

  1. 任意のRemo Conferenceのウェブページの画面左下(または右下)にある「サポート」ボタンをクリックします。
  2. そちらのチャットからSVGファイルを提出してください。
  3. SVGファイルと一緒にRemoアカウントのAdministratorまたはOwnerのメールアドレスもご記入ください。
  4. このフロアマップをアップロードしてほしいことを担当者に伝えてください。




提出期限について


開催予定のイベントの少なくとも7日前に、上記の方法でカスタムフロアプランをアップロードしてください。デザインにシステム上の問題がないかどうか、修正点があった場合の編集時間などを考慮しております。

それ以降に提出された場合は、イベントにお客様のフロアプランが適用されることを保証することはできませんので、ご注意ください。