UIの規範と実例
文字、余白、部品、動き、言葉、iOSまで。画面の実装時に必要な寸法と実例をまとめます。
適用範囲
共通のUI規範です。BODY I-Oの分離ピル・AIピル、SORAH App 2024のNFC・認証・登録フローは、その機能を持つ製品の構成例です。全製品への一律適用はしません。作例の数値はダミーです。 ボタンや入力欄は構成見本です。一部の選択切替を除き、登録・送信などの実処理は行いません。
3つの原則
迷ったらこの3つに立ち返る。すべてのコンポーネント・画面・コピーはこの順で判定する。
コンテンツが主役、UIは退く
ユーザーが見たいのは自分のデータと変化であって、UIではない。装飾よりも余白、色よりもタイポグラフィで階層をつくる。ブランド色は面で塗らず、意味のある場所にだけ効かせる。
数字は一目で、太く
数値は常に Poppins・タブラー数字・極太で組み、単位は小さく添える。ひと目でスキャンでき、変化（良い/悪い）が色と符号で即座に分かること。グラフは1画面1メッセージ。
紙とガラスを、読む条件で選ぶ
操作と本文カードのどちらにもガラスを使える。紙（不透明面）と使い分け、背景との合成後に読みやすさを確認する。角丸は常に同心で、同じ意味には同じ色・同じ型を使い、画面ごとに発明しない。
ロゴ
各形式の見本、背景による使い分け、余白と最小サイズ、禁止事項、SVGダウンロードを1ページにまとめました。
ロゴ各形式・余白・禁止事項 ↗カラー
VIガイドのCI/UIパレットをそのままトークン化する。配分の目安は 白 90 : ブルー 7 : その他 3。ブランドを感じさせるのは面積ではなく、置き場所の正確さ。
CI パレット Brand
UI トークン Semantic
| Token | 値 | 役割 | 備考 |
|---|---|---|---|
--ink 〜 --ink4 | #111111 / #4A4A4A / #767676 / #8A8A8A | テキスト4段階 | 文字に使えるのは ink3 まで（#767676 = 4.5:1）。ink4 は罫線・アイコン・区切り専用で、文字色にしない |
--blue | #006BFF | Positive / Primary action | 1画面のプライマリボタンは1つ。ライトのボタン・文字リンク・アイコンは同じ青 |
--blue-fill / --blue-txt | #006BFF | ライトの操作面・文字リンク | どちらもGraphic 01の別名。白とのコントラストは4.62:1 |
--blue-dk | #05396B | ブランドの深い青 | 操作色の用途別分割には使わない。データの色はEarth Languageを参照 |
--accent | #DA003C | Negative / 警告・削除 | 「悪い変化」の数値色。多用禁止 |
--tint / --tint2 | #E6F0FF / #F2F7FF | ブルーの淡面 | テーブルヘッダ・選択面・シート背景 |
--rule / --rule2 | #E5E5E5 / #D4D4D4 | 罫線・入力枠 | 影の代わりに1px罫線で区切る |
--gray-out | #CCCCCC | Disabled | 透明度でごまかさず、この色で無効を示す |
ガラスの色面 Glass tint
アイコン・図版・イラスト・装飾は「ソリッドの青」×「フロスト（すりガラス）の面」の2色面で構成する。フロスト面の背後に重なったソリッドはぼけて透ける。この言語はアイコンと図版のためのもので、ディバイダーのような装飾には使わない（v5.2で見出し下のバーを廃止）。
重なり部のぼかしは blur(2.4)（アイコン48px基準）。フロストの上に置く細部（点・針・ドア等）はソリッドで crisp に描く。
操作色とブランド色の分離 Action vs brandFrom SORAH App 2024
アートディレクターによるSORAHアプリ原案（2024）は、この分離を最初から実践していた ── ロゴと起動画面だけがVI Blue、ボタン・リンク・強調テキストは一段沈めた青、エラーは赤、セカンダリは薄いグレー面、ダークな没入画面の上では白抜き。原案の操作青（実測 #5C7BC6）は v5.2 で Graphic 01 #006BFF に正規化する。値は変わるが原則は変わらない: 明るい青は「ブランドの瞬間」、濃い青は「押せる場所」。
| 原案での役割 | 原案の色 | v5.2 トークン | 規定 |
|---|---|---|---|
| ロゴ・スプラッシュ・スキャン待機の芯 | ≈ #6BBDEB（VI Blueを一段沈めた空色） | #00BFFF --vi | ブランドの瞬間のみ。UIの操作面には使わない。原案の空色は VI 制定前の値で、アプリの原案再現時のみ使用可 |
| プライマリボタン・リンク・強調語（日付・著者名） | #5C7BC6（実測） | #006BFF --blue | 1画面1プライマリ。テキストリンクは太字で下線なし |
| セカンダリボタン（Cancel / Close） | 薄グレー面 | #F2F7FF --tint2＋ink | プライマリの直下に同幅で縦積み。並列（左右）にしない |
| エラー文・エラー枠・Log out | 赤 | #DA003C --accent | 理由と回復手段を必ず併記 |
| 没入画面（Data Scape）上のUI | 白 / 白抜き | #FFFFFF (＋ダークガラス) | シーン色に埋もれない。閉じる×・ツールボタンは常に白系 |
Data Scape のシーン色 Scene palettesFrom SORAH App 2024
Sceneの配色はEarth Hues v5 / Grounds v1へ更新しました。UIの外観とSceneの昼夜は独立させ、題材IDと版で参照します。
ダークモード Dark mode
画面の地・文字・操作を1組のトークンで扱います。ブランドのVI InkとSceneの夜色はUI地に使いません。旧中立黒パレットはこの表に置き換えます。
| 役割 | ライト | ダーク |
|---|---|---|
| background | #FFFFFF | #0C1428 |
| surface | #FFFFFF | #141F36 |
| ink | #111111 | #F5F5F5 |
| secondary | #4A4A4A | #CBD5E1 |
| muted | #767676 | #A1ACBD |
| action | #006BFF | #1E8CFF |
| onAction | #FFFFFF | #08122B |
| link | #006BFF | #4DA3FF |
| border | #E5E5E5 | #344157 |
| danger | #DA003C | #FF4D6D |
| onDanger | #FFFFFF | #08122B |
| tint | #E6F0FF | #182D50 |
| tintSubtle | #F2F7FF | #141F36 |
| borderStrong | #D4D4D4 | #52627C |
| disabled | #CCCCCC | #52627C |
| nonText | #8A8A8A | #74829A |
| icon | #006BFF | #4DA3FF |
タイポグラフィ
UI・記事・図版・動画・印刷を通じて、欧文は Poppins、和文は Noto Sans JP を正とする。VI原版ロゴの形状は変更しない。英数字・数値・ラベルはPoppins、日本語文はNoto Sans JP。混植時はNoto側に揃える。
PERCEPTIONS
PERCEPTIONS
人々に新たな視座をもたらす
| Style | Font / Weight | Size | 用途 |
|---|---|---|---|
| Numeric Hero | Poppins 800 | 40–64px | 主要指標の主数値。単位は0.35emでink3 |
| Display EN | Poppins 800 / ltr-sp 0.01em | 34–58px | 見出し・ブランドコピー |
| Sky Type | Display/H1に空テクスチャーをclip | 28px〜 | タイトル・強調コピー専用。本文・小さな文字は禁止 |
| H1 JP | Noto Sans JP 900 | 21–30px | 画面・セクション見出し |
| Kicker | Poppins 700 / 0.18–0.22em / 大文字 | 11px以上 | セクション番号ラベル（例: 01 — OVERVIEW） |
| Body | Noto Sans JP 400–500 | 15px以上 | 本文。行間1.7–1.85 |
| Caption | Noto Sans JP 400 / ink3 | 11px以上 | 注記・メタ情報 |
| Icon tab label | Noto Sans JP / 拡大に追従 | 9.5px以上 | アイコン付きタブに限る例外。本文や単独ラベルへ広げない |
| Table Numeric | Poppins 600 / tabular-nums | 13.5px | 表の数値は必ず右揃え＋等幅数字 |
読み出しの対 Readout pairFrom SORAH App 2024
時系列の没入画面では、数値は「軸の値｜観測値」の対で読ませる（例: Year 2000 ｜ Area 6,200,000 km²）。ラベルは11px以上の大文字キッカー、値はPoppins 800・タブラー、単位は値の1/3で右に添える。対の間は1pxの縦罫。値の直下にスパークライン＋現在位置のスライダーを置き、スライダーは軸の単位（年）ごとに止まる。読み出しは常時表示 ── 隠さない（07の「隠さない」の法則）。
記事ヘッダーの型 Article headerFrom SORAH App 2024
The Future of Arctic Sea Ice Revisited
氷と海の境界線：北極圏から透けて見える地球の未来
ヒーロー画像（全幅・角丸なし）→ 日付（ブルー・Poppins 700） → 見出し（欧文 Poppins 800 / 和文 Noto 900、2–3行）→ 署名（ブルー） → タグ（ink3）→ 罫線 → リード（太字本文）→ 本文。ブルーは日付と署名の2箇所だけに置くことで、見出しの黒が立つ。和文版は見出し直下に番号付きの目次（01/02/03）を置いてよい。編集文の規範は08に従う。
最低フォントサイズ Minimum sizes
OSの文字サイズ可変機能に追従する前提で設計する（iOS＝Dynamic Type / UIFontMetrics、Android＝sp単位、Web＝remでブラウザ設定を尊重）。下表のpxは既定倍率（100%）時の基準値。ユーザーが200%まで拡大してもレイアウトが破綻しないこと（WCAG 1.4.4）。
| デバイス | 本文基準 | 補助最小 | アイコン付きタブ | 備考 |
|---|---|---|---|---|
| SP（〜599px） | 15px | 11px | 9.5px | タブはアイコンと名称を併記。単独ラベルは11px以上 |
| Tablet（600–1023px） | 15–16px | 11px | 9.5px | 2カラム時も本文を縮めない。小さなタブ文字はアイコン付きに限る |
| PC（1024px〜） | 15–16px | 11px | 9.5px | キッカーも11px以上。すべて拡大に追従する |
運用ルール: 主要数値（Numeric Hero・リスト右端の値）は拡大設定に追従して大きくなってよいが、縮小はしない。Dynamic Type最大時はラベルの折返し・タブバーの2段化を許容し、文字の省略（…）でしのがない。Sky Typeは拡大時もコントラスト検証を再実施。
レイアウトと余白
4pxグリッド。主要な余白は 8 / 12 / 16 / 24 / 40 / 64 に限定する。詰めるより削る。1画面に載せる情報を減らすことが最良のレイアウト。
| 項目 | 規定 |
|---|---|
| コンテンツ幅 | モバイル: 画面幅−28px（左右14px）／ 読み物・アプリ本文の最大幅 760px ／ 本ガイドのような文書 1060px |
| セクションの型 | キッカー（11px以上・操作色とは役割を分ける）→ 見出し（JP 900）→ 本文。見出しと本文の間は余白（22px）だけで区切り、飾りのバー・ディバイダーは置かない（v5.2で廃止）。プロダクトUIのセクション構成 |
| 角丸 | 同心スケール 14 / 22 / 30px＋カプセル（999px）で統一（v4.0で直角を廃止）。入れ子は常に同心（外30→内22→内14）。端末の画面角とも同心に。直角を使うのはコーポレートサイト・ドキュメントのみ |
| レイヤーと深さ | 紙レイヤー（コンテンツ）: 白面＋1px罫線、影なし。ガラスレイヤー(操作): 半透明＋blur＋ヘアライン＋柔らかい影で浮かせる。ガラスの入れ子は1階層まで |
| アプリシェル | 本文がedge-to-edgeでスクロールし、その上に浮遊トップバー・浮遊タブバー（ガラス）が重なる。バーは画面端から8–12px離して浮かせる。Safe Area必須 |
| アプリを広い画面で開いたとき | スマートフォン用に組んだアプリをPCブラウザで開くときは、アプリ全体を1本の列（幅460px）に閉じて中央に置く。地は列の外側だけ薄いグレー（ライト #F4F6FA ／ ダーク #070C18）にし、列は1px罫線で囲う。ヘッダーのアイコン・シート・モーダルは列の内側で位置を決める ── 画面幅に対して絶対配置すると、本文から離れて別のUIに見える |
| 没入画面 From SORAH App 2024 | Data Scapeなど1題材で全画面を使う画面。上端に固定タイトル（長い場合は「…」）と閉じる×、右上にツールボタン（関連記事・インフォメーション）、下部に読み出し＋チャート／スライダー、または切替ボタン。縦長のときは上下中央に縦積み、横長のときはビジュアルを左・読み出しを右に横並び。SP／タブレット／PC／アプリで同じ規則 |
| 中央モーダル | 確認（製品登録など）は画面中央の白カード（角丸30）。写真→名前→説明→プライマリ／セカンダリを縦積み・同幅。背後はスクリムで暗くし、×またはCancelで戻る。1画面に1つまで |
| 認証画面 | 上1/3にマーク＋ワードマーク、下にボタンの縦積み。フォームは1カラム・ラベル常時表示・入力枠は全幅。画面遷移は「Sign up ⇄ Log in」を下部のテキストリンクで往復させる |
コンポーネント
v4.0でコンポーネント言語を Liquid Glass（Apple, 2025–）に全面転換した。UIは2層でできている: 紙のレイヤー（コンテンツ。白面・同心角丸・罫線）と、その上に浮かぶガラスのレイヤー（操作。半透明・blur・カプセル・柔らかい影）。直角は廃止し、角丸は同心スケール 14 / 22 / 30px / カプセル に統一。サンプルの数値・文言はダミー。
UIファウンデーション — フラット2モード UI Foundations v5.0
実プロダクト（BODY I-O）のUI構築を経て確定。プロダクトUIの地はフラット2モード — ライト＝純白 #FFFFFF、ダーク＝ネイビー #0C1428。「オート」は端末の外観設定に連動する。空のテクスチャーはUI背景に使わない（用途は下記「空のテクスチャー」参照）。ライトのカードは白面＋ヘアライン罫線（rgba(17,17,17,.09)）で影なし、選択状態にのみ軽いリフト影を許可。ダークの面は#141F36を基準にする。本文カード・操作のどちらにもガラスを使用できる。背景との合成後にコントラストを確認し、不透明な代替も用意する。ガラスは1階層までとし、空のテクスチャーをUI背景に敷かない。
ヒーロー（主要数値・達成面）はブランドブルーのグラデーション linear-gradient(130deg, #05396B → #006BFF → #00BFFF)＋白数値。両モード共通のアクセントとして機能する。
タブバー — 分離ピル構成 Split-pill tab bar
製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。
- タブバー: メインカプセル（最大4タブ・選択＝白ピル＋リフト影）＋独立した真円のAIピル（66px・ブルー・通知ドット）の分離構成。画面下端近くに浮かせ、コンテンツは下を通過して透ける
- ヘッダー: センタリングのタイプロゴのみ。罫線・日付等のメタ情報は置かない。マークロゴはスプラッシュとローディングで象徴的に使う
- スプラッシュ: 地はモード色、中央にマーク（パルス 1.7s）＋タイプロゴ。最短1.1秒表示→フェードアウト
- 更新: ボタンではなく Pull-to-Refresh（引くとマークが回転しながら降りる）。読込中はガラススクワークルHUD＋パルスするマーク
- キーボード: 表示中はタブバーを退避（フェード）し、入力欄をキーボード直上に追従させる
- 表記: 専門略号（P/F/C等）は使わず日本語（たんぱく質・脂質・炭水化物）。主要数値（kcal等）は結果カードの最上段に全幅で置く
空のテクスチャー Sky textures
v5.0で用途を変更。空のテクスチャーはUI背景には敷かない（実UIで検証の結果、フラット2モードに統一）。用途はブランドアートワーク専用: アプリアイコン・キービジュアル・Sky Type（タイトル文字への流し込み）・グラフィック/印刷物。原版はsorah.ioトップの空（hero-cloud）。写実には寄せず、強くぼかした抽象的な色面＋アナログフィルムのグレイン（細粒ノイズ・浅いフェード・弱いビネット）に仕上げ、4種にグレーディングする。
使い分け（アートワーク）: Morning Light＝朝・開始の表現／Daylight＝標準（アプリアイコンの地）／Twilight＝達成・祝祭の表現／Nightsky＝夜・ダーク文脈の表現。グレインは表示スケールで細粒に見える解像度で書き出す（グレインの拡大はNG）。空の上の文字は白＋弱いシャドウ。UI画面の背景としての使用は禁止。
マテリアル Materials — on Daylight
ガラスで本文を読む
本文カードにも使える。背景と合成した文字のコントラストを確認し、必要なら不透明な面に切り替える。
浮遊トップバー（カプセル・ガラス）／ガラスカード／浮遊タブバー（画面下端から離して浮かべ、選択タブは白ピル、AI機能はティントガラスで差別化）。ガラス＝ rgba(255,255,255,.55)＋blur(18px) saturate(1.6)＋ヘアライン＋上辺ハイライト。ガラスの中にガラスを重ねない（1階層まで）。
アイコン Glass icons
ブランドの表現アイコンは、ガラスの色面2枚で描くアイコン体系。①フロスト面＝主形状（何のアイコンかを決める）②ソリッドの青＝意味のある部位にだけ（ドア・針・点灯ドット・日付・レンズ・頭部…）。意味のない装飾の丸は禁止。ソリッドがフロストの背後に潜る箇所だけぼける（blur 2.4 / 48px基準）。48pxグリッド・同心角丸。BODY I/O・SORAHアプリ等での使用を想定した基本21種。
構成則: フロスト＝主形状、ソリッド＝意味の芯（ドア＝入る／針＝時刻／3点＝入力中／稲妻＝運動／バッジ＝未読）。1アイコンにソリッドの要素は1グループまで、2色以外使わない。単色のUI背景やガラスバーの上で視認性を確認（タブバーは同アイコン23px、ティント地は白反転）。操作の小さな記号・標準UIのアイコンは、意味と視認性を優先する。
ボタン Buttons
全ボタンはカプセル。プライマリ＝現行action / onActionの組（ライト #006BFF＋白、ダーク #1E8CFF＋#08122B）、セカンダリ＝クリアガラス、アイコンボタン＝円形ガラス。高さ44px以上・1画面のプライマリは1つ・ラベルは動詞。押下は scale(0.94) のバネ。
サーフェス Surfaces
紙カード
コンテンツの器。白面＋罫線＋角丸22px。影なし。
浮遊カード
柔らかい影で1段浮かせる。1画面に1枚だけ。
ダーク面
没入型のデータ表示に。#141F36＋角丸、ブルーは昇格版。
紙は不透明な面、ガラスは背景が透ける面。操作・本文カードの両方にガラスを使える。実際の背景で合成後のコントラストを確認し、不透明な代替も用意する。
表現レイヤー Expressive layer
紙とガラスの2層の上に、ブランドの瞬間にだけ表現レイヤーを重ねる。1画面1箇所まで。v5.0以降、アプリUIの表現面はブランドブルーのグラデーションを標準とし、空のテクスチャーはキービジュアル等のアートワーク文脈に限る。参照: Apple Liquid Glass（ガラス質の浮遊コントロール）／ Material 3 Expressive（バネのある形態変化）／ Strava（動きのあるテクスチャー）。
表現面: ブランドの瞬間（ヒーロー・達成・オンボーディング）の背景はブランドブルーのグラデーション＋白文字。ガラスバー: 操作・本文カードとも半透明＋blur＋ヘアラインを使える。合成後の可読性を確保し、ガラスを入れ子にしない。prefers-reduced-motionで全停止。
バネのある形態変化（M3 Expressive型）: ピル⇄角丸のモーフィング、選択ピルのスライドは spring イージング cubic-bezier(.34,1.56,.64,1)・350ms。押下は scale(0.93)。跳ねは操作の応答にだけ使い、装飾では動かさない。
数値表示 Stat display
ヒーローはブランドグラデーション面＋白数値で1画面1枚（紙のstatカードと重ねない）。値はPoppins 800・タブラー、単位は小さく。変化は色だけでなく符号を必ず併記（Strava/Fitnessの走査性）。
プログレス Progress
1画面1つ・達成率にのみ使う
対になる2系列は blue／blue-dk で統一。しきい値超過など「悪い状態」への反転は accent。バーの高さ14–20px、トラックは tint2。
リスト Inset grouped list
iOS型のinsetグループ: 角丸22pxの紙面にまとめ、区切りは左インセット付き1px罫線。左＝タイトル＋メタ（ピル型チップ）、右＝主数値。行全体をタップ領域にし、詳細はシートで開く。
シート Glass sheet
詳細・確認はガラスシートで下から。グラバー必須、下スワイプ/外タップで閉じる。角丸は上辺30pxで画面と同心。破壊的操作はシート内で danger カプセル＋確認。
会話UI Conversational
ユーザー発話＝ブルー・右寄せ、AI＝tint2・左寄せ。角丸22px＋発話側の下角のみ6px（向きの手掛かり）。コンポーザーはガラスのカプセルで本文の上に浮かせ、送信は円形ボタン。応答内の数値は太字。
フォームとフィードバック Forms & Feedback
入力枠は角丸14px、フォーカスでブルー枠＋淡いグロー。エラーはaccent枠＋理由と例を1行で。ラベルは常時表示（プレースホルダー代用禁止）。成功は短いフィードバックで知らせる。視覚表示の目安は2秒だが、読み上げ通知と結果の確認手段を残す。
空状態 Empty state
まだ記録がありません。
最初の1件を追加するとここに表示されます。
イラスト・マスコットは使わない。何が起きるか＋次の1アクションだけを示す。
コーチング・シート Coaching sheetFrom SORAH App 2024
製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。
Your Collection
「持ち物がまだ無い」タイプの空状態は、空カードではなく画面下端のシートで「何を・どうすれば・入るか」を教える。見出し＝得られるもの（Add to Your Collection）、本文＝動作＋場所（Scan NFC アイコンをタップして製品にかざす）、右に対象物のサムネと「+」。この見本は紙（白面＋ヘアライン）。ガラスを選ぶ場合も本文の可読性を保つ。
スキャン待機と結果 Scan & resultFrom SORAH App 2024
製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。
この製品をコレクションに追加しました。
待機はマークを芯にした同心円のパルス（2.6s、0.85s間隔、3面。旧作例の1.8s表記はモーション表へ統一）── これは v5.0 のスプラッシュ・パルス（拡縮）とは別の「探している」動き。実際の読み取りはOS標準のNFCシートに委ね、独自UIを重ねない（09参照）。結果は中央の小カード: 円形アイコン → 状態名 → 1文 → 1アクション。成功は「Close」だけ、失敗は回復手段（Retry）とヘルプへの導線を必ず持つ。
登録モーダル Register modalFrom SORAH App 2024
製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。
スキャンした製品をあなたのコレクションに登録します。
2007–2020年の森林被覆の変化。JAXA FNF。
認証スタック（順序固定）
物を登録する確認は写真を見せる（何を登録するのかを目で確認させる）。写真→製品名→1–2行の説明→プライマリ／セカンダリの縦積み。認証の入口は Apple → Google → メール登録 → ログイン の順で固定し、ソーシャルは各社の規定文言・アイコンをそのまま使う（改変しない）。メール登録後は「Verify」画面（盾アイコン＋1文）を挟み、Sign up ⇄ Log in はテキストリンクで往復。
設定リスト Settings listFrom SORAH App 2024
製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。
マイページは1行1項目のinsetリスト＋シェブロンだけで組む。順序は「自分のこと → 言語 → 助け → 会社 → 法務 → ライセンス」、最後にLog out を赤文字で1行（ボタンにしない）。アカウント削除は設定画面のいちばん下にテキストリンクで置き、確認を挟む。
モーション
自動再生と、止めて読む操作
時刻操作の作例。年は仮の範囲で、観測データではありません。
2000年
表示時に開始し、末尾で停止。時刻を選ぶとその位置で止まります。非表示時は停止し、復帰後は操作で再開します。
| 用途 | 時間 | イージング | 備考 |
|---|---|---|---|
| タップ反応（アイコン縮小等） | 120ms | ease | scale(0.9)程度。触感の代替 |
| 要素の出現（メッセージ・シート） | 260ms | ease / backwards | translateY(8px)+fade。1方向のみ |
| バー・グラフの伸長 | 500ms | ease | 数値の変化を見せる時だけ |
| 形態変化・選択ピルのスライド（表現レイヤー） | 350ms | spring cubic-bezier(.34,1.56,.64,1) | 操作の応答にだけ。装飾では動かさない |
| スプラッシュのマーク（パルス） | 1.7s loop | ease-in-out / scale 1→1.06 | 起動時。最短1.1秒表示→フェード .55s |
| Pull-to-Refresh インジケータ | 追従 | 引き量に応じ回転・降下 | マークを使用。閾値超えで更新実行 |
| ローディングHUD（パルス） | 1.2s loop | ease-in-out | ガラススクワークル＋マーク。データ読込中 |
| 注意喚起（バッジ等） | 1.8s×3回 | ease-in-out | 無限ループ禁止。3回で止める |
| スキャン待機（同心の面）App 2024 | 2.6s loop / 3面 0.85s間隔 | ease-out / scale 1→2.6, opacity .28→0 | 原案の実測: マーク（145px）を芯に #66B4E7 10%の塗り面が 210 / 270 / 340px で重なり、その外に 470 / 950px の1pxの円（#6BBDEB）。線ではなく面が外へ広がって薄れる。「探している」状態にだけ使い、OSのNFCシートが出たら止める |
| Data Scape 再生・回転 | 連続 | linear（回転）／ 年ごとにステップ（時系列） | 時系列は表示時に自動再生。停止・時刻指定を表示し、停止位置を保つ。非表示時と動きを減らす設定では停止する。地球儀の自動回転はこの規定に含めない。S-06 / S-11 / S-12を適用。 |
| チュートリアル（初回のみ）App 2024 | in .3s → 2s → out .3s | fade | 「Tap & Scroll」のような操作ヒント。自動で消え、閉じる操作を要求しない |
原則: 動きは情報（何が変わったか）を運ぶ時だけ使う。例外は表現レイヤーの動的テクスチャーのみ（ブランドの瞬間・1画面1箇所）。パララックスは使わない。prefers-reduced-motion で全アニメーションを停止する。
ボイス＆トーン
SORAH の言葉にも二つのレジスターがある。UIコピーは「有能で、簡潔で、責めない」声。編集文は「観察的で、削ぎ落とされた」声。人称も文体も違う。
レジスターの選択
| UIコピー | 編集文（発信） | |
|---|---|---|
| 置かれる場所 | アプリ・Web の操作面、AI応答 | グラフィック、記事、投稿、ニュースレター |
| 文体 | 敬体（です・ます） | 常体（である・だ） |
| 人称 | 主語を立てない。ユーザーを「あなた」と呼ばない | 一人称複数（私たち）。ただし名乗りは最小限 |
| 構え | 結論から。次の操作を示す | 観察を置く。断定しない。読者が自分で結論に達する余地を残す |
| 数字 | 最初に、太く | 見出しに置かない。本文に潜ませる |
UIコピー
- 結論から。数字を根拠に短く話す
- できなかったことは「次どうするか」に言い換える
- 敬体（です・ます）。専門用語を避ける
- ボタンは動詞で（「この内容で保存」「撮り直す」）
- 責める・煽る表現（未入力は仕組みの問題かもしれない）
- 精神論・根拠のない断定・専門領域（医療等）の判断
- 絵文字の乱用（AIの文章では使わない）
- 「エラーが発生しました」だけの無情報メッセージ
状態を告げるコピー State copyFrom SORAH App 2024
原案のコピーは、状態名を短い名詞句で立て、その下に1文で「何をすればよいか」を置く型で統一されていた。この型を規範にする: 状態名（2–3語）→ 動作＋場所の1文 → 回復手段。
| 場面 | 原案（EN） | 日本語UI（敬体） | 型 |
|---|---|---|---|
| 待機 | Ready to Scan Hold the NFC tag steady and long enough to your iPhone. | スキャンできます 端末の上端をタグに近づけて、そのまま待ってください。 | 状態名＋動作と場所 |
| 空（持ち物なし） | Add to Your Collection Tap the Scan NFC icon and hold your device over the product. | コレクションに追加 スキャンのアイコンをタップして、製品に端末をかざしてください。 | 得られるもの＋動作と場所 |
| 失敗 | Scan error view help page ／ Retry Scan | 読み取れませんでした ヘルプを見る ／ もう一度スキャン | 状態名＋回復手段2つ（やり直す・調べる） |
| 成功 | Register success Close | 登録しました 閉じる | 状態名＋閉じるだけ。祝福語や絵文字は足さない |
| 確認 | Register your Product Register ／ Cancel | この製品を登録 登録する ／ キャンセル | 動詞で始まる見出し＋動詞のボタン |
英語UIは原案の文言をそのまま正とする（Sign up / Log in / Forgot Password? / Don't have an account? Sign up）。日本語は敬体で、「エラー」という語を状態名に使わない ── 何が起きたかを言う。
編集文 ── 発信のトーン
- 観察を書く。「〜である」と言い切る前に、何を見たのかを書く。規範ではなく観察のレジスターに立つ
- 削ぎ落とす。形容詞と副詞を疑う。修飾を1つ外して意味が減らないなら、外す
- 見出しは問いか観察。結論の数字を見出しに置かない
- 数字は本文に潜ませる。本文では算用数字・3桁区切り。単位との間を空けない
- 単位を身体に落とす。°C・km²・ppm で止めず、人・日・面積の比喩まで翻訳する
- 体言止めを多用しない。断定が強くなり、観察のレジスターから外れる
- ひらがなに開く基準を持つ。動詞の本体は漢字（退く・縮む・届く）、補助動詞と形式名詞はひらく（〜していく・〜のこと）
見出しの作法
- 和文17字以内を目安にする（G1 の作画枠がそれ以上を許さない）
- 主語を立てる。「何が」どうしたのかが読める形にする
- 比較を含める。何と比べたのかが無い見出しは、情報ではなく数字の報告になる
- 専門語を素の言葉に置き換える。「平年」「偏差」「エクステント」は本文か注に落とす
和欧混植
境界は文字単位ではなく連（run）単位で判定する。
- 数字で始まる欧文連は数量 → 詰める：この30日 2,274万人 1.1°C高い
- 英字で始まる欧文連は語 → 四分アキ：NASA GISTEMP v4 の観測
- 入力に含まれる余分な空白は先に取り除く。処理は何度かけても同じ結果になること
直した文
2026.08 の日次グラフィックから。左が最初に出したもの、右が本規範に通したもの。
| 直す前 | 直したあと | 理由 |
|---|---|---|
| この10年の平年は、最初の30年より1.3°C高い | 赤が途切れなくなったのは、1980年からだ | 「平年」は気候学の術語で日常語ではない。数字の報告ではなく、図に見えているパターンを名指す |
| 9月1日の氷は、45年で日本7個分ちいさくなった | 45年で、日本7つ分の氷が退いた | 「ちいさくなった」の開きすぎと「個分」の粗さ。動詞の本体は漢字に戻す |
| この30日、揺れが届いた範囲に5,905万人が暮らす | （保留 ── 数字を先に詰める） | 「届いた」の定義が曖昧なまま人口を数えている。定義を決めるまで文にしない |
| 1本が1年。色は1951–1980年平均との差。 | 1本が1年。右へ行くほど、基準より暑い | 凡例の説明ではなく、読み方を渡す |
| 今日の線 — 2026.08.28 | 最新の線（2026.08.28 観測） | 発行日と観測日の不一致を、注記なしで「今日」と書かない |
書いたあとの三問
- この文を読んだ人は、それを誰かに説明できるか
- 見出しを隠しても、図だけで「何かがおかしい」と気づけるか
- 数字に基準が添えてあるか
使わない語
革新的 ／ 革命的 ／ イノベーション ／ 「世界をより良くする」の単独使用 ／ 「届ける」「提供する」の多用（一方向的） ／ 絵文字 ／ 専門略号（P・F・C 等）／ Creative Platform（退役した自己定義）
絵文字と絵文字的な記号は、文章にもUIにも使わない。☝ ➡️ ✓ ✔ のようなピクトグラフを操作の合図や状態のマークに置かない ── 環境ごとに字形と色が変わり、トーンが崩れる。チェック・警告・方向はSVGで組む（線幅と色はトークンに従う）。文中の矢印は活字の ↗（外部リンク）まで。
iOS作法（iOS 26 / Liquid Glass対応）
| 項目 | 規定 |
|---|---|
| 階層 Hierarchy | コントロールはコンテンツの上に「浮く」。ネイティブ化ではタブバー・ツールバーに標準のガラスマテリアルを許容し、本文カードにもガラスを使える。背景との合成後の可読性と不透明な代替を確保する |
| 調和 Harmony | 角丸は端末・親コンテナと同心（concentric）に。Web版も同じ同心スケール（14/22/30/カプセル）なのでそのまま移植できる |
| 一貫 Consistency | 標準コンポーネント（シート・ナビゲーション・触覚）を優先し、独自実装は本ガイドのコンポーネントに限る |
| タップ領域 | 44×44pt以上。行タップ・×ボタンは余白込みで確保。Webも同値（10参照） |
| Safe Area | 上下とも必須。タブバーは env(safe-area-inset-bottom) を含めて設計 |
| ダーク対応 | 背景 #0C1428、面 #141F36、操作 #1E8CFF、操作上の文字 #08122B。小さいリンク文字は #4DA3FF。VI Blueはブランド専用。 |
| NFC App 2024 | 読み取りはCore NFCの標準シート（Ready to Scan）に委ねる。独自の読み取りUIを重ねない。シートの案内文（alertMessage）は本ガイド08の「状態を告げるコピー」で書く。待機中の同心円パルスはシート表示前のアプリ画面側に置く |
| Sign in with Apple App 2024 | ソーシャルログインを置く場合はAppleを最上段（SORAHの認証画面の配列）。ボタンはApple／Googleの規定スタイルを改変しない。順序: Apple → Google → メール → ログイン |
| アカウント削除 | 設定の最下部にテキストリンクで置き、確認ダイアログを挟む（SORAHのアカウント管理の設計）。Log out は赤文字の1行 |
アクセシビリティ
| 項目 | 基準 |
|---|---|
| コントラスト | 本文 WCAG AA（4.5:1）以上。#006BFF×不透明な白は4.62:1。ライトの文字リンク・ボタン・アイコンに使う。ガラスや透明度を加えた色は実際の背景との合成後に検証する。ダークのリンクは #4DA3FF。大きな文字は24px通常または18.66px太字以上 |
| ボタンの地 | ライトのボタンは --blue-fill #006BFF＋白文字（4.62:1）。ダークでは明るい青地 #1E8CFF に濃紺 #08122B の文字を載せる（5.6:1）── 明るい青に白は 3.3:1 |
| グレー階調 | 文字色に使えるのは --ink3 まで。--ink4 は白地で 2.1:1 なので文字に使わない（罫線・アイコン・区切り専用）。リストのシェブロンなど意味を持つ記号は ink2 |
| タップ領域 | 44×44pt 以上（戻る・アイコンボタン・閉じる・See All・チェックボックス）。文中のインラインリンクは行の制約を受けるため例外だが、行間で 24px は確保する |
| 文字サイズ | 本文15px / 補助11px。アイコン付きタブラベルに限り9.5pxを認める。単独ラベル・本文にはこの例外を適用しない。Webは rem で組み、OSの文字サイズ設定に追従させる。200%拡大で横スクロールを出さない（固定列のグリッドは auto-fit / minmax() に） |
| 色以外の手掛かり | 良い/悪いを色だけで伝えない。符号（+/−）・ラベルを併記 |
| 数値 | tabular-nums必須。桁区切りは半角カンマ |
| フォーム | 全入力にラベル。プレースホルダーをラベル代わりにしない |
| モーション | prefers-reduced-motion でアニメーション停止。通常は時系列Sceneを表示時に自動再生し、停止・時刻指定を表示。動きを減らす設定では初期状態から停止し、時刻を静止状態で選べる。非表示時も停止し、戻ったときは操作で再開 |
| 画像 | 意味のある画像にはalt。装飾のSVG・図形は aria-hidden="true" ＋ focusable="false" で読み上げから外す |
| フォーカス | キーボード操作に :focus-visible のリング（3px、2px offset）。outline:none だけにしない |
値と短い言葉で、状態を区別する。
ゼロは有効な数値。欠測・対象範囲外・読み込み中・取得失敗は、それぞれの名前を値に添える。状態を強調するための模様やバッジを標準にはしない。暫定値・推定値は、有効な値に付く品質情報として別に示す。
地点の降水量 / 比較用の架空データ
北緯48.9°／東経2.4° · 2026年9月20日12:00 UTC
— · 欠測
この時刻の観測値がありません。
主値を読み、根拠は詳細で確かめる。
主値・単位・地点・表示時刻と「補間表示」を常時表示する。元値・元地点・両端時刻・補間方法と率は、キーボードやタッチで開ける詳細に置く。欠測・補完・飽和など重要な状態は、詳細を開かなくても分かるようにする。表示桁数は測定精度を超えない。
煙の濃さ / 比較用の架空データ
北緯48.9°／東経2.4° · 12:30 UTC
0.42 AOD
補間表示 — 観測時刻の間をつないだ値
元の値と計算方法
- 同じ元格子の12:00 UTC
- 0.36 AOD
- 同じ元格子の13:00 UTC
- 0.48 AOD
- 方法
- 時間方向の線形補間、補間率50%。この作例は空間補間なし。
空間補間を行う場合は元格子の座標・解像度・参照値も詳細へ。P4気温の表示専用補完は「補間表示」と同一視せず、補完状態と元値の欠測を明示する。
処理する部品だけを待機させる。
更新ボタンの二重送信を防ぎ、他の探索操作は続けられるようにする。表示中の旧値には日時を添え、未反映の選択と区別する。失敗しても地点・時刻を保って再試行できる。選択が変わった後の古い応答は画面へ適用しない。
地点を調べる / 比較用の架空データ
北緯48.9°／東経2.4°
0.36 AOD
表示中：12:00 UTC
操作できます。
処理中・成功は静かな通知、失敗は文字で回復方法を伝える。フォーカスをむやみに動かさない。モーダルは内部にフォーカスを保ち、Esc・閉じる操作で閉じて元の操作へ戻す。