スマホで読める地図画像の文字サイズと情報量

この記事の要点

初期表示では起点・入口・主要分岐だけが読める密度にし、詳細は本文または拡大図へ分け、実機で文字・線・タップ操作を確認します。

必要な項目から読む

PC画面で作った詳細図を縮小し、文字がつぶれ、指で拡大しても低解像度で読めない

画像編集ソフト上のポイント数やピクセル数だけでは、サイトへ組み込んだ後の見た目は決まりません。CSSで画像が画面幅に縮小されれば、画像内文字も一緒に小さくなります。実際のページを代表的な小型スマートフォンで開き、通常の閲覧距離で入口名と曲がり角が読めるか確認します。

読めないラベルを単純に太字にするのではなく、不要な周辺情報を削り、情報一つ当たりの面積を確保します。

駅から施設までの全体像と、ビル内の入口位置を一枚へ入れると、どちらかが小さくなります。全体図と入口拡大図を縦に並べ、同じ地点へ番号を振ってつなぐと、小画面でも追いやすくなります。複数画像に分ける場合は読み込み順と見出しを明確にし、JavaScriptの切替操作なしでも内容を読めるようにします。

画像だけでなく『二つ目の信号を左』など本文でも補完します。

高解像度画像をそのまま載せると表示が遅くなり、通信環境の弱い来訪者が現地で開けない恐れがあります。一方、過度に圧縮すると細線と漢字が崩れます。表示寸法に合う複数サイズやSVG等を検討し、対応環境と安全性を確認して選びます。

画像形式を変えても原本は編集可能な形で保管し、altは『地図』だけではなく、本文と重複しすぎない範囲で目的地と主要経路を伝えます。

例えば、横幅1,200pxの画像を画面上で300pxに縮めると、画像内で48px相当だった文字は、縦横比を保った縮小では12px相当になります。これは縮小率の計算例であり、12pxを推奨する意味ではありません。実際の掲載欄へ入れた状態で、拡大操作なしに出口番号と入口名を読めるかを確認してください。

読みにくい場合は画像全体を大きくするだけでなく、周辺図と入口の詳細図を分ける方法もあります。

未確認の項目を残さず、該当しないものはその理由も記録します。