地図のプレースホルダーは、地図サービスを接続する前に画面の配置を試す素材です。カードの高さ、ラベルの余白、周囲のボタンの押しやすさを調べられます。住所、経路、移動時間、サービス提供範囲の正しさは確認できません。
地図を置く領域からサイズを決める
| 画面の例 | 最初に試す寸法 | 見るところ |
|---|---|---|
| 小さな場所カード | 600 × 400 | 地図の下の住所や操作ボタンが隠れません。 |
| 横長の連絡先欄 | 1200 × 400 | スマートフォンで地図が大きすぎず、連絡先にたどり着けます。 |
| 正方形のダッシュボード枠 | 600 × 600 | 狭い画面でも周囲の操作や説明の位置が崩れません。 |
寸法は試し始めるための例で、端末ごとの必須サイズではありません。生成画面では幅・高さを100〜2,000ピクセルで指定できます。
配置の比較ではシードをそろえる
2つの配置を比較するときは、シードとスタイルをそろえます。AnyPlaceholderは事前生成した有限の架空都市画像から1つを選び、領域に合わせて切り抜き・サイズ変更を行います。シードが違っても同じ都市を選ぶ場合があり、シードを増やすたびに新しい都市を作るわけではありません。縦横比を変えると切り抜かれる範囲も変わります。
<img
src="https://anyplaceholder.com/api/map?width=600&height=400&seed=42&scheme=Paper&format=jpg"
width="600" height="400"
alt="試作画面用の架空の地図"
style="width: 100%; height: auto;"
>ファイル形式を選ぶ
初期値はJPEGです。線の境目を劣化させたくない場合はPNGを試せます。WebPにも対応しています。大きな地図は応答サイズの制限に収めるためJPEGに変わる場合があるので、指定形式だけで判断せず、応答のContent-Typeまたは保存ファイルの拡張子を見てください。この地図APIはSVGを返しません。
仮の地図であることを表示する
画面を他の人に見せる場合は、画像の近くに「架空の地図・配置確認用」と表示します。架空の地図に実在する店舗名や道順を載せ、正しい案内に見せないでください。画像が情報を伝える場合は、代替テキストにも用途を書きます。
本番の地図に置き換えるとき
- 実在する場所と、採用する地図サービスの利用条件を調べます。
- キーボード操作、スマートフォンの操作、文字で読める住所を用意して試します。
- 地図が読み込めなくても連絡先が分かる表示にします。
- 正しい場所の情報へ置き換えてから、架空の地図という表示を外します。
地図素材の生成には ProbableTrain MapGeneratorを使用しています。対応するパラメーターはAPI仕様をご覧ください。