今日やったこと#
概略地点を個別アイコンへ展開#
- 市区町村の代表地点にまとめていた企業を、集約マーカーのクリック、高倍率へのズーム、手動展開によって個別アイコンで確認できるようにした。
- 8件以下は円形、9件以上はらせん状に配置し、概略位置であることを破線のアイコンと接続線で保った。保存済みの座標や位置精度は変更していない。
- 大きなグループでは中心点が画面外へ出ても外周のアイコンが見えている間は展開状態を維持し、検索や絞り込みもそのまま使えるようにした。
密集地域の過剰展開を抑制#
- 概略地点を展開する初版では、密集地域に数百件のアイコンと接続線が表示され、地図が読めなくなる問題が発生した。実ブラウザで再現し、都市単位の集約と上限付きページ表示へ変更した。
- 24件ずつの前後移動と折りたたみを追加し、一覧から選んだ企業を含むページを直接開けるようにした。
- 近接する実住所の共有拠点が周辺を覆う場合は通常のクラスタ表示を維持し、概略地点のアイコンを正確な住所のアイコンより下へ配置した。
高倍率で住所アイコンをすべて表示#
- 近隣企業は一定倍率まではクラスタにまとめ、倍率17では単独住所を含むすべての住所アイコンを自動的に表示するようにした。
- 詳細パネルから地図を開く場合も同じ倍率へ揃え、倍率を往復してもアイコンが消えたり空になったりしないようにした。
- 大規模な概略地点グループについては、24件ずつのページ表示を引き続き使う設計とした。
共有用プレビューを追加#
- 地図画面の実写を基に、落ち着いた配色の共有用画像を作成し、日本語の題名・説明、代替テキスト、正規URLのメタデータを追加した。
- 画像は横長の標準サイズに整え、地図データの帰属表示を含めた。公開対象への同梱と画像形式・寸法も自動検査するようにした。
腕時計向けフェイス二案を実装#
- 濃色の地球儀テーマと白基調の波テーマを実装し、太平洋側と日本の時刻、日付、歩数、電池残量を一画面にまとめた。
- 日本側の昼夜に応じて色を切り替え、太平洋側の夏時間、日付またぎ、年越しにも対応する時刻変換を組み込んだ。
- 複数のデザインスタディ、画像素材の由来とライセンス、ビルド準備、画面キャプチャ、画像検査を一式にまとめ、配布用パッケージまで作成した。
判断と学び#
概略地点を個別アイコンへ展開すると選択性は上がるが、件数が多い都市では情報量が急増する。位置の不確かさを破線で明示しつつ、都市単位の集約、上限付きページ表示、レイヤーの優先順位を組み合わせることで、到達可能性と地図の可読性を両立できた。
ズーム倍率は単なる見た目ではなく、概要と詳細を切り替える操作規則として扱う必要がある。低倍率ではクラスタで全体像を守り、高倍率では住所アイコンを確実に個別表示する境界を固定すると、利用者の期待とテスト条件を揃えやすい。
共有用画像は一度作って終わりにせず、メタデータ、実画像の寸法、配布対象への同梱をまとめて検査する方がよい。腕時計の時刻表示も同様に、夏時間の切り替えや日付境界を具体的なケースとして固定すると、デザイン変更後も正しさを保ちやすい。
検証#
- 企業地図は各段階で自動テスト60件、64件、65件、67件が成功した。企業データ1034件の検証も通過し、表示改善によってデータ自体が変わっていないことを確認した。
- 最初の概略地点展開では実ブラウザ確認が未完了だったが、その後の修正で過剰展開を再現し、24件表示、前後移動、折りたたみ、詳細表示を確認した。
- 倍率16ではクラスタ、倍率17では個別アイコンへ切り替わり、倍率を往復しても表示が復元されることを実ブラウザで確認した。
- 共有用画像は横1200×縦630ピクセルの画像として大小二つの表示寸法で目視し、メタデータ、画像形式、寸法、公開対象への同梱を検査した。
- 腕時計フェイスは時刻変換13ケース、二案それぞれ10枚と17枚のエミュレーター画面で検査し、画面寸法、昼夜色、画像素材、時刻表示、電池表示を確認した。両案とも実機表示を確認した。
次にやること#
- 高密度地域での操作性を継続して確認し、ページ表示やズーム境界に改善が必要か判断する。
- 腕時計フェイス二案を日常利用で比較し、可読性や情報量の調整点を整理する。