01
データが見えるものを決める
出典・時刻・変換・欠測を残す。見えないものを演出で埋めない。
SORAH Design System / 01 · Foundations
One language.
Many worlds.
世界の見え方を、
ひとつの設計から。
ブランド、操作、地、地理、現象。それぞれの役割を分け、同じデータをWeb・映像・紙へ一貫して写し取る。SORAHとDATA SCAPEの共通基盤です。
One system / Four chapters
01 / Principles & ownership
同じ画面に、違う役割。
操作の青で砂塵を描かない。地図の夜色をアプリ全体に広げない。色を決める前に、何を伝える層なのかを決めます。
01
ブランド
ロゴ、VI、署名。VI Blueはブランドのための色。
Foundations02
操作
読む、選ぶ、戻る、再生する。操作色と現象色を別のトークンにする。
Foundations03
地
現象を受け止める地。題材と昼夜に従い、単なるUI背景とは分ける。
Earth Language04
地理
陸、海岸線、国境、起伏。現象が読める範囲まで退く。
Earth Language05
現象
値、分布、動き。題材の意味に従って色を割り当てる。
Earth Language迷ったときの参照先
ロゴ・文字・操作・アクセシビリティはこのページ。題材の色・地図・昼夜はEarth Language。体験の組み立てはScene Patterns、規範と導入はImplementationへ。
ロゴ・文字・操作・アクセシビリティはこのページ。題材の色・地図・昼夜はEarth Language。体験の組み立てはScene Patterns、規範と導入はImplementationへ。
光を当て、焦点を結び、写し取る。
02
作り手は焦点を決める
ひとつの観察を名指す。結論を押し付けず、読者の解釈をひらく。
03
媒体が質感を決める
Webは探索、動画は時間、紙は定着。投影や判型を変えても値と意味を変えない。
02 / Colour roles
ブランドと現象を分ける。
VIの色は原典のまま維持します。UIは操作を示す色、現象は意味を示す色。用途ごとに名前を持ち、値だけをコピーしません。
ブランド / VI
正式なシンボルとワードマークの組み合わせ。比率と文字間隔を固定し、周囲にシンボル直径の1/2以上の余白を確保します。Webでの最小高さは20px。
blue
#00BFFFgraphic
#006BFFdeep
#05396Baccent
#DA003Cink
#231815ロゴはVI原版のSVGを使います。形の描き直し、変形、装飾は禁止。ロゴ各形式・余白・禁止事項
INTERFACE
画面の外観
ライト・ダーク・端末設定。ライトの操作色は#006BFF、ダークは地#0C1428・面#141F36。ガラスは操作バーにも本文カードにも使えます。背景との合成後に可読性を確認します。
action #006BFFink #111111surface #FFFFFF
PHENOMENON
Sceneの優先ビュー
題材が最も読める昼夜を選びます。氷・砂塵・季節の前線・灯りは夜、ほかの11題材は昼。UIの外観設定とは独立です。
砂塵 / 夜の連続スペクトラム
15題材の色と地図を開く ↗03 / Typography & layout
読む順序を、形にする。
Poppins / tabular numerals
0.74 AOD
値には単位と日時を添える。数字の桁を揃え、データの測定精度を超えて表示しない。
| 欧文・数値 | Poppins / 700–800 / tabular-nums |
|---|---|
| 和文見出し | Noto Sans JP / 700–900 |
| 本文 | 15px以上 / 行間1.85 / rem指定 |
| 補助情報 | 補助11px / アイコン付きタブのみ9.5px |
| 角丸 | 14 → 22 → 30px / 入れ子は同心 |
| 余白 | 読む関係が強いものを近づける |
このガイドの欧文はPoppins、和文はNoto Sans JPを同一サイトから配信。UI・記事・図版・動画・印刷をPoppins／Noto Sans JPへ統一。媒体別の級数・役割は維持し、原版ロゴと過去の制作物は変更しません。
04 / Scene & controls
現象を広く。操作は静かに。
SORAH / DATA SCAPE
Ⅱ 停止時刻を選ぶ ─────●──出典
構成見本 · 合成データ。実装では値・単位・時刻を同じ定義から表示。
- Sceneはタイトル・現象・読取り・出典で構成する
- 選択・再生・情報は44px以上の操作領域を持つ
- 操作バー・本文カードにガラスを使える。重ねるのは1階層まで
- 欠測・取得失敗・読込中を異なる状態として示す
- ホバーがなくても主要な情報を読める
DATA SCAPEにおける分担
Sceneはひとつの現象、Storyは観察の順序、Crosspointは現象どうしの関係。どれも同じ題材レジストリを使います。Scene Patternsで組み方を見る ↗
Sceneはひとつの現象、Storyは観察の順序、Crosspointは現象どうしの関係。どれも同じ題材レジストリを使います。Scene Patternsで組み方を見る ↗
05 / Motion & time
動きにも、根拠を持たせる。
| 押下の応答 | 120ms |
|---|---|
| 要素の出現 | 260ms |
| 表現層のスプリング | 350ms |
| Sceneの再生 | 時系列は表示時に自動再生 / 停止・時刻指定を表示 |
| 動きを減らす設定 | 表現の動きと自動再生を停止 |
UIの時間と、データの時間
ボタンの応答時間と観測の時間間隔は別です。3時間間隔のデータを再生しても、画面上の1秒を「実時間」と呼びません。観測日時・時間帯・間隔を明記します。非表示時は停止し、戻ったときは操作で再開します。自動回転は別の動作です。再生・停止と時刻指定の作例。
図の出現は、型が持つ意味に従います。旧ライブラリのカード・動画規範は媒体別の制作規範に残します。
06 / Accessibility & voice
見えることを、条件にする。
- 本文のコントラスト4.5:1、十分に大きい文字は3:1以上
- 色だけに依存せず、位置・形・ラベルを併用する
- キーボードで操作でき、フォーカスが見える
- 200%の文字拡大でも情報と操作が失われない
- 拡大操作を妨げない。低速・失敗時にも状態を伝える
観察を言葉にする
「砂塵が北大西洋へ広がる」は観察。「地球が悲鳴をあげる」は解釈。値・基準・時点を明記し、断定の強さをデータの確かさに合わせます。
モデル・速報・合成を観測と混ぜない。測定対象、欠測、暫定値は出典パネルへ残します。
07 / Implementation
一度決めて、同じ定義で使う。
ガイドの見本と実装用ファイルは同じ正本から生成します。アプリはビルド時に版を固定し、閲覧のたびに変わる配色を読み込みません。
01 Registry
題材・色・地図・優先ビュー
02 Scene
版・値域・単位・変換・時刻
03 Render
MapLibreとPythonで同じLUT
04 Release
出典・検証・成果物を固定
確認できていること
15題材・30モードの色定義とWeb／Pythonの補間を照合。地図のサンプルはNatural EarthとETOPO1を使った検証用です。ETOPO 2022の本番配信、実Sceneへの適用、人による知覚検証は別々の受入条件として管理します。
15題材・30モードの色定義とWeb／Pythonの補間を照合。地図のサンプルはNatural EarthとETOPO1を使った検証用です。ETOPO 2022の本番配信、実Sceneへの適用、人による知覚検証は別々の受入条件として管理します。
08 / Decisions & references
決定と検証を、残して進む。
4つの章をひとつのリリースとして更新します。変更の理由と原資料は、共通の更新履歴に記録します。
更新履歴・決定を読む ↗有効な詳細は「UIの規範と実例」へ移行済みです。旧版は当時の原本として保管しています。全セクションの掲載先と置き換えはImplementationの継承台帳に記録します。