8/26 学科 ユーザーインターフェイス基礎③【オンライン】

本日のテーマ

納品する作品の準備です。

🗺️アクセスマップに活かすレイアウトの5原則

📐1. 整列（Alignment）
- 地図・住所・交通手段を縦に揃えて配置し、視線の流れを自然に。
- テキストは左揃え、地図は中央配置など、役割に応じた整列を意識。
- アイコンや見出しも同じラインに揃えることで、統一感を演出。


🧲2. 近接（Proximity）
- 「住所」「最寄り駅」「アクセス方法」など関連情報をグループ化。
- それぞれの情報ブロックに見出しを付け、視覚的にまとまりを持たせる。
- 地図と交通案内を近くに配置し、ユーザーが迷わない導線に。


🔁3. 反復（Repetition）
- 見出しのスタイル（フォント・サイズ・色）を統一。
- アイコン（駅・バス・車など）を繰り返し使い、視覚的な記憶を促す。
- セクション間の余白やレイアウトパターンを統一し、安心感を与える。


⚖️4. 対比（Contrast）
- 重要情報（住所・最寄り駅・徒歩時間など）は太字や色で強調。
- 背景色とテキスト色のコントラストを高め、視認性を向上。
- 地図の枠やピンの色を周囲と差別化し、視線を誘導。


🌿5. 余白（White Space）
- 各情報ブロックの間に十分なスペースを設け、窮屈さを回避。
- 地図の周囲に余白を持たせ、視覚的な呼吸感を演出。
- モバイル表示でも余白を確保し、タップしやすく読みやすい設計に。

※レイアウトの5原則についてアクセスマップ用にCopilotで出力

マップについては著作権があるため既存のマップの取り扱いは注意する

アクセスマップ制作で使える基本操作
線パネル
アピアランスパネル
スタイライズ
クリッピングマスク
アウトライン
アピアランスの分割

©Google