--blue-fill #0060E6 を新設(#006BFF に白文字は 4.0:1 で本文AAに届かない。見た目はほぼ同じで 5.5:1)、ダークは明るい青地 #1E8CFF に濃紺 #08122B の文字(白文字は 3.3:1)、--ink4 を文字色から外す(白地 2.1:1。罫線・アイコン専用とし、文字は ink3 #767676 まで)。あわせてタップ領域 44×44pt、文字サイズの下限と rem 化・200%非破綻、自動再生と自動回転も reduced-motion で初期停止、装飾SVGの aria-hidden + focusable="false"、:focus-visible のリングを明文化。02 のスウォッチと semantic トークン表、ダークの対応表も更新。あわせて04に「アプリを広い画面で開いたとき」(PCでは幅460pxの1列に閉じ、ヘッダー・シート・モーダルは列の内側で位置を決める)、08に絵文字と絵文字的記号の禁止(☝ ➡️ ✓ をUIの合図に使わない。チェック・警告・方向はSVGで組む)を追記。DESIGN.md に a11y ブロックを追加(5.3.0)。 v5.2 — 2026-09-05 見出し下のフロスト×ソリッドのディバイダーを全廃(装飾のディバイダーは置かない。区切りは余白と1px罫線のみ)。アートディレクター原案のSORAHアプリ(2024)から要素を取り込み、既存セクションに分配。02 操作色とブランド色の分離(原案の操作青を #006BFF に正規化)と Data Scape のシーン色4種、03 読み出しの対(年|値+スパークライン・年スナップのスライダー)と記事ヘッダーの型、04 没入画面/中央モーダル/認証画面のレイアウト規則、05 コーチング・シート/スキャン待機と結果カード/登録モーダル・認証スタック/設定リスト、06 スキャン待機パルス・シーンの自動再生と停止・チュートリアル、07 没入シーン Data Scape の2つの型、08 状態を告げるコピー(状態名→動作と場所→回復手段)、09 NFC標準シート・Sign in with Apple・アカウント削除。DESIGN.md に app / scenes ブロックを追加(5.2.0)。 v5.1 — 2026-08-31 データビジュアライゼーション(07)を新設。図を「プロダクトの図/発信のグラフィック」の二つのレジスターに分け、選択の判定を規定。共通の9法則(1図1メッセージ・色は階層・直接ラベル・基準・注釈が主役・比較を歪めない・隠さない・不確かさ・グレースケール耐性)、図の型と用途、地図を使ってよい条件、データの色(発散/順序/分類とブランド色の扱い、虹スケール禁止)、数字の組み方を追加。ボイス&トーン(08)をリッチ化し、UIコピー(敬体)と編集文(常体)の二レジスターに分割。見出しの作法、和欧混植の連単位規則、直した文の実例、書いたあとの三問、使わない語を追加。DESIGN.md に dataViz / copy ブロックを追加。 v5.0 — 2026-08-30 実プロダクト(BODY I-O)でのUI構築を経て確定した内容を反映。UI地をフラット2モード(ライト=純白+ヘアライン罫線カード・影なし/ダーク=#0C1428+ダークガラス、オート=端末外観連動)に変更し、空のテクスチャーをUI背景から引退させブランドアートワーク専用(アプリアイコン・キービジュアル・Sky Type)に再定義。ヒーロー/表現面はブランドブルーグラデーションを標準化。タブバーを分離ピル構成(メインカプセル+真円AIピル)に、ヘッダーをセンタリングのタイプロゴのみに規定。スプラッシュ/Pull-to-Refresh/ローディングHUD/キーボード退避の挙動を規範化。表記規定(略号禁止・主要数値は全幅最上段)を追加。v4.4 — 2026-08-29 Nightsky上のダークサーフェスをダークガラス化(黒ベタ廃止)、コントロール内アイコンをグラスアイコンに統一(線アイコン残存を排除)、デバイス別の最低フォントサイズと文字サイズ可変追従を規定。v4.3 — 2026-08-29 Morning Light追加で空4種に、アイコンを「ソリッド=意味の芯」原則で再設計し21種へ拡充(意味のない丸を全廃)、ダークモード背景にNightskyを採用。v4.2 — 2026-08-29 ガラスの色面(Frost×Solid)をカラーに追加しガイド全体へ適用、Sky Type(空テクスチャー文字)をタイトル・強調用に規定、2色面グラスアイコン体系を新設(線アイコン廃止)。v4.1 — 2026-08-29 空のテクスチャー3種(Daylight/Twilight/Nightsky、sorah.ioトップの空hero-cloud原版)を導入しガラス背景を全面置換、ダークガラス材質を追加。v4.0 — 2026-08-29 コンポーネント言語をLiquid Glassに全面転換(紙/ガラスの2層モデル、同心角丸14/22/30/カプセル、直角廃止、浮遊ナビ・ガラスシート・insetグループリスト)。v3.0 — 2026-08-29 ダークモード規範・表現レイヤー・機械可読DESIGN.md追加、CIパレット修正。v2.0 — 2026-08-29 ロゴをVI原版ベクターに差替え、標準型へ全面改定。v1.0 — 2026-08-29 初版。5 領域・70 事例・約 750 URL のリサーチ、NYT / Bloomberg のディレクター 2 人の作品調査、SORAH の Pinterest・Bloomberg Data Dash・Ryoji Ikeda・Tableau の横断分析(2026-09-02)を基にした。詳細はプロジェクト doc dv_research_A〜H。ここでは台帳の根拠として直接引いたものだけ。2025–2026年に世の中で見られた事例そのもの(587件)は、別ページの事例集にある。この章は台帳が規範を組み立てるときに引いた文献で、事例集とは別のもの。
| 領域 | 出典 | 台帳への寄与 |
|---|---|---|
| 方向性(四つの共感) | Blacki Migliozzi(Bloomberg → NYT)「2014: The Hottest Year」「What's Really Warming the World?」/ F1 App — Live Timing(App Store)/ Refik Anadol Studio「Unsupervised」(MoMA)/ NASA Scientific Visualization Studio / 「データビジュアライゼーションの全域地図」v1.1(dv2_I〜P)/ 方向性 v2.1「光を当て、焦点を結び、写し取る」 | 三つの工程、X-06〜X-10、翻訳(analog)の型、STUDY の下の IF、取らないもの |
| 翻訳・思弁 | NYT「How Much Hotter Is Your Hometown Than When You Were Born?」/ The Pudding「What will the climate feel like in 60 years?」/ Ed Hawkins climate spiral(1.5℃・2.0℃ の同心円)/ NYT の 2090 年までの予測の帯 / 池田亮司 data.tron / 荻原和樹(2020、不安を煽らない配色)/ David Goodsell / PDB-101(「水分子は描かない」) | 翻訳先の選択規則、IF は帯と経路の形しか取らない、基準を先に決めて書く、除外条件を書く |
| 体系 | FT Visual Vocabulary(chart-doctor)/ Datawrapper Chart Chooser / From Data to Viz(Caveats)/ Data Viz Project / Munzner『Visualization Analysis & Design』/ Cleveland & McGill 1984 / Bertin『Sémiologie graphique』/ Wilke『Fundamentals of Data Visualization』/ 総務省統計局「なるほど統計学園」/ 藤・渡部『データビジュアライゼーションの教科書』 | 10 カテゴリ、副キー、上限値、体系間の相違 |
| 報道 | NYT Graphics(Cox・Tse)/ Economist「Mistakes, we've drawn a few」/ Reuters Graphics / Bloomberg「What's Really Warming the World?」/ The Pudding / 日経ビジュアルデータ / 朝日新聞デジタル / NHK / 東洋経済オンライン | 見出しが先、注釈層、翻訳比較、失敗事例の書式 |
| 報道(作画の階層) | Mira Rojanasakul(Bloomberg → NYT Climate)「See the Ocean Heat Fueling Hurricane Milton, in One Chart」「The World's Troubling New Tempo of Temperature Records」「This Year's Record-Breaking El Niño in 3 Charts」/ Blacki Migliozzi(Bloomberg → NYT)「What's Really Warming the World?」「Earth's Relentless Warming Sets a Brutal New Record」「How Much Hotter Is Your Hometown」— 15 作品(doc F) | 線の太さと色の階層、線末の日付+値、平均の点線、単位は最上段だけ、図内の図題、パネルごとの数字、暫定データの注記 |
| 科学・気候 | NASA Earth Observatory / SVS / Ed Hawkins #ShowYourStripes / Climate Central / Berkeley Earth / Copernicus C3S / NOAA Climate.gov / NSIDC Charctic / Global Forest Watch / Our World in Data / Carbon Brief / IPCC AR6 colour guide / cmocean(Thyng 2016)/ Crameri 2020 / 気象庁 / JAXA・極地研 VISHOP / 国土地理院 | 色の規範、不確かさ・観測日・欠測、地図の投影、三本規則、氷縁の慣例 |
| デザイン・アート | Giorgia Lupi(Data Humanism)/ Federica Fragapane / Nadieh Bremer / Moritz Stefaner / Accurat / Studio Terp / Periscopic / Stamen / Mona Chalabi / Nicholas Felton / Takram / 木村博之 / 永原康史 / 中野豪雄 / JLReq | 一枚絵の四点セット、余白と三階層のタイポ、手描き表現の3条件、和文組版 |
| 横断(収束点) | Pinterest sorah0000(Maps 34・SORAH ART 72 ほか)/ NYT Blacki Migliozzi 85 作品(Uranium・Hormuz・Toxic House)/ Bloomberg Green「Data Dash」/ Ryoji Ikeda(datamatics・test pattern・data.gram)/ Tableau『Visual Analysis Best Practices』— doc G | 数字の札、なぜこの数か、素材の言葉、本文の数字を図の色で、P の構図(円・地平線・重なる面)、G2 の段、夜版、密度の上限、発行前の 7 問 |
| 自社(商品) | SORAH CLIMATE STRIPES / AQUA FLUXUS / GLACIES LIQUOR #1 / SYLVANIA CONTINUUM(shop.sorah.io、A1・900部限定)と、その用紙・印刷方式・図法・縮尺の仕様 — doc H | 一つのインク、紙が見える、太いのは題だけ、凡例は縮小図か数字の格子、素材と出所を明記。組版の3規則の実測 |
| スタイルガイド | Urban Institute / Sunlight Foundation / BBC bbplot / ONS / 英 Analysis Function / Datawrapper Academy / IBM Carbon / Google Material / Apple HIG Charts / Atlassian / CFPB / SmartHR | 章立て、型ページの記載項目、色トークン、must/should の口調、Do/Don't の作り方 |