---
title: 60団体を1枚に収める情報設計
project: "kodaira-tsunagari-fes"
kind: ui
question: A4 4枚に60〜70団体を、説明なしで迷わず読ませるには
answer: マテリアルデザインを型に、地図のピン番号と説明カードの一致を最優先ヒエラルキーに固定し、色を「地域の識別」に転用した。
canonical_url: "https://toyoshima.work/works/kodaira-tsunagari-fes/map"
---

# 60団体を1枚に収める情報設計

## 制約: A4 4 枚に 60〜70 団体 + 地図 + ピン

担当範囲は、A4 を横に 4 枚並べた幅の中に、60〜70 団体の情報を載せ、同じ紙面の地図にピンを立てて番号を一致させるところまで。情報整理として、かなり難易度の高いタスクでした。

## 想定ユーザーは子供と高齢者

イベントの客層は子供と高齢者が中心です(実際に自分もイベントに参加して確認しました)。幅広い年齢層が、説明なしで迷わず読める必要がある。そこでデザインシステムを **マテリアルデザイン準拠** に固定しました。コントラストと情報の優先順位に「基準」を持った状態で設計を進めるためです。

## 最優先ヒエラルキーは「ピン番号の一致」

一番迷いやすく、かつ最重要なのは、**地図上のピン番号と、団体説明カードの番号を一致させて追える** ことです。ここに全精力を注ぎ、プライマリカラー地に白文字を乗せて、紙面で最も目立つ要素にしました。

## 色を「装飾」ではなく「地域の識別」に使う

表面を担当した方のデザインがカラフルで、メインカラーが存在しない前提でした。そこで色を装飾ではなく **機能** に転用します。地域を 6〜7 エリアに分け、各エリアにマテリアルデザインの Primary / Primary-tonal / Surface のトーンを割り当て、カードの枠と背景を地域単位で統一しました。

開催時刻のような可変情報は目立つトーンのボタンとアイコンで非言語化し、「毎回ここを見ればこれがある」と、チュートリアルなしで読めるよう、全カードを同一パターンに揃えて **例外を作らない** ことを徹底しています。

## 表面のモチーフで視線誘導する

表面のビジュアルアイデンティティ(キャラクターの「目」のモチーフ)を、各カードにも配置しました。目線がカード内の説明文に向くようにして自然な視線誘導にしつつ、表裏の一体感も出しています。

全体をコンポーネント + オートレイアウトで組んだので、団体の増減が入っても崩れず追従できる状態を保ちました。