鮮明な背景プランを準備する
優れたインタラクティブなフロアプランの基礎となるのは、鮮明で読みやすいソース画像です。建築 CAD エクスポート、Revit レンダリング、PDF 青写真、または高解像度グラフィック サイト プランのいずれを使用している場合でも、図面を 2000 ピクセルから 6000 ピクセルの幅でエクスポートします。
デジタル画面を乱雑にする不要なエンジニアリング注釈、寸法線、構造ハッチングを取り除きます。クリーンルームの周囲、明確にマークされた入り口、階段、エレベーター、窓の向きに注目してください。壁や移動可能な廊下がすぐに目立つように、ハイコントラストの配色を使用します。
フロアプランをLayerPinに直接アップロードします。このプラットフォームは、応答性の高いディープ ズーム用にファイルを最適化して準備し、ブラウザーが訪問者の画面とズーム レベルに適した解像度を要求できるようにします。
- 1無関係な下書き線のない、きれいな PNG、JPG、または SVG としてフロア プランをエクスポートします。
- 2ベース図面上のテキスト ラベルが標準のズーム レベルで読めることを確認します。
- 3画像を Layerpin にアップロードし、デフォルトの開始ビューを建物の入り口または中心のロビーに設定します。
インタラクティブな形状で部屋とゾーンを定義する
オフィス、会議室、小売店、展示ブースなどの囲まれたスペースの場合は、単純なピンではなく、Layerpin の多角形および長方形の形状ツールを使用してください。形状はそのエリアの物理的な面積を強調し、空間の境界を紛らわしくします。
2 ピクセルの実線の境界線を使用して、半透明の塗りつぶしカラー (不透明度 15 ～ 25% など) を適用します。これにより、選択状態を伝えながら、ドアの開き方、座席の配置、部屋番号など、その下の建築上の詳細を完全に表示したままにすることができます。
個別のホバー状態とアクティブ状態を構成します。訪問者が Room 302 の上にマウスを移動すると、微妙な輝きや塗りつぶしの明るさが即座に触覚フィードバックを提供し、その空間がクリック可能であることを示します。
- 1不規則な部屋のレイアウトをトレースするには多角形ツールを選択し、標準的なスペースには長方形ツールを選択します。
- 2コントラストのある境界線を使用して、デフォルトの塗りつぶしの不透明度を 15% ～ 25% に設定します。
- 3ブランドパレットに合わせてホバーカラーとアクティブハイライトカラーを調整します。
主要な設備や観光スポットにピンポイントのマーカーを追加します
形状は部屋を定義しますが、ピン マーカーは、受付デスク、トイレ、非常口、コーヒー バー、エレベーター、AV 機器など、個々の目的地に最適です。
Layerpin を使用すると、ピン アイコン、マーカー スタイル、バッジ ラベルをカスタマイズできます。普遍的に認識されているアイコン (休憩室にはコーヒー カップ、エレベーターにはエレベーター アイコンなど) を使用して、訪問者がテキストを読まなくても重要なアメニティを見つけられるようにします。
マーカーを機能的なカテゴリに整理して、訪問者が必要に応じてアメニティ レイヤーのオンとオフを切り替えられるようにします。
- 1特定の設備、ユーティリティ、アクセス ポイントにピン マーカーを配置します。
- 2直感的なアイコンと明確なカテゴリの色を各マーカー グループに割り当てます。
- 3「役員会議室」や「顧客サービス」などの名前付き宛先にカスタム テキスト ラベルを使用します。
エンゲージメントと次のアクションのための情報カードを構成する
訪問者が部屋またはブースをクリックすると、情報カードは次の質問に即座に答えます。内部の高品質の写真、面積/収容人数、利用可能なテクノロジー設備、現在の占有状況を含めます。
すべてのカードには、「ツアーをスケジュールする」、「デスクを予約する」、「会議室を予約する」、または「リースエージェントに連絡する」などの目立つ行動喚起ボタンを備えている必要があります。これらのボタンを Calendly、予約エンジン、または CRM フォームに直接接続します。
モバイル画面では、Layerpin は情報カードを人間工学に基づいた底部シートの引き出しに自動的に適合させ、物理空間を歩き回る訪問者が片手で使いやすいようにします。
- 1部屋の写真、仮想 3D ツアー リンク (Matterport/YouTube)、構造化ディメンション フィールドを追加します。
- 2予約または問い合わせのワークフローにリンクする明確なプライマリ アクション ボタンを含めます。
- 3モバイル プレビューでカードのプレゼンテーションをテストし、読みやすさを確認します。
フロアプランをどこにでも埋め込んで配布できます
インタラクティブなフロアプランの準備ができたら、それを Web サイトに埋め込むのに 2 分もかかりません。 Layerpin の軽量の応答性の高い埋め込みスクリプトまたは iframe スニペットをコピーし、WordPress、Webflow、Squarespace、Wix、Framer、またはカスタム Next.js アプリに貼り付けます。
物理的なキオスクとオンサイトの看板の場合は、特定の部屋または完全なインタラクティブなモバイル ビューに直接リンクする QR コードを生成します。部屋の割り当てや賃貸ステータスが変更された場合は、Layerpin でマップを更新し、ライブ埋め込みを公開すると、Web サイトのコードを変更することなく、新しく公開されたバージョンを使用できます。