カスタム・フロアプランを作成する際には、以下のガイドラインや規則に従ってください。

デザイン仕様

Adobe Illustrator/Sketchなどのソフトウェアを使用してデザインをすることができますが、最終フロアプランの画像はSVGフォーマットによるものであることをご確認ください。
マップサイズ マップはSketch/illustrator ファイルの最大解像度(ライトグリーンの部分)に適合する必要があり、カンファレンスエリア(赤でハイライトされている部分)は16:10アスペクト比にする必要があります。



シートアバターのサイズは55px W x 55px H(4pxステータス・リング・サイズを含む)にします。アバターは円形画像としてレンダリングされます。

SVG fileの要件

デザインをSVGファイルとして書き出す際には、「レスポンシブ」にチェックを入れます。



フロアプラン内にカスタムフォントがある場合、それらのフォントで最終SVGファイル内に以下のように埋込を行ってください。





レイヤー名付きのデザインサンプル (画像拡大はこちら)

カンファレンスエリア

カンファレンスエリアを識別するために、conference areaというレイヤー名を作成してください。
このレイヤーはユーザーのビューポート/ブラウザにフィットするために、拡大されます。
以下のレイヤー(テーブル、座席、ステージ、 スポンサー)はこのレイヤーの中に追加する必要があります。

テーブル

デザインの中にレイヤー名が「table-」で始まるテーブルレイヤーを作成します。このレイヤーの中の全てのエレメントはテーブルの一部としてみなされます。width, height, top, leftなどのパラメーターはこのタグに基づいて計算されます。
テーブルレイヤー名の後半部分は、テーブルを識別する特殊なコードを作成するために利用されます。例えば、レイヤー名を「table-first table」にした場合は、「first table」がテーブルを識別するコードになります。各テーブルレイヤー名は、他のテーブルレイヤー名と異なっていること、及びそのレイヤー名が英語表記であることをご確認ください。
弊社のアルゴリズムが、テーブルレイヤーの順序に基づいて参加者をテーブルに均等に配置します。例えば、1番目及び2番目の参加者は「first table」に配置されます。3番目及び4番目の参加者は「second table」に配置されます。従って、レイヤーは希望される参加者の配置順を考慮して作成します。
テーブル名の位置を設定するためには、テーブル内に空白のテキストエレメントを作成します。そのテキストエレメントは「name」で始まるレイヤー名を有する必要があります。

座席

座席は当該のテーブル・レイヤーに追加する必要があります。テーブル内の座席を識別するために各席は「seat」というレイヤー名にします。
topとleft の位置のみを決定し、座席を円形としてレンダリングします。
フロア・プランの座席順は、テーブル内の座席レイヤー順と同じになります。

座席の制限

テーブル内の座席数は、Studioプランにおいては最大8席です 。その他のプランは最大6席です。
フロアプラン内のユーザー数は100名であるため、フロアプランのデザインに120席を設定する必要があります。この余分の20席はユーザーがテーブル移動できるように設けられています。6席を下回るテーブルを作成することは可能ですが、フロアの総座席数は120とする必要があります。

アドミン席

各テーブルにアドミン席を設けることが可能です。
アドミン席をテーブル内に追加するためには、テーブルレイヤーの中に「admin-seat」いう名のレイヤーを任意の位置に設定します。
アドミン席は、1テーブルにつき1席のみ追加できます。

左ビルボード(動画再生エリア)

このエリアは「table-left-board」というレイヤー名で識別します。

右ビルボード(アジェンダエリア)

このエリアは「table-right-board」というレイヤー名で識別します。

ステージ(ホスト/スピーカーのみ利用可能)

このエリアは「table-stage」というレイヤー名で識別します。

スポンサー

「sponsor」で始まるレイヤーを以下のように作成し、正しい場所に配置します。
スポンサーの配置順は、スポンサーレイヤー順により決まります。
全てのスポンサーレイヤーのHeightと width は同じにします。

スポンサーレイヤー

ファイルの最適化

SVGのファイルは以下のガイドラインに準拠していることをご確認ください
https://css-tricks.com/high-performance-svgs/
ファイルサイズを小さくすることによって、読み込み時間が早くなります。最適サイズ<500kb 検証ツールを利用した後、https://vecta.io/nanoなどの画像圧縮ツールをご利用ください。
小さいアイテムや複数のエレメントがある場合、読み込み時間が長くなったり、マップのズームやドラッグの性能が低下します。
SVG decimal エクスポート( Sketchの場合はその選択肢がない可能性があります)の際は、出力を「2」に設定してください。出力を「2」にした後SVGやデザインが崩れる可能性がありますので、出力ファイルを修正した上で、弊社の開発部にお渡しください。

参考資料

サンプルのIAファイル
サンプルのSVGファイル

デザインはアップロードする前に検証してください。

カスタム・フロアプランの検証はこちらのリンクで行ってください。 https://live.remo.co/custom-floor-plan-validator
フロアプランをSVG形式でアップロードすることで、上記のツールにより検証結果が表示されます。
結果には、カスタム・フロアプラン内のテーブル、座席、スポンサー、ステージ、右/左ビルボードの数が含まれます。

アップロード先

「Remo conference」ページの「Need Help」ボタンをクリックして、SVGファイルをアップロードしてください。

プランの提出期限

フロアプランのデザインに発生する技術的問題を検出し解決するために、イベント開催日の最低7日前までにご提出ください。
なお、SVGファイルをイベントの7日前までに提出された場合でも、デザインされたフロアプランがイベント中に確実に機能するとの保証はできないことを予めご了承ください。
この記事は役に立ちましたか?
キャンセル
ありがとうございます