Remoであなただけのカスタムフロアプランを作成しましょう!


ここでは、デザイン初心者から上級者まで色々な方に役立つ情報をお届けしています。


説明の前に、他のRemoユーザーが実際にデザインされたとても素敵なフロアデザインを見てみましょう! →デザイン例




デザインソフトウェア



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




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


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


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




フロアプランの内訳



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




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




重要なポイント


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


  • 推奨ファイルサイズは1MB以下です。これは、あなた自身、スピーカー、ゲストがイベントスペースに入ったときのロード時間を短縮するためです。これ以上のファイルサイズでも大きな問題は発生していませんが、よりスムーズなイベントの開催のために、ファイルサイズはできるだけ小さくしてください。
  • デザインをする際にファイルサイズを小さくするための役立つヒントをご紹介します。
  • マップの構成要素が多いとファイルサイズが大きくなり、ロード時間が長くなりますので、不要な要素はカットしてください。
  • フロアプランに追加する前に、画像圧縮機を使用して、様々なデザイン要素(例えばテーブルの上の食品など)のファイルサイズを最小化してください。
  • 要素をデザインする際は、不要なパスのポイントを減らしてください。
  • SVGファイルを最適化するための他の方法についてはコチラの記事をご覧ください



  • イベントの7日前までにカスタムフロアプランを提出してください。それ以降に提出された場合は、イベントにお客様のフロアプランが適用されることを保証することはできません
  • 各ステップで、SVG形式でデザインをエクスポートし、 カスタムフロアプランバリデータ にアップロードして、その要素が正しく作成されているかどうかを確認してください。




テンプレート


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

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

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

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

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

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


マップ背景

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



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


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


  • 長方形でなければなりません。
  • 長方形の画像でも構いません。(⚠️その画像の著作権などを確認してください。)


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


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




Conferenceエリア


Conferenceエリアは、Remoのプラットフォームの核の部分となります。 -すべての機能的要素(テーブル、座席、ビルボードなど)は、すべてConferenceエリア内になります。


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



これが終わったら、Conferenceエリアのすべての要素を別のレイヤーにグループ化し、このレイヤー名を “conference-areaとします。




CHECKPOINT 1: 下記の画像のように、map-backgroundconference-area  の2つのレイヤーで用意しましょう。



これから作成する他のすべての要素(テーブル、座席、ビルボードなど)は、conference-area” レイヤーの下に配置してください。




1. テーブル(部屋)


Remoのテーブルは、ゲストが他のゲストとプライベートな会話をすることができるエリアです。あなたのフロアプランでは、各テーブルはそれぞれ別のレイヤーにします。


まず、テーブルエリアをデザインします。(座席のことはまだ考えなくて大丈夫です。)下記でいくつか例をご紹介します。

こちらの “テーブル” (または部屋) にはラグ、丸いテーブルがあり、テーブルの上にはパソコン、タブレット、マグカップがあります。(全て長方形または円からできているので簡単です!)
自分だけの素敵なテーブルをデザインしてみてください。
こちらはバーのテーブルのようになっていますね。テーブルの上には色々な料理が並んでいます。(こちらも長方形または円で構成されています!)


テーブルのデザインが完了したら、すべての要素をグループ化してレイヤーを作成します。


このレイヤーの名前は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席に設定してください。(予備席を含む)




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です。


これらの各ビルボードは別のレイヤーを作成する必要があります。


左のビルボードについては、レイヤー名をtable-left-billboardとします。


右側のビルボードについては、レイヤー名をtable-right-billboard とします。



両方のビルボードレイヤーは、conference-area” レイヤーの中に配置してください。




7. スポンサー


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


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


スポンサーバナーを追加するには、長方形を挿入します。(サイズは問いませんが、推奨サイズは245 x 120ピクセルです。)フロアマップ上で任意の場所にスポンサーバナーを配置します。その長方形にはsponsorという名前を付けます。もっと多くのスポンサーバナーが必要な場合は、長方形をコピーして貼り付けることができますが、それを “sponsor-2sponsor-3 のように名前を付けます。



スポンサーバナーの作成が終わったら、すべてのスポンサーバナーを選択してレイヤーを作成します。このレイヤー名をSponsorsとします。(各長方形に名前が付いていることを確認してください。)例として下記の画像を参考にしてください。


スポンサーバナー作成に関していくつか注意点があります。


  • イベント中に使用しない場合を考慮し、スポンサーバナーをマップ上では見えないようにするのがベストです(塗りつぶしの色、枠線の色を削除します。)
  • スポンサーバナーは様々なサイズにすることができますが、形は長方形のみです。
  • スポンサーバナーはconference-areaレイヤーにある必要があります。



CHECKPOINT 3: これで全てのデザインが完了しました!下記の画像を見て、レイヤーの名前と位置が一致していること、map-backgroundレイヤーとconference-areaレイヤーがあることを確認してください。

conference-areaレイヤーの中には、 “table-stage” レイヤー、table-left-billboard” レイヤー、table-right-billboardレイヤー、sponsorレイヤー、そしてすべての table-レイヤー(seat”, “admin-seat”, “nameレイヤーを含む)があることを確認してください。

レイヤーの名前についてはコチラ をご参照ください。



最後に


SVGファイルとしてフロアプランのデザインをエクスポートしてください。エクスポートの際にいくつか注意点があります。


  • エクスポートをするときは、以下に示すように 'Responsive'オプションがチェックされていないことを確認してください。(ご利用されたデザインツールがこのオプションを持っている場合)


  • Decimalを2に設定してください。(ご利用のデザインツールにこのオプションがある場合)
  • エクスポート後、作成されたデザインが歪んでしまうことがありますので、提出前にデザイナーまたはご自身で確認してください。



デザインを検証する


デザインを検証するには


  • カスタムフロアプラン検証ツールにアクセスしてください。
  • カスタムフロアプランをSVG形式でアップロードしてください。
  • エラーがあるかどうかを確認し、エラーが見つからなければ画面のスクロールを続け、エラーが見つかった場合は、デザイン作成画面に戻ってエラーを修正してください。(レイヤーの名前に関係しているエラーがよくあります。)

  • カスタムフロアプランのイメージを確認して、すべてがイメージ通りであるかを確認してください。
  • Conferenceエリアは赤色で表示されます。
  • テーブル、ステージ、ビルボード、スポンサーは灰色で表示されます。
  • アドミン席は星のアイコンで表示されます。
  • テーブルと座席が埋まる順番は、数字で表示されます。


すべてに問題がないことが確認できたら、これで終了です!あなただけのカスタムフロアの完成です! お疲れ様でした✨




アップロードをする場所


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

  1. 任意のRemo Conferenceのウェブページの左下隅にある「Need Help」ボタンをクリックします。
  2. そちらのチャットからSVGファイルを提出してください。
  3. SVGファイルと一緒にRemoアカウントのメールアドレスもご記入ください。
  4. このフロアマップをアップロードしてほしいことを担当者に伝えてください。
  5. あとはアップロードされるのを待つだけです!




提出期限について


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

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