Layerpinの紹介
静的な図面、フロアマップ、配線図、イラストを高機能なインタラクティブ画像マップに変換。ピン、ベクター図形、Deep Zoom、安全なWeb埋め込みを完備。
Layerpinとは？
Layerpinは、フロアプラン、建築図面、イベント会場、美術館、キャンパス案内、店舗レイアウト、製品設計図などのカスタムビジュアルメディア専用に設計されたインタラクティブ画像マップ作成プラットフォームです。
地球の物理的座標や衛星GISデータを必要とする従来の地図ツール（Google MapsやMapboxなど）とは異なり、Layerpinはサブピクセル単位の正規化座標系、直感的なタッチ操作、即時検索、CDNエッジ配信により、画像上で直接動作します。
建築レイアウト上に、区画、空室状況、面積、テナント情報、写真ツアー、設備を直接表示できます。
ブース配置、ステージスケジュール、非常口、売店、スポンサーブースを検索・カテゴリフィルターで案内します。
機器の分解図、工場ライン、設計図を、ポップアップやアクションリンクを備えたインタラクティブな解説書に変換します。
ドローンによる超高解像度空撮、美術館の絵画、複雑なCAD図面をDeep Zoomマルチ解像度タイリングでスムーズに拡大閲覧できます。
4ステップの作成ワークフロー
元画像からWebサイトへの高速インタラクティブマップ埋め込みまで、4つのステップでスムーズに作成できます：
- 1原画や図面をアップロードPNG、JPEG、WebP、SVG、AVIFの高解像度画像から開始。巨大なCAD図面や航空写真の場合はギガピクセル画像をアップロードすれば自動でDeep Zoomピラミッドが生成されます。
- 2ピン、エリア、引き出し線を描画11種類の専用ツールを使い、ピンの設置、境界線の描画、距離測定、リッチテキストの吹き出し追加をキャンバス上で自由に行えます。
- 3カテゴリ、メディア、詳細カードで充実化画像ギャラリー、リンクボタン、タグ、Markdown形式の説明を追加。ピンを色別カテゴリに分類し、凡例切り替えやキーワード検索に対応できます。
- 4スナップショットを公開して自由に埋め込みダウンタイムなしでCDNにキャッシュされる不変のスナップショットを公開。ドメイン制限付きのiframeコードや直接リンクをコピーして共有できます。
コアアーキテクチャ & 座標系
あらゆる端末で正確に縮尺対応するため、Layerpinは3つの基本設計思想に基づいて構築されています：
画面解像度に依存する絶対ピクセルとは異なり、0.00〜100.00の正規化単位で位置を計算。画面サイズや端末が変わっても、ピンは画像の該当ピクセルに数学的に正確に固定されます。
エディタ内の編集はドラフトとして保護されます。公開中の閲覧者に影響を与えることなく、ピンの位置やデザインを自由に試行錯誤できます。
「公開」をクリックすると世界中のエッジCDNにスナップショットがキャッシュされ、DB負荷なしに15ms未満の高速初期ロードを実現します。
主なプラットフォーム機能
インタラクティブマップの作成、デザイン、分類、配信に必要なすべての機能を網羅しています：
マーカー、多角形、四角形、円、直線・コネクタ、ブラシ、テキスト、引き出し線、測定、消しゴム、選択ツールを完備。
ホバーツールチップ、サイドドロワー、モーダルウィンドウで画像スライダーやボタン、Markdown説明を表示。
色分けカテゴリ、凡例トグル、リアルタイム検索、件数カウント、カスタムアイコンでピンをスマートに整理。
ピラミッド型タイル読み込みにより、5万ピクセルの大判図面でもメモリを圧迫せず60FPSで滑らかに表示。
許可ドメイン制限付きのレスポンシブiframeで、承認されたWebサイトのみでの安全な表示を保証。
25種類以上のショートカットでツール切り替えやスタイルコピーを素早く行い、制作スピードを大幅に向上。
テキストやCSVからのピン生成、輪郭の自動トレース、カテゴリ整理、16言語への一括翻訳をBYOK方式で安全に実行。
ピン、図形、フィルター、説明文を16言語に翻訳。言語切り替えスイッチとスムーズなフォールバックに対応。
CSV、Excel、Numbersからマーカーを一括インポート。いつでもCSVやJSON形式でバックアップを出力可能。
Deep Zoomデータやピン、設定を含めてマップ全体を複製し、本番公開前の安全な検証環境を構築。
最初のマップを作成する
準備はできましたか？ 以下の手順に沿って、最初のマップを作成・公開してみましょう：
- 1マップダッシュボードを開くダッシュボードにアクセスし、「マップ作成」をクリックします。
- 2画像または図面をアップロードパソコンから図面やイラストファイル（JPEG、PNG、WebP、SVG、AVIF）を選択します。
- 3ピンや図形を配置Mキーでマーカー、Pキーで多角形ツールを選択。画像上の任意の位置をクリックして配置します。
- 4マップを公開上部ヘッダーの「公開」をクリック。マップが公開され、すぐにWebサイトへ埋め込めます！
Webサイト埋め込み & セキュリティ
Webサイトへの埋め込みは、1行のレスポンシブiframeタグを貼るだけです。スマホのタッチ操作やピンチズームに標準対応：
<iframe
src="https://layerpin.com/m/YOUR_MAP_ID"
width="100%"
height="600"
style="border: 0; border-radius: 12px; overflow: hidden;"
allow="fullscreen"
loading="lazy"
></iframe>