# SORAH Design System 1.7.0 Release: 2026.09 Generated from system.json, foundations.json and engine.norm.RULES. ## Chapters - [Foundations](https://sorah.io/sorah-pjt/design/) — ブランド・文字・操作。画面を支える共通の条件。 - [Earth Language](https://sorah.io/sorah-pjt/dataviz/) — 題材・昼夜・地図。現象の意味を色と地理へ。 - [Scene Patterns](https://sorah.io/sorah-pjt/design/patterns/) — Scene・Story・Crosspoint。定義を体験へ組み立てる。 - [Implementation](https://sorah.io/sorah-pjt/design/implementation/) — 共通定義・描画・検証・更新。実装へつなぐ。 ## Ownership - ブランド — Foundations。ロゴ、VI、署名。VI Blueはブランドのための色。 - 操作 — Foundations。読む、選ぶ、戻る、再生する。操作色と現象色を別のトークンにする。 - 地 — Earth Language。現象を受け止める地。題材と昼夜に従い、単なるUI背景とは分ける。 - 地理 — Earth Language。陸、海岸線、国境、起伏。現象が読める範囲まで退く。 - 現象 — Earth Language。値、分布、動き。題材の意味に従って色を割り当てる。 ## Tokens ```json { "version": "6.4.0", "date": "2026-09-26", "brand": { "blue": "#00BFFF", "graphic": "#006BFF", "deep": "#05396B", "accent": "#DA003C", "ink": "#231815" }, "ui": { "light": { "background": "#FFFFFF", "surface": "#FFFFFF", "ink": "#111111", "secondary": "#4A4A4A", "muted": "#767676", "action": "#006BFF", "onAction": "#FFFFFF", "link": "#006BFF", "border": "#E5E5E5", "danger": "#DA003C", "onDanger": "#FFFFFF", "tint": "#E6F0FF", "tintSubtle": "#F2F7FF", "borderStrong": "#D4D4D4", "disabled": "#CCCCCC", "nonText": "#8A8A8A", "icon": "#006BFF" }, "dark": { "background": "#0C1428", "surface": "#141F36", "ink": "#F5F5F5", "secondary": "#CBD5E1", "muted": "#A1ACBD", "action": "#1E8CFF", "onAction": "#08122B", "link": "#4DA3FF", "border": "#344157", "danger": "#FF4D6D", "onDanger": "#08122B", "tint": "#182D50", "tintSubtle": "#141F36", "borderStrong": "#52627C", "disabled": "#52627C", "nonText": "#74829A", "icon": "#4DA3FF" } }, "typography": { "roman": "Poppins", "japanese": "Noto Sans JP", "bodyRem": 0.9375, "bodyLineHeight": 1.85, "captionRem": 0.6875, "minimumRem": 0.6875, "numeric": { "weight": 800, "feature": "tabular-nums", "sizeRem": [ 2.5, 4 ], "unitRatio": 0.35 }, "display": { "romanWeight": 800, "japaneseWeight": 900 }, "captionMinimumRem": 0.6875, "kickerMinimumRem": 0.6875, "scaling": { "web": "rem", "ios": "Dynamic Type / UIFontMetrics", "android": "sp" }, "mixedRuns": "和文を含む行は同じ書体・ウェイト。数値軸と表は等幅数字。欠けた文字だけフォールバック。", "skyType": "ブランドの大きなタイトル専用。本文・UIラベルでは使わず、コントラストを検証。", "tabLabel": { "minimumRem": 0.59375, "requiresIcon": true, "scope": "icon-accompanied navigation tabs only; all other supporting text remains at least 11px", "scalesWithText": true }, "minimumScope": "general supporting text; icon-accompanied tab labels follow tabLabel", "byMedium": { "ui": { "roman": "Poppins", "japanese": "Noto Sans JP", "fallbackRoman": "sans-serif", "fallbackJapanese": "sans-serif" }, "article": { "roman": "Poppins", "japanese": "Noto Sans JP", "fallbackRoman": "sans-serif", "fallbackJapanese": "sans-serif" }, "editorialCard": { "roman": "Poppins", "japanese": "Noto Sans JP", "fallbackRoman": "sans-serif", "fallbackJapanese": "sans-serif" }, "video": { "roman": "Poppins", "japanese": "Noto Sans JP", "fallbackRoman": "sans-serif", "fallbackJapanese": "sans-serif" }, "print": { "roman": "Poppins", "japanese": "Noto Sans JP", "fallbackRoman": "sans-serif", "fallbackJapanese": "sans-serif" } }, "fontFiles": { "roman": { "400": "Poppins-Regular.ttf", "500": "Poppins-Medium.ttf", "600": "Poppins-SemiBold.ttf", "700": "Poppins-Bold.ttf", "800": "Poppins-ExtraBold.ttf" }, "japanese": { "400": "NotoSansJP-Regular.otf", "500": "NotoSansJP-Medium.otf", "700": "NotoSansJP-Bold.otf", "900": "NotoSansJP-Black.otf" } }, "editorial": { "bodyWeight": 500, "emphasisWeight": 700, "license": "SIL Open Font License; notices in font-sources/ and assets/", "logo": "original VI vectors unchanged", "weightPolicy": "use actual weight files; no synthetic 800/900 from static Bold" }, "contentEditorial": { "scope": "content project articles and motion posters; preserve existing UI minima and immutable releases", "article": { "bodyRem": 1.0625, "bodyLineHeight": 1.95, "noteRem": 0.875, "noteLineHeight": 1.85, "creditRem": 0.875 }, "poster1080": { "headlinePx": 72, "datePx": 36, "metricPx": 88, "unitPx": 32, "legendPx": 36, "notePx": 32, "status": "starting values; inspect at actual phone size and recompose when needed" }, "hierarchy": [ "phenomenon", "headline", "observationPeriod", "metricWithUnitAndDenominator", "legend", "noteAndCredit" ], "datePolicy": "Observation period is distinct from publication date; keep a comparison-defining date beside the claim." } }, "radius": [ 14, 22, 30 ], "motion": { "pressMs": 120, "appearMs": 260, "expressionMs": 350, "reducedMotion": "stop", "autoplay": true, "chartGrowMs": 500, "springEasing": "cubic-bezier(.34,1.56,.64,1)", "splash": { "scope": "optional product example", "periodMs": 1700, "minimumShowMs": 1100, "fadeMs": 550 }, "loadingPulseMs": 1200, "scan": { "periodMs": 2600, "staggerMs": 850, "planes": 3, "stop": "when OS NFC sheet appears" }, "tutorial": { "firstOpenOnly": true, "fadeMs": 300, "holdMs": 2000 }, "refresh": "pull-driven mark motion where adopted", "scene": "time-series autoplay on display; visible play/pause and time selector; stop when hidden or reduced motion is requested", "autoplayScope": "time-series Scene only; not automatic globe rotation or editorial example videos", "scenePlayback": { "autoplay": true, "playbackControls": true, "timeControl": true, "pauseWhenHidden": true, "reducedMotion": "stop", "loop": false, "pausePosition": "preserve", "afterHidden": "explicit resume" }, "editorialPoster": { "scope": "exported content video, separate from time-series Scene autoplay", "camera": "Distinguish camera movement from a changing observation time.", "rotation": "When representing axial rotation: west to east; verify with a known longitude.", "loop": "Optional. Match pose, labels, data and audio across seam; inspect encoded playback.", "durationFps": "Choose for purpose; 18 seconds / 60 fps is freshwater precedent, not a universal default.", "reviewPlayback": "Explicit play; poster first; preload none; pause hidden video." } }, "accessibility": { "bodyContrast": 4.5, "largeTextContrast": 3, "targetPx": 44, "textZoomPercent": 200, "largeTextDefinition": "24px regular or 18.66px bold", "inlineLinkSpacingPx": 24, "focusRing": { "widthPx": 3, "offsetPx": 2 }, "decorativeSVG": { "ariaHidden": true, "focusable": false }, "form": "persistent labels; text errors; live feedback", "nonText": "do not use #8A8A8A for text; meaningful controls must remain distinguishable", "zoom": "reflow or wrap; do not shrink or truncate essential labels" }, "roles": [ { "id": "brand", "name": "ブランド", "owner": "Foundations", "description": "ロゴ、VI、署名。VI Blueはブランドのための色。" }, { "id": "interface", "name": "操作", "owner": "Foundations", "description": "読む、選ぶ、戻る、再生する。操作色と現象色を別のトークンにする。" }, { "id": "ground", "name": "地", "owner": "Earth Language", "description": "現象を受け止める地。題材と昼夜に従い、単なるUI背景とは分ける。" }, { "id": "geography", "name": "地理", "owner": "Earth Language", "description": "陸、海岸線、国境、起伏。現象が読める範囲まで退く。" }, { "id": "phenomenon", "name": "現象", "owner": "Earth Language", "description": "値、分布、動き。題材の意味に従って色を割り当てる。" } ], "usage": { "priority": [ "VI原版のロゴ形状・ブランド色", "現行FoundationsのUIトークン・可読性", "現行Earth Language / Scene規範", "媒体別カード・動画の規範", "製品別の構成例" ], "productExamples": [ "BODY I-O：分離ピル、AIピル、栄養表記", "SORAH App 2024：NFC、認証、製品登録、設定" ], "archivedExamples": "既存の図版は当時の制作例。現在値や現行Scene配色の見本とは扱わない。" }, "logo": { "source": "assets/sorah-lockup.svg", "variants": [ "primary-lockup", "symbol-filled", "symbol-outline", "wordmark" ], "clearSpaceSymbolDiameter": 0.5, "minimumPx": { "symbol": 16, "lockupHeight": 20 }, "dark": "wordmark only reversed white; symbol VI Blue and white", "blueGround": "symbol or white wordmark only; no lockup", "forbidden": [ "redraw or trace", "distort or rotate", "add shadow gradient or outline", "change wordmark font spacing or ratio" ], "productMark": "Define separately; do not reuse SORAH symbol as a product icon" }, "layout": { "gridPx": 4, "spacingPx": [ 8, 12, 16, 24, 40, 64 ], "maxContentPx": 760, "maxDocumentPx": 1060, "mobileMarginPx": 14, "mobileAppColumnPx": 460, "mobileAppColumnScope": "スマートフォンを主対象とするアプリを広い画面で表示するとき。地理SceneやWeb文書の最大幅には適用しない。", "floatingBarInsetPx": [ 8, 12 ], "safeArea": true, "glassNestingMax": 1, "scenePortrait": "visual and readout stacked", "sceneLandscape": "visual left, readout right", "modal": "one per screen; photo/name/description; equal-width actions stacked" }, "materials": { "paper": { "surface": "ui..surface", "borderPx": 1, "shadow": "none; selected state may lift" }, "glass": { "scope": "floating controls and reading/content cards; one glass layer maximum", "light": "rgba(255,255,255,.55)", "dark": "rgba(8,16,38,.42)", "blurPx": 18, "saturate": 1.6, "highlight": "inset 0 1px 0 rgba(255,255,255,.7)", "shadow": "0 6px 18px rgba(5,57,107,.14)", "fallback": "opaque ui..surface; verify contrast over actual content", "opacityPolicy": "reference values are starting points, not universal opacity requirements; verify text contrast after compositing" }, "brandExpression": { "maximumPerScreen": 1, "gradient": "linear-gradient(130deg,#05396B,#006BFF,#00BFFF)", "text": "white over a sufficiently dark area or scrim; verify contrast at every label" }, "sky": { "scope": "artwork and large title treatments only; never UI background", "variants": [ "morning", "day", "twilight", "night" ] } }, "iconography": { "scope": "brand expressive icons; standard control glyphs may use simpler forms", "gridPx": 48, "tabExamplePx": 23, "planes": { "frost": "#CBD9F9 at 82%", "core": "#006BFF; one meaningful group" }, "overlapBlurPx": 2.4, "count": 21, "forbidden": [ "meaningless decorative circles", "more than two colour planes" ], "accessibility": "Decorative SVG aria-hidden and focusable=false; controls have accessible names" }, "components": { "button": { "shape": "capsule", "minimumTargetPx": 44, "primaryPerView": 1, "label": "verb", "fill": "ui..action", "text": "ui..onAction", "danger": "ui..danger + onDanger; confirm destructive action", "lightContrastOnWhite": 4.62 }, "card": { "material": "paper or glass; validate contrast over actual background", "radiusPx": 22, "shadow": "none" }, "heroMetric": { "font": "Poppins 800 tabular", "unit": "small", "maximumPerView": 1, "missing": "dash; never zero fill" }, "progress": { "ring": "achievement only; one per screen", "barHeightPx": [ 14, 20 ], "value": "numeric label required" }, "list": { "radiusPx": 22, "separatorInsetPx": 16, "row": "whole row is target; title and metadata left, value right" }, "sheet": { "topRadiusPx": 30, "grabber": true, "dismiss": [ "close button", "outside tap when appropriate", "down swipe on touch" ], "material": "paper or glass; long content requires verified composited contrast and an opaque fallback" }, "conversation": { "user": "right, action blue with matching onAction text", "assistant": "left, subtle surface", "radiusPx": 22, "tailRadiusPx": 6, "composer": "floating glass capsule; explicit send button" }, "form": { "radiusPx": 14, "label": "always visible", "focus": "visible ring", "error": "reason + example + recovery; text and colour", "success": "brief feedback; announce accessibly" }, "emptyState": { "parts": [ "what is missing", "what happens next", "one action" ], "decoration": "no mascot" }, "modalConfirm": { "parts": [ "title", "photo", "name", "description", "primary", "secondary" ], "actions": "equal-width vertical stack", "maxPerView": 1 }, "readoutPair": { "parts": [ "axis value", "measured value", "unit", "sparkline", "time selector" ], "labelMinimumPx": 11, "valuePx": [ 28, 32 ], "unitRatio": 0.3333333333333333, "alwaysVisible": true }, "articleHeader": { "order": [ "hero image", "date", "headline", "byline", "tags", "rule", "lede", "body" ], "accent": [ "date", "byline" ], "headlineLines": [ 2, 3 ] }, "splitPillNavigation": { "scope": "BODY I-O example", "mainTabsMax": 4, "aiPillDiameterPx": 66, "header": "product wordmark centred", "keyboard": "hide tab bar; composer follows keyboard" }, "scan": { "scope": "SORAH product registration example", "reader": "OS NFC sheet", "waiting": "pulse only before OS sheet", "result": [ "state", "action and place", "recovery" ], "errorActions": [ "retry", "help" ] }, "auth": { "scope": "SORAH account flow example; provider availability depends on product", "order": [ "Apple", "Google", "email signup", "login" ], "socialStyle": "provider original", "verification": "one sentence and status", "crossLink": "signup and login" }, "settings": { "scope": "SORAH App example", "order": [ "user", "language", "help", "about", "legal", "license" ], "logout": "last text row", "deleteAccount": "within account settings; confirmation" }, "dataState": { "presentation": "quiet value plus explicit state text; no mandatory status badges or patterns", "states": { "zero": { "value": 0, "label": "観測値がゼロ" }, "missing": { "value": null, "label": "欠測" }, "outside": { "value": null, "label": "対象範囲外" }, "loading": { "value": null, "label": "読み込み中" }, "error": { "value": null, "label": "取得失敗", "action": "再試行" } }, "quality": "provisional or estimated is metadata on a valid value, not a missing state", "retryPreserves": [ "location", "time" ] }, "interpolatedReadout": { "alwaysVisible": [ "displayValue", "unit", "location", "displayTime", "interpolationLabel", "missingOrInfillStatus" ], "details": [ "sourceValues", "sourceLocations", "sourceTimes", "sourceResolution", "method", "fraction", "baseline", "saturation" ], "trigger": "visible native details/summary; keyboard and touch; not hover-only", "precision": "source precision; interpolation does not add measurement precision" }, "asyncAction": { "busyScope": "updating action only", "oldValue": "keep visible with original timestamp; distinguish pending selection", "disable": "duplicate submission of same action", "allow": "independent exploration", "response": "only apply if request identity and selected location/time still match", "error": "state text plus retry; preserve selection", "announcements": "polite status for loading/success, alert for failure; keep live region outside busy container", "focus": "preserve focus on action; native modal traps focus, Escape closes, restore opener" }, "editorialNote": { "scope": "article supplemental conditions, not a place to hide claim-changing qualifiers", "label": { "ja": "※ 数字の読み方 / 図の読み方", "en": "Note · Reading the figure / map" }, "light": { "ink": "#4B606B", "surface": "#F4F7F8", "border": "#B9C9D0" }, "dark": { "ink": "#CBD5E1", "surface": "#141F36", "border": "#52627C" }, "paddingPx": [ 14, 18 ], "borderLeftPx": 2, "role": "note", "alwaysVisible": true, "sourceExport": "Preserve label, text, source references in Markdown." }, "contentProjectState": { "axes": { "stage": [ "angle", "outline", "full" ], "review": [ "in-review", "approved" ], "distribution": [ "not-handed-off", "handed-off", "scheduled", "published" ] }, "approval": "Record approved revision; do not infer a new revision is approved.", "distribution": "Per destination; handed-off is not published.", "alwaysVisible": [ "revision", "updatedAt", "changeSummary" ], "exampleStatus": "reference pattern; not an automatic migration of existing projects" } }, "copy": { "registers": { "ui": "敬体。短く、責めず、次にできることを書く。", "editorial": "常体。観察を名指し、比較基準を示す。" }, "headline": { "editorialJaMaxCharacters": 17, "scope": "G1 editorial card; not an absolute limit on article headlines", "needs": [ "subject", "comparison" ], "avoid": [ "conclusive number", "jargon" ] }, "statePattern": [ "state name", "action and place", "recovery" ], "mixedScript": { "quantityRun": "tight", "latinWordRun": "quarter-space by run; idempotent", "punctuation": "no extra space beside brackets and punctuation" }, "banned": [ "革新的", "革命的", "イノベーション", "世界をより良くする（単独）", "届ける・提供するの濫用", "絵文字を操作の合図に使う", "説明のない専門略号", "Creative Platform" ], "checks": [ "読者が自分の言葉で説明できるか", "図だけで発見の手がかりがあるか", "比較の基準が書かれているか" ] }, "ios": { "scope": "SORAH native implementation conventions; verify current platform requirements at release", "standardControls": "prefer native navigation, sheets and haptics", "targetPt": 44, "safeArea": true, "textScaling": "Dynamic Type", "nfc": "Core NFC standard sheet; no competing custom reader overlay", "socialLogin": "provider original styling", "accountDeletion": "discoverable in account settings with confirmation" } } ``` ## Scene rules ### S-01 題材・昼夜・地図を一組で固定する Earth Hues v5 / Grounds v1のIDとレジストリ版を参照する。既定と最大1つの代替以外の地図は使わない。UI外観とSceneの昼夜は別に持つ。 Gate: block ### S-02 値と表示の契約を残す 値域、単位、欠測、飽和、変換を記録する。欠測をゼロにしない。時間・媒体・昼夜で同じ値域を使い、凡例と描画を同じ定義から作る。 Gate: block ### S-03 量の種類がスケールを決める 場は連続、偏差は基準と中心を持つ発散。降水だけ気象庁8段（1/5/10/20/30/50/80 mm/h）。川と地震は単色で量を太さ・大きさに渡す。 Gate: block ### S-04 Crosspointは面一つと点・線・等値線 連続する2つの面は一方を面、もう一方を単色の等値線として比較する。等値線の値・変数・単位と双方の集計期間を表示し、不一致を明示する。同時発生を暗示しない。面の題材が地図を決める。自然現象に重ねる人為だけ#eb8741を点・線に使う。航路・灯りが単独の主役なら固有の色を使う。 Gate: block ### S-05 起伏は現象の値を壊さない 現象に重なる陰影の変調は最大±4 L*。値の読取りは陰影前の数値から行う。幾何はNatural Earth 1:50m、地形の本番はETOPO 2022。 Gate: block ### S-06 時系列は自動再生し、読者が止めて選べる 初期表示は題材の優先ビュー。時系列Sceneは表示時に自動再生し、再生・停止と時刻指定を表示する。停止位置を保ち、非表示時は停止、復帰後は操作で再開する。prefers-reduced-motionでは初期状態から停止し、時刻を静止状態で選べる。自動回転と編集動画の自動開始は対象外。 Gate: block ### S-07 近い色は形と階層で読み分ける 近い組は禁止しない。既定は枠＋透過（α≥0.35）。必要ならレイヤーで差を足す。煙×汚染のような2つの連続面はS-04の面＋等値線で比較する。実際の背景上で合成後の識別性を確認する。 Gate: review ### S-08 検証結果と仮説を分ける 色相・明度・色覚シミュレーションと人の知覚検証は別物。LLM連想推定を合否に使わない。合成の場は観測値と明確に区別する。 Gate: review ### S-09 同じ値を同じ色で写し取る WebとPythonで同じレジストリ、変換、LUT、欠測処理を使う。投影が違っても値・階級・色を同じ座標と時刻で照合する。 Gate: review ### S-10 連続する面は、数値から滑らかに描く 連続量の格子は数値空間で双線形、または有界三次補間してから共通LUTへ渡す。有界三次は16近傍のCatmull-Romを中央4格子の最小〜最大に制限し、新しい極値を作らない。16近傍に欠測があれば双線形へ戻す。RGB画像のぼかしで代用しない。原格子と解像度を保持し、補間表示と明示する。原格子の欠測は保存する。S-13で明示した表示専用の補完以外は欠測セルを埋めず、海氷は陸をマスクする。4近傍に欠測がある境界は元セルの値へ戻し、穴をまたがない。分類・行政界・検知点は補間しない。 Gate: block ### S-11 動きは、実在する時刻の間をつなぐ 連続量だけ隣接時刻の数値を線形補間し、その後に配色する。両時刻で有効な場所だけをつなぎ、許容時間間隔・統計期間・補間率・両端時刻を記録する。月平均間は変化の表示であって日々の観測ではない。長い欠落と末尾から先頭を補間しない。点・分類は実時刻ごとに切り替える。 Gate: block ### S-12 Web・静止画・モーションを同じ場で検証する 主値・単位・地点・時刻・補間表示ラベルと欠測／補完状態を常時表示する。元値・元地点・両端時刻・補間方法と率は、キーボードとタッチで開ける詳細に置く。時系列の自動再生、再生・停止の表示、停止位置保持、時刻選択、拡大、動きを抑制する設定に対応する。動きを減らす設定では初期停止する。元格子の圧縮一括取得とGPU上の補間を優先し、投影済みの巨大画像を毎時刻取得しない。次のデータが揃うまで時間を進めず、非表示タブは停止。3D・2D・データビューで時刻と地点を共有する。GPU非対応時は使用した尺度を明示して静止画へ戻す。強調尺度は全期間で固定し、凡例・上限色の件数・元の値を表示する。390/1280幅・拡大時の格子継ぎ目、海岸、欠測、時間端点、30fpsを目標とする実機性能を記録し、未検証を合格扱いしない。取得中は更新する部品だけ待機し、旧値の日時と未反映の選択を区別する。失敗時も地点・時刻を保って再試行でき、古い応答で現在の選択を上書きしない。 Gate: review ### S-13 欠測補完は、元データと別の表示層にする P4の気温はtemp2.pyのfill_fieldを基準とする。5°格子を0.5°へ展開し、有効値だけの正規化ガウス平滑化（σ3.5°、緯度nearest・経度wrap）を行う。有効重み0.25以下は、幅を2・4・8・16・32倍へ広げ、重み1e-4超の値で補う。補完度は別チャンネルに保持し、灰色化と0.5境界で示す。これは統計的な信頼度ではない。元格子・世界平均・欠測マスクは保持し、元表示へ戻せること。段階色はclimate-p4.json（暖寒各8段、地図±2℃、世界平均帯±1.2℃）。動画は各年の35%を静止、残りをsmoothstepで隣接年の値・補完度を混合してから配色する。末尾と先頭をつながず、データ待ちで時間を進めない。原コードの月平均規則とアプリの12か月完全格子規則の差を記録し、画素の一致と処理の一致を区別する。分類・検知点に流用しない。 Gate: block ## Integration [Earth Language](../dataviz/) / [Implementation](implementation/) / [Migration guide](../dataviz/INTEGRATION.md) Registry: 1.0.0; Hues v5; Grounds v1. Keep UI appearance independent of Scene mode. Do not recolor immutable released Scenes in place. Perceptual study, actual production raster parity, and ETOPO 2022 delivery remain pending. ## Guide navigation and appearance All current detailed guides are directly visible in the shared navigation: left on desktop, expanded above the content on smaller screens. Explanatory text, tables and figure frames follow the same UI appearance tokens as the chapter pages. Only bounded logo, colour and UI specimens retain their intended demonstration colours. - [ロゴ各形式・余白・禁止事項](https://sorah.io/sorah-pjt/design/logo/) - [UIの規範と実例](https://sorah.io/sorah-pjt/design/ui/) - [主題別ビジュアル・描画コード](https://sorah.io/sorah-pjt/dataviz/visuals/) - [観察・注釈・言葉の設計](https://sorah.io/sorah-pjt/dataviz/editorial/) - [図の型・18の実例](https://sorah.io/sorah-pjt/design/patterns/catalog/) - [媒体・組版・動き](https://sorah.io/sorah-pjt/design/patterns/media/) - [記事・動くポスターの制作](https://sorah.io/sorah-pjt/design/patterns/content/) - [制作・検査・失敗事例](https://sorah.io/sorah-pjt/design/implementation/production/) - [継承台帳・改版履歴](https://sorah.io/sorah-pjt/design/implementation/migration/) # Detailed guidance ## ロゴ各形式・余白・禁止事項 SORAHのブランドロゴに適用します。Webでは掲載の原版SVGを使用し、印刷・入稿にはVI原版AIデータを使用します。 [Web版](https://sorah.io/sorah-pjt/design/logo/) 01 — Logo ## ロゴ 本ページのロゴはVI原版（アウトラインデータ）から抽出した正確なベクター。Web実装ではこのSVGをそのまま流用してよい。印刷・入稿はVI原版AIデータを使用する。モチーフは S・衛星軌道・データ・昼夜・地球・陰陽。 ### プライマリー・ロックアップ Primary lockup On white On ink #231815 墨地・写真上ではワードマークのみ白に反転し、シンボルは常にVIブルー＋白で保つ。ブルー地（#00BFFF）にはロックアップを置かず、シンボル単体か白ワードマークのみを使う。 ### シンボル Symbol Primary — filled Secondary — outline On dark 塗り版が第一。アウトライン版は塗り版が重くなる小さめの並置（フッター・スタンプ等）にのみ使う。アプリアイコン等プロダクト固有のマークは各プロダクトで別途定義し、SORAHシンボルを流用しない。 ### ワードマーク Wordmark On white On ink — reversed ### 使用ルール Usage Do - クリアスペースはVI原版の規定に従う（Web運用目安: シンボル直径の1/2以上を四周に確保） - 最小サイズ目安: シンボル16px・ロックアップ高さ20px（Web）。それ以下ではシンボル単体に切替 - 色はVIブルー（#00BFFF）／白／墨（#231815）の3色のみ Don't - 変形・回転・ドロップシャドウ・グラデーション・縁取りの追加 - 曲線や点の再描画・トレース（必ず原版ベクターを使用） - ワードマークの字間・比率の変更、他書体での組み直し - プロダクト名をSORAHワードマークより大きな比率で併記 [ロックアップ SVG](/sorah-pjt/design/assets/sorah-lockup.svg) [シンボル SVG](/sorah-pjt/design/assets/sorah-symbol.svg) [アウトライン SVG](/sorah-pjt/design/assets/sorah-symbol-outline.svg) [ワードマーク SVG](/sorah-pjt/design/assets/sorah-wordmark.svg) ## UIの規範と実例 共通のUI規範です。BODY I-Oの分離ピル・AIピル、SORAH App 2024のNFC・認証・登録フローは、その機能を持つ製品の構成例です。全製品への一律適用はしません。作例の数値はダミーです。 ボタンや入力欄は構成見本です。一部の選択切替を除き、登録・送信などの実処理は行いません。 [Web版](https://sorah.io/sorah-pjt/design/ui/) 00 — Principles ## 3つの原則 迷ったらこの3つに立ち返る。すべてのコンポーネント・画面・コピーはこの順で判定する。 01 ### コンテンツが主役、UIは退く ユーザーが見たいのは自分のデータと変化であって、UIではない。装飾よりも余白、色よりもタイポグラフィで階層をつくる。ブランド色は面で塗らず、意味のある場所にだけ効かせる。 ← ChatGPT / iOS 26 Hierarchy 02 ### 数字は一目で、太く 数値は常に Poppins・タブラー数字・極太で組み、単位は小さく添える。ひと目でスキャンでき、変化（良い/悪い）が色と符号で即座に分かること。グラフは1画面1メッセージ。 ← Strava / Apple Fitness 03 ### 紙とガラスを、読む条件で選ぶ 操作と本文カードのどちらにもガラスを使える。紙（不透明面）と使い分け、背景との合成後に読みやすさを確認する。角丸は常に同心で、同じ意味には同じ色・同じ型を使い、画面ごとに発明しない。 ← Apple Liquid Glass / iOS 26 Harmony ## ロゴ 各形式の見本、背景による使い分け、余白と最小サイズ、禁止事項、SVGダウンロードを1ページにまとめました。 [ロゴ各形式・余白・禁止事項 ↗](/sorah-pjt/design/logo/) 02 — Color ## カラー VIガイドのCI/UIパレットをそのままトークン化する。配分の目安は 白 90 : ブルー 7 : その他 3。ブランドを感じさせるのは面積ではなく、置き場所の正確さ。 ### CI パレット Brand brand only VI Blue #00BFFF · --vi ロゴ・ブランド表現専用。UIの操作色には使わない 4.62:1 w/white Graphic 01 #006BFF · --blue ライトUIのボタン・文字リンク・アイコン。白文字のボタンも同じ青を使う 11.6:1 w/white Graphic 02 #05396B · --blue-dk ブランドの深い青。ライトUIの操作色はGraphic 01へ統一 5.9:1 w/white Accent #DA003C · --accent ネガティブ・警告・破壊的操作のみ。飾りに使わない dark VI Ink #231815 印刷・ブランド背景。UIの文字は #111 を使う ### 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で見出し下のバーを廃止）。 82% Frost #CBD9F9 / 82% · --frost すりガラスの面。アイコン・図版の主面 solid Solid Plane #006BFF · --blue フロストと対になるソリッドの色面・アクセント blur 18 Frost White rgba(255,255,255,.55)＋blur 操作・本文カードのガラス（不透明度は背景に応じて検証） dark Frost Dark rgba(8,16,38,.42)＋blur 夜景・ダーク面上のガラス 重なり部のぼかしは 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と版で参照します。 [ ![氷の現行Scene配色。合成データの見本](/sorah-pjt/dataviz/previews/ICE-B4-night.webp) 氷 / ICE](/sorah-pjt/dataviz/#ICE) [ ![森の現行Scene配色。合成データの見本](/sorah-pjt/dataviz/previews/FOREST-B3-day.webp) 森 / FOREST](/sorah-pjt/dataviz/#FOREST) [ ![川の現行Scene配色。合成データの見本](/sorah-pjt/dataviz/previews/RIVER-B2-day.webp) 川 / RIVER](/sorah-pjt/dataviz/#RIVER) [ ![気温の現行Scene配色。合成データの見本](/sorah-pjt/dataviz/previews/HEAT-B4-day.webp) 気温 / HEAT](/sorah-pjt/dataviz/#HEAT) ### ダークモード 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 03 — Typography ## タイポグラフィ UI・記事・図版・動画・印刷を通じて、欧文は Poppins、和文は Noto Sans JP を正とする。VI原版ロゴの形状は変更しない。英数字・数値・ラベルはPoppins、日本語文はNoto Sans JP。混植時はNoto側に揃える。 Display / 数値ヒーローPoppins 800 · tabular-nums 82.4% SHIFTING PERCEPTIONS Sky Type — タイトル・強調コピーbackground-clip:text × 空テクスチャー SHIFTING PERCEPTIONS 空を、まとう言葉。 sorah.ioトップのメインコピーと同じ手法。文字の中に空テクスチャーを流し込む。適用はタイトル・強調コピーのみ（本文・UIラベル・小さな文字は禁止）。Poppins 800 / Noto Sans JP 900 の極太でのみ成立する。地色とのコントラストが弱い場合は使わない。 Heading JPNoto Sans JP 900 より良い世界のために、 人々に新たな視座をもたらす Body / CaptionNoto Sans JP 400 / 15px / 1.85 本文は15px・行間1.85を基準にする。UIの説明文は2行以内に収め、詳しい話はシートや別画面へ逃がす。 キャプション 11px以上 / ink3。参考値・注記・出典に使う。 | 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,000km² 1979199120032015 時系列の没入画面では、数値は「軸の値｜観測値」の対で読ませる（例: Year 2000 ｜ Area 6,200,000 km²）。ラベルは11px以上の大文字キッカー、値はPoppins 800・タブラー、単位は値の1/3で右に添える。対の間は1pxの縦罫。値の直下にスパークライン＋現在位置のスライダーを置き、スライダーは軸の単位（年）ごとに止まる。読み出しは常時表示 ── 隠さない（07の「隠さない」の法則）。 ### 記事ヘッダーの型 Article headerFrom SORAH App 2024 Published on 24/May/2024 #### The Future of Arctic Sea Ice Revisited By Dr. Flavio Lehner #sea-ice #arctic Arctic sea ice has been melting rapidly over the last couple of decades, bringing with it a host of negative impacts. 20/November/2024 #### 氷と海の境界線：北極圏から透けて見える地球の未来 By SORAH 01. 森林減少の現実 ／ 02. 森林の役割 ／ 03. 森林の未来 ヒーロー画像（全幅・角丸なし）→ 日付（ブルー・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は拡大時もコントラスト検証を再実施。 04 — Layout ## レイアウトと余白 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」を下部のテキストリンクで往復させる 05 — Components ## コンポーネント 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背景に敷かない。 Light — #FFFFFF 白面＋ヘアライン罫線・影なし 92.16 kg HERO — BRAND GRADIENT Dark — #0C1428 ダーク面のカード 92.16 kg HERO — 両モード共通 ヒーロー（主要数値・達成面）はブランドブルーのグラデーション linear-gradient(130deg, #05396B → #006BFF → #00BFFF)＋白数値。両モード共通のアクセントとして機能する。 ### タブバー — 分離ピル構成 Split-pill tab bar 製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。 ホーム 記録 データ 活動 AI 製品別の構成例 — BODY I-Ov5.0 - タブバー: メインカプセル（最大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 — ダーク・夜 使い分け（アートワーク）: Morning Light＝朝・開始の表現／Daylight＝標準（アプリアイコンの地）／Twilight＝達成・祝祭の表現／Nightsky＝夜・ダーク文脈の表現。グレインは表示スケールで細粒に見える解像度で書き出す（グレインの拡大はNG）。空の上の文字は白＋弱いシャドウ。UI画面の背景としての使用は禁止。 ### マテリアル Materials — on Daylight PRODUCT Glass card #### ガラスで本文を読む 本文カードにも使える。背景と合成した文字のコントラストを確認し、必要なら不透明な面に切り替える。 ホーム レポート 履歴 AI 浮遊トップバー（カプセル・ガラス）／ガラスカード／浮遊タブバー（画面下端から離して浮かべ、選択タブは白ピル、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種。 ホーム レポート 履歴 AI 体重 食事 活動 心拍 目標 カメラ 記事 音声 検索 プロフィール カレンダー 通知 設定 ファイル ショップ 共有 同期 構成則: フロスト＝主形状、ソリッド＝意味の芯（ドア＝入る／針＝時刻／3点＝入力中／稲妻＝運動／バッジ＝未読）。1アイコンにソリッドの要素は1グループまで、2色以外使わない。単色のUI背景やガラスバーの上で視認性を確認（タブバーは同アイコン23px、ティント地は白反転）。操作の小さな記号・標準UIのアイコンは、意味と視認性を優先する。 ### ボタン Buttons プライマリ セカンダリ（ガラス） 削除 無効 全ボタンはカプセル。プライマリ＝現行action / onActionの組（ライト #006BFF＋白、ダーク #1E8CFF＋#08122B）、セカンダリ＝クリアガラス、アイコンボタン＝円形ガラス。高さ44px以上・1画面のプライマリは1つ・ラベルは動詞。押下は scale(0.94) のバネ。 ### サーフェス Surfaces Paper #### 紙カード コンテンツの器。白面＋罫線＋角丸22px。影なし。 Floating #### 浮遊カード 柔らかい影で1段浮かせる。1画面に1枚だけ。 Dark surface #### ダーク面 没入型のデータ表示に。#141F36＋角丸、ブルーは昇格版。 紙は不透明な面、ガラスは背景が透ける面。操作・本文カードの両方にガラスを使える。実際の背景で合成後のコントラストを確認し、不透明な代替も用意する。 ### 表現レイヤー Expressive layer 紙とガラスの2層の上に、ブランドの瞬間にだけ表現レイヤーを重ねる。1画面1箇所まで。v5.0以降、アプリUIの表現面はブランドブルーのグラデーションを標準とし、空のテクスチャーはキービジュアル等のアートワーク文脈に限る。参照: Apple Liquid Glass（ガラス質の浮遊コントロール）／ Material 3 Expressive（バネのある形態変化）／ Strava（動きのあるテクスチャー）。 Nightsky — Brand Moment 1,284 pt 今日週月年 表現面: ブランドの瞬間（ヒーロー・達成・オンボーディング）の背景はブランドブルーのグラデーション＋白文字。ガラスバー: 操作・本文カードとも半透明＋blur＋ヘアラインを使える。合成後の可読性を確保し、ガラスを入れ子にしない。prefers-reduced-motionで全停止。 モーフィングピル 概要詳細履歴 バネのある形態変化（M3 Expressive型）: ピル⇄角丸のモーフィング、選択ピルのスライドは spring イージング cubic-bezier(.34,1.56,.64,1)・350ms。押下は scale(0.93)。跳ねは操作の応答にだけ使い、装飾では動かさない。 ### 数値表示 Stat display 1,284pt Primary metric 64.2% +2.4 良い変化はブルー＋符号 312件 −18 悪い変化はアクセント＋符号 — 欠測はダッシュ。0埋め禁止 ヒーローはブランドグラデーション面＋白数値で1画面1枚（紙のstatカードと重ねない）。値はPoppins 800・タブラー、単位は小さく。変化は色だけでなく符号を必ず併記（Strava/Fitnessの走査性）。 ### プログレス Progress 系列A73% 系列B91% 82% リング（Apple Fitness型）は 1画面1つ・達成率にのみ使う 対になる2系列は blue／blue-dk で統一。しきい値超過など「悪い状態」への反転は accent。バーの高さ14–20px、トラックは tint2。 ### リスト Inset grouped list エントリのタイトル 08/29 07:12 · A30 B8.4 434unit 2行目のエントリ 08/29 14:50 · 17分 107unit 無効・過去のエントリ 08/28 — iOS型のinsetグループ: 角丸22pxの紙面にまとめ、区切りは左インセット付き1px罫線。左＝タイトル＋メタ（ピル型チップ）、右＝主数値。行全体をタップ領域にし、詳細はシートで開く。 ### シート Glass sheet エントリの詳細 時間42 分 値A386 値B24.8 削除閉じる 詳細・確認はガラスシートで下から。グラバー必須、下スワイプ/外タップで閉じる。角丸は上辺30pxで画面と同心。破壊的操作はシート内で danger カプセル＋確認。 ### 会話UI Conversational 今週のサマリーを見せて 今週の合計は1,284ptで、先週から+6%です。伸びの中心は火曜の記録でした。 メッセージ（構成例）↑ ユーザー発話＝ブルー・右寄せ、AI＝tint2・左寄せ。角丸22px＋発話側の下角のみ6px（向きの手掛かり）。コンポーザーはガラスのカプセルで本文の上に浮かせ、送信は円形ボタン。応答内の数値は太字。 ### フォームとフィードバック Forms & Feedback 数値入力 必須項目 形式が正しくありません（例: 12.5） ✓ 保存しました 入力枠は角丸14px、フォーカスでブルー枠＋淡いグロー。エラーはaccent枠＋理由と例を1行で。ラベルは常時表示（プレースホルダー代用禁止）。成功は短いフィードバックで知らせる。視覚表示の目安は2秒だが、読み上げ通知と結果の確認手段を残す。 ### 空状態 Empty state — まだ記録がありません。 最初の1件を追加するとここに表示されます。記録を追加 イラスト・マスコットは使わない。何が起きるか＋次の1アクションだけを示す。 ### コーチング・シート Coaching sheetFrom SORAH App 2024 製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。 Add to Your Collection Tap the Scan NFC icon and hold your device over the product. 「持ち物がまだ無い」タイプの空状態は、空カードではなく画面下端のシートで「何を・どうすれば・入るか」を教える。見出し＝得られるもの（Add to Your Collection）、本文＝動作＋場所（Scan NFC アイコンをタップして製品にかざす）、右に対象物のサムネと「+」。この見本は紙（白面＋ヘアライン）。ガラスを選ぶ場合も本文の可読性を保つ。 ### スキャン待機と結果 Scan & resultFrom SORAH App 2024 製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。 ✓ Register success この製品をコレクションに追加しました。Close ! Scan error タグを読み取れませんでした。端末の上端を製品のタグに近づけて、動かさずに待ってください。 [ヘルプを見る](/sorah-pjt/design/ui/#ui-voice) Retry Scan 待機はマークを芯にした同心円のパルス（2.6s、0.85s間隔、3面。旧作例の1.8s表記はモーション表へ統一）── これは v5.0 のスプラッシュ・パルス（拡縮）とは別の「探している」動き。実際の読み取りはOS標準のNFCシートに委ね、独自UIを重ねない（09参照）。結果は中央の小カード: 円形アイコン → 状態名 → 1文 → 1アクション。成功は「Close」だけ、失敗は回復手段（Retry）とヘルプへの導線を必ず持つ。 ### 登録モーダル Register modalFrom SORAH App 2024 製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。 Register your Product スキャンした製品をあなたのコレクションに登録します。 Forest Map 2007–2020年の森林被覆の変化。JAXA FNF。 RegisterCancel Continue with Apple G Continue with Google ✉ Sign up with email Log in 認証スタック（順序固定） 物を登録する確認は写真を見せる（何を登録するのかを目で確認させる）。写真→製品名→1–2行の説明→プライマリ／セカンダリの縦積み。認証の入口は Apple → Google → メール登録 → ログイン の順で固定し、ソーシャルは各社の規定文言・アイコンをそのまま使う（改変しない）。メール登録後は「Verify」画面（盾アイコン＋1文）を挟み、Sign up ⇄ Log in はテキストリンクで往復。 ### 設定リスト Settings listFrom SORAH App 2024 製品・機能別の構成例。必要な機能があるときに採用し、名称・情報構造はその製品に合わせます。 User setting› Language› Q&A› About SORAH› Legal› Licence› Log out マイページは1行1項目のinsetリスト＋シェブロンだけで組む。順序は「自分のこと → 言語 → 助け → 会社 → 法務 → ライセンス」、最後にLog out を赤文字で1行（ボタンにしない）。アカウント削除は設定画面のいちばん下にテキストリンクで置き、確認を挟む。 06 — Motion ## モーション ### 自動再生と、止めて読む操作 時刻操作の作例。年は仮の範囲で、観測データではありません。 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 で全アニメーションを停止する。 08 — Voice & Tone ## ボイス＆トーン SORAH の言葉にも二つのレジスターがある。UIコピーは「有能で、簡潔で、責めない」声。編集文は「観察的で、削ぎ落とされた」声。人称も文体も違う。 ### レジスターの選択 | | UIコピー | 編集文（発信） | 置かれる場所 | アプリ・Web の操作面、AI応答 | グラフィック、記事、投稿、ニュースレター | 文体 | 敬体（です・ます） | 常体（である・だ） | 人称 | 主語を立てない。ユーザーを「あなた」と呼ばない | 一人称複数（私たち）。ただし名乗りは最小限 | 構え | 結論から。次の操作を示す | 観察を置く。断定しない。読者が自分で結論に達する余地を残す | 数字 | 最初に、太く | 見出しに置かない。本文に潜ませる ### UIコピー Do - 結論から。数字を根拠に短く話す - できなかったことは「次どうするか」に言い換える - 敬体（です・ます）。専門用語を避ける - ボタンは動詞で（「この内容で保存」「撮り直す」） Don't - 責める・煽る表現（未入力は仕組みの問題かもしれない） - 精神論・根拠のない断定・専門領域（医療等）の判断 - 絵文字の乱用（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で組む（線幅と色はトークンに従う）。文中の矢印は活字の ↗（外部リンク）まで。 09 — iOS ## 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行 10 — Accessibility ## アクセシビリティ | 項目 | 基準 | コントラスト | 本文 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 UTC0.36 AOD同じ元格子の13:00 UTC0.48 AOD方法時間方向の線形補間、補間率50%。この作例は空間補間なし。 空間補間を行う場合は元格子の座標・解像度・参照値も詳細へ。P4気温の表示専用補完は「補間表示」と同一視せず、補完状態と元値の欠測を明示する。 ## 処理する部品だけを待機させる。 更新ボタンの二重送信を防ぎ、他の探索操作は続けられるようにする。表示中の旧値には日時を添え、未反映の選択と区別する。失敗しても地点・時刻を保って再試行できる。選択が変わった後の古い応答は画面へ適用しない。 地点を調べる / 比較用の架空データ 北緯48.9°／東経2.4°選択時刻 12:00 UTC13:00 UTC14:00 UTC 0.36 AOD 表示中：12:00 UTC 選択時刻を更新詳細取得失敗を試す 操作できます。 ### 地点と時刻 閉じる 処理中・成功は静かな通知、失敗は文字で回復方法を伝える。フォーカスをむやみに動かさない。モーダルは内部にフォーカスを保ち、Esc・閉じる操作で閉じて元の操作へ戻す。 ## 主題別ビジュアル・描画コード 提供された採用画像を、そのままの色と構図で掲載します。SDSの現行配色と同一であることや、コードからの再現を保証するものではありません。新規制作のUI・文字は現行Foundationsに従います。 [Web版](https://sorah.io/sorah-pjt/dataviz/visuals/) 01 / DATA SCAPE ## 北極海氷採用図版 / 再現は未検証 ネイビーの海と、頻度に応じて白へ進む8段階。地名・経緯線は背景からの相対明度で置く。 [ ![北極海氷 / 採用図版 / ice_z2.jpg](/sorah-pjt/dataviz/visuals/source/_approved/ice_z2.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/ice_z2.jpg) 北極海氷 / 採用図版 / ice_z2.jpg 何を表すか1979–2025年の各9月に海氷があった頻度。単年の海氷密接度とは別の量。 期間・時間の型コード既定：1979–2025年・9月、47年 / A / 年ごとの場。掲載図は複数年の集約 図法採用Z2のコード：EPSG:3411（北極域）。READMEの正距円筒という総称はこの図には当てはまらない。 一次データNSIDC Sea Ice Index v4 / Natural Earth 50m - 採用画像の後に入口コードが更新されている。再生成した画像との一致は未検証。 - 原資料にはJAXA AMSR2への移行予定がある。ここに載せる画像はNSIDC版で、置換済みとは扱わない。 関連する現行配色（同一性は未検証）： [ICE ↗](/sorah-pjt/dataviz/#ICE) ### 描画コードと条件 [01_sea_ice/pure4.py](/sorah-pjt/dataviz/visuals/source/01_sea_ice/pure4.py) [01_sea_ice/video.py](/sorah-pjt/dataviz/visuals/source/01_sea_ice/video.py) [_shared_lib/render3.py](/sorah-pjt/dataviz/visuals/source/_shared_lib/render3.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 北極海氷のコード設定 | iceThresholdPercent | 15 | stackFrom | 1979 | stackToDefault | 2025 | bands | 8 | smoothKm | 12 | size | [1080, 1350] 02 / DATA SCAPE ## 森林採用図版 / 再現は未検証 白い海、薄灰の陸、緑8段。森林を最も濃い層に置く。 [ ![森林 / 採用図版 / forest_n3.jpg](/sorah-pjt/dataviz/visuals/source/_approved/forest_n3.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/forest_n3.jpg) 森林 / 採用図版 / forest_n3.jpg 何を表すかJAXA FNFの森林分類を集約した被覆割合。Hansen GFCの2000年樹冠被覆・損失年とは区別する。 期間・時間の型N3生成関数の既定：2020年 / A / 年ごとの場 図法正距円筒。経度 −180–180°、緯度 −58–83°。 一次データJAXA PALSAR-2 FNF - N3の配色と生成処理はnyt.pyにあり、README記載のforest1.pyは共通の格子・図法処理。 - 掲載画像の入力年・画素一致は元データでの再現が必要。上の年はコード既定値。 関連する現行配色（同一性は未検証）： [FOREST ↗](/sorah-pjt/dataviz/#FOREST) ### 描画コードと条件 [02_forest/nyt.py](/sorah-pjt/dataviz/visuals/source/02_forest/nyt.py) [02_forest/forest1.py](/sorah-pjt/dataviz/visuals/source/02_forest/forest1.py) [02_forest/sylvania.py](/sorah-pjt/dataviz/visuals/source/02_forest/sylvania.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 森林のコード設定 | paper | #ffffff | land | #eeeeeb | ink | #467550 | bands | 8 | aggregateCells | 8 | displaySampling | bilinear | size | [1350, 1080] 03 / DATA SCAPE ## 気温の平年差採用図版 / 再現は未検証 寒色・暖色それぞれ8段の発散尺度。地図とストライプで空間と時間を読む。 [ ![気温の平年差 / 採用図版 / temp_v4.jpg](/sorah-pjt/dataviz/visuals/source/_approved/temp_v4.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/temp_v4.jpg) 気温の平年差 / 採用図版 / temp_v4.jpg 何を表すかHadCRUT5の年平均気温偏差（°C）。絶対気温を示す図ではない。 期間・時間の型V4コード：2025年。年次入力：1850年以降。基準期間は入力メタデータで確認。 / A / 年平均の場 図法正距円筒。世界全域。 一次データHadCRUT5 / Met Office Hadley Centre - 採用画像はColorBrewerの配色。HEATの昼夜パレットと同一とは扱わない。 - 地図±2.0°Cとストライプ±1.2°Cは別の上限。上限超過でも実値ラベルは残す。 - 補完度は観測の追加ではない。新規実装ではP4プロファイルと補間表示の規定を併用。 関連する現行配色（同一性は未検証）： [HEAT ↗](/sorah-pjt/dataviz/#HEAT) ### 描画コードと条件 [03_temperature/temp2.py](/sorah-pjt/dataviz/visuals/source/03_temperature/temp2.py) [03_temperature/final_video.py](/sorah-pjt/dataviz/visuals/source/03_temperature/final_video.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 気温の平年差のコード設定 | unit | °C anomaly | mapLimit | 2.0 | stripeLimit | 1.2 | bandsPerSide | 8 | sourceGridDegrees | 5 | displayGridDegrees | 0.5 | sigmaDegrees | 3.5 | cool | ["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"] | warm | ["#fee0d2", "#fcbba1", "#fc9272", "#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15", "#67000d"] 04 / DATA SCAPE ## 河川採用図版 / 再現は未検証 白地に青い細線。森林N3と同じ地理範囲と余白に揃える。 [ ![河川 / 採用図版 / rivers_keys.jpg](/sorah-pjt/dataviz/visuals/source/_approved/rivers_keys.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/rivers_keys.jpg) 河川 / 採用図版 / rivers_keys.jpg 何を表すかHydroRIVERSの河川網。掲載シートの順序は構造の提示で、年ごとの河川の増減ではない。 期間・時間の型静的な河川網 / 構造の提示順 / D / 構造の順序 図法正距円筒。経度 −180–180°、緯度 −58–83°。 一次データHydroRIVERS v10 / HydroSHEDS - 採用画像の後にdraw6.pyが更新されている。現在のコードには均一線幅と階級別線幅の両案がある。 - どの引数で各キーフレームを生成したかは、入力データとともに再確認する。 関連する現行配色（同一性は未検証）： [RIVER ↗](/sorah-pjt/dataviz/#RIVER) ### 描画コードと条件 [04_rivers/draw6.py](/sorah-pjt/dataviz/visuals/source/04_rivers/draw6.py) [04_rivers/video_c.py](/sorah-pjt/dataviz/visuals/source/04_rivers/video_c.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 河川のコード設定 | ink | #5678c4 | size | [1350, 1080] | uniformWidthPx | 0.4 | widthAlternativePx | [1.0, 0.7, 0.45, 0.3] 05 / DATA SCAPE ## 震源採用図版 / 再現は未検証 赤い点を無彩色の地形へ。密度の面に変換するQ1とは異なる、点の表現。 [ ![震源 / 採用図版 / qg4.jpg](/sorah-pjt/dataviz/visuals/source/_approved/qg4.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/qg4.jpg) 震源 / 採用図版 / qg4.jpg [ ![震源 / キーフレーム資料 / qkeys.jpg](/sorah-pjt/dataviz/visuals/source/_approved/qkeys.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/qkeys.jpg) 震源 / キーフレーム資料 / qkeys.jpg 何を表すかUSGS ComCatの地震。点の位置は震央、大きさはマグニチュード、淡さは深さ。 期間・時間の型原資料：1973–2025年、M≥5.0 / B / 事象の一覧 図法正距円筒。世界全域。 一次データUSGS ComCat / ETOPO 2022（原資料記載） - 半径式と色はbg.pyから採録。G4の背景はrelief.py等にも分かれ、完全な呼出し条件は未確定。 - 原資料のG4とコード内のB4は同一の識別子ではない。地形陰影の強さを現行Groundsと同等と主張しない。 関連する現行配色（同一性は未検証）： [QUAKE ↗](/sorah-pjt/dataviz/#QUAKE) ### 描画コードと条件 [05_earthquakes/q1.py](/sorah-pjt/dataviz/visuals/source/05_earthquakes/q1.py) [05_earthquakes/bg.py](/sorah-pjt/dataviz/visuals/source/05_earthquakes/bg.py) [05_earthquakes/relief.py](/sorah-pjt/dataviz/visuals/source/05_earthquakes/relief.py) [05_earthquakes/video_q2.py](/sorah-pjt/dataviz/visuals/source/05_earthquakes/video_q2.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 震源のコード設定 | magnitudeMin | 5.0 | ink | #c4221c | radiusExpression | 0.9 * 2.4 ** (M - 5) | depthEdgesKm | [0, 35, 70, 150, 300, 800] | size | [1350, 675] 06 / DATA SCAPE ## 船舶と航空採用図版 / 再現は未検証 ネイビー → 青 → 白の階調。船舶は粒、航空は大円の線で描き分ける。 [ ![船舶と航空 / 採用図版 / tr_keys.jpg](/sorah-pjt/dataviz/visuals/source/_approved/tr_keys.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/tr_keys.jpg) 船舶と航空 / 採用図版 / tr_keys.jpg 何を表すか船舶交通密度と航空路線の構造。航空線の重みは路線データの集約で、飛行中の機数ではない。 期間・時間の型船舶：2015-01–2021-02の固定集計。航空：OpenFlightsの取得版・時点は別途確認。 / D / 層・構造の提示順（この図） 図法正距円筒。世界全域、太平洋中心の別構図も含む。 一次データWorld Bank / IMF shipping density; OpenFlights routes.dat - 固定集計の船舶密度を年別の変化として再生しない。 - キーフレームは層を現す過程。両データの同時観測を意味しない。 関連する現行配色（同一性は未検証）： [LANES ↗](/sorah-pjt/dataviz/#LANES) ### 描画コードと条件 [06_transport/combo.py](/sorah-pjt/dataviz/visuals/source/06_transport/combo.py) [06_transport/flights.py](/sorah-pjt/dataviz/visuals/source/06_transport/flights.py) [06_transport/video_t2.py](/sorah-pjt/dataviz/visuals/source/06_transport/video_t2.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 船舶と航空のコード設定 | shipPixelDegrees | 0.02 | shipFloor | 1000 | shipTransform | log1p | shipReferenceLog10 | 7.5 | flightWidthPx | [0.35, 0.5, 0.7, 1.0] | size | [1350, 675] 07 / DATA SCAPE ## サハラの砂塵採用図版 / 再現は未検証 白と薄灰の地理に茶色の霞を重ね、面の連続性を見せる。 [ ![サハラの砂塵 / 採用図版 / dust_d1.jpg](/sorah-pjt/dataviz/visuals/source/_approved/dust_d1.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/dust_d1.jpg) サハラの砂塵 / 採用図版 / dust_d1.jpg [ ![サハラの砂塵 / キーフレーム資料 / dust_keys.jpg](/sorah-pjt/dataviz/visuals/source/_approved/dust_keys.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/dust_keys.jpg) サハラの砂塵 / キーフレーム資料 / dust_keys.jpg 何を表すかGEOS-FP DUEXTTAU（砂塵の光学的厚さ）。質量濃度ではない。 期間・時間の型D1コード：2025-06-01 01:30。3時間間隔の同化系列。画像との時点対応は未再現。 / A / 3時間ごとの場 図法正距円筒。経度 −110–25°、緯度 −5–45°。 一次データNASA GMAO GEOS-FP - 同化であり、予報として見せない。 - 元コードのnan_to_numによる欠測のゼロ化は、そのまま現行実装へ移植しない。S-10〜13に従い欠測マスクを別に保つ。 関連する現行配色（同一性は未検証）： [DUST ↗](/sorah-pjt/dataviz/#DUST) ### 描画コードと条件 [07_dust/dust.py](/sorah-pjt/dataviz/visuals/source/07_dust/dust.py) [07_dust/video_d.py](/sorah-pjt/dataviz/visuals/source/07_dust/video_d.py) [07_dust/world.py](/sorah-pjt/dataviz/visuals/source/07_dust/world.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 サハラの砂塵のコード設定 | variable | DUEXTTAU | unit | dimensionless optical depth | ink | #a86022 | limit | 1.2 | gamma | 0.8 | smoothGridCells | 1.0 | displaySampling | bilinear 08 / DATA SCAPE ## 全エアロゾル採用図版 / 再現は未検証 茶系8段。月別の場や周期を見せ、表示用補完を脱色と境界で区別する。 [ ![全エアロゾル / 採用図版 / aer_keys.jpg](/sorah-pjt/dataviz/visuals/source/_approved/aer_keys.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/aer_keys.jpg) 全エアロゾル / 採用図版 / aer_keys.jpg 何を表すかAVHRR Deep Blueのエアロゾル光学的厚さ（AOD）。PM2.5濃度や砂塵成分だけの量とは異なる。 期間・時間の型NOAA-18 / 2006–2011年、1°月次。シート各枠の日時は未同梱。 / A / 月次の場、C / 同月の周期比較 図法正距円筒。世界全域。 一次データAVHRR Deep Blue V001 - 専用の題材定義は未登録。AIR（大気汚染）やDUST（砂塵）に読み替えない。 - 6年平均・1月平均・7月平均などの集約はaer.pyにある。各図の期間・集約を明記して使用する。 専用の配色定義は未登録。図版をAIRやDUSTの配色見本として使いません。 ### 描画コードと条件 [08_aerosol/aer.py](/sorah-pjt/dataviz/visuals/source/08_aerosol/aer.py) [08_aerosol/video_a.py](/sorah-pjt/dataviz/visuals/source/08_aerosol/video_a.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 全エアロゾルのコード設定 | unit | dimensionless AOD | ink | #a86022 | bands | 8 | saturation | 0.6 | minimumCount | 5 | sourceGridDegrees | 1 | lowDisplayThreshold | 0.0375 09 / DATA SCAPE ## サイクロン未採用 / 検証待ち 検討コードのみ。採用図版の掲載なし。 何を表すかIBTrACSのサイクロン経路。 期間・時間の型原資料：1980–2025年 / B / 事象の経路 図法コードを参照。採用図法は未確定。 一次データIBTrACS v04r01 main track - 原資料で未検証・統合仕様デッキから除外済み。SDSでも採用済みに数えない。 関連する現行配色（同一性は未検証）： [STORM ↗](/sorah-pjt/dataviz/#STORM) ### 描画コードと条件 [09_cyclones/cyc.py](/sorah-pjt/dataviz/visuals/source/09_cyclones/cyc.py) コードから採録した設定です。採用JPEGを生成した引数との完全な一致は、元データでの再現後に確認します。 サイクロンのコード設定 Related study ## 北極圏の船舶 [ ![2012.09 / 2025.09 と表示されたGFW AIS presenceの比較資料。原資料名は「海氷×船舶」だが、ships_years.pyは氷を非表示にしている。海氷との重ね合わせを確認した事例には数えない。](/sorah-pjt/dataviz/visuals/source/_approved/ships_ice.jpg) ](/sorah-pjt/dataviz/visuals/source/_approved/ships_ice.jpg) 2012.09 / 2025.09 と表示されたGFW AIS presenceの比較資料。原資料名は「海氷×船舶」だが、ships_years.pyは氷を非表示にしている。海氷との重ね合わせを確認した事例には数えない。 9月の船舶存在時間。参照値60時間、log1pで表示。年別AISの捕捉範囲・時点と元データは再確認が必要。 [06_transport/ships_years.py](/sorah-pjt/dataviz/visuals/source/06_transport/ships_years.py) [01_sea_ice/pure6.py](/sorah-pjt/dataviz/visuals/source/01_sea_ice/pure6.py) Source & reproduction ## 絵とコードの、対応を残す。 提供された11点のJPEGと9主題・共通処理のコードを原文のまま保存しています。JPEGは採用図版の参照基準です。入力の観測データ、実行環境、映像ファイルは同梱されていません。 [画像・コード・対応表を取得](/sorah-pjt/dataviz/visuals/data-scape-reference.zip) [主題と描画条件 JSON](/sorah-pjt/dataviz/visuals/catalog.json) [提供資料 README](/sorah-pjt/dataviz/visuals/source/README.md) [提供資料の照合記録](/sorah-pjt/dataviz/visuals/source/MANIFEST.md) ### 移植時に確認すること - 各入口の外部データと共有モジュールを揃え、絶対パスを実行環境へ移す。原コードはimport時にも描画や書込みを行うため、そのままアプリのモジュールとして読み込まない。 - 数値の意味・単位・集約期間・欠測・飽和をSceneに固定する。元コード内の欠測のゼロ化、色の補間、Labの合成は現行SDSと照合する。 - 採用画像の再現と、新規SDSへの移植を別に検証する。同じ描画器・図法の再現と、Webの別図法での同じ座標・時刻・値・色の一致を区別する。 - 旧画像内の書体は保持し、新規制作はPoppins／Noto Sans JPの実ウェイトを使う。元画像を再着色して、現行パレットとの一致を装わない。 利用条件・許諾の記述は同梱READMEに由来し、SDSによる新たな許諾認定ではない。入力データは配布しない。 照合記録の更新時刻は再現の証明ではありません。海氷・河川の更新差分、森林N3の入口、震源G4の呼出し条件、図版ごとの期間は対応表に記録しています。 DATA SCAPE / Application contract 1.0.0 ## 主題の表示と、重ね合わせ。 既存の配色定義・採用図版からの移植条件と、新しい学習レイヤーのアプリ用定義を記録します。追加定義は既存の採用図版と同一という意味ではありません。知覚評価・実機の性能確認は別途必要です。 主役の色面が背景を決め、第二の連続量は単色の等値線で表示します。降水はSTORMの1・5・10・20・30・50・80mm/hの8段階。風は他の色面がある場合は矢印、人為の航路は自然現象上で橙、火災に重なる震源は中抜き円です。色・期間・単位は地図の凡例に示します。 | データセット | 主題 | 昼夜 / 地図 | 海 / 陸 | 表現 | 定義の位置づけ | temperature | HEAT | day / B4 | #ffffff / #eeeeee | field | registered | forest | FOREST | day / B3 | #ffffff / #eeeeeb | field | adopted-adaptation | history | ICE | night / B4 | #15253a / #22344a | field | registered | ice | ICE | night / B4 | #15253a / #22344a | field | registered | dust | DUST | day / B2 | #fbf8f3 / #ece6de | field | registered | rivers | RIVER | day / B2 | #ffffff / #f1f2f5 | lines | registered | earthquakes | QUAKE | day / B1 | #ffffff / #ecebe8 | points | adopted-adaptation | fires | FIRE | day / B2 | #ffffff / #efece8 | points | registered | shipping | LANES | night / B3 | #0c2135 / #1d2d40 | points | adopted-adaptation | aviation | LANES | day / B3 | #ffffff / #eceef1 | lines | adopted-adaptation | precipitation | STORM | day / B2 | #ffffff / #eceef0 | field | registered | aerosol | AEROSOL | day / B2 | #ffffff / #eceef0 | field | data-scape-extension | satellites | SATELLITE | day / B2 | #ffffff / #eceef0 | lines | data-scape-extension | volcanoes | VOLCANO | day / B2 | #ffffff / #eceef0 | points | data-scape-extension | plates | PLATES | day / B2 | #ffffff / #eceef0 | lines | data-scape-extension | currents | CURRENTS | day / B2 | #ffffff / #eceef0 | lines | data-scape-extension | wind | WIND | day / B4 | #ffffff / #eceef0 | field | data-scape-extension | pressure | PRESSURE | day / B4 | #ffffff / #eceef0 | field | data-scape-extension | elevation | ELEVATION | day / B2 | #ffffff / #eceef0 | field | data-scape-extension | bathymetry | BATHYMETRY | day / B2 | #ffffff / #eceef0 | field | data-scape-extension [全主題の表示定義 JSON ↗](/sorah-pjt/dataviz/visuals/display-contract.json) ## 観察・注釈・言葉の設計 共通の観察原則と、編集図版の作法を扱います。「黒＝観測・青＝解釈」「凡例を置かない」「1枚1色相（分類は例外）」はG1編集カードの規定です。地理Sceneの凡例・題材色・CrosspointにはEarth LanguageとS-01〜12を適用します。 [Web版](https://sorah.io/sorah-pjt/dataviz/editorial/) 00 — Premise ## 描く技術ではなく、写す技術 データビジュアライゼーションは長く「描く」技術として語られてきた。チャートを描く、図を描く。 しかしリサーチで共感の対象になった四つ ── Migliozzi、F1 のアプリ、Anadol、NASA SVS ── に共通していたのは、 描かれているものがデータ以外にないことだった。つまり彼らは描いていない。写している。 この態度を三つの工程に分ける。そこにあるものを見えるようにする（光を当てる）、 一つを選んで言葉を与える（焦点を結ぶ）、媒体に定着させる（写し取る）。 本質は写真と同じだが、この台帳で写真の語を使うのはこの三つの名だけにする。 作り手が対象を作らないこと、写し取るが判じないこと ── 引き受けるのはその構造である。 Thesis 光を当て、焦点を結び、写し取る。三つの工程の主体はそれぞれ違う ── 見えるものはデータが、焦点は作り手が、 質感は媒体が決める。作り手が自分で決めるのは焦点だけ。そしてその焦点は観察であって、結論ではない。 ### 四つの共感 — 共通項が一つ、差異が一つずつ 共通項は、描かれているものがデータ以外にないこと。差異は、データの上に何を一つだけ足したか。 | 共感 | 足したもの | 何をしているか | 台帳への写り | Blacki Migliozzi Bloomberg / The New York Times | 言葉 | 記録更新年だけに色を置き、他年は細い灰。基準線の名前、線末の日付と値、Methodology。注釈が図の本体だから、他が要らない | X-07 焦点は一つ／T-02〜T-05／線の階層（LW） | F1 App — Live Timing | 階層 | 毎秒 110 万件のデータを持ちながら、画面に出るのは順位・ギャップ・タイヤという一列だけ。残りは後ろにある ── 持っていて、出さない | X-07 の「退避」／F-02 凡例を置かない／landing と Source の層 | Refik Anadol Studio Unsupervised, MoMA | 物質 | MoMA のロビーの壁という媒体に像を定着させる。同じデータでも媒体が変われば像が変わることを、建築のスケールで示す。取るのは方法ではなく、この事実だけ | X-10 写し取る媒体／判型 G1・G2・M1・P | NASA Scientific Visualization Studio | 何もない | 観測値とシミュレーション出力をそのまま像にする。疑似カラーの作法（波長の順序を保ち、注記で明示する）以外は、科学者の出力に手を入れない | X-06 データに対応しない要素を置かない／F-04 色の系統／X-02 前提の検算 ### 立ち位置 — 座標系のどの一点にも属さない 五つの領域はそれぞれ別の評価軸と資金を持ち、四つの出力形式は別の物理的制約を持つ。SORAH はそのどこにも属さない。各領域から一つずつ借り、一つずつ借りない。 一文で言えば ── 学術の根拠で、報道の作法を守り、アートの物質性を持つ、観察のメディア。 | 借りるもの | 誰から | 借りないもの | 作法（基準を先に言う・除外を書く） | 報道（Migliozzi / Rojanasakul / 荻原） | 速報性・結論を言い切る見出し | 知覚の根拠（位置＞長さ＞面積、object constancy、viridis） | 学術（Cleveland & McGill / Heer / Moreland） | 査読のための網羅性 | 物質性（媒体が像を決める） | アート（Anadol / 池田） | ML の幻覚・建築スケール・没入 | 階層（一つに絞る） | エンターテインメント（F1 アプリ） | スポンサー表示・予測の演出 | 記法（反復生成に耐える） | 産業（IBCS / Carbon） | ダッシュボードの網羅・KPI タイル 01 — Three steps ## 三つの工程 — 光を当てる、焦点を結ぶ、写し取る 順序がある。光が当たらなければ焦点は結べず、焦点が結ばなければ写し取れない。それぞれ主体が違う ── 見えるものはデータが、焦点は作り手が、質感は媒体が決める。従属・決定・委任。中庸とはこの三つの配分そのものである。 台帳の 43 条はどれもこの三つの工程のいずれかに属し（Rule.step）、02〜04 章はその工程ごとに条を置く。 ![データ・作り手・媒体の三者と、三つの工程の主体の対応。工程ごとの条の数と条番号。](/sorah-pjt/dataviz/img/diagram_steps.png) 作り手が自分で決めるのは焦点だけ。何が見えるかはデータが、どう写るかは媒体が決める。工程の下の条番号は norm.RULES から描いた ── 全 43 条、機械 28。 | 工程 | 主体 | 作り手の関係 | 答える問い | 中身 | 条 | 光を当てる Illuminate | データ | 従属 | 何が見えているか | そこにあるものを見えるようにするだけで、何も足さない。データでないものは照らしても現れない | 12（機械 8／人 4） | 焦点を結ぶ Focus | 作り手 | 決定 | 何を名指すか | 一つの発見を選び、それに言葉を与える。名前は一つのものにしか付かない。焦点は観察であって結論ではない | 13（機械 10／人 3） | 写し取る Capture | 媒体 | 委任 | どう定着するか | 質感・尺・判型は媒体が持つ。画面は画面、動画は動画、紙は紙の像を持ち、別のものに擬態させない | 16（機械 10／人 6） | 三つを貫く Across | — | — | 三つが一つの発見に従属しているか | 一つの発見が三つの工程を通る。検査に落ちた出力は生成されない | 2（機械 0／人 2） ### 焦点を結ぶ — 名づけて、決めない 三つの工程のうち、作り手が決めるのはここだけ。だからここに SORAH の仕事の核と、SORAH が越えない線の両方がある。 焦点は一点にしか合わない。一つの発見を選び、それに言葉を与える。「言葉を足す」と「一つだけ前に出す」は同じ行為の二つの面で、 名前は一つのものにしか付かない。選ばれなかったものは後ろに退くが、消えない ── Source と注記の層に退避させる。削ぐことと隠すことは違う。 ![ERA5 の夏の日別気温の束。灰色の過去年の中に今年の一本だけが青く、線末に年と平均値のラベルが付く。下に Source と注記の層。](/sorah-pjt/dataviz/img/diagram_focus.png) 焦点は今年の一本。過去年は薄い束、平年は点線と文字（ERA5 の夏の日別値、実データ）。削ぐのは見せる量であって持っている量ではない ── 残りは Source と注記の層に必ず退避する。 Rule 写し取るが、判じない。焦点を結ぶのは観察であって、結論ではない。「夏の四つの最高記録は直近の四年」は焦点。「だから危険だ」は結論。 SORAH は前者で止まる。結論を出すのは SORAH の役割ではなく、焦点の合った観察が問いを開き、結論を出さないことで読者の思弁の余地が残る。 焦点と wonder は対立しない。焦点が見出しを一つに決めるから、図と landing は開いたままでいられる。 台帳の T-01（観察のレジスター）と T-03（見出しは結論の数字を持たない）がすでにこの線を引いていて、v2.0 では X-07（焦点は一つ）を機械の検査にした ── 太字と色を持つ名指しが 1 枚に 1 つでなければ、画像は書かれない。 規範は 1 箇所にしか書かない。この台帳の条項は engine/norm.py の RULES にあり、 検査（spec.py / motion.py）も、いま読んでいるこの文書も、同じ RULES を読んで作られている。 条ごとに機械が見るのか人が見るのかを明記したのが 05 章の契約表。 02 — Illuminate ## 光を当てる — そこにあるものを見えるようにする そこにあるものを見えるようにするだけで、何も足さない。データでないものは照らしても現れない ── イラスト層・装飾・比喩の形は置かない。「装飾を排したタイポグラフィ主導」はこの帰結であって出発点ではない。 光を当てるのは作り手が選ぶことではなく、データを見える状態に置くこと。何を前に出すかを選ぶのは、次の焦点の仕事。 主体はデータ。作り手はデータに従属する。 以下の 12 条がこの工程の条。作画の面積・凡例の有無・色の系統・ゼロ起点・明度差・密度は発行のたびに機械が見る。 「データに対応しない要素を置かない」（X-06）と「罫の最小限」（F-09）と「地図の必然性」（F-10）は人が見る。 発見の前提（X-02）は各型の demo() が毎回データから検算し、崩れていればその日は出さない。 | 条 | 規範・根拠 | 判定 | X-02 | 発見の前提は、発行のたびに検算する 「一度も下がっていない」「最後の3年」「増えた年は1年」── 見出しが立っている前提は、毎回データから確かめ、崩れていたら発行しない。前提が崩れた図は、きれいなまま嘘になる。各型の demo() が ValueError を投げる | 自動 | X-06 | 光を当てる ── データに対応しない要素を置かない そこにあるものを見えるようにするだけで、何も足さない。装飾・比喩の形・イラスト層・写真の地は、データでないので照らしても現れない。「装飾を排したタイポグラフィ主導」はこの帰結であって出発点ではない。F-07（1枚1色相）・F-09（罫の最小限）の上位原則。方向性 v2.1 §3 光を当てる（NASA SVS「何も足さない」） | 人が確認 | F-01 | 作画が紙面を支配する 作画は紙面の 55% 以上（G1 は 56.6%＝936×764px）。作画が小さいのは、何を見せるか決められていないことの現れ。商品は版面いっぱいに図がある | 自動 | F-02 | 凡例を置かない 置ける場所があるなら図の上に直接書く。凡例は色と意味を目で往復させる。代わりに、線の端・面の中・点の横に名前を置き、それでも足りなければ**縮小図の列か数字の格子**を敷く（AQUA FLUXUS / GLACIES LIQUOR #1）。v5.1 07「凡例より直接ラベル」＋商品の構造 | 自動 | F-04 | 量は順序・発散、種類は分類色で表す 量の大小は順序色、基準との差は発散色で表す。順序のない種類には分類色を認める。fill_kind=categoryを宣言し、分類名を直接併記する。色だけで種類を伝えない。虹（jet / rainbow / turbo）は順序が知覚と一致しないので使わない。2026-09-20 対話で分類色を採用 / v5.1 07 | 自動 | F-05 | 長さ・面積で量を表す型はゼロ起点 棒・縞・面・柱はゼロ起点。線・点・地図は任意だが、波線省略はしない。主エンコーディングを宣言してから描く（marks=）。v5.1 07「比較を歪めない」 | 自動 | F-06 | グレースケールで生きる データに使う色は、明度だけで区別がつくこと（明度差 24 以上）。赤緑の識別に依存しない。VI Blue #00BFFF はブランド専用でデータに使わない。v5.1 07「グレースケールで生きる」 | 自動 | F-08 | 1つの要素は1px 以上を占める 系列の点が版面の幅に対して 1px 未満になるまで詰め込まない。元データより細かい解像度に集計しない。読めない密度は密度ではなく汚れ。v5.1 07 六角格子の条項 | 自動 | F-09 | 軸・罫・格子は最小限。消して読めるなら消す 残す罫は #F0F0F0 まで薄く、目盛は2〜4本、単位は最上段だけ。商品には軸も目盛も格子罫も無い。v5.1 07 Do ＋商品「していないこと」 | 人が確認 | F-10 | 地図である必然性がある 位置そのものが発見であるときだけ地図にする。量が発見なら地図ではなく量の型へ。面積で量を表すなら正積図法を使う。v5.1 07 地図を使ってよい条件 | 人が確認 | F-11 | 区画を塗るなら、率・種類・回数のどれかを宣言する 区画の塗りが運べるものは三つ。**率**（分母がその区画に属する割合・密度）、**種類**（順序を持たない区分）、**回数**（数え上げ）。**絶対量は選べない** ── 読者は塗られた面積を量として読むので、分母を持たない量で塗ると、広い区画が濃く見えるだけの図になる。回数で塗れるのは区画の大きさが揃っているとき（固定格子）だけで、国や県のように大きさの違う区画では、回数は率に直す。種類のときだけ色相を区分の数だけ使ってよく（上限4）、その色は順序を持たない ── だから凡例ではなく、区分の名前を図の中で直接名指す。表は norm.FILL_KINDS。v2.1 の「率でしか塗らない」を三つに分けた（2026-09-06）。禁じるべきだったのは率以外ではなく、分母を持たない量 | 自動 | T-05 | 出典に観測日がある データ名・基準期間・観測日・暫定の別・ライセンスを2行以内に。「今日」「最新」と書くなら、その日付がどこかに必ずある。v5.1 07「不確かさを描く」 | 自動 ### 照らし方の作法 — 商品から 参照は外にだけあるのではない。SORAH が実際に刷って売っている4枚（CLIMATE STRIPES / AQUA FLUXUS / GLACIES LIQUOR #1 / SYLVANIA CONTINUUM）が していることは、そのまま「光を当てる」の作法だった ── 紙が見える（地を塗り潰さない）、図版は版面いっぱい、凡例は縮小図か数字の格子、 軸を引かない・目盛を打たない・格子罫を敷かない・色を3色以上使わない・同じ情報を2度書かない。台帳の図版が「機械的」に見えていた原因はほぼこの裏返しだった（doc H）。 ### 色 — 紙の色とデータの色 紙の色は型・罫・地にだけ使い、データには使わない。データの色は1 図 1 系統＋強調 1 色、合わせて 3 色まで。有彩色は焦点にだけ置く ── 今年か、記録か、名指した一つ（Rojanasakul / Migliozzi）。色を置く相手を選ぶのは焦点の仕事（03）で、ここは置ける色の系統だけを決める。 | 定数 | 値 | 役割 | INK / PAPER | #1A1A1A / #FFFFFF | 文字・主線・基準線／地。夜版（P・動画）では反転 | GRAY_MID / GRAY_LIGHT / RULE | #8A8A8A / #B5B5B5 / #D8D8D8 | 目盛の値・薄い名前／ゼロ線／罫 | PAST | #D2D2D2 | 過去年の束・年々の値（1.0px、名前を付けない） | AVG | #808080 | 平均・気候値の点線（2,3）。#555 は ACCENT との明度差 10 で検査に落ちた | GRID | #EBEBEB | 横罫 1px。目盛は 3〜4 本、単位は最上段だけ | ACCENT | #006BFF（Graphic 01） | 今年・強調・線末ラベル・寸法線。1 図に 1 点 | WARM / COLD | #B2182B / #2166AC | 偏差の面の上下（RdBu の両端、明度を揃える） | EDGE_REF | #E8721C | 氷縁の基準線（NSIDC・極地研の慣例） | NEGATIVE | #DA003C（Accent） | 負の変化・警告のみ。閾値線（「2015 limit」型）にも使える | VI Blue | #00BFFF | データに使わない（ロゴ専用）。palette() が拒否 | 系統 | 使う発見 | 規定 | 根拠 | 順序 Sequential | 量・密度・深さ | 明度が単調に変わる知覚均等スケール。白→INK、白→#05396B、または cmocean（thermal / ice / deep）・Crameri（batlow）・viridis。色相を増やさない。P 判型では 5 段に量子化して平塗り（夕日の段階色） | Thyng 2016、Crameri 2020、NASA EO、SORAH ART ボード | 発散 Diverging | 基準からの偏差 | 白または薄灰を中央に。両側は対称に暗くなる（RdBu、cmocean balance）。青／紫、緑／赤の組は避ける | IPCC AR6 colour guide、Wilke | 濃淡 1 系統 | 同じ量の段階（濃縮度 2 / 5 / 20 / 60%） | 1 色相の 3〜4 段。段の名前は右端に直接（NYT Uranium） | NYT Migliozzi | 分類 Categorical | 順序のない種類 | 種類ごとの色分けを認める。分類名を直接併記し、色だけに依存しない。G1は上限4区分。量の大小は順序色、基準との差は発散色を使う | 2026-09-20 対話による採用。F-04 / F-07 / F-11。作例の色値は共通カテゴリパレットの指定ではない | 意味色 | 慣例で読者が知っている色 | 暖＝赤、冷＝青、植生＝緑、水＝青、氷縁の基準線＝オレンジ、欠測＝灰、No Data＝#EBEBEB。素材の色（原油＝黒、氷＝白）はこれに含める | NSIDC、GFW、NYT Hormuz ### 黒＝観測、青＝解釈 1枚の中で色が担う役割を先に決める。INK は測られたもの（観測値・平滑・氷・震源）、ACCENT は人が足したもの（傾向線・回帰・寸法線・今年の強調・線末の値）。読者は色の名前を覚えなくても、青いものは「誰かの解釈」だと分かる。PAST は文脈（過去年の束・年々の値）で、名前を持たない。分類データでは、種類ごとの色と直接ラベルをこの規定の例外として使える。 ### 段階と検証 隣接色は最大 10–11 段階（IPCC）。縞は 16 色（Hawkins）。誤差 ±0.5°C のデータに 0.1°C 刻みの色を当てない。公開前にグレースケール変換で読めること、色覚シミュレーション（Color Oracle・Coblis）で崩れないことを確認する。spec.py の check_palette は輝度差 24 未満の組を拒否する。本文の数量は図の色で組む（03 焦点を結ぶ）ので、本文に現れる色も palette() に含める。 ### 使わない 虹（jet / rainbow / turbo / hsv）— 順序が知覚と一致せず、偽の縞を作る。赤緑だけで正負を分ける。半透明の重ね塗り（色の混合が新しい意味を持ってしまう）。4 色以上の平塗り（P 判型の 5 段量子化を除く）。 ### 不確かさ・観測日・欠測 — 見えないものを書く | 状況 | 描き方 | 書き方（実例） | 出典 | 推定の幅 | 帯（四分位／十分位／±2σ／5–95%／95% 信頼区間）。輪郭なし。幅が発見なら寸法線 | 図題の 2 行目に定義（「1961–1990年平均との差、95%信頼区間」）。本文は「+1.05°C [1.01–1.09]」 | HadCRUT5、Berkeley Earth、IPCC SPM.8、Wilke 16章 | 暫定値 | 線は最新点で止め、● を置く。延ばさない | 出典に「速報値含む」「直近1年は暫定」「今年は7月まで」。記録年は年が終わるまで「記録年」と呼ばない | NSIDC、NOAA GML、NYT「data … are preliminary」 | 欠測 | 描かない。線を切る。補間しない | 欠測色（灰）を凡例ではなく注記で。気象庁の品質記号（ ) ] ）は落として使う | 気象庁、NASA EO | 観測日・基準期間 | — | 出典に取得日・データ版・基準期間（「1951–1980年平均との差、1950–2026年（今年は7月まで・2026年9月取得）」）。「今日の」と書くなら観測日必須 | NASA EO、JAXA | 観測網の変化 | 帯の幅で見せる。隠さない | 「観測が減った1942年に幅0.42°Cまで広がり」 | HadCRUT5 | 低確率・高影響 | 破線。帯と混ぜない | 「排除できない経路」 | IPCC SPM.8 | 手法の不一致 | ハッチング、または 0 | 「モデル間で一致しない」 | IPCC SPM.3、Climate Central CSI | 観測点の移転・方法変更 | 三角印、断絶を線で切る。都市化の影響は出典に | 「都市化の影響が小さい15地点」「都市化の分を含む」 | 気象庁、GFW ### 地図 — 地図である必然性 地図にするのは、どこで起きたかが発見の中身であるときだけ。量の比較は地図に向かない（面積が値を歪める）。海氷は「線の内側に縮んだ」と書く前に海ごとに数える — 2026.08.29 vs 2010.09.01 では東シベリア海で −16万km²、チュクチ海では +8万km² で、合計だけ見ると戻った海が消える。面積の合計は線グラフの側で言い、地図では海ごとの差だけを言う。 | 用途 | 投影 | 規定 | 全球のアノマリー | Robinson | NASA SVS の標準。発散色・白中央・基準期間を図題に | 極域 | 極ステレオ（70° 真緯度、EPSG:3411/3413） | 歪みを注記（「北極を上から見た図」）。面積比較には使わない。全球には使わない | 面積の比較 | 等積図法、または等面積カートグラム | IPCC は六角形カートグラムで面積バイアス自体を回避 | 率の分布 | コロプレス（率） | 率のみ。絶対量は不可（FT・Sunlight）。5 階級以下。No Data 色を定義 | 区分の分布 | 区画の種類 | 順序の無い区分だけ。4 区分まで・区分ごとに別の色相・凡例を置かず区画の上に名前 | 回数の分布 | 格子（回数） | マスの大きさが揃っているときだけ。国や県では回数を率に直す | 総数の分布 | 比例シンボル | 面積比例。細差は読めない | 密度 | ドット密度・六角格子 | 元データより細かく集計しない。見せたいパターンを注釈 | 位置と量の関係 | 断面（地図を捨てる） | 位置の一軸と量の一軸で切る。傾きは読者の単位で（「西へ1°ごとに約17km深い」）＋相関 ベースマップは無彩色（Stamen Toner の思想）。海岸線は描かず、データの陸海マスクで見せる。氷縁の基準線はオレンジ（NSIDC・極地研の慣例）、今日の縁は INK 1px。海の名前は地図の上に薄く置き、開いた海・戻った海だけ太字で面積を添える。行政単位に吸着させない。SORAH の Maps ボードが集めているのは等高線・流線・稜線・海底地形 — 線の密度で量を見せる地図で、面塗りの地図ではない。 ### 区画の塗り — 率・種類・回数（絶対量は入っていない） v2.1 の台帳はここに「率でしか塗らない」と一行だけ書いていた。理屈は正しいが効きすぎていて、 開票マップ（いちばん票を取った政党＝種類）も被災履歴マップ（被災した回数）も作れなかった。 禁じるべきだったのは率以外ではなく、分母を持たない量である。だから三つに分けた ── 区画を塗る図は、塗る前に色が何を運ぶかを宣言する（F-11、Card.fill_kind）。宣言の無い塗りは発行されない。 | 塗りが運ぶもの | 宣言 | 条件 | 持っている型 | 率 Rate | rate | 分母がその区画に属する割合・密度。面積あたり・人口あたり・全体に占める割合。区画の形は問わない | コロプレス（率）・区画の偏差 | 種類 Category | category | 順序を持たない区分。色は量ではなく区分の名前なので、区分ごとに色相を分ける。上限4区分 | 区画の種類 | 回数 Count | count | 数え上げ。分母を持たないので、区画の大きさが揃っているときだけ（固定格子）。国や県では回数を率に直す | 格子（回数） | 絶対量 | — | 選べない。分母を持たない量で区画を塗ると、読者は塗られた面積を量として読む | 比例シンボル地図（円の面積）へ 回数の条件が要る理由。大きさの違う区画（国・県）を回数で塗ると、広い区画ほど数が多くなり、 読者は塗られた面積を量として読む ── それは絶対量で塗るのと同じ嘘になる。だから回数で塗れるのは、 マスの大きさが揃っている固定格子のときだけで、国や県では回数を面積あたり・人口あたりの率に直す。 種類だけが色相を分けてよい理由。種類の色は量ではなく区分の名前なので、濃淡で並べると 「濃いほうが多い」と読まれてしまう。だから 1 枚 1 色相（F-07）の唯一の例外として、区分ごとに色相を分ける ── ただし 4 区分まで、そして刷ったときと色が見えない読者のために明度も 24 以上ずつ離す。 03 — Focus ## 焦点を結ぶ — 一つを選び、言葉を与える 焦点は一点にしか合わない。一つの発見を選び、それに言葉を与える。見出しは見えているものの名指し、landing は読み方の受け渡し、 出典は作り方の開示。三つを混ぜない。図の側でも同じことが起きる ── 有彩色と太字は焦点にだけ置き、残りは無彩色の濃淡と地の重さで退く。 主体は作り手。作り手が決定する。そして決めてよいのはここだけ。 以下の 13 条がこの工程の条。v2.0 で足したのは X-07（焦点は一つ ── 太字の名指しは 1 枚にちょうど 1 つ、機械）、 X-08（焦点は観察 ── 名づけて、決めない、人）、X-09（基準の所在 ── 宣言した基準が図題か注記に無ければ書かない、機械）。 色相の数と分類の例外（F-07）、注釈の有無（F-03）は図の条だが、意味はここに属する ── 色と注釈は焦点の道具だから。 | 条 | 規範・根拠 | 判定 | X-07 | 焦点は一つ ── 前に出る発見は1枚に1つ 名前は一つのものにしか付かない。**太字と色を持つ名指し（線末の札・山の名前・寸法線の値）は1枚にちょうど1つ**。二つ目を前に出したくなったら、それは二枚目の図。選ばれなかったものは消さずに後ろへ退く ── 地の重さの注記と Source の層に退避する。削ぐことと隠すことは違う。方向性 v2.1 §3 焦点を結ぶ（Migliozzi「記録年だけに色」） | 自動 | X-08 | 焦点は観察 ── 名づけて、決めない 見出しと landing は観察の文で、評価語・因果の断定・「だから」を含まない。「夏の四つの最高記録は直近の四年」は焦点、「だから危険だ」は結論。SORAH は前者で止まる。結論を出さないことで、図と landing は開いたままでいられる。T-01 の上位原則。方向性 v2.1 §3 但し書き | 人が確認 | X-09 | 基準の所在 ── 立場は基準の選び方にだけ現れる 平年・基準期間・閾値・除外条件を先に決め、**図題か図中の注記に必ず書く**。型は何を基準にしたかを宣言し（Card.basis）、宣言した語が図題か注記に無ければ発行しない。今年だけに色を使い、暫定データの範囲を切り、除外条件（「M4.0以上」「全地被」「都市化の分を含む」）を書く。方向性 v2.1 §5 中庸（Rojanasakul “not included”／Goodsell「水分子は描かない」） | 自動 | F-03 | 図の中に注釈が1つ以上ある 注釈は説明文ではなく図の一部。パターンか解釈を名指す。「ここにデータがあります」は注釈ではない。v5.1 07「注釈が図の主役」 | 自動 | F-07 | 1枚1色相を基本に、分類は種類で色を分ける 有彩色は1枚に1系統（発散だけ2色相）。色は今年か記録か、焦点の合った一つにだけ置き、残りは無彩色の濃淡で退く。分類データは例外として種類ごとに色相を分け、名前を併記する。G1の分類は上限4区分。5区分以上は図を分ける。商品は4点中3点が特色1〜2版で刷られている。商品の実仕様（doc H §2-1）＋ Migliozzi | 自動 | T-01 | 観察のレジスターに立つ 見出しは図に見えているパターンを名指す。規範・断定・扇動をしない。「〜すべきだ」「危機」「衝撃」は観察ではない。**語彙は T-06 が機械で見る（売り言葉と価値判断の表）。レジスターそのものは人が見る** ── 表に無い語でも、良し悪しを先に決めてから図を選んでいれば、それはもう観察ではない。SEE 編集原則 ＋ v5.1 08 | 人が確認 | T-02 | 見出しは文ではなく名指し 常体。句点で終えない。問いかけにしない。和文は全角17字以内、欧文は 68 字以内（46pt で3行）。1行の切れ目は改行文字で指定する。v5.1 08 見出しの作法 | 自動 | T-03 | 結論の数字と術語は見出しに置かない 測った量（+1.73°C・429.1ppm・16万km²）と術語（偏差・パーセンタイル・extent）は本文に潜ませる。見出しが運ぶのは数の**向き**か、例外の**無さ**。v5.1 08 | 自動 | T-04 | landing は読み方を渡す。凡例の説明にしない 「色は…を表す」「縦軸は…」は凡例であって読み方ではない。何を1本が表すか、どこを見るか、何と比べたかを渡す。「〜は含まない」を書いてよい。和文54字・欧文100字以内。v5.1 08 | 自動 | T-06 | 使わない語がある 二群ある。**売り言葉**（革新的・イノベーション・ソリューション・シームレス／innovative・revolutionary・seamless・unprecedented・alarming）と、**価値判断・規範**（優しい・こわい・ひどい・深刻・正しい・愚か・危険・脅威・過激・〜すべきだ／gentle・scary・devastating・dangerous・wrong・foolish・should）。図に現れているのは量であって善悪ではない。良し悪しは読者が決める ── 作り手が先に決めてしまうと、図は根拠ではなく飾りになる。絵文字も使わない。表は norm.BANNED と norm.JUDGEMENT。v5.1 08「使わない語」＋ T-01 の語彙側 | 自動 | T-07 | 同じものを2つの言葉で呼ばない 台帳の語彙（norm.LEXICON）に載っている言い換えを使う。「平年」は書かず基準期間を書く。「anomaly」は書かず difference from … と書く。20枚目のカードが1枚目と違う語を使わないため | 自動 | T-08 | 本文の数量は、図でその量に使った色で組む landing の中の数字を図の色で太く組めば、凡例を置かずに本文が凡例になる。1文に2つまで。数字以外の語には使わない。NYT の作法 ＋ F-02 | 人が確認 | T-11 | 図の中の言葉も、同じ台帳で書く 図題・図中の注記・数字の札の文は、見出しや landing と同じ語の検査を通る（T-06 使わない語 ＋ T-07 台帳の語彙）。四つのテキストスロットだけを見ていると、抜け道が開く ── 「優しい日本と、こわい日本」は見出しに置けば落ちるのに、塗り分けの図題に置けば通ってしまっていた。図の中は言葉の数が少ないぶん、一語が図全体の意味を決める。実測（2026-09-06）: 図中の注記はどの検査も通っていなかった | 自動 ### 語の台帳 同じものを2つの言葉で呼ばない。20枚目のカードが1枚目と違う語を使い始めたら、それは台帳が無いということ。 その場で定義しているなら通す（「平年（1991–2020年）」は可、「平年」だけは不可）。 | 使わない語 | 置き換える | | 平年 | 1991–2020年平均（基準期間を書く） | JA | アノマリー | 平均との差 | JA | 偏差 | 平均との差（見出しでは使わない） | JA | エクステント | 面積 | JA | 温暖化 | 気温の上昇（測った量で書く） | JA | 危機 | （使わない。観察のレジスターから外れる） | JA | 衝撃 | （使わない） | JA | anomaly | difference from the … mean | EN | extent | area | EN | unprecedented | (do not use) | EN | alarming | (do not use) | EN | crisis | (do not use) | EN | skyrocket | (do not use) | EN ### 使わない語 — 売り言葉と、価値判断 二群ある。売り言葉（革新的・シームレス・unprecedented）は最初から入っていた。 価値判断・規範（優しい・こわい・深刻・正しい・愚か・危険・〜すべきだ）は v2.4 で足した ── 日常語なので、長さの検査も文体の検査も素通りしていた。図に現れているのは量であって善悪ではない。 作り手が先に良し悪しを決めてしまうと、図は根拠ではなく飾りになる。 そして v2.4 から、この検査は図の中の言葉にもかかる（T-11）── 図題・注記・数字の札。 四つのテキストスロットだけを見ていたときは、「優しい日本と、こわい日本」を図題に置けば通っていた。 | 使わない語 | 群 | | 革新的 | 売り言葉 | JA | 革命的 | 売り言葉 | JA | イノベーション | 売り言葉 | JA | Creative Platform | 売り言葉 | JA | 世界をより良くする | 売り言葉 | JA | ソリューション | 売り言葉 | JA | シームレス | 売り言葉 | JA | 衝撃的 | 売り言葉 | JA | 危機的 | 売り言葉 | JA | innovative | 売り言葉 | EN | revolutionary | 売り言葉 | EN | game-chang | 売り言葉 | EN | cutting-edge | 売り言葉 | EN | world-class | 売り言葉 | EN | seamless | 売り言葉 | EN | solution | 売り言葉 | EN | make the world a better place | 売り言葉 | EN | unprecedented | 売り言葉 | EN | shocking | 売り言葉 | EN | alarming | 売り言葉 | EN | 優し | 価値判断・規範 | JA | やさし | 価値判断・規範 | JA | こわい | 価値判断・規範 | JA | 怖い | 価値判断・規範 | JA | 恐ろし | 価値判断・規範 | JA | 恐怖 | 価値判断・規範 | JA | ひどい | 価値判断・規範 | JA | 酷い | 価値判断・規範 | JA | 悲惨 | 価値判断・規範 | JA | 悲劇 | 価値判断・規範 | JA | 惨状 | 価値判断・規範 | JA | 深刻 | 価値判断・規範 | JA | 甚大 | 価値判断・規範 | JA | 壊滅 | 価値判断・規範 | JA | 破滅 | 価値判断・規範 | JA | 脅威 | 価値判断・規範 | JA | 正しい | 価値判断・規範 | JA | 間違 | 価値判断・規範 | JA | 誤った | 価値判断・規範 | JA | 愚か | 価値判断・規範 | JA | 賢い | 価値判断・規範 | JA | 賢明 | 価値判断・規範 | JA | まとも | 価値判断・規範 | JA | 良い | 価値判断・規範 | JA | 悪い | 価値判断・規範 | JA | 最悪 | 価値判断・規範 | JA | 最良 | 価値判断・規範 | JA | 素晴らし | 価値判断・規範 | JA | 見事 | 価値判断・規範 | JA | 危険 | 価値判断・規範 | JA | 安全 | 価値判断・規範 | JA | 過激 | 価値判断・規範 | JA | 残念 | 価値判断・規範 | JA | 憂慮 | 価値判断・規範 | JA | 懸念 | 価値判断・規範 | JA | 警告 | 価値判断・規範 | JA | べきだ | 価値判断・規範 | JA | べきである | 価値判断・規範 | JA | すべき | 価値判断・規範 | JA | ねばならない | 価値判断・規範 | JA | なければならない | 価値判断・規範 | JA | gentle | 価値判断・規範 | EN | scary | 価値判断・規範 | EN | frightening | 価値判断・規範 | EN | terrifying | 価値判断・規範 | EN | horrific | 価値判断・規範 | EN | horrifying | 価値判断・規範 | EN | appalling | 価値判断・規範 | EN | devastating | 価値判断・規範 | EN | catastrophic | 価値判断・規範 | EN | disastrous | 価値判断・規範 | EN | grim | 価値判断・規範 | EN | tragic | 価値判断・規範 | EN | threat | 価値判断・規範 | EN | threatening | 価値判断・規範 | EN | dangerous | 価値判断・規範 | EN | safe | 価値判断・規範 | EN | good | 価値判断・規範 | EN | bad | 価値判断・規範 | EN | evil | 価値判断・規範 | EN | wrong | 価値判断・規範 | EN | foolish | 価値判断・規範 | EN | stupid | 価値判断・規範 | EN | wise | 価値判断・規範 | EN | worrying | 価値判断・規範 | EN | worrisome | 価値判断・規範 | EN | troubling | 価値判断・規範 | EN | should | 価値判断・規範 | EN | must | 価値判断・規範 | EN | ought | 価値判断・規範 | EN ### 注釈の六種 — 焦点と、その後ろに退く層 | 種類 | 役割 | 実例（台帳の図から） | 置き場 | 図題 | 測った量と基準期間 | 「月別の世界平均気温／1951–1980年平均との差」「東北沖の震源の断面／東経138–146°、M4.0以上、この1か月」 | form 枠の左上、太字 24pt・2 行。見出しはパターン、図題は量（Card.title） | 線末ラベル | 最新の日付と値を線と同じ色で | 「7月 +1.23°C」「2026年7月 +1.73°C」「2025年 +1.05°C」「7月 429.1」 | 線の末端の ● の横。届かなければ引き出し線で右上へ（Card.end_label） | 基準の明示 | 何と比べているか | 「1981–2010年の平均」「平均 1950–2025」「0 地表」 | 基準線の左端の上、平均は点線の上 | 山の名前・指差し | 出来事と発見の位置 | 「1997–98」「2015–16」「記録年 2024」「2023年から +1°C超」「M6.0 8月23日 深さ41km」 | 山の左肩、罫（INK 1.4px）の横。線に乗せない。重ねるときは紙色の縁取り（halo） | 寸法線・パネルの数字 | 幅や差そのものを測って見せる | 「1942年 幅0.42°C」「1860年 幅0.30°C」「11月 +3.4°C」 | 帯の幅に縦線＋値、小さな多数は各パネルの右上に 1 つ | 数字の札 | 今日の数字と由来 | 「429.1 ppm — 大気中の CO₂ 濃度、2026年7月、マウナロア」 | form 枠の上 44%、Poppins Bold 132pt（Card.big_number） ### 直接ラベル 凡例は置かない。線の端・面の中・点の横に名前を書く（Card.annotate）。目盛は薄灰の横罫と左端の値で足りる（Card.yticks）。目盛は 3〜4 本、単位は最上段の目盛にだけ（「+1.5°C」「50 km」「440ppm」— NYT / Bloomberg）。年は下端に 3〜5 つ、始点の年は左寄せ、終点は右寄せ。単位は数字より小さく、数字に密着。数字はタブラー。 ### 線の階層（Rojanasakul / Migliozzi の寸法） NYT Climate の Mira Rojanasakul、Bloomberg → NYT の Blacki Migliozzi の作品から取った作画の階層を、card.LW と色定数に固定した。今年・強調 3.0px ACCENT ＋ 末端の ● ＋ 同色の線末ラベル（1枚に1つ。これが焦点）／主線 2.4px INK／副線・傾向 1.6px／過去年の束 1.0px PAST（名前を付けない）／平均・気候値 AVG 点線（2,3）に「平均 1950–2025」を線上に置く／横罫 GRID 1px／ゼロ線 GRAY_LIGHT 1.4px。色は 1 図に 3 色まで。同じ図を並べるときは目盛・ラベル語彙を完全に共通化し、パネルごとに結論の数字を 1 つ置く。暫定データの期間と除外条件を出典に書く。詳細は doc F。 ### 見出し・landing・出典 見出しは全角 17 字以内・常体・図に見えているパターンを名指す・結論の数字と術語を置かない（v5.1 08）。1 行は 12.5 字（54pt＝75px/字）なので、2 行目の切れ目は改行文字で指定する（「7月の赤は、／77年で最も高い」）。見出しの前提（「一度も下がっていない」「最後の3年」）は demo() が毎回検算し、崩れれば発行しない。landing は読み方を渡す 2 行で、凡例の説明にしない。出典はデータ名・基準期間・観測日・暫定・ライセンス・sorah.io/earth を 2 行以内に（長いときは機関名を短くする）。すべて norm の検査を通る。 ### 本文の数字を図の色で landing の中の数量（「+1.73°C」「16万km²」「429.1ppm」）は、図でその量に使った色で太く組む（Card(marks={"+1.73°C": WARM})）。凡例を置かない代わりに本文が凡例になる（NYT「10 times the normal levels」の作法）。1 文に 2 つまで。数字以外の語には使わない。 ### 三極の統合 — 態度ではなく、作法として ニュートラル／中庸、Optimistic Humanism、Speculative Art。三つの極は、リサーチの結果、いずれも作法として書けることが分かった。 ムードではなく、条文と番組になる。三つとも焦点の工程に属する ── 何を基準にし、何に翻訳し、何を「もし」として延ばすかは、作り手の決定だから。 | 極 | 作法 | 台帳での現れ方 | 参照 | 中庸 Neutral | 基準を先に決め、書く。立場は基準の選び方にだけ現れる。平年・基準期間・閾値を先に決め、図題か注記に書く。今年だけに色を使い、暫定データの範囲を切り、除外条件を書く | X-09（機械）。型が Card.basis() で基準を宣言し、図題か注記に無ければ保存しない。deviation（基準が先）と compare（参照が先）はこの順序を動きとして持つ | Bloomberg 2015（基準 1880–1910 を固定し要因を重ねる）／Goodsell「水分子とイオンは描かない」／荻原和樹 2020 | Optimistic Humanism Humanism | 人間尺度への翻訳。実際に人の認知を動かした型は「自分ごと化」と「翻訳」だった。抽象量を似た場所・身体・一日に翻訳する。楽観は wonder 系番組の役割とし、気候番組で無理に作らない ── 良くなっているものも、同じ作法で数える | 発見カテゴリに翻訳（analog）を追加し、動きの語彙の 7 つ目 analog（量が先、翻訳が後）を足した。最初の型は「暦の翻訳」（07 章）。翻訳先は同じ観測列の中から取る | NYT 2018「How Much Hotter Is Your Hometown」／The Pudding「Climate Zones」 | Speculative Art Speculative | 「もし」のレジスター。SORAH は実データしか扱わないが、思弁は成立する。反実仮想の経路、予測の帯、閾値の同心円は実データから延ばした像。思弁は帯と経路の形しか取らない、という制約が SORAH らしさになる | STUDY の下に IF を立てた（08 章「もし1990年以降の傾きが続いたら」）。uncertainty（推定が先、幅が後）がそのまま動きになる。kicker は study / if | Ed Hawkins climate spiral（1.5℃・2.0℃ の同心円）／NYT の 2090 年までの予測の帯／池田亮司 data.tron 物質性は Speculative の第二の面で、写し取る工程と同じことを指す。SORAH では印刷が担う ── 刷った日のポスターは固定された参照、日次の G1 は偏差。壁の紙と画面の今日が compare の関係にある。 07 — Data Visualization ## データビジュアライゼーション SORAH は図を二つの場所で使う ── 人が操作している画面の中と、単体で受け取られる発信物。同じ規範では作れない。まずどちらかを決め、そのうえで共通の法則に従う。 ### 二つのレジスター | | プロダクトの図 | 発信のグラフィック | 読まれ方 | 操作の途中で走査される | 単体で受け取られ、共有される | 地 | ライト＝純白 ／ ダーク＝#0C1428 | G1は白。P・動画の夜版は媒体規定に従う | 書体 | 数値 Poppins 800 tabular ／ 和文 Noto Sans JP | 欧文 Poppins ／ 和文 Noto Sans JP | 色 | #006BFF を強調1点。#DA003C は負の変化のみ | 紙の色（INK / GRAY）＋データの色を1系統 | 数字 | 大きく太く、カードの最上段に | 見出しに置かない。本文に潜ませる | 正典 | 本ガイド | 本ガイド ＋ SEE 編集原則 迷ったときの判定 ── その図を、人が操作している画面の中で見るのか、それ単体で受け取るのか。操作の中なら前者、単体なら後者。記事の中の図版は後者に従う。 ### 共通の法則 | 法則 | 意味 | 落ちる例 | 1図1メッセージ | ひとつの図はひとつの発見だけを運ぶ。二つあるなら二枚に分ける | 指標を並置したダッシュボード | 色は階層、装飾ではない | 色は情報の重みを区別するためだけに使う。きれいだから塗る、はしない | 系列ごとに違う色を割り当てただけの折れ線 | 凡例より直接ラベル | 置ける場所があるなら図の上に直接書く。凡例は最後の手段 | 色と意味を目で往復させる凡例 | 基準のない数字は意味を持たない | 何と比べたのかを図の中に置く。平年、前年、他の地域、45年前 | 単独の「+1.23°C」 | 注釈が図の主役 | 言葉はパターンか解釈を名指す。「ここにデータがあります」とは言わない | 軸ラベルだけの図 | 比較を歪めない | 棒はゼロ起点。面積は面積で比べる。二重軸・切断軸・3Dは使わない | 差を誇張した切断軸 | 隠さない | 重要な内容をホバーやタップの裏に置かない。既定の状態で意味が通ること | ツールチップにしかない数値 | 不確かさを描く | 暫定値・欠測・観測日を、確定値と同じ顔で出さない | 観測日を書かない「今日の」 | グレースケールで生きる | 色を落としても読めること。赤緑の識別に依存しない | 赤と緑で正負を分けただけの図 ### 図の型と用途 図の形式選びは T シャツ選びではない。型にはそれぞれ機能がある。 | 型 | 使う場面 | 注意 | 線 | 連続量の推移 | 同時に描くのは3本まで。4本を超えるなら面を分ける | 棒 | 離散した項目の比較 | ゼロ起点。項目は意味のある順に並べる（アルファベット順にしない） | 縞 | 1次元の長い時系列 | 1本＝1期間を明示。端の年を必ず置く | 面 | 構成比の推移 | 合計が意味を持つときだけ。積み上げの順序を途中で変えない | 点 | 分布と外れ値 | 重なりは透明度ではなく間引きか六角格子で解く | 六角格子 | 密度 | 元データより細かい解像度に集計しない | 地図 | 位置そのものが発見であるとき | 下記 | 円グラフ | 使わない | 5分割以下でも棒が勝つ。例外は「ほぼ全部か、ほぼゼロか」を一目で示す場合のみ ### 地図を使ってよい条件 地図にする - どこで起きたかが発見の中身であるとき - 地理の形そのものが読者の知っている形と結びつくとき - 分布の偏りが、面積ではなく位置で説明できるとき 地図にしない - 「どこにでもある」ことしか示していない（＝世界地図に点を撒いただけ） - 実際に読ませたいのは順位や量で、位置は付随情報にすぎない - 人口の多い場所に点が多い、という当たり前を再確認しているだけ ### データの色 量・偏差・種類を区別し、現行の題材レジストリと編集カードの規定を用途別に使います。区画の種類という型は保持します。G1ではF-04の色系統制約があり、多色カテゴリの採用には条文と検査の改版が必要です。発散色は基準と中心を明記し、凡例を同じ定義から作ります。虹色による恣意的な順序づけは行いません。 [現行の配色と地図を選ぶ](/sorah-pjt/dataviz/#workbench) ### 没入シーン ── Data Scape From SORAH App 2024 プロダクトの図のうち、1題材で画面全体を使うものを「シーン」と呼ぶ。原案（2024 Data Scape仕様）は4作品を2つの型に整理していた。この2つは構成の参照例です。現在はScene・Story・Crosspointから目的に合う構成を選びます。 | | 地図／データ＋チャート型 | 地球＋ボタン型 | 題材 | 時系列で形が変わるもの（Arctic Ice、Climate Stripes） | 状態を比べるもの（Forest: Original / 2020、River: Flow / Impacted） | 初動 | 操作による再生（年が進む） | 操作による回転（球体） | 操作 | チャートをタップで停止 → スライダーで年を選ぶ（年ごとにスナップ） | 球体をタップで停止 → ドラッグで回す。表示はボタンで切替（2択・セグメント） | 読み出し | 「年｜値」の対＋スパークライン（03「読み出しの対」） | 比率＋面積など「率｜量」の対。切替に連動して更新 | 色 | 題材色を全画面に（02「シーン色」）。発散スケールは白が中点 | 現行の題材レジストリと昼夜を参照し、切替でも意味と値域を保つ | 共通の骨格 | 固定タイトル＋×、右上に「関連記事」「インフォメーション（出典・観測日）」の2ボタン、初回のみ操作チュートリアル（2秒で消える）。SP／タブレット／PCで縦横比に応じて縦積み⇄横並び（04「没入画面」） シーンは「操作している画面の中」にあるのでプロダクトの図だが、切り取っても意味が残るように作る（発信のグラフィックの条件を兼ねる）── だから出典と観測日はインフォメーションに必ず入れ、読み出しは常時表示にする。 ### 数字の組み方 - 数値は必ずタブラー数字。桁が縦に揃わない図は作らない - 4桁以上は3桁区切り。単位は数字より小さく添え、数字との間を空けない（1,234 kcal ではなく 1,234kcal） - 有効桁は意味のある桁で止める。観測精度を超える桁を書かない - 大きすぎる数はそのまま出さず、身体か生活で測れる単位に翻訳する - 比率と実数の両方を持たせる。読者に暗算をさせない Do - 作画が紙面を支配する。図が主で、余白は従 - 軸・罫・格子は最小限。消して読めるなら消す - 色を落として（グレースケールで）読めるか毎回確認する - 出典・観測日・系列の位置を必ず添える Don't - 影・グラデーション・3D・立体棒・装飾アイコン - 二重軸、切断軸、面積で量を表す円 - 凡例を読ませる、単位を換算させる、順路を探させる - 図を余白に浮かせる（作画が小さいのは、決められていないことの現れ） ## 図の型・18の実例 ここに掲載する画像・動画は型を理解するための既存の制作例です。最新の観測値や新しいScene配色の見本ではありません。新作の地理Sceneは現行レジストリを使い、G1カードの作画・動きには制作規範を適用します。 [Web版](https://sorah.io/sorah-pjt/design/patterns/catalog/) 06 — Finding → Form ## 発見の種類から型を引く 主キーは「伝えたい関係／発見」。FT Visual Vocabulary の 9 分類に Wilke の「不確かさ」と、方向性 v2.1 の「翻訳（analog）」を足した 11 カテゴリ。日本語ラベルは総務省統計局の語彙に寄せた。見た目から選ばない。読者の問いから選ぶ（Tableau「Start with questions」）。型の選び方はデータの選び方でもある — 8 型のうち 6 型が同じデータだった v0.1 は、型ごとに「その型でしか見えない発見」を持つデータへ差し替えた。 | 発見 | 読者の問い | 既定の型 | 台帳の実例（データ → 見出し） | 代替 | 禁則 | 横断 Cross-cutting | 今いくつか | 数字の札 | マウナロア CO₂ → 「この数字は、一度も下がっていない」 | 小さな多数 | 数字を 4 つ並べて色分け | 偏差 Deviation | 基準からどれだけ離れたか | 偏差の面／偏差の縞 | Niño 3.4 → 「7月の赤は、77年で最も高い」／気象庁 日本 → 「濃い赤の3本は、最後の3年」 | 発散棒・アノマリーマップ | 基準に名前がない図 | 偏差（区画） | その区画は、その区画の基準と比べてどうか | 区画の偏差 | GWIS ヨーロッパ → 「少ない年なのに、倍になった国がある」 | パーセンタイル階級マップ | 合計だけ見て各区画を見ない、基準を階級の真ん中に置く | 推移 Change over time | いつから、どう変わったか | 折れ線（三本規則）／スパゲッティ＋今年強調 | 気象庁 日本 → 「太い線は、2013年からゼロの上」／GISTEMP 月別 → 「2026年は、7か月すべてが帯の上」 | 面・スロープ・段で軸が伸びるスクロール（G2） | 4 本超の折れ線、波線省略、今年を年末まで延長 | 大小 Magnitude | どれくらい大きいか | 棒（ゼロ起点） | 未着手 | ロリポップ・翻訳比較 | 切断軸、面積を半径で | 順位 Ranking | 何が上で何が下か | 順序棒 | 未着手 | ダンベル・バンプ | アルファベット順 | 割合 Part-to-whole | 全体のうちどれだけか | 積上げ棒／100%帯 | 未着手 | ワッフル・ツリーマップ | 多分割の円、時間比較に複数円 | 散らばり Distribution | 値はどう散っているか | ヒストグラム／ストリップ | 未着手 | レインクラウド・人口ピラミッド | 箱ひげだけ（標本数を隠す） | 関係 Correlation | 二つの量はつながっているか | 断面／散布 | USGS 東北沖 → 「西へ行くほど、震源は深い」 | 接続散布 | 因果の断定、二重軸、相関を書かない回帰線 | 地理 Spatial | どこで起きているか | 世界: 比例シンボル（量）／コロプレス（率）／区画の種類（順序の無い区分）／点の集積（事象）／格子（回数）／縁の重ね（2時点）。狭い範囲: 地域の点図（1点に量ひとつ）／海峡（数十km） | GWIS → 「広さの1位と、割合の1位は違う」／GWIS 地被別 → 「焼けているのは、森林ではない」／USGS → 「濃い点は、地震ではなく地震計の数」／NSIDC → 「いつもの氷より、ときどきの海が広い」／USGS 日本中部 → 「深い地震は、海溝の側に無い」／PortWatch → 「タンカーの割合がいちばん高い海峡」 | ドット密度・六角ビン・格子アノマリー・フローマップ | 絶対量のコロプレス、大きさの違う区画を回数で塗る、区分を1色相の濃淡で塗る、量の発見を地図で言う、点の濃さを事象の濃さと読む、縮尺を置かない | 流れ Flow | 何から何へ移ったか | サンキー（素材化） | 未着手（NYT「The Choking of Hormuz」が原型） | ウォーターフォール・フローマップ | 双方向を 1 本で | 不確かさ Uncertainty | どこまで確かか | 帯（分位・信頼区間） | HadCRUT5 → 「帯がいちばん太いのは、戦争の年」／IF: 「点線が線に届くのは、2030年代」 | ファン・破線・ハッチング | 定義のない「誤差範囲」 | 翻訳 Analog | その量は、人の尺度で何にあたるか | 暦の翻訳 | 気象庁 東京 → 「東京の3月は、百年前の4月はじめ」 | 場所の翻訳（気候帯）・身体の翻訳（暑い日数） | 別の物へ翻訳する（「東京ドーム何個分」）、量を消して翻訳だけ残す | 横断（多数） | 全部同じか、順に変わるか、1 つだけ違うか | 小さな多数 | 東京 12 か月 → 「東京は、寒い月ほど速く暖まった」 | 連作（1 パネル 1 データセット） | パネルごとに軸を変える ### 副キー 入力データの形（From Data to Viz）— 数値／カテゴリ／時系列／地理／ネットワーク × 変数の数 × 順序の有無。ファセット（Data Viz Project・Kirk）— 形（棒／線／点／面／円／地図／単位）と主エンコーディング（位置＞長さ＞角度＞面積＞色）。素材（v0.3）— この図で何が何に見立てられているか（年輪・水面・霧・標本・窓・計器）。型のページにはこの三つを書く。 07 — Forms ## 型の台帳 1型1ページ。図版はすべて engine/forms が実データ（気象庁・NOAA・Met Office・NASA・NSIDC・USGS・GWIS）から生成し、 見出しの前提は demo() が毎回検算する（崩れれば発行しない）。型ごとに「その型でしか見えない発見」を持つデータを選んだ。 v2.0 で全型を三つの工程で作り直した ── 焦点は一つ（太字と色を持つ名指しは 1 枚に 1 つ。記録年・山の名前・戻った海・12 個の数字は地の重さの注記へ）、 基準の所在（何と比べたか・何を含めないかを型が宣言し、図題か注記に書く）、データに対応しない要素を置かない。 翻訳（analog）カテゴリに「暦の翻訳」を新設。各型に「なぜこの数か」と「素材の言葉」を持たせ、欧文版と和文版を並べて置く。 v2.1 では全型に動く版を両言語で付けた ── 静止版はその最後のコマ（M-07 / M-10）。束のある型はデータの時間の順に現れ、焦点は最後（M-11）。 v2.2 で世界の地図の型を 3 つ足した ── コロプレス（率）（区画は率でしか塗らない）、点の集積（1点1事象。濃さに観測網の偏りが混じることを図の中に書く）、格子（回数）（同じ暦日の 12 枚を重ねて数える）。 v2.4 で狭い範囲の地図を 3 つ足して 18 型 ── 海峡（ホルムズ、数十km の縮尺で通過量を数える）、地域の点図（日本中部の震源、1 点に深さをひとつ）、区画の偏差（ヨーロッパの火、基準を階級の境目に置く）。 狭い範囲の地図は切った範囲と縮尺を型が持ち、枠のほうを範囲の縦横比に合わせる（forms/_geo.py）。残りの型は日次で足す（点線が未着手）。 [偏差 3/5](/sorah-pjt/design/patterns/catalog/#dv-cat-deviation) [推移 2/8](/sorah-pjt/design/patterns/catalog/#dv-cat-change) [大小 0/3](/sorah-pjt/design/patterns/catalog/#dv-cat-magnitude) [順位 0/3](/sorah-pjt/design/patterns/catalog/#dv-cat-ranking) [割合 0/4](/sorah-pjt/design/patterns/catalog/#dv-cat-part) [散らばり 0/4](/sorah-pjt/design/patterns/catalog/#dv-cat-distribution) [関係 1/4](/sorah-pjt/design/patterns/catalog/#dv-cat-correlation) [地理 8/13](/sorah-pjt/design/patterns/catalog/#dv-cat-spatial) [流れ 0/3](/sorah-pjt/design/patterns/catalog/#dv-cat-flow) [不確かさ 1/5](/sorah-pjt/design/patterns/catalog/#dv-cat-uncertainty) [翻訳 1/4](/sorah-pjt/design/patterns/catalog/#dv-cat-analog) [横断 2/5](/sorah-pjt/design/patterns/catalog/#dv-cat-cross) ### 偏差 Deviation — 基準（平年・目標・ゼロ）からどれだけ離れたか ### 偏差の縞 Warming Stripes　Climate Stripes／縞 偏差 — Deviation 1本の縦縞が1期間。色だけで基準からの偏差を表し、軸を持たない。 #### なぜこの数か 「いつから変わったか」を、数字を読まずに一瞥で答えるため。128本の縞は、1本ずつ読む図ではなく、全体の色の重心が右に寄っていることを見る図。 #### 素材の言葉 縞は年輪。1本が1年の木口で、色はその年の温度。紙に刷った縞は壁に掛かる年表になる。 ![Do — English edition](/sorah-pjt/dataviz/img/stripes_en.jpg) EN 図題に量と基準期間、端の年、焦点の縞に括線と一つの名指し、補助の位置は薄く ![Do — 日本語版](/sorah-pjt/dataviz/img/stripes_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ ![Don't](/sorah-pjt/dataviz/img/stripes_dont.jpg) Don't 虹色で塗り、端の年も基準も書かず「色が暖かいほど暑い」と説明する [動画](/sorah-pjt/dataviz/motion/stripes_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/stripes_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） #### 使う発見 - 長い時系列の一瞥（100年以上）。「いつから変わったか」を一目で - 地点や対象ごとの比較（同じ基準・同じ色域で並べる） - ポスター・アイキャッチ。数字を読ませるのではなく、変化の形を見せる #### 使わない・代替 - 日次の報告に単独で使わない（1本の差は読めない）→ 折れ線（三本規則）か偏差の面 - 値そのものを読ませたい → 発散棒 - 期間が短い（30本未満） → 縞が太くなり「柄」に見える → 棒 #### 上限値 | min_bars | 30 | colors | 発散1系統・白中央 | annotations_min | 1 #### 入力データの形 1列の順序付き期間（年・月）× 1列の偏差値（基準からの差） #### 副カテゴリ・色の系統 推移／diverging #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行（量の名前／基準期間）。縞はその下 - 縞: form 枠の幅いっぱい（936px） - 直接ラベル帯: 下端 14%（左に始点年、右に終点年） - 焦点の括線: 名指す縞の上に INK 1.4px の括線、その上に太字で「最後の3年 2023–25」。太字はこれだけ - 補助の位置: 「+1°C超が始まった年」に GRAY_LIGHT の縦罫と地の重さの注記。焦点と競わせない - 単位注記「1本＝1年」: 下端の中央（端の年のあいだ） #### 作画規定 - 色は発散（RdBu_r 系）、中央は白＝基準期間の平均。範囲は ±max で対称にする - 端の年を必ず置く。中間の目盛りは置かない（縞は軸を持たない型） - 基準期間は図題の 2 行目に書く（「1991–2020年平均との差」）。出典にも繰り返す - 見出しは縞に見えているパターンを名指す（「濃い赤の3本は、最後の3年」）。数値の報告にしない。前提（上位3年＝最後の3年）は demo() が検算する - グレースケールで並びが単調になるか確認する。偏差が非対称なら赤側が濃く出て、それで読める #### 動く版の現れ方 sweep — データの時間で刷る。横軸が 128 年。左から右へ刷ると、色の重心が右に寄っていく過程がそのまま見える。 #### 参照例 - Ed Hawkins / University of Reading — [#ShowYourStripes](https://showyourstripes.info/) 軸も数字も捨てて、変化の形だけを残した原型。16色・基準期間・SD幅を注記に置く作法 - Climate Central — [Climate Shift / Stripes by city](https://www.climatecentral.org/showyourstripes) 地点別に同じ色域で並べる「小さな多数」への展開 - Berkeley Earth — [Global Temperature Report](https://berkeleyearth.org/global-temperature-report-for-2024/) 縞を年報の導入図に使い、詳細は折れ線に譲る分担 #### 実装 forms.stripes.draw(card, ax, years, values, focus=, mark_year=, mark_label=, title=, end_label=)　demo: {'n': 128, 'vmax': 1.89} ### 基準線偏差の面 Surplus / Deficit Filled Line　偏差面／Anomaly area 偏差 — Deviation 基準線の上下を面で塗り分けた折れ線。偏差の向きと大きさと持続を同時に見せる。 #### なぜこの数か 「基準の上と下、どちらにどれだけ溜まったか」。偏差の向きだけでなく面積で持続を読ませるため。エルニーニョは山の高さより、赤が続いた月数が効く。 #### 素材の言葉 赤い面は熱の貯金、青い面は借り。基準線は水面で、面はその上下に溜まった水。 ![Do — English edition](/sorah-pjt/dataviz/img/surplus_deficit_en.jpg) EN 基準線に名前を付け、上下を同じ明度の暖冷で塗る ![Do — 日本語版](/sorah-pjt/dataviz/img/surplus_deficit_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 基準を平均以外の値に動かして片側の面積を大きく見せる [動画](/sorah-pjt/dataviz/motion/surplus_deficit_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 deviation（基準が先、偏差が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/surplus_deficit_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 deviation（基準が先、偏差が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 基準（平年・ゼロ・目標）を上回る期間と下回る期間の対比 - 偏差の「たまり方」（面積）を見せたいとき。縞よりも量が読める - 収支・貿易・水位など、正負に意味がある時系列 #### 使わない・代替 - 基準が意味を持たない量（絶対値の推移）→ 折れ線 - 2系列の差を見せたい → 2系列間を塗る変種（別型） - 面積が量を意味しない（比率の推移など）と誤読される場合 → 折れ線 #### 上限値 | series | 1 | colors | 発散1系統（上＝暖、下＝冷） | baseline | 必須・INK 1.4px（LW zero）、名前つき #### 入力データの形 1列の順序付き期間 × 1列の値。基準値（定数または系列） #### 副カテゴリ・色の系統 推移／diverging #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行（量の名前／基準期間） - 基準線: INK 1.4px、左端に基準の名前（「1981–2010年の平均」） - 面: 基準の上を暖色、下を寒色。輪郭線は引かない（面が主役） - 山の名前: 出来事を山の左肩に、面と同じ色の地の重さ（「1997–98」）。注記の層 - 線末ラベル: 最新点に ● と「2026年7月 +1.73°C」── 1枚でこれだけが太字（焦点） - 目盛: 薄灰の横罫、左端に値。単位は最上段だけ（「+2°C」「+1」「0」「-1」「-2」） - 端の年: 下端に 1950 / 1975 / 2000 / 2025。右に 5 年の余白（札の置き場） #### 作画規定 - 基準線は必ず名前を持つ。「0」ではなく「何の平均か」を書く - 縦軸は基準を含み、上下の余白は非対称でよい（データに従う）。ただし面は基準から塗る - 色は発散1系統。上下で明度が近い組（同じ明度の赤と青）を選び、面積の比較を歪めない - 山に出来事の名前（「1997–98」）を左肩に、最新点に ● と線末ラベル（「2026年7月 +1.73°C」）。届かなければ右に余白を取り、引き出し線で図題の右へ - Tufte の proportional ink: 面の量が値の量に比例していること。基準を動かして面を誇張しない #### 動く版の現れ方 deviation — 基準が先、偏差が後。答えているのは「基準と比べてどうか」。基準線が立つ前に差を見せると、何と比べたのか分からない。 #### 参照例 - NYT Climate (Mira Rojanasakul) — [This Year's Record-Breaking El Niño in 3 Charts](https://www.nytimes.com/interactive/2023/climate/el-nino-record.html) ニーニョ3.4 の偏差に閾値線と言葉のラベル、25–75 パーセンタイル帯の注記 - Financial Times — [Visual Vocabulary — Deviation: Surplus/deficit filled line](https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) 偏差カテゴリの基本型として定義。基準線の役割を明示 - Bloomberg — [What's Really Warming the World?](https://www.bloomberg.com/graphics/2015-whats-warming-the-world/) 固定基準線の上に要因を一つずつ重ねる。基準の見せ方の教科書 - Claus O. Wilke — [Fundamentals of Data Visualization — Proportional ink](https://clauswilke.com/dataviz/proportional-ink.html) 塗った面積が量に比例すべき、の根拠 #### 実装 forms.surplus_deficit.draw(card, ax, x, y, baseline=, ylim=, ticks=, baseline_label=, title=, events=, end_label=, focus=)　demo: {'above': 416, 'below': 503} ### 区画の偏差 Anomaly choropleth　平年比の塗り分け／アノマリーマップ（区画） 偏差 — Deviation 区画を、その区画自身の基準（参照平均・前年・目標）との比で塗る。分母が区画ごとに違う。 #### なぜこの数か 「多いのか少ないのか」は、合計では答えられない。分母が場所ごとに違うから、合計が基準を下回っていても、基準の倍の区画がありうる。合計だけを見ると、それが消える。 #### 素材の言葉 濃さは、その区画がいつもの自分からどれだけ離れたか。地図は台紙で、基準は各区画の中にあって図の上には描かれない ── だから階級の境目に基準を置く。 ![Do — English edition](/sorah-pjt/dataviz/img/anomaly_map_en.jpg) EN 基準を階級の境目に置いた 4 階級で塗り、合計の比と、最も離れた区画を書く ![Do — 日本語版](/sorah-pjt/dataviz/img/anomaly_map_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 今年の絶対量を赤〜青の発散色で塗り、基準を凡例の中央に置く [動画](/sorah-pjt/dataviz/motion/anomaly_map_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 deviation（基準が先、偏差が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/anomaly_map_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 deviation（基準が先、偏差が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 同じ区画の基準（参照平均・前年・目標）が手元にあり、そこからの離れ方が発見のとき - 合計と各区画が逆を向いているとき - 絶対量では大国ばかりが目立ってしまうとき #### 使わない・代替 - 基準が定義できない → コロプレス（率） - 区画の中の分布が発見 → 格子アノマリー - 基準からの離れ方を時系列で見たい → 基準線偏差の面・偏差の縞 #### 上限値 | fill | 率（rate）── 分母が区画自身の基準。区画の塗りは率・種類・回数の三つで、絶対量は選べない（F-11） | value | 基準との比（または差）。絶対量では塗らない | classes | 4階級まで | boundary | **基準（比なら 1.0）が階級の境目に来ること** | denominator | 基準の小さい区画を落とす（ここでは 2万ha）。落とした条件を書く | hue | 1色相の順序スケール。基準の上下を色相で分けない（灰色で潰れる） | legend | 置かない。数字の格子が代わり #### 入力データの形 区画（ISO3）× 今期の量 × 同じ区画の基準 #### 副カテゴリ・色の系統 地理、割合／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（何を何で割ったか／期間・地被・基準） - 地図: 枠の上 70%、緯度で横を補正した経緯度。基準の無い区画は #F2F2F2 のまま - 階級: 4 段（#CDD8E1 → #05396B）。2 段目と 3 段目の境目が基準（1.0） - 直接ラベル: 最も離れた区画に太字で 1 つ、次点を地の重さで 1 つ - 数字の格子: 枠の下、階級ごとの区画数 4 行（上が基準より上） #### 作画規定 - **基準を階級の境目に置く。** 基準が階級の真ん中にあると、上か下かが色から読めない - 基準の上下を色相（赤／青）で分けない。灰色にすると同じ濃さになり、階級が消える（F-06） - 基準の小さい区画を落とす。分母が小さいと比が跳ねる。落とした条件を図題か出典に書く - 合計の比を必ず書く。各区画だけ見せると「全体でも増えている」と読まれる - **基準の期間と作り方を出典に書く。**「参照平均」は定義であって観測ではない。配布ファイルに期間が書かれていないときは、書かれていないことを書く - 絶対量では塗らない。それは区画の面積を量として読ませる（コロプレスと同じ誤り） #### 動く版の現れ方 deviation — 基準が先、偏差が後。基準が先、偏差が後。区画の形が台紙として立ってから、基準から離れた階級が順に乗る。比べる相手が無いうちに差を見せない。 #### 参照例 - Copernicus EFFIS / GWIS — [Estimated burnt areas vs. the reference average](https://forest-fire.emergency.copernicus.eu/) 同じ週までの累積を参照平均と並べる。年内の途中経過を基準と比べる作法の原型 - Our World in Data — [Wildfires — weekly cumulative area burnt](https://ourworldindata.org/wildfires) 今年・去年・参照期間の最大最小と平均を同じ列に持つ。比の分母がどこから来たかが辿れる - Ed Hawkins — [#ShowYourStripes](https://showyourstripes.info/) 基準からの離れ方だけを見せる図。基準の置き方が図の主張そのものになる例 #### 実装 forms.anomaly_map.draw(card, ax, {ISO3: ratio}, bins=, extent=, title=, notes=, grid=)　demo: {'painted': 22, 'europe': 0.517, 'top': 'FRA', 'top_ratio': 2.84, 'above': 3, 'countries': 22, 'week': 34} 発散棒パーセンタイル階級マップ ### 推移 Change over time — いつから、どう変わったか ### 折れ線（三本規則） Line — three-line rule　年々値・平滑・傾向／Annual / smoothed / trend 推移 — Change over time 同じ系列を、年々の値（細）・平滑（太）・傾向（直線）の三本で重ねる。揺れと向きを同時に読ませる。 #### なぜこの数か 「揺れ」と「向き」を分けて読むため。年ごとの上下に目を奪われると傾きが見えず、傾きだけ見ると揺れの大きさを忘れる。三本で両方を持つ。 #### 素材の言葉 細い線は波、太い線は潮、点線は海面の上昇。同じ海を三つの時間で見る。 ![Do — English edition](/sorah-pjt/dataviz/img/line_three_en.jpg) EN 三本に役割を与え、太線の末端に ● と値、細線と傾向は線の近くに名前 ![Do — 日本語版](/sorah-pjt/dataviz/img/line_three_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ ![Don't](/sorah-pjt/dataviz/img/line_three_dont.jpg) Don't 6本の月別系列を色分けし、凡例で読ませる [動画](/sorah-pjt/dataviz/motion/line_three_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/line_three_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） #### 使う発見 - 長期の推移で「揺れ」と「向き」を分けて見せたいとき - 傾きを数字で言いたいとき（「100年あたり +1.44°C」— 気象庁の単位） - 1系列の日次報告の既定。今日の値を、文脈（平滑・傾向）の中に置く #### 使わない・代替 - 複数系列の比較 → 小さな多数（1パネル1系列）。4本を超える折れ線は置かない - 周期性がある日次データ → 日別スパゲッティ（今年強調＋帯） - 基準からの偏差そのものを見せたい → 偏差の面 #### 上限値 | series | 1 | lines | 3 | smooth_window | 5年（気象庁）または 10年 | trend | 有意（90%）な時だけ描く #### 入力データの形 1列の順序付き期間 × 1列の値。平滑窓と傾向の有無 #### 副カテゴリ・色の系統 偏差／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行（量の名前／基準期間） - 細線: PAST 1.0px — 年々の値。名前は谷の下に薄く - 太線: INK 2.4px — 移動平均。末端に ● と値（「2023年までの5年平均 +1.04°C」） - 傾向: ACCENT 1.6px 点線。線の下に地の重さで「傾向 +1.44°C/100年」（焦点は太線の末端の一つだけ） - ゼロ線: GRAY_LIGHT 1.4px（偏差のとき） - 目盛: 薄灰の横罫＋左端の値、単位は最上段だけ。年は下端 #### 作画規定 - 凡例を置かない。太線は末端に値、細線は山の上に薄い名前、傾向は線の下に太字（紙色の縁取り） - 折れ線のゼロ起点は必須ではない。ただし波線省略（軸の切断記号）は使わない - 欠測は線を切る。補間しない（気象庁） - 傾向線は統計的に有意なときだけ。有意でなければ描かず、見出しにも書かない - 太線が主役。細線は太線より明るく、太線より細く - 傾きの単位は読者の時間で（気象庁は「100年あたり」） #### 動く版の現れ方 sweep — データの時間で刷る。三本には順がある。年々の値が先に刷られ、その揺れの中を太い平均が通り、最後に一本の傾きが引かれる。揺れ → 潮 → 向き。 #### 参照例 - Bloomberg (Blacki Migliozzi) — [What's Really Warming the World?](https://www.bloomberg.com/graphics/2015-whats-warming-the-world/) 主線 2〜2.5px・副線 1.5px・束 1px 薄灰の階層。線末のピル型ラベル。凡例なし - 気象庁 — [気候変動監視レポート — 年平均気温偏差の経年変化](https://www.data.jma.go.jp/cpdinfo/temp/an_wld.html) 細線（年々）・太線（5年移動平均）・直線（長期変化傾向）の三本を1図に重ねる原型 - NASA GISS — [GISTEMP — Global Mean Estimates based on Land and Ocean Data](https://data.giss.nasa.gov/gistemp/graphs_v4/) 年々値とLowess平滑の重ね。基準期間を明記 - Datawrapper (Lisa Charlotte Muth) — [When to use a line chart / direct labeling](https://www.datawrapper.de/blog/) 凡例より直接ラベル、4本を超えたら小さな多数、の根拠 #### 実装 forms.line_three.draw(card, ax, x, y, smooth=5, trend=True, ylim=, ticks=, per=, title=, end_label=)　demo: {'trend': 1.435957814502835} ### スパゲッティ＋今年強調 Highlighted year over past years　Charctic 型／年別重ね／in One Chart 推移 — Change over time 周期（1年）ごとに切った系列を重ね、今年だけに色を与え、平均を点線で通す。過去は薄い束。 #### なぜこの数か 「今年は過去のどこにいるか」。周期のある量は、平年からの差より「束の中の位置」で読むほうが早い。帯の外に出ていれば、それが発見。 #### 素材の言葉 過去年の束は霧、今年の線はその中を進む一本の道。帯は道幅の平年値。 ![Do — English edition](/sorah-pjt/dataviz/img/spaghetti_en.jpg) EN 今年だけ色を持ち、線末に日付と値、平均は点線に直接ラベル、記録年は右半分の最大点の真上に名前、図題に量と基準 ![Do — 日本語版](/sorah-pjt/dataviz/img/spaghetti_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 全年を色分けし、凡例で読ませ、今年を年末まで延長して描く [動画](/sorah-pjt/dataviz/motion/spaghetti_en.mp4) EN 動く版 14 秒・作画 7 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/spaghetti_ja.mp4) JA 動く版 14 秒・作画 7 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） #### 使う発見 - 今年が過去と比べて記録的かどうか（海氷・気温・海洋熱量の日次／月次報告） - 季節周期の中での位置を見せたいとき - 「帯の外に出ている」「平均から離れている」という発見 #### 使わない・代替 - 周期のないデータ → 折れ線（三本規則） - 年ごとの違いを個別に読ませたい → 小さな多数 - 3本以上を色分けして名指したい → 系列を減らすか小さな多数 #### 上限値 | colored_series | 1 | named_lines | 今年・平均・（記録年）の3本まで | past_years | 1px 薄灰の束。名前を付けない | band | 使うなら分位を明記（10–90 / 25–75 パーセンタイル） | record_rule | 年末まで記録年に昇格させない（NSIDC） #### 入力データの形 周期内位置（日・月）× 年 の行列。今年の途中までの値は欠測（NaN） #### 副カテゴリ・色の系統 散らばり、不確かさ／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: form 枠の左上、太字 24px・2 行（量の名前／基準期間）。見出しはパターン、図題は量 - 今年: ACCENT 3.0px、最新点に ● 90pt、線末に同色太字で「7月 +1.23°C」 - 平均: AVG #808080 1.6px 点線（2,3）、右端の線上に「平均 1950–2025」 - 記録年: INK 1.6px 実線、山の上に地の重さで「記録年 2024」（太字にしない。焦点は今年） - 過去年: #D2D2D2 1.0px、名前なし - 帯: #EFEFEF、輪郭なし、右端に分位 - 目盛: 横罫 #EBEBEB、左端に値。単位は最上段だけ。x は 1月／4月／7月／10月／12月 #### 作画規定 - 色を持つ線は1本だけ。過去年は束にして名前を付けない（R-7: 2013–2023 は 1px 薄灰） - 今年の線末に日付と値を同じ色の太字で書く。これで図が「更新可能な日次図」になる - 平均は点線。ラベルは線の上に直接。凡例は作らない - 図題に測った量と基準期間を書く（「月別の世界平均気温／1951–1980年平均との差」） - 今年は途中で止める。線を延ばさない。暫定データの範囲は出典に書く - 記録年は年が終わるまで暫定。見出しで「記録」と断定しない #### 動く版の現れ方 sweep — データの時間で刷る。データの時間は年。古い年から 1 本ずつ束が積み上がり、帯と平均がその要約として現れ、最後に今年の 1 本が束の上に刷られる。今年が束から出ていく瞬間は、束が先に無ければ見えない。 #### 参照例 - The New York Times (Raymond Zhong, Mira Rojanasakul) — [See the Ocean Heat Fueling Hurricane Milton, in One Chart](https://www.nytimes.com/interactive/2024/10/07/climate/gulf-mexico-ocean-temperature.html) 今年2.5px錆色＋線末に「Oct. 7, 2024」、過去11年は1px薄灰、平均は点線に「Average, 2013-2023」。3色・7語で完結 - NSIDC — [Charctic Interactive Sea Ice Graph](https://nsidc.org/sea-ice-today/sea-ice-tools/charctic-interactive-sea-ice-graph) 今年・記録年・中央値・四分位／十分位帯。型の原型 - The New York Times (Mira Rojanasakul) — [This Year's Record-Breaking El Niño in 3 Charts](https://www.nytimes.com/interactive/2023/climate/el-nino-2023.html) 帯は「25th and 75th percentile bounds」と統計語で注記。閾値線に言葉のラベル #### 実装 forms.spaghetti.draw(card, ax, xs, matrix, this=, record=, band=, ylim=, ticks=, xlabels=, title=, this_label=)　demo: {'years': 77, 'this': '2026', 'record': '2024', 'band': (10, 90), 'last': [7, 1.23]} 月別×年の小さな多数累積曲線面（0起点）カレンダーヒートマップスロープ前後比較 ### 大小 Magnitude — どれくらい大きいか 棒（縦／横）ロリポップドット ### 順位 Ranking — 何が上で何が下か 順序棒バンプダンベル ### 割合 Part-to-whole — 全体のうちどれだけか 積上げ棒／100%帯ワッフルツリーマップ円（2〜3分割） ### 散らばり Distribution — 値はどう散っているか ヒストグラムストリップレインクラウド人口ピラミッド ### 関係 Correlation — 二つの量はつながっているか ### 断面 Cross-section　プロファイル／Depth section／Transect 関係 — Correlation 位置の一軸（経度・距離）と量の一軸（深さ・高度）で切った散布。地図を捨てて、関係だけを残す。 #### なぜこの数か 「位置と量はつながっているか」。地図では重なって見えない奥行き（深さ）を、位置の一軸で切って見せる。沈み込む板の傾きが相関の数字になる。 #### 素材の言葉 断面は地面を縦に切った土壌の標本。点は地中で鳴った音の位置。 ![Do — English edition](/sorah-pjt/dataviz/img/section_en.jpg) EN 向きを言葉で書き、傾きに相関を添え、深さを 0 から切らずに描く ![Do — 日本語版](/sorah-pjt/dataviz/img/section_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 地図に深さを色で載せ、凡例の色階調で読ませる [動画](/sorah-pjt/dataviz/motion/section_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/section_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） #### 使う発見 - 深さや高さが位置とどう関係するか（沈み込み帯・地形の横断・大気の鉛直分布） - 地図では重なって見えない「奥行き」を見せたいとき - 位置そのものより「位置と量の関係」が発見のとき #### 使わない・代替 - どこで起きたかが発見 → 地図（ドット密度・比例シンボル） - 関係が弱い（相関が小さい・点が少ない）→ 出さない。cards.earth は r<−0.30 かつ n≥25 を発行条件にしている - 3変数目を色で足したくなる → 小さな多数 #### 上限値 | points | 25 以上（それ未満は傾きを描かない） | fit | 相関係数を必ず併記 | encodings | 位置×2＋大きさ（面積）まで。色は足さない #### 入力データの形 位置（数値）× 量（数値）× 任意の大きさ（数値）。範囲（xlim） #### 副カテゴリ・色の系統 地理、散らばり／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行（場所／範囲と条件） - 深さは下向き。0 を GRAY_LIGHT 線に、左端に「0 地表」。目盛の単位は最上段だけ（「50 km」） - 点: 白抜き・INK 1.5px 輪郭。大きさは面積で（半径にしない）。最大の1点だけ名前を添える（M・日付・深さ。地の重さ） - 傾き: ACCENT 1.6px 点線。点の範囲内だけに引く。ラベルは読者の単位で（「西へ1°ごとに約17km深い」）＋点数と相関 - 目盛: 50km ごとの薄灰の横罫。左端に値。横軸の端に「陸側 ← 東経138°」「東経146° → 海溝側」。傾きのラベルは線の下、左寄りの空きに（点の上に乗せない） #### 作画規定 - 向きを言葉で書く（陸側／海溝側）。経度の数字だけでは読者は方角を想像できない - 回帰線は解釈なので、当てはまりの悪さ（相関）を一緒に書く - 断面の範囲は「一本の傾きで読める区間」に限定し、範囲を出典に書く - 深さの軸は切らない。0 から最深まで - 大きさは3段階以上の差が見えるように（M4.0 と M6.0 が一目で違う） #### 動く版の現れ方 sweep — データの時間で刷る。データの時間は発生順。地震が起きた順に点が置かれ、ばらばらに見えた点が 39 回で一本の傾きに揃っていく。傾きの線はその後に引かれる。 #### 参照例 - USGS — [Earthquake Hazards Program — Cross-section tools](https://earthquake.usgs.gov/) 沈み込み帯の断面図の定番。深さを下向きにとる作法 - 日本経済新聞 ビジュアルデータ — [震源データで見る日本列島](https://vdata.nikkei.com/) 100年分の震源で地形が浮かぶ。点集積の地図と断面の使い分け - Financial Times — [Visual Vocabulary — Correlation: Scatterplot](https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) 散布は因果と誤読される、の注意。横軸に原因を置く #### 実装 forms.section.draw(card, ax, x, depth, size, xlim=, dmax=, fit=True, left_label=, right_label=, title=, mark=)　demo: {'n': 39, 'r': -0.5494909107554147, 'slope': -16.771960679947554} 散布接続散布XY ヒートマップ ### 地理 Spatial — どこで起きているか ### 比例シンボル地図 Proportional symbol map　Graduated symbol map／円の地図 地理 — Spatial 場所ごとの量を、その場所に置いた円の面積で表す。色ではなく大きさで量を運ぶ地図。 #### なぜこの数か 「どこで、どれだけ」を1枚で答えるため。コロプレス（塗り分け）は国の面積に量が引きずられるが、円の面積は国の広さと無関係に量だけを表す。 #### 素材の言葉 円は積み上げた量そのもの。地図は台紙で、円は台紙の上に置かれた駒。凡例を置く代わりに、下に数字の格子（GLACIES LIQUOR #1 の年×面積の並び）を敷いて、大きさと数字を突き合わせられるようにする。 ![Do — English edition](/sorah-pjt/dataviz/img/symbol_map_en.jpg) EN 正積図法に面積比例の円、最大の円だけ強調、下に上位 8 の数字の格子 ![Do — 日本語版](/sorah-pjt/dataviz/img/symbol_map_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't メルカトル図法に半径比例の円を置き、右下に 3 段の円の凡例を添える [動画](/sorah-pjt/dataviz/motion/symbol_map_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/symbol_map_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 国・地点ごとの絶対量を並べたい（焼失面積・排出量・発電量・人口） - 上位の数か国に量が集中していて、その集中そのものが発見のとき - 面積の違う国を比べるとき（コロプレスは大国を過大に見せる） #### 使わない・代替 - 率・密度を見せたい（人口あたり・面積あたり）→ コロプレス - 位置に意味がなく順位だけが発見 → 発散棒・ランキング - 上位と下位の比が 1000 倍を超える → 円が読めない。対数は面積の直感を壊すので、上位だけの数字の格子にする #### 上限値 | symbols | 円の面積 ∝ 量（半径 ∝ √量） | max_radius | 版面の 1/12 まで | projection | 正積（Equal Earth / Mollweide）。メルカトルは使わない | legend | 置かない。数字の格子が代わり | grid_rows | 8 #### 入力データの形 場所（ISO3 か 経緯度）× 量 の1列 #### 副カテゴリ・色の系統 大小／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（量の名前／期間と定義） - 地図: 枠の上 62%、Equal Earth 正積図法。陸は #F2F2F2 の面、境界は紙色 0.6px。格子線・軸は引かない - 円: INK の輪郭 1.4px、塗りなし。面積が量に比例。最大の円だけ ACCENT - 数字の格子: 枠の下、上位 8 を 2 列 × 4 行。国名（左）と値（右揃え・タブラー） - 単位: 格子の 1 行目の値にだけ添える - 円の読み方: 格子の右上に 1 行（「円の面積＝焼けた広さ」） #### 作画規定 - 正積図法を使う。面積で量を表す図で図法が面積を歪めていたら二重に嘘になる - 円の面積を量に比例させる（半径に比例させると上位が 10 倍誇張される） - 最小の円に下限を設けない。小さい国は小さく描く。読めない大きさなら、それは「読めるほど燃えていない」 - 凡例を置かない。最大の円を数字の格子の 1 行目に置き、名前と値を直接読ませる - 「森林火災」と「焼失面積」を混同しない。GWIS の焼失面積は全地被で、森林はその 1 割未満。図題と出典に地被の範囲を書く - 上位 8 か国で全体の 6 割を占めるような分布のときだけ使う。均等に散っているなら地図にする意味がない #### 動く版の現れ方 spatial — 地が先、量が後。地図は作画ではなく台紙。陸が現れてから、量が大きい順に着地する。左から右へ拭くと地理が順序に見えてしまう。 #### 参照例 - Our World in Data / GWIS (Copernicus) — [Wildfires — cumulative area burnt](https://ourworldindata.org/wildfires) 週ごとの累積焼失面積を今年・去年・参照期間の最大最小と並べる。年内の途中経過を扱う作法 - SORAH inc. — [AQUA FLUXUS — River World Map](https://shop.sorah.io/ja) 凡例の代わりに 4 枚の縮小世界地図を横に並べる。凡例という部品を置かない構造 - SORAH inc. — [GLACIES LIQUOR #1 — Arctic Ice Transition](https://shop.sorah.io/ja) 年と面積の格子を版面の下に敷く。数字の格子が凡例を兼ねる #### 実装 forms.symbol_map.draw(card, ax, {ISO3: value}, title=, top=, unit=, fmt=, name_of=, mark=)　demo: {'countries': 162, 'max': 19483512.0, 'top': ['COD', 'AGO', 'AUS', 'SSD', 'ZMB', 'RUS', 'CAF', 'MMR'], 'world': 144453300.0, 'africa_share': 0.571, 'week': 34, 'forest_share': 0.074} ### コロプレス（率） Choropleth of rates　塗り分け地図／階級区分図 地理 — Spatial 区画を、その区画の中の率（割合・密度）で塗る。分母を持たない量では塗らない。 #### なぜこの数か 「その場所ではどれだけか」を答えるため。量で塗ると、読者は塗られた面積を量として読んでしまう ── 広い国が濃く見えるだけの図になる。 #### 素材の言葉 塗りは区画そのものの濃さ。国の形は台紙で、濃さだけが値。だから濃さの意味は「面積あたり」でなければ嘘になる。 ![Do — English edition](/sorah-pjt/dataviz/img/choropleth_en.jpg) EN 正積図法に率を 5 階級、値の無い区画は塗らず、下に割合の上位 8 の数字の格子 ![Do — 日本語版](/sorah-pjt/dataviz/img/choropleth_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 絶対量を連続グラデーションで塗り、右下に色の帯の凡例を添える [動画](/sorah-pjt/dataviz/motion/choropleth_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/choropleth_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 面積あたり・人口あたり・全体に占める割合が発見のとき - 同じデータの絶対量を別の型（比例シンボル地図）で見せていて、順位が入れ替わるとき - 区画の境界そのものに意味があるとき（政策・統計の単位） #### 使わない・代替 - 絶対量を見せたい → 比例シンボル地図（円の面積）。区画の塗りは絶対量を運べない - 運ぶのが順序の無い区分（どの型か・何が一番か）→ 区画の種類（category_map） - 運ぶのが回数 → 大きさの揃った格子で数える（grid_count）。国や県では回数を率に直す - 区画に意味がなく事象の位置が発見 → 点の集積 - 区画ごとの標本が小さく率が跳ねる → 分母の下限を切るか、順位棒にする #### 上限値 | fill | 率（rate）。区画の塗りは率・種類・回数の三つで、絶対量は選べない（F-11） | value | 率・割合・密度のみ。絶対量では塗らない | classes | 5階級まで。連続グラデーションにしない | hue | 1色相の順序スケール（白→#05396B） | projection | 正積（Equal Earth） | denominator | 分母の下限を切る（ここでは国土1万km²） | legend | 置かない。数字の格子が代わり #### 入力データの形 区画（ISO3）× 率 の1列と、同じ区画の分母（面積・人口） #### 副カテゴリ・色の系統 割合、順位／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（率の名前／期間・地被・分母） - 地図: 枠の上 56%、Equal Earth 正積図法。値の無い区画は #F2F2F2 のまま（0 と欠測を同じ色にしない） - 階級: 5 段（#E4EAF0 → #05396B）。境界は紙色 0.6px - 数字の格子: 枠の下、割合の上位 8 を 2 列 × 4 行。1 位の値だけ太字 - 注記: 「広さの上位だが割合は低い」国を地の重さで地図の上に 2 つまで #### 作画規定 - **この型は率で塗る。塗れないのは絶対量。** 区画の面積が量として読まれる二重の嘘になる。区画の塗りが運べるのは率・種類・回数の三つで、どれかを宣言してから塗る（F-11） - 回数を国や県に塗らない。回数で塗れるのは区画の大きさが揃っているとき（固定格子）だけ ── 大きさが違えば、広い区画が濃く見えるのは絶対量と同じこと - 階級は 5 つまで。連続グラデーションは、読者に色から値を逆算させる（凡例を作らないと読めない ＝ F-02 に反する） - 分母の下限を切り、切った条件を図題か出典に書く（X-09）。小さな島嶼は率が跳ねる - 値の無い区画は塗らない。0 と欠測を同じ色にしない - 正積図法を使う。塗った面積が図法で歪むと、階級の見かけの量が変わる - 同じデータの絶対量の型（比例シンボル地図）と組で読ませる。片方だけでは順位の入れ替わりが見えない #### 動く版の現れ方 spatial — 地が先、量が後。区画の形が先に台紙として現れ、そのあとに濃い階級から順に値が着地する。塗りが左から右へ拭かれると、区画の並びが順序に見えてしまう。 #### 参照例 - Mark Monmonier — [How to Lie with Maps](https://press.uchicago.edu/ucp/books/book/chicago/H/bo25086979.html) コロプレスは率で塗る、階級の切り方が結論を変える ── 地図の嘘の教科書 - Our World in Data / GWIS (Copernicus) — [Wildfires](https://ourworldindata.org/wildfires) 同じ焼失面積を絶対量と率の両方で出す。順位が入れ替わることを図で見せている - Natural Earth — [Admin 0 — Countries (110m)](https://www.naturalearthdata.com/downloads/110m-cultural-vectors/) 分母の国土面積は、地図と同じ正積投影の幾何から出す（別統計を混ぜない） #### 実装 forms.choropleth.draw(card, ax, {ISO3: rate}, breaks=, title=, grid=, notes=)　demo: {'countries': 158, 'top_rate': 'GIN', 'top_area': 'COD', 'rate_max': 0.1357, 'rate_of_top_area': 0.0839, 'week': 34} ### 区画の種類 Categorical map　区分の塗り分け／最頻区分図／Categorical choropleth 地理 — Spatial 区画を、順序を持たない区分で塗る。色は量ではなく、区分の名前。 #### なぜこの数か 「どこがどれだけか」ではなく「どこがどれか」が発見のとき。率でも回数でもなく、区分そのものが答えになる図がある ── 一番になった種類が場所によって入れ替わる、という発見。 #### 素材の言葉 色相が区分の名前で、濃さは意味を持たない。区画の形は台紙、色は名札。だから名前を色見本ではなく、その色の区画の上に直接置く。 ![Do — English edition](/sorah-pjt/dataviz/img/category_map_en.jpg) EN 正積図法に4区分を4色相で塗り、区分名をその区画の上に直接置き、下に区分ごとの国数 ![Do — 日本語版](/sorah-pjt/dataviz/img/category_map_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 順序の無い区分を1色相の濃淡で塗り、右下に色見本の凡例を置く（濃いほうが多いと読まれる） [動画](/sorah-pjt/dataviz/motion/category_map_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/category_map_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 区画ごとの「どれが一番か」が発見のとき（最も焼けた地被・最も多い電源・最頻の風向） - 区分の数が4つ以下で、区分に順序が無いとき - 同じデータの率の図（コロプレス）と並べて、量と区分の食い違いを見せたいとき #### 使わない・代替 - 区分に順序がある（少ない→多い、低い→高い）→ 率の階級（コロプレス） - 区分が5つ以上 → 上位3区分＋その他にするか、区分ごとに2図に分ける - 運ぶのが量そのもの → 比例シンボル地図。区画の塗りは絶対量を運べない - 区画の中の内訳が発見 → 積み上げ棒の小さな多数。地図は「どこ」しか言えない #### 上限値 | fill | 種類（category）。宣言してから塗る（F-11） | classes | 4区分まで | hue | 区分ごとに別の色相。**同じ色相帯に2区分を置かない**（F-07 の例外規定） | value | 濃さに意味を持たせない。ただし刷るために明度は24以上ずつ離す（F-06） | projection | 正積（Equal Earth） | legend | 置かない。区分の名前を区画の上に直接置く #### 入力データの形 区画（ISO3）× 区分キー の1列。区分は順序の無い有限集合 #### 副カテゴリ・色の系統 割合／categorical #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（何の区分か／期間と「色は区分であって量ではない」） - 地図: 枠の上 60%、Equal Earth 正積図法。値の無い区画は #F2F2F2 のまま - 塗り: 4 区分・4 色相（#B39156 / #05396B / #1A7F6B / #D9B9BD）。境界は紙色 0.6px - 直接ラベル: 区分ごとに1つ、その区分でいちばん**太い**区画の上に地の重さで（面積÷周長） - 数字の格子: 枠の下、区分ごとの国数 2 列 × 2 行。焦点の区分（森林）だけ太字 #### 作画規定 - **塗る前に「種類」と宣言する（F-11）。** 同じ塗り分けが率にも回数にも見えるので、何を運ぶ色かをコードの側で決めておく - **区分ごとに色相を分ける。** 同じ色相の濃淡で区分を塗ると、色が量に見える ── 読者は濃いほうが多いと読む - 区分は4つまで。5つ目からは色相が隣り合い、区分が読み分けられなくなる - 濃さに意味を持たせない。ただし明度は24以上ずつ離す ── 刷ったときと、色が見えない読者のため - **凡例を置かず、区分の名前をその区分の区画の上に置く。** 離れた色見本は視線を往復させる（F-02）。置く先は面積の1位ではなく幅の1位 ── 細長い区画に名前を載せると、文字がはみ出して隣を指す - 同率のときの決め方（僅差をどう扱うか）を出典に書く。1年だけで決めると当たり年で区分が入れ替わる #### 動く版の現れ方 spatial — 地が先、量が後。区画の形が台紙として現れてから、区分が順に乗る。色に順序が無いので、置く順は区分の並び（出典の分類の順）で、濃い順ではない。地図を左から右へ拭くと、区分が地理の順に決まったように見えてしまう。 #### 参照例 - GWIS (Copernicus) / Our World in Data — [Area burned by wildfires by land cover type](https://ourworldindata.org/wildfires) 焼失面積を地被（低木・草地／サバンナ／森林／農地）に分けた原データ。区分は出典の分類をそのまま使う - Cynthia Brewer — [ColorBrewer — Qualitative schemes](https://colorbrewer2.org/) 順序の無い区分に使う配色の設計。色相で分け、明度は揃えるのが定石だが、SORAH は刷りと色覚のため明度も離す - Mark Monmonier — [How to Lie with Maps](https://press.uchicago.edu/ucp/books/book/chicago/H/bo25086979.html) 区分の切り方そのものが結論を作る。区分は出典の分類に従い、こちらで作らない #### 実装 forms.choropleth.draw(card, ax, {ISO3: 区分}, kind='category', classes=, colors=, notes=, grid=)　demo: {'countries': 159, 'counts': {'shrub_grass': 62, 'savanna': 52, 'forest': 17, 'cropland': 40}, 'years': [2021, 2025], 'forest': 17, 'total': 171} ### 点の集積 Dot map　ドットマップ／事象点図／1点1事象 地理 — Spatial 1点が1事象。位置だけを写し、大きさも色も持たせない。集まりが形を作る。 #### なぜこの数か 「どこで起きているか」を、区画に集計せずに答えるため。国や州で塗ると、境界線が形を決めてしまう。点なら、形はデータが決める。 #### 素材の言葉 点は事象そのもの。地図は台紙で、線は1本も引かれていない ── それでも板の縁が現れる。現れた形は描かれたものではなく、集まった結果である。 ![Do — English edition](/sorah-pjt/dataviz/img/dot_map_en.jpg) EN 正積図法に 1 点 1 事象、完全性のある部分集合だけ色を持たせ、検出能の境目を図の中に書く ![Do — 日本語版](/sorah-pjt/dataviz/img/dot_map_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 全事象を同じ色で置き、濃い所を「地震が多い場所」と読ませる [動画](/sorah-pjt/dataviz/motion/dot_map_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/dot_map_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 事象の位置そのものが発見のとき（地震・落雷・観測地点・出火点） - 区画（国・州）に集計すると形が消えるとき - 「集まりの濃さ」に観測の偏りが混じっていて、それ自体を書きたいとき #### 使わない・代替 - 事象が多すぎて紙が黒くなる → 格子（六角ビン・ヒートマップ） - 区画ごとの率が発見 → コロプレス - 1点あたりの量が違う → 比例シンボル地図 #### 上限値 | dot | 1点 = 1事象。大きさで量を運ばない | dot_size | 1.6〜5pt。重なりが濃さになる大きさ | projection | 正積（Equal Earth）。点の密度を図法で歪めない | series | 2つまで（全体と、完全性のある部分集合） | legend | 置かない。地図の上に直接書く #### 入力データの形 事象ごとの経緯度の列（＋完全性の判定に使う量。地震ならマグニチュード） #### 副カテゴリ・色の系統 散らばり、不確かさ／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（何の点か／1点の意味と色の境目） - 地図: 枠の上 80%、Equal Earth 正積図法。陸は #F2F2F2、境界は紙色 0.6px - 点（全体）: #B5B5B5 1.6pt、輪郭なし。重なりが濃さになる - 点（完全性のある部分集合）: ACCENT 5pt。1枚に1色 - 直接ラベル: 濃い塊の上に太字で1つ、観測網の薄い側に地の重さで1つ - 凡例: 置かない。色の意味は図題の2行目が持つ #### 作画規定 - 1点は1事象。大きさを量に使わない（それは比例シンボル地図の仕事） - 正積図法を使う。メルカトルは高緯度の点をばらけさせる - **検出能の境目を図の中に書く。** カタログの点の濃さは、事象の濃さと観測網の濃さの積である。どこから先が世界共通の記録かを `basis()` で宣言し、図題か注記に書く（X-09） - 点を間引くなら間引き方を出典に書く。ここでは間引いていない - 境界線・板の縁・海岸線を上書きしない。点が形を作るのに、線を足すと点が要らなくなる - 「地震が多い場所」と読ませない。図が答えるのは「記録された地震がどこにあるか」 #### 動く版の現れ方 spatial — 地が先、量が後。地図は作画ではなく台紙。陸が現れてから点が着地する。左から右へ拭くと、地震が西から東へ起きたように見えてしまう。 #### 参照例 - USGS Earthquake Hazards Program — [Latest Earthquakes](https://earthquake.usgs.gov/earthquakes/map/) 全事象を点で置き、大きさをマグニチュードに割り当てる公式実装。完全性の注意書きを別ページに置く作法 - Charles Joseph Minard / John Snow — [Broad Street cholera map (1854)](https://en.wikipedia.org/wiki/1854_Broad_Street_cholera_outbreak) 点の集積の原型。区画に集計せず1件1点で置いたから、井戸が中心に見えた - SORAH inc. — [AQUA FLUXUS — River World Map](https://shop.sorah.io/ja) 河川だけで世界地図を成立させる。境界線を引かずに地理が現れる構造は同じ #### 実装 forms.dot_map.draw(card, ax, lon, lat, complete=, title=, notes=)　demo: {'points': 10861, 'complete': 627, 'us_small': 0.998, 'us_big': 0.008, 'month': '2026-08'} ### 地域の点図 Regional dot map　広域図の逆／範囲を切った点図 地理 — Spatial 範囲を狭めた地図に事象を点で置き、1 点に量をひとつだけ持たせる（色の階級で）。 #### なぜこの数か 世界の縮尺では点が重なって量を読み分けられないが、範囲を狭めれば点が分離する。「どこで」と「どれくらいか」を同時に読ませられるのは、この縮尺だけ。 #### 素材の言葉 点は事象そのもの、濃さはその深さ。地図は台紙で、線は引かれていない ── 濃い点が集まる側と、集まらない側の境目が、そのまま地下の形になる。 ![Do — English edition](/sorah-pjt/dataviz/img/region_dots_en.jpg) EN 範囲を切って緯度補正した地図に、深さ 4 階級の点。縮尺と、階級ごとの回数の格子 ![Do — 日本語版](/sorah-pjt/dataviz/img/region_dots_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 世界地図のまま日本を拡大し、点の大きさをマグニチュード、色を深さに割り当てる [動画](/sorah-pjt/dataviz/motion/region_dots_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/region_dots_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 範囲の中で量が場所によって変わり、その変わり方が発見のとき（震源の深さ・観測地点の値） - 「この線から向こうには無い」という境目が発見のとき - 世界地図では点が潰れるが、狭めれば読めるとき #### 使わない・代替 - 範囲が世界大 → 点の集積（1点1事象、量を持たせない） - 量が場所ではなく区画に属する → コロプレス - 断面（深さ×距離）が発見 → 断面。地図は「どこ」、断面は「どれだけ」 #### 上限値 | classes | 4階級まで。連続グラデーションにしない | dot | 1点 = 1事象。大きさは使わない | extent | 経度・緯度で切り、切った範囲を図題と出典に書く | aspect | 緯度で横を補正する（正距円筒のまま描かない） | scalebar | 狭い範囲の地図には縮尺を置く | legend | 置かない。数字の格子が代わり #### 入力データの形 事象ごとの経緯度と、1 点が持つ量（深さ・値）の列 #### 副カテゴリ・色の系統 散らばり、関係／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（何の点か／範囲・期間・下限） - 地図: 枠の上 66%、緯度で横を補正した正距円筒。陸は #F2F2F2、海は紙 - 点: 14pt、4 階級（#CDD8E1 → #05396B）。輪郭なし - 直接ラベル: 境目の内側に太字で 1 つ、外側に地の重さで 1 つ - 縮尺: 左下に 100km の線と数字 - 数字の格子: 枠の下、階級ごとの回数 4 行 #### 作画規定 - **範囲を切った条件を図題と出典に書く。** 狭めたことが結論を作る - 緯度で横を補正する。日本の緯度で補正しないと、東西が 1.2 倍伸びる - 縮尺を置く。世界地図には要らないが、狭い範囲では読者が距離の見当を持たない - 階級は 4 つまで。点の色から値を逆算させない（それは凡例が要る図＝ F-02 違反） - 点の大きさを別の量に使わない。1 点が持つ量は 1 つだけ - カタログの下限（ここでは M4.0）を書く。小さい地震が無いのは、起きていないからではない #### 動く版の現れ方 spatial — 地が先、量が後。陸が台紙として現れてから、深い階級の点が先に、浅い階級が後に着地する。地図を左から右へ拭くと、地震が西から東へ起きたように見えてしまう。 #### 参照例 - USGS Earthquake Hazards Program — [FDSN Event Web Service](https://earthquake.usgs.gov/fdsnws/event/1/) 範囲と期間と下限を指定して取る。狭い範囲の図は、範囲を絞ったぶん期間を伸ばす - 防災科学技術研究所 (NIED) — [Hi-net 自動処理震源マップ](https://www.hinet.bosai.go.jp/) 同じ領域を深さで色分けする日本の標準的な表現。深さの階級と色の順序を踏襲した - USGS — [Slab2 — A Comprehensive Subduction Zone Geometry Model](https://www.sciencebase.gov/catalog/item/5aa1b00ee4b0b1c392e86467) 沈み込む板の形。点の集まりが面として何を写しているかの裏づけ #### 実装 forms.region_dots.draw(card, ax, lon, lat, values, bins=, labels=, extent=, title=, notes=, grid=)　demo: {'points': 2947, 'deep': 246, 'east': 1796, 'deepest_east': 130.5, 'years': [2016, 2026]} ### 格子（回数） Grid of counts　頻度マップ／重ね合わせの回数／occurrence grid 地理 — Spatial 同じ格子の地図を何枚も重ね、マスごとに条件を満たした回数を数えて塗る。 #### なぜこの数か 「いつ動いたか」ではなく「どのくらいの頻度でそうだったか」を答えるため。2枚の比較は変化の向きしか出せないが、回数は毎回・ときどき・一度も、の3つの面に分けてくれる。 #### 素材の言葉 1枚の地図が1回の観測。重ねた束の厚みがそのままマスの濃さになる。写真を12枚重ね焼きしたとき、いつも写っていたものだけが濃く残るのと同じ。 ![Do — English edition](/sorah-pjt/dataviz/img/grid_count_en.jpg) EN 同じ暦日の n 枚を重ねて回数を 4 階級で塗り、毎回とときどきの面積を両方書く ![Do — 日本語版](/sorah-pjt/dataviz/img/grid_count_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 日付の違う地図を重ねて連続色で塗り、右下に 0〜12 のカラーバーを置く [動画](/sorah-pjt/dataviz/motion/grid_count_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/grid_count_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 同じ格子・同じ暦日の観測が何枚もあるとき（海氷・積雪・氾濫・雲） - 「毎回」と「一度も」の間の面積が発見のとき - 2枚の比較（縁の重ね）では、たまたまの年に引きずられるとき #### 使わない・代替 - 枚数が3枚以下 → 縁の重ね（compare） - 回数ではなく量の平均が発見 → 格子アノマリー - 格子が揃っていない（投影・解像度が違う） → 先に揃える。揃わないなら重ねない #### 上限値 | fill | 回数（count）。**マスの大きさが揃っているから回数で塗れる**。大きさの違う区画（国・県）では回数を率に直す（F-11） | classes | 4階級まで（0 を含めない）。回数をそのまま連続色にしない | hue | 1色相の順序スケール | maps | 4枚以上。枚数を図題に書く | date | 同じ暦日で揃える（季節を混ぜない） | legend | 置かない。数字の格子が代わり #### 入力データの形 同じ格子・同じ暦日の 2 値ラスタを n 枚（と陸のマスク） #### 副カテゴリ・色の系統 散らばり、不確かさ／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（何を数えたか／枚数・期間・マスの大きさ） - 地図: 枠いっぱい、極ステレオ（70°N 正角）。海は紙、陸は #ECECEC - 階級: 4 段（#CDD8E1 → #05396B）。回数の多い面ほど濃い - 直接ラベル: 芯（毎回）に太字で 1 つ、その外側（ときどき）に地の重さで 1 つ - 数字の格子: 左下、階級ごとの面積 4 行 #### 作画規定 - **同じ暦日で揃える。** 日付の違う地図を重ねると、季節が回数に化ける - 0 回のマスは塗らない。一度も無かった海と、地図の外を同じ色にしない - 階級は 4 つまで。回数は整数なので連続色にする理由がない - 枚数と期間を図題に書く。12 枚の 5 年おきと 12 枚の連年では、同じ「12回」の意味が違う - 「毎回」の面積と「ときどき」の面積を両方書く。芯だけ見せると、退いた分が消える - 格子の投影を変えない。面積を数える図で再投影すると、マスの大きさが場所で変わる #### 動く版の現れ方 spatial — 地が先、量が後。海と陸が先に台紙として現れ、そのあと回数の多い面から順に着地する。回数は場所の性質であって時間の順ではないので、左から右へ拭かない。 #### 参照例 - NSIDC — [Sea Ice Index (G02135)](https://nsidc.org/data/g02135) 同じ 25km 格子・同じ暦日の extent を年ごとに配る。重ねて数えられるのは格子が固定されているから - NASA Earth Observatory — [Arctic sea ice minimum, year by year](https://earthobservatory.nasa.gov/world-of-change/sea-ice-arctic) 同じ日の氷を年ごとに並べる作法。並べるのと重ねて数えるのは別の問いに答える - SORAH inc. — [GLACIES LIQUOR #1 — Arctic Ice Transition](https://shop.sorah.io/ja) 年と面積の格子を版面に敷く。数字の格子が凡例を兼ねる構造をこの型でも使う #### 実装 forms.grid_count.draw(card, ax, counts, land_mask, n=, bins=, labels=, title=, notes=, grid=)　demo: {'n': 12, 'years': [1980, 2025], 'always_km2': 2721875, 'some_km2': 5649375, 'maps': 12} ### 海氷の縁の重ね Sea-ice edge overlay　氷縁図／Extent map with median edge 地理 — Spatial 極ステレオ図法の上に今日の氷を面で置き、基準（中央値や過去の同日）の縁を一本の線で重ねる。 #### なぜこの数か 「どこの海が開いたか」。面積の数字は線グラフに任せ、地図は場所だけを答える。海ごとに数えてから見出しを書く。 #### 素材の言葉 白い面は今日の氷。オレンジの線は16年前の岸。線と面の隙間が、開いた海。 ![Do — English edition](/sorah-pjt/dataviz/img/ice_edge_en.jpg) EN 今日の氷を白面で、基準の縁を一本のオレンジ線で、海ごとに数えて開いた海と戻った海に面積を添える ![Do — 日本語版](/sorah-pjt/dataviz/img/ice_edge_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 複数年の縁を色分けして重ね、凡例で読ませ、面積の差を地図で言う [動画](/sorah-pjt/dataviz/motion/ice_edge_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 compare（参照が先、今が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/ice_edge_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 compare（参照が先、今が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 今日の氷が、平年や過去と比べてどこで退いたか（場所が発見） - 面積の数字ではなく「どの海が開いたか」を見せたいとき - 日次の海氷報告の地図版（量は線グラフに譲る） #### 使わない・代替 - 失われた量そのものが発見 → 折れ線（ゼロ起点）。地図は面積を読ませない - 複数の年を重ねたい → 縁線は2本まで。それ以上は小さな多数 - 全球を見せたい → 極ステレオは極域専用。全球は Robinson #### 上限値 | edge_lines | 2 | projection | 極ステレオ（70°N 正角、EPSG:3411/3413） | threshold | 密接度15% #### 入力データの形 極ステレオ格子（0=海 1=氷 253=海岸 254=陸）× 2枚（今日・基準） #### 副カテゴリ・色の系統 偏差、推移／sequential #### 解剖図（G1 form 枠 936×764px） - 地: 海 #DCE6EE、陸 #F0F0F0、氷 白。データは3値だけ - 今日の縁: INK 1.0px（LW past） - 基準の縁: オレンジ #E8721C 2.4px（LW main。NSIDC・極地研の慣例色） - 図題: 枠の左上、太字2行（「北極の海氷／今日の氷と、16年前の同じ季節の縁」）。「今日の氷」「基準の縁」の名前は左下（大西洋側の空き）に直接、凡例は置かない - 海の名前: 地図の上に薄く。開いた海だけ太字で面積（「東シベリア海 −16万km²」＝焦点）。戻った海はオレンジの地の重さで面積を添える - 右下に投影の注記（「北極を上から見た図」） #### 作画規定 - 基準期間と閾値（15%）を出典に必ず書く。機関で基準が違う（NSIDC 1981–2010／JAXA 2010–2019／C3S 1991–2020） - 縁線のオレンジは慣例。SORAH の VI 色ではないが、科学側の読者が知っている色を優先する - 極ステレオの歪みを注記する。面積の比較には使わない - 海岸線は描かない（データの 253/254 で陸が見える）。ベースマップは無彩色 - 見出しは「どこが開いたか」を言う。「内側に縮んだ」は海ごとに数えてから書く（戻った海があるのが普通） - 面積の合計は線グラフの側で言う。地図では海ごとの差だけ #### 動く版の現れ方 compare — 参照が先、今が後。16 年前の縁が先に置かれ、そのうえに今日の氷が重なる。読者が引き算をする順番と同じ。 #### 参照例 - NSIDC — [Sea Ice Today — daily image with median extent line](https://nsidc.org/sea-ice-today) 中央値の縁線（1981–2010）をオレンジで重ねる原型 - JAXA / 国立極地研究所 — [VISHOP — 北極海氷モニター](https://ads.nipr.ac.jp/vishop/) 日本の運用例。基準期間 2010–2019 の縁をオレンジで - Copernicus C3S — [Sea ice monthly bulletin](https://climate.copernicus.eu/sea-ice) 1991–2020 の中央値縁。密接度 15% の閾値を明記 #### 実装 forms.ice_edge.draw(card, ax, grid_today, grid_ref, label_today=, label_ref=, crop=, title=, labels=)　demo: {'today_cells': 7464, 'ref_cells': 7841, 'net': {'ボーフォート海': 6.2, 'チュクチ海': 7.6, '東シベリア海': -15.9, 'ラプテフ海': 5.0, 'カラ海': -9.9, 'バレンツ海': -11.8, 'グリーンランド海': -4.0, 'カナダ多島海': 2.8}} ### 海峡 Chokepoint　要衝／隘路／チョークポイント 地理 — Spatial 地理を数十kmの縮尺まで狭め、その一点を通る量と、通るものの偏りを数える。 #### なぜこの数か 「どこか」はもう決まっている。答えるのは、その一点をどれだけの量が通り、それが何に偏っているか。世界地図では点にしかならない場所が、この縮尺で初めて幅のある水路になる。 #### 素材の言葉 海のほうに地を置き、陸を白く抜くと、図が「通り道」の形になる。数えているのは水路の断面を横切った船で、円はその断面そのもの。 ![Do — English edition](/sorah-pjt/dataviz/img/chokepoint_en.jpg) EN 海に地を置いた数十km の地図に断面を1つ、縮尺と、割合の上位6水路の数字の格子 ![Do — 日本語版](/sorah-pjt/dataviz/img/chokepoint_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 世界地図に海峡を矢印で示し、通過量を矢印の太さにする（縮尺も断面の定義も無い） [動画](/sorah-pjt/dataviz/motion/chokepoint_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/chokepoint_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 spatial（地が先、量が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 通過量そのものが発見のとき（海峡・運河・峠・関所・橋） - 通るものの構成が他と違うことが発見のとき - 地理の狭さと量の大きさの落差を見せたいとき #### 使わない・代替 - どこを通ったかの経路が発見 → フローマップ・サンキー - 複数地点の量を比べたい → 比例シンボル地図 - 通過量の推移が発見 → 折れ線。地図は場所を1回言えば足りる #### 上限値 | extent | 数十〜数百km。縮尺を必ず置く | series | 1つの断面。複数の断面を1枚に置かない | count | 断面を横切った数。滞留や寄港を混ぜない | period | 期間を宣言する。受信の落ちた期間は入れず、入れなかったことを書く | legend | 置かない。数字の格子が代わり #### 入力データの形 断面の位置（経緯度）と、期間ごとの通過数（種別つき） #### 副カテゴリ・色の系統 割合、流れ／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上 2 行（どこの何を数えたか／期間と右列の意味） - 地図: 枠の上 60%、緯度で横を補正した経緯度。**海に地（#F7FAFC）、陸は #EDEDED** - 断面: ACCENT の円 2.0px。数えている場所そのもの - 航路: GRAY_MID の点線（4,3）。データではなく参照なので細く - 直接ラベル: 断面の脇に太字で 1 つ（1日の隻数）、両岸の国名を地の重さで - 縮尺: 左下に 50km - 数字の格子: 枠の下、割合の上位 6 水路。1 行目がこの海峡 #### 作画規定 - **縮尺を必ず置く。** 狭い範囲の地図で、読者は幅の見当を持たない - 海のほうに地を置く。陸を主役にすると、水路が「陸の隙間」に見えて量の通り道に見えない - 断面は 1 つ。同じ図に 2 つ置くと、どちらの数字か分からなくなる - **受信の落ちた期間を入れない。入れなかったことを図題か出典に書く。** AIS は受信状況で数が変わる。落ちた期間を平均に混ぜると、量が減ったように見える - 航路は参照であってデータではない。点線・細線で、量と同じ濃さにしない - 他の水路と比べるなら数字の格子で。地図を 2 枚並べると、縮尺が違うのに同じに見える #### 動く版の現れ方 spatial — 地が先、量が後。陸と海が台紙として現れてから、数えている断面が置かれる。水路を左から右へ拭くと、船が一方向にだけ通るように見えてしまう（実際は双方向）。 #### 参照例 - IMF PortWatch — [Daily Chokepoints Data](https://portwatch.imf.org/) AIS から 28 の海峡・運河の日別通航隻数を船種別に出す。断面を横切った数という定義が明快 - The New York Times — [The Choking of the Strait of Hormuz](https://www.nytimes.com/) 海峡の狭さと通過量の落差を 1 枚で見せる構成。地理を寄せて量を数字で置く型の原型 - U.S. Energy Information Administration — [World Oil Transit Chokepoints](https://www.eia.gov/international/analysis/special-topics/World_Oil_Transit_Chokepoints) 海峡ごとの石油通過量。船の数ではなく積載量で数えるときの定義の置き方 #### 実装 forms.chokepoint.draw(card, ax, extent, mark=(lon, lat, km), lane=, title=, notes=, grid=)　demo: {'extent': [54.2, 59.6, 25.3, 27.9], 'share': 0.6, 'per_day': 83.7, 'tankers': 50.2, 'second': 'Yucatan Channel', 'second_share': 0.511} ドット密度格子アノマリー等面積カートグラム六角ビンフローマップ ### 流れ Flow — 何から何へ、どれだけ移ったか サンキー（素材化・Hormuz 型）ウォーターフォールフローマップ ### 不確かさ Uncertainty — どこまで確かか ### 不確かさの帯 Uncertainty band　Confidence band／Ribbon／分位帯 不確かさ — Uncertainty 推定や散らばりの幅を面で塗り、中央（中央値・平均）を線で通す。点ではなく幅で値を見せる。 #### なぜこの数か 「どこまで確かか」。点ではなく幅で値を見せると、観測網の薄い時代と厚い時代の差、戦争や衛星の登場が図に残る。幅の変化そのものが発見になる。 #### 素材の言葉 帯は霧の濃さ。線は霧の中の道。霧が晴れた時代ほど道がはっきり見える。 ![Do — English edition](/sorah-pjt/dataviz/img/band_en.jpg) EN 帯の定義を図題に書き、代表値を線で通して末端に値、幅が発見なら寸法線で測る ![Do — 日本語版](/sorah-pjt/dataviz/img/band_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 複数の帯を色分けして重ね、「誤差範囲」とだけ書く [動画](/sorah-pjt/dataviz/motion/band_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 uncertainty（推定が先、幅が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/band_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 uncertainty（推定が先、幅が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 推定値に幅があるとき（測定誤差・モデル間の差・分位） - 「上がっている」と「ばらついている」を分けて見せたいとき - 帯の幅の変化そのものが発見のとき #### 使わない・代替 - 幅の定義が言えない → 描かない。帯は定義があって初めて意味を持つ - 複数系列の帯を重ねたくなる → 小さな多数（帯の重なりは読めない） - 将来予測の広がり → ファン（先ほど広がる帯・別型） #### 上限値 | bands | 1 | quantiles | 四分位／十分位／±2σ／5–95%／very likely のいずれかを明記 | series | 1 #### 入力データの形 順序付き期間 × 中央値 × 下限 × 上限 #### 副カテゴリ・色の系統 推移／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行（量／基準期間と帯の定義） - 帯: #CFE0FA（ACCENT の薄色）、輪郭なし - 中央: INK 2.4px、末端に ● と値 - 寸法線: 帯の幅を名指す位置に ACCENT の縦線と「1942年 幅0.42°C」 - 直接ラベル: 帯の名前は帯がいちばん太いところ、線の名前は線の中ほど（紙色の縁取り） - ゼロ線: GRAY_LIGHT 1.4px（偏差のとき） #### 作画規定 - 帯の定義（何%か・何σか）を図の中に書く。「幅」「誤差」とだけ書かない（IPCC・気象庁） - 帯と線の役割を分ける。線は代表値、帯は不確かさ。帯の縁を線にしない - 帯が細くて見えないときも消さない。細いことが情報。本文の幅の数字は帯の色（ACCENT）で組む - 数値を本文で言うときは角括弧か ± で幅を併記する（「+1.2°C [1.1–1.3]」） - 低確率・高影響の経路は帯に混ぜず、破線で別に描く（IPCC SPM） - 帯の幅そのものが発見なら、寸法線で幅を測って見せる（観測網の変化・戦争・衛星以前） #### 動く版の現れ方 uncertainty — 推定が先、幅が後。答えているのは「どこまで確かか」。推定が引かれてから幅が開くので、幅が推定に付随するものだと分かる。 #### 参照例 - NYT Climate (Mira Rojanasakul) — [The World's Troubling New Tempo of Temperature Records](https://www.nytimes.com/interactive/2024/climate/temperature-records.html) 暫定データの期間を注記で切る（「Data from the past six months is preliminary」）。帯の意味を統計語で言う - Berkeley Earth — [Global Temperature Report — annual with 95% uncertainty](https://berkeleyearth.org/global-temperature-report-for-2024/) 95%の帯と本文の角括弧併記 - IPCC AR6 WGI — [Summary for Policymakers — Figure SPM.8](https://www.ipcc.ch/report/ar6/wg1/figures/summary-for-policymakers/) very likely 帯と低確率・高影響の破線を混ぜない作法 - Claus O. Wilke — [Fundamentals — Visualizing uncertainty](https://clauswilke.com/dataviz/visualizing-uncertainty.html) 帯・段階帯・分位ドットの使い分け #### 実装 forms.band.draw(card, ax, x, mid, lo, hi, ylim=, ticks=, band_label=, mid_label=, title=, width_marks=, end_label=)　demo: {'n': 176, 'band_width_last': 0.07879009999999997, 'band_width_max_at': 1942} ファン破線（低確率高影響）ハッチング分位ドット ### 翻訳 Analog — その量は、人の尺度（暦・場所・身体）で何にあたるか ### 暦の翻訳 Calendar analog　翻訳比較／Same-warmth day／Hometown 型 翻訳 — Analog 抽象量（°C）を、同じ観測列の中の人の尺度（暦の日付）に置き換える。量を先に置き、翻訳を後に添える。 #### なぜこの数か 「+2.5°C」は体で分からない。「いまの3月は百年前の4月はじめ」は分かる。翻訳は量の説明であって、量の代わりではない。だから量（°C）を必ず併記する。 #### 素材の言葉 二つの年周期は、同じ場所の百年前といまの暦。翻訳の寸法線は、暦の上を先へ進んだ距離。 ![Do — English edition](/sorah-pjt/dataviz/img/analog_en.jpg) EN 量（°C）を二つの年周期で先に置き、焦点の月だけ暦の日付へ翻訳し、何年の暦かを図題に書く ![Do — 日本語版](/sorah-pjt/dataviz/img/analog_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 「東京ドーム何個分」のような別の物へ翻訳し、量を消して翻訳だけを残す [動画](/sorah-pjt/dataviz/motion/analog_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 analog（量が先、翻訳が後）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/analog_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 analog（量が先、翻訳が後）。最後のコマが左上の静止版（M-07） #### 使う発見 - 基準からの差（°C・ppm・km²）が、読者の身体や生活の尺度に置き直せるとき - 同じ観測列の中に翻訳先があるとき（百年前の暦・別の月・別の年） - 気候番組の基準線偏差に「自分ごと化」を足したいとき（週 1 まで） #### 使わない・代替 - 翻訳先を別の物から持ち込む（「日本7個分」「東京ドーム何個」）→ 量の型で量を言う - 翻訳が主張になる（比較対象の選び方で結論が変わる）→ 選び方を図題に書けないなら翻訳しない - 盛夏・厳冬など、同じ暖かさが暦に無い月 → 翻訳できない。別の月か別の尺度へ #### 上限値 | analogs | 焦点は1つ。他の月は地の重さの注記 | scales | 暦・場所・身体の三つだけ | source_of_analog | 同じ観測列（別の場所・別の物を持ち込まない） | quantity | 翻訳元の量（°C）を必ず併記 #### 入力データの形 基準期間の 12 か月平均 × いまの 12 か月平均（同じ地点・同じ量） #### 副カテゴリ・色の系統 推移、偏差／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、2行（量の名前 ── 二つの暦／基準期間といま） - 基準期間の年周期: AVG 1.6px 点線（平均の作法）。いまの年周期: INK 2.4px 実線＋月中日の ● - 翻訳（焦点）: いまの月の点から、基準の暦で同じ暖かさの日へ ACCENT 1.6px の横の寸法線＋●。札は太字 ACCENT（「いまの3月 10.8°C ＝ 百年前の4月5日ごろ」） - 他の月の翻訳: GRAY_MID 1px の寸法線と地の重さの札（「11月 ＝ 10月30日ごろ」） - 目盛: 10 / 20 / 30°C、単位は最上段だけ。月は 1・4・7・10・12 月 #### 作画規定 - 翻訳先は同じ観測列の中から取る。別の場所・別の物を持ち込まない - 量 → 翻訳の順。翻訳元の量（°C）を札に併記する。翻訳だけの札は作らない - 焦点の翻訳は1枚に1つ。他の月は注記の重さ。翻訳できない月（同じ暖かさが暦に無い）は黙る - 何年の暦かを図題に書く（基準期間＝翻訳の物差し。X-09）。都市化など含めたものは landing に書く - 見出しは翻訳の観察（「いまの3月は百年前の4月」）。「春が来なくなる」のような結論にしない #### 動く版の現れ方 analog — 量が先、翻訳が後。量が先、翻訳が後。二つの年周期が置かれてから寸法線が現れる。翻訳先が先に見えると、量が翻訳に従属してしまう。 #### 参照例 - The New York Times (Nadja Popovich, Blacki Migliozzi et al.) — [How Much Hotter Is Your Hometown Than When You Were Born?](https://www.nytimes.com/interactive/2018/08/30/climate/how-much-hotter-is-your-hometown.html) 入力は生年と街の二つ。抽象量（°C）を「暑い日の数」という身体の尺度に翻訳した原型 - The Pudding (Matt Daniels et al.) — [What will the climate feel like in 60 years?](https://pudding.cool/2023/12/climate-zones/) 「+2°C」を「LA はニューデリーの気候になる」に翻訳。場所の尺度。比較対象の選び方が主張になることも教える - 気象庁 — [さくらの開花日・かえでの紅葉日（生物季節観測）](https://www.data.jma.go.jp/sakura/data/index.html) 暦の尺度は気象庁も使っている。生物季節は「暖かさの翻訳」そのもの #### 実装 forms.analog.draw(card, ax, ref, now, focus_month=, focus_label=, ref_label=, now_label=, notes=, title=)　demo: {'focus_month': 3, 'now': 10.83, 'ref_same_day': '04-05', 'shift_days': 21.1, 'shift_days_by_month': {1: -34.4, 2: 30.1, 3: 21.1, 4: 20.1, 5: 24.8, 6: 19.3, 9: -23.8, 10: -12.3, 11: -15.6, 12: -16.1}} 場所の翻訳（気候帯・Pudding 型）身体の翻訳（暑い日数・Hometown 型）自分ごと化（入力は二つまで） ### 横断 Cross-cutting — 他の型と組み合わせて使う ### 数字の札 Big number with context　Data Dash／Scoreboard／KPI カード 横断 — Cross-cutting 1面に1つの数字を大きく置き、その由来（量の名前・観測日・基準）と、小さな文脈図だけを添える。 #### なぜこの数か 読者が最初に知りたいのは「今いくつか」。数字を先頭に置くと、図は「それが多いのか少ないのか」を答える役に回れる。日次で更新できる骨格の表紙。 #### 素材の言葉 数字は計器の針。桁は測定精度そのもので、回る桁（Bloomberg の小数6桁）は「いま測っている」の合図。旅行ポスターでは太陽の円がこの数字の席になる。 ![Do — English edition](/sorah-pjt/dataviz/img/big_number_en.jpg) EN 数字を1つ、桁は精度どおり、由来と始点の値を添え、文脈図は従属に ![Do — 日本語版](/sorah-pjt/dataviz/img/big_number_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't 数字を4つ並べて色分けし、桁を誇張し、文脈図に凡例を付ける [動画](/sorah-pjt/dataviz/motion/big_number_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 count（数字が測定精度で止まる）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/big_number_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 count（数字が測定精度で止まる）。最後のコマが左上の静止版（M-07） #### 使う発見 - 日次・月次の報告の表紙（Earth の3プログラムの1枚目） - 1つの量が世界を要約できるとき（CO₂ ppm・気温偏差・海氷面積） - 読者が「今いくつか」を覚えて帰ればよいとき #### 使わない・代替 - 数字が1つに絞れない → 小さな多数か、型の本体へ - 数字の意味が基準なしに読めない（偏差でも絶対値でもない指数）→ 基準線つきの折れ線 - 精度が桁に見合わない（誤差 ±5 の量を小数2桁で書く）→ 桁を落とすか、帯 #### 上限値 | numbers | 1 | digits | 測定精度に合わせる（CO₂ 0.1ppm・気温 0.01°C・面積 万km²） | context_figure | 1つ。目盛は3〜4本 | colors | 2 #### 入力データの形 最新値（数値・単位・観測日・場所）と、任意の文脈系列（順序付き期間 × 値） #### 副カテゴリ・色の系統 推移、大小／sequential #### 解剖図（G1 form 枠 936×764px） - 数字: 枠の左上、Poppins Bold 132pt。単位は数字の右に小さく密着（34pt）。これが1枚の焦点で、他に太字は無い - 由来: 数字の下に「量の名前 — 観測日、場所」を GRAY_MID 22pt - 文脈図: 枠の下 50%。年々の値 PAST 1px、平滑 INK 2.4px、最新点 ACCENT ●＋線末の値（地の重さ。数字の札と競わせない） - 始点の値: 系列の左端に「1958年 316ppm」— 数字の相手（何から増えたか） - 目盛: 3〜4本、単位は最上段だけ。年は下端に4つまで #### 作画規定 - 数字は1つ。2つ目を置くなら、それは基準（去年の同じ月・平年）で、本文に潜ませる - 桁は測定精度に合わせ、誇張しない。暫定値は出典に「暫定」と書く - 文脈図は数字の従属。図題を持たず、数字の下の由来がその役を兼ねる - 見出しは数字を繰り返さない。数字の「向き」か「例外のなさ」を言う - 旅行ポスター（P）では数字を太陽の円に置き換えてよい。G1 では置き換えない #### 動く版の現れ方 count — 数字が測定精度で止まる。答えているのは「今いくつか」。桁が回って測定精度で止まるのが、その問いの形そのもの。 #### 参照例 - Bloomberg Green (Eric Roston, Mira Rojanasakul et al.) — [Data Dash: A Live Climate Scoreboard for the World](https://www.bloomberg.com/graphics/climate-change-data-green/) 4つの数字で世界を要約し、各数字に1ページ。「Why this number」で由来を散文に。CO₂ は小数6桁が回る - NOAA Global Monitoring Laboratory — [Trends in Atmospheric CO₂ — Mauna Loa](https://gml.noaa.gov/ccgg/trends/) 月平均と季節調整値。直近1年は暫定と明記する作法 - Tableau — [Visual Analysis Best Practices — Start with questions / Labels on min-max](https://www.tableau.com/) 最重要の数字を左上に、最新点にラベルを、の根拠 #### 実装 forms.big_number.draw(card, ax, value, unit=, label=, x=, y=, trend=, ylim=, ticks=, yunit=, end_label=, start_label=)　demo: {'value': '429.1', 'n': 821, 'same_month_last_year': 427.87, 'annual_years': 68} ### 小さな多数 Small multiples　トレリス／パネル図／Facets 横断 — Cross-cutting 同じ型・同じ軸・同じ大きさの小図を格子に並べ、目の移動だけで比較させる。 #### なぜこの数か 「全部同じか、順に変わるか、1つだけ違うか」。12枚を見比べる代わりに、各パネルの右上の数字12個を読ませる。 #### 素材の言葉 12枚の窓。同じ大きさの窓から同じ景色を見て、窓ごとの数字で違いを言う。 ![Do — English edition](/sorah-pjt/dataviz/img/small_multiples_en.jpg) EN 同じ軸・同じ大きさ・意味のある順で並べ、軸の値は1か所だけ、各パネルの右上に結論の数字 ![Do — 日本語版](/sorah-pjt/dataviz/img/small_multiples_ja.jpg) JA 同じデータ・同じ作画・同じ寸法。変わるのは書体と、見出し・landing・出典の級数だけ Don't パネルごとに軸を変え、目盛りを12回書き、目立つパネルだけ大きくする [動画](/sorah-pjt/dataviz/motion/small_multiples_en.mp4) EN 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） [動画](/sorah-pjt/dataviz/motion/small_multiples_ja.mp4) JA 動く版 12 秒・作画 5.4 秒。現れ方 sweep（データの時間で刷る）。最後のコマが左上の静止版（M-07） #### 使う発見 - 4本を超える折れ線を重ねたくなったとき（スパゲッティの解消） - 地域・月・カテゴリごとの「同じか、違うか」 - 1図1メッセージを守りながら、多数を見せたいとき #### 使わない・代替 - 2〜3系列 → 1図に重ねる（三本規則） - パネルごとに軸が違う → 原則不可。どうしても要るなら本文に「軸は独立」と明記 - パネルが 16 を超える → 見出しで束ねて2図に分ける #### 上限値 | panels | 4〜16 | axes | 共有（独立は明記） | cols | 3〜4 | per_panel_series | 1 #### 入力データの形 パネル名 × 系列（同じ x 軸・同じ単位） #### 副カテゴリ・色の系統 推移、散らばり／sequential #### 解剖図（G1 form 枠 936×764px） - 図題: 枠の左上、太字2行。格子はその下 - 格子: 4列。横の隙間 6%、各セルの上にパネル名の帯 - パネル名: 左上 INK 19px。右上にそのパネルの数字（地の重さ。最も大きい1枚だけ太字＋ACCENT＝焦点） - 系列: 年々の値 PAST 1px、11年移動平均 2px（数字と同じ色） - 軸の値: 左上パネルにだけ目盛、左下パネルの下にだけ端の年。他のパネルは無印（同じ軸だから） - ゼロ線: 各パネルに GRAY_LIGHT 1px #### 作画規定 - 軸を共有する。共有できないなら、その比較は小さな多数に向いていない - 並び順に意味を持たせる（月順・北から南・値の順）。アルファベット順にしない - パネルの大きさを揃える。強調したいパネルを大きくしない（Tufte） - 軸の目盛りは1か所だけ。12回書かない - 見出しは「全部が同じ」か「1つだけ違う」か「順に変わる」を言う。パネルごとの説明を見出しにしない - パネルの結論を1つの数字にして右上に置く。12枚を見比べる代わりに、12個の数字を読ませる #### 動く版の現れ方 sweep — データの時間で刷る。12 枚が同じ時間軸。全部を同時に刷ると、月ごとの速さの違いが並んで見える。 #### 参照例 - NYT Climate (Mira Rojanasakul) — [Despite Rain Storms, California Is Still in Drought](https://www.nytimes.com/interactive/2023/climate/california-drought-reservoirs.html) 貯水池 4 本を同じ目盛・同じ語彙で並べ、各パネルに「52% of capacity / 83% average」の数字を 1 つ置く - Copernicus C3S — [Monthly climate bulletin — 12-panel monthly anomalies](https://climate.copernicus.eu/monthly-climate-bulletins) 月ごとの12パネル。同じ軸で今年を強調 - Datawrapper (Lisa Charlotte Muth) — [Small multiples — when and how](https://www.datawrapper.de/blog/) 共有軸／独立軸の明記、並び順、パネル数の判断 - Edward Tufte — [Envisioning Information — Small Multiples](https://www.edwardtufte.com/tufte/books_ei) 同じ構造の反復が比較を目の移動だけにする、の原典 #### 実装 forms.small_multiples.draw(card, ax, panels, cols=4, ylim=, smooth=, title=, values=, value_color=)　demo: {'panels': 12, 'cols': 4, 'shared_axes': True, 'diff': {'Jan': 3.19, 'Feb': 3.14, 'Mar': 3.39, 'Apr': 2.55, 'May': 2.84, 'Jun': 2.2, 'Jul': 2.48, 'Aug': 2.32, 'Sep': 2.3, 'Oct': 2.93, 'Nov': 3.43, 'Dec': 3.16}} unit chartデータの旅行ポスター（P）凡例＝縮小図の列（AQUA FLUXUS 型） 08 — Studies ## 型の検証 — 外から来た問いと、「もし」 07 章の図版は「型の見本」で、型ごとに 1 枚しかない。ここは逆に、外から来た 3 つの問いに台帳を引いた記録と、 v2.0 で立てた STUDY の下の IF（「もし」のレジスター）の初回。型が足りなければ、足りなかったことが検証結果になる。 手順は 06 章のとおり ── データを取る → 発見を掘る → 発見の種類から型を引く → 焦点を一つ決める → 見出しを書く → 検査に通す。 | 問い | 引いた型 | 結果 | 台帳に返したこと | 今年、世界のどこが燃えたか | 比例シンボル地図 | 無かった（v0.6） | 型を新設。正積図法・面積比例の円・凡例の代わりの数字の格子 | 今年の夏の世界平均気温 | スパゲッティ | 通った | 目盛の書式を引数に（実測値の軸に + は付けない） | ネパール氷河の衰退 | 基準線偏差の面 | 通った | 谷の名前は面の中ではなく谷の下へ。焦点を山の名前に置けるように focus= | もし1990年以降の傾きが続いたら | 不確かさの帯の延長（IF） | 通った（v2.0） | 「もし」は帯と経路の形しか取らない。閾値の数字は見出しに置かず、基準線の名前と landing へ 問いの言葉が data の言葉と違うことがある。「森林火災」で引いたが、GWIS の焼失面積は全地被で、森林はその 7% しかない（2025 年）。 型を引く前に、問いの量が観測されている量と同じかを確かめる。違うなら、図題と出典でその差を書く（02 章「見えないものを書く」）。 Study — 比例シンボル地図（v0.6 で新設） ### 今年、世界のどこが燃えたか Where the world burned this year 地理カテゴリの型が 1 つも無かった。海氷の縁の重ねは極域の 2 時点比較専用で、「国ごとの量を世界地図に置く」型が台帳に存在しない。比例シンボル地図を起こした。v2.0 では焦点を最大の量ひとつに絞った ── 国名は地の重さ、数字だけ太字。 ![Where the world burned this year — EN](/sorah-pjt/dataviz/img/study_fire_en.jpg) EN ![今年、世界のどこが燃えたか — JA](/sorah-pjt/dataviz/img/study_fire_ja.jpg) JA demo: {'countries': 162, 'max': 19483512.0, 'top': ['COD', 'AGO', 'AUS', 'SSD', 'ZMB', 'RUS', 'CAF', 'MMR'], 'world': 144453300.0, 'africa_share': 0.571, 'week': 34, 'forest_share': 0.074} Study — スパゲッティ（既存） ### 今年の夏の世界平均気温 This summer's global mean temperature 既存の型でそのまま通った。月別 87 年を日別 87 年に替えただけで、帯・平均線・今年の線・記録年の線という部品の割り当ては変えていない。v2.0 では「最も暑い日」の札を地の重さに落とし、太字は今年の線末だけにした。 ![This summer's global mean temperature — EN](/sorah-pjt/dataviz/img/study_summer_en.jpg) EN ![今年の夏の世界平均気温 — JA](/sorah-pjt/dataviz/img/study_summer_ja.jpg) JA demo: {'years': 87, 'this': '2026', 'record': '2024', 'band': (10, 90), 'last': [92, 16.78], 'mean': 16.802, 'gap': 0.0041, 'second': 2024, 'hottest_day': '2024-07-22', 'hottest': 17.156, 'summers': 87} Study — 基準線偏差の面（既存） ### ネパール氷河の衰退 The retreat of a Nepali glacier 気候の型を氷河に当てて通った。色だけ替えている ── 12 年のうち増えたのが 1 年なら、発散色ではなく 失った年を INK、増えた年だけ ACCENT にしたほうが「1 年」が立つ。v2.0 では焦点をその「増えた 1 年」に置き（focus="event:…"）、線末の値は地の重さに。 ![The retreat of a Nepali glacier — EN](/sorah-pjt/dataviz/img/study_yala_en.jpg) EN ![ネパール氷河の衰退 — JA](/sorah-pjt/dataviz/img/study_yala_ja.jpg) JA demo: {'above': 1, 'below': 11, 'cumulative': -10.37, 'years': 12, 'aar_last': 0.06, 'ela_rise': 111.0} Study — IF ── 不確かさの帯の延長（v2.0 で新設） ### もし1990年以降の傾きが続いたら If the post-1990 slope continued STUDY の下の「もし」のレジスター。実データ（HadCRUT5）から延ばした像だけを描く ── 1990 年以降の直線回帰と、その 95% 予測区間。思弁は帯と経路の形しか取らない。見出しは「点線が線に届くのは、2030年代」で止め、閾値の数字は基準線の名前と landing に置く。現れ方は uncertainty（推定が先、幅が後）。月 1 の予定で、初回題材は 1.5°C。 ![If the post-1990 slope continued — EN](/sorah-pjt/dataviz/img/study_if_en.jpg) EN ![もし1990年以降の傾きが続いたら — JA](/sorah-pjt/dataviz/img/study_if_ja.jpg) JA demo: {'slope_per_decade': 0.229, 'cross_year': 2032, 'band_cross_year': 2042, 'preindustrial_offset': -0.357, 'fit': '1990–2025'} ## 媒体・組版・動き G1の既定時間表と図の型は従来の編集カード用。記事連動の動くポスターは「記事・動くポスターの制作」を適用し、尺・fps・言語順序を目的から決めます。操作するWeb Sceneの再生はS-06・S-10〜12に従います。 [Web版](https://sorah.io/sorah-pjt/design/patterns/media/) 記事連動の動くポスターと日英記事は、 [コンテンツ制作の規範](/sorah-pjt/design/patterns/content/) へ。以下の欧文先行・12秒の時間表は従来G1の制作方式です。 04 — Capture ## 写し取る — 媒体に定着させる 質感とスケールは表現する媒体が持つ。画面は画面、動画は動画、紙は紙の像を持ち、どれかを別のものに擬態させない。 同じデータと同じ焦点でも、媒体が像を決める。G1→G2→M1 は導出であって複製ではない。主体は媒体。作り手は媒体に委任する。 以下の 16 条がこの工程の条 ── 動き（M-01〜M-11）、二言語（X-04・T-10）、和欧混植（T-09）、現れ方の決まり方（X-03）、そして X-10（写し取る媒体、人）。 デザインガイドライン v5.1 の 06 Motion は操作している画面の規範で、単体で受け取られる図版の動きは書かれていない。 だが 06 の原則 ──「動きは情報（何が変わったか）を運ぶ時だけ使う。装飾では動かさない」── はそのまま効く。 図版における「情報を運ぶ動き」とは、その図が答えている問いの形をなぞる動きのこと。だから動きの語彙は 7 つに閉じていて、どれを使うかは発見の種類が決める。作り手は選べない。 | 条 | 規範・根拠 | 判定 | X-03 | 現れ方は発見の種類が決める。作り手が決めない 動きの語彙は7つに閉じていて、発見のカテゴリごとに使えるものが決まっている（推移→時間で刷る、偏差→基準が先、地理→地が先、不確かさ→推定が先、翻訳→量が先…）。「かっこいいから」で選べる余地を残さない。norm.REVEAL_FOR | 自動 | X-04 | 二言語は同じ発見を運ぶ 和文版と欧文版は訳ではなく、同じ発見の二つの現れ方。**数量・日付・単位は完全に一致していなければならない。**言い回しは違ってよい。読者の多数は英語。数字がずれたら二枚とも嘘になる | 自動 | X-10 | 写し取る媒体 ── 質感・尺・判型は媒体が決める 画面は画面、動画は動画、紙は紙の像を持つ。G1→G2→M1 は**導出であって複製ではない**── 同じデータと同じ焦点でも、媒体が像を決める。どれかを別のものに擬態させない（静止画に動画の残像、動画にページの段組、紙に画面の光）。方向性 v2.1 §3 写し取る（Anadol／池田亮司「媒体が像を決める」） | 人が確認 | M-01 | 動きは情報を運ぶときだけ使う 何が変わったかを運ばない動きは装飾。装飾では動かさない。版面（判型・余白・五つのスロットの位置）は動かない。カメラも動かない ──ズーム・パン・パララックスなし。v5.1 06 Motion 原則 | 自動 | M-02 | 現れ方は1枚に1つ 7つの語彙（数える／時間で刷る／基準が先／推定が先／地が先／参照が先／量が先）から1つだけ。2つ混ぜると、読者はどちらを追えばいいか分からなくなる。norm.REVEALS | 自動 | M-03 | 現れ方は発見の種類が決める 推移なら時間で刷る。偏差なら基準が先。地理なら地が先。不確かさなら推定が先。翻訳なら量が先。作り手の裁量は、その中でどれを選ぶかまで。norm.REVEAL_FOR（X-03 の動き側） | 自動 | M-04 | 文字は現れるだけ 260ms のフェードと 8px の上移動、1方向。文字は移動しない・変形しない・回らない。現れる順は読む順（kicker → 見出し → 罫 → 図題 → 作画 → 注釈 → landing → 出典）。v5.1 06「要素の出現 260ms / translateY(8px)+fade / 1方向のみ」 | 自動 | M-05 | 図中の注釈は、作画がその位置に届いたときに現れる 注釈が出る順番は、作画が明らかになる順番と同じ。「7月22日が記録」の札は、作画が7月22日を通ったときに出る。これが M-01 の実体。v5.1 06「動きは情報を運ぶ時だけ」 | 自動 | M-06 | 速さは1つ（ease-out） イージングは1種類。spring は「操作の応答にだけ」使うものであって、単体で受け取られる図版に操作は無い。v5.1 06 の時間・イージング表 | 自動 | M-07 | 止まる 最後の 3 秒以上は完全な静止。**その最後の1コマは静止版と同じ絵**。検査は書き出した動画から実際に最後のコマを取り出し、静止版と突き合わせる ── はっきり違う画素（いずれかのチャンネルで 48/255 以上）が 0.5% 未満、平均差 2.0 未満。H.264 の圧縮差はここに収まり、コマがずれていれば桁で外れる。ループしない。v5.1 06「無限ループ禁止。3回で止める」 | 自動 | M-08 | 音は無い 発信のグラフィックに音を持たせない。音が要る主張は、図が足りていない。SORAH の発信物はすべて無音 | 自動 | M-09 | 尺は 8〜20 秒 短すぎると作画が読めず、長すぎると静止版で足りる。作画に与える時間は尺の 4〜6 割。実測（87 本の線が読める下限が約 5 秒） | 自動 | M-10 | 静止版を必ず持つ prefers-reduced-motion の環境、印刷、サムネイルには静止版を出す。静止版は動画の最後のコマから書き出す（M-07 と同じ絵であることの担保）。v5.1 06「prefers-reduced-motion で全アニメーションを停止する」 | 自動 | M-11 | 束はデータの時間の順に現れ、焦点は最後 系列そのものに時間の順がある図（1 本が 1 年の束、発生順のある出来事の点）は、その順に一つずつ置く ── 古い年から新しい年へ、下の線から上の線へ。束が全部置かれてから基準（平均・帯）が現れ、**焦点（今年の 1 本と名指し）は最後**。今年が束から出ていく瞬間が、そうして初めて見える。検査は段取りを実際に回し、各要素が最初に見える時刻を測って順を突き合わせる。実測（2026-09-05、夏の束 87 本）。型は部品に sequence / focus の役どころを付けるだけ | 自動 | T-09 | 和欧混植は組版で解く 和文を含む行は欧文連も同じ書体・同じウェイト。約物の隣に四分アキを入れない。数量は単位ごと、カタカナ語はひと続きで次行へ送る。v5.1 03 Typography ＋ doc H §3 | 自動 | T-10 | 二言語で数量・日付・単位が一致する 和文版と欧文版から数量と年を抜き出して突き合わせ、1つでも違えば発行しない。訳のずれは、片方が古いデータのまま残ることで起きる。丸めの差は 1% まで許す（和文の「万」と欧文の k は位取りが違うので、16万km² と 159k km² は同じ量の別の丸め）。X-04 の言葉側 | 自動 ### 現れ方の語彙 ── 7つ | 語彙 | 意味 | 出どころ | 使っている型 | count 数字が測定精度で止まる | 1つの数を答える図。桁が回って、計器が返す精度でぴたりと止まる。回る桁は「いま測っている」の合図で、止まった桁が精度そのもの。 | Bloomberg Green “Data Dash” の回る小数 | 数字の札 | sweep データの時間で刷る | 横軸が時間の図。左から右へ一度だけ、データ自身の時間で作画が置かれる。逆走も往復もしない。読者が線を目で追う速さと、刷りの速さが一致する。 | 商品のシルクスクリーン（インクは一方向に一度） | 折れ線（三本規則）／断面／小さな多数／スパゲッティ＋今年強調／偏差の縞 | deviation 基準が先、偏差が後 | 「何と比べて」を答える図。基準線と目盛が先に立って一拍置き、そのあとで面が基準から育つ。比べる相手が無いうちに差を見せない。 | v5.1 07「基準のない数字は意味を持たない」 | 区画の偏差／基準線偏差の面 | uncertainty 推定が先、幅が後 | 「どこまで確かか」を答える図。中央の推定が引かれてから、幅が開く。確からしさは、確からしさが問われる前に見えてはいけない。 | Wilke “Visualizing Uncertainty” | 不確かさの帯 | spatial 地が先、量が後 | 「どこで」を答える図。陸が現れて台紙になり、そのうえに量が大きい順に着地する。地図を左から右へ拭かない ── 地図は作画ではなく台紙だから。 | 商品 AQUA FLUXUS（紙の上に河川が刷られる） | 比例シンボル地図／コロプレス（率）／区画の種類／海峡／点の集積／格子（回数）／地域の点図 | compare 参照が先、今が後 | 2つの状態を重ねる図。過去（参照）の輪郭が先に置かれ、そのうえに今が重なる。重ねる順番が、読者が引き算をする順番になる。 | NSIDC の海氷縁の重ね | 海氷の縁の重ね | analog 量が先、翻訳が後 | 抽象量を人の尺度（暦・場所・身体）に置き換える図。測った量が先に置かれ、そのあとで翻訳の寸法線が現れる。翻訳先が先に見えると、量が翻訳に従属してしまう。翻訳は量の説明であって、量の代わりではない。 | NYT “How Much Hotter Is Your Hometown”／The Pudding “Climate Zones”（方向性 v2.1 §6） | 暦の翻訳 1枚に1つ（M-02）。発見のカテゴリが許すものしか通らない（M-03、norm.REVEAL_FOR）。 型は作画の部品に役どころを付けるだけでよい ── ground（台紙）・reference（参照）・ symbols（量の記号）・band（幅）・number（数字）・analog（翻訳の寸法線）・ sequence（データの時間の順を持つ束）・focus（焦点 ── 最後に現れる一本と名指し）。 動きはその役どころだけを見るので、型ごとに動きを書き下ろさない。 束はデータの時間の順に現れる（M-11、v2.1）。「時間で刷る」は、横軸を左から右へ拭くことではなかった。 1 本が 1 年の束は 1940 年の線が先、今年の線が最後 ── 下の線から順に置かれ、いちばん上の線がいちばん後に来る。 束が置き終わってから平均と帯が現れ、焦点（今年の一本）が最後にゆっくり刷られ、名指しの札はそのあと。 発生順のある出来事の点（震源の断面）も同じで、点が起きた順に一つずつ置かれ、回帰線が最後。 87 本の束は尺を 14 秒に延ばす（motion.move_for、M-09 の下限）。検査は段取りを実際に回して各要素が最初に見える時刻を測り、 順が崩れていれば動画を書かない。v2.0 で足した analog は「量が先、翻訳が後」── 二つの年周期が置かれてから、翻訳の寸法線と札が現れる。 ### 時間表（12 秒 / 30fps。束が 12 本を超える図は 14 秒・作画 7.0 秒） | 時刻 | 現れるもの | 決め方 | 0.30s | kicker | 読む順 | 0.55s | 見出し | 2 行なら 0.12s ずらす | 1.05s | 罫 | 左から右へ 260ms | 1.35s | 図題 | 2 行で 1 つ。作画の前に量の名前 | 1.45–6.85s | 作画 | 現れ方の実装が決める（尺の 45%）。束のある図は 作画の 68% で束（データの時間の順）、60–76% で基準、74–100% で焦点 | 作画が届いた時 | 図中の注釈 | その注釈の右端に作画が届いた時刻＋0.10s（M-05）。翻訳の札は寸法線の後 | 7.10 / 7.40s | landing / 出典 | 作画の終わりから 0.25 / 0.55s | 7.66–12.00s | 静止 | 4.3 秒。最後のコマ＝静止版（M-07） [動画](/sorah-pjt/dataviz/motion/fire_en.mp4) EN Where the world burned this year 現れ方: spatial （地が先、量が後） [動画](/sorah-pjt/dataviz/motion/fire_ja.mp4) JA 今年、世界のどこが燃えたか 現れ方: spatial （地が先、量が後） [動画](/sorah-pjt/dataviz/motion/summer_en.mp4) EN This summer's global mean temperature 現れ方: sweep （データの時間で刷る） [動画](/sorah-pjt/dataviz/motion/summer_ja.mp4) JA 今年の夏の世界平均気温 現れ方: sweep （データの時間で刷る） [動画](/sorah-pjt/dataviz/motion/yala_en.mp4) EN The retreat of a Nepali glacier 現れ方: deviation （基準が先、偏差が後） [動画](/sorah-pjt/dataviz/motion/yala_ja.mp4) JA ネパール氷河の衰退 現れ方: deviation （基準が先、偏差が後） [動画](/sorah-pjt/dataviz/motion/if_en.mp4) EN If the post-1990 slope continued 現れ方: uncertainty （推定が先、幅が後） [動画](/sorah-pjt/dataviz/motion/if_ja.mp4) JA もし1990年以降の傾きが続いたら 現れ方: uncertainty （推定が先、幅が後） ### 判型と配置 — 媒体ごとの像 | 判型 | 寸法 | form 枠 | 状態 | G1 カード | 1080×1350（4:5） | 936×764 px、紙面の 56.6%。上から kicker 72 / 見出し 124 / 罫 300 / form 332 / landing 1136 / 出典 1246 | 確定（engine/card.py） | G2 ストーリー | 1080×1920（9:16） | 規範のみ（下記「段で軸が伸びる」）。form は 60% 以上、見出しは上 1/4、上下 250px は UI に隠れる前提 | 規範 v0.3 | G3 記事図版 | 1600×900 / 1200×675 | 未策定。見出しは記事側に、図は landing と出典だけを持つ | 未 | P ポスター | B2 / A1 | 規範のみ（下記「データの旅行ポスター」）。余白を図の密度に応じて広げる。印刷仕様をメタデータ化 | 規範 v0.3 旧版のInstagram向け制作では格子を3:4で想定した。配信時は掲載先の表示を再確認する。4:5 なら左右 34px に意味を置かない（GRID_CROP_X）。小さな多数の格子は 4 列、横 6%・縦 5% の隙間、軸の値は 1 か所だけ。 ### G2 — 段で軸が伸びるスクロール（NYT「How Iran Accumulated 11 Tons of Enriched Uranium」） 縦長では 1 図を 4〜6 段に分け、段ごとに y 軸の上限を変えてよい。ただし同じ図の連続であることを目盛で示す：単位は最上段だけ、目盛は 3 本、前段の範囲を薄く残す。本文は図の上に 1 段落（2〜4 行）、出来事は縦の細線＋短文、閾値は点線に名前。冒頭は同じ図を 1 本の線に縮めた要約図。色は 1 系統の濃淡＋結果の赤。 ### P — データの旅行ポスター（SORAH ART ボード） 構図は 4 つ：(a) 上部に大きな円、(b) 水平の地平線、(c) 手前から奥へ重なる面、(d) 3〜5 色の平塗りと紙色の余白、下端に小さな題と場所。データへの翻訳：円＝今日の数字（数字の札）、地平線＝基準線（平年・1.5°C）、重なる面＝帯・積み上げ面・年ごとの線の束（手前が今年）、夕日の段階色＝連続色を 5 段に量子化した平塗り（cmocean / viridis。虹は不可）、書体はミッドセンチュリーの太いサンセリフ小キャップで場所と年。VI の「白 90 : 青 7 : その他 3」は G1 に保ち、P だけ 3〜5 色の平塗りを許す。参照：武政諒・石塚俊・Ryo Takemasa の平塗りの日本の地形、国立公園ポスター、Bauhaus。 ### P — 印刷仕様は情報設計の一部（商品の実仕様） 旧版が参照したSORAHの商品は A1（594×841）・900部限定・背面にシリアルを記録したNFCタグ・紙管 660mm×⌀55mm ＋ コルクキャップ。用紙と印刷方式は主題ごとに選ばれている ── 縞はヴァンヌーボ V-FS 163g/m²（FSC）にオフセット CMYK ＋ シルクUVニス薄盛り（透明の棒グラフをニスで重ねる）、河川はNTラシャ スノーホワイト 202g/m² にシルクスクリーン 1C、森林はエコ間伐材N 171g/m²（間伐材マーク認証紙）にシルクスクリーン 2C。主題と紙と版数を一致させるのが SORAH の作法で、森林の図を間伐材の紙に2版で刷ることは図の意味の一部になっている。P 判型の型メタデータは、用紙銘柄・坪量・認証・印刷方式・版数・限定部数を持つ。 ### 言語 — 欧文版が先 読者の多数は英語。G1 は欧文版と和文版の2枚を同じコードから刷る。判型・余白・form 枠・線の階層・色は共通で、変わるのは書体（Poppins ↔ Noto Sans JP）と、見出し・landing・出典の級数と行数だけ。欧文は同じ情報に和文の 1.6 倍の幅を要するので、収まらないときは級数ではなく文を削る（fail-closed）。図中のラベル（図題・線末・目盛・地名）も両方持つ。詳細は上の「組版」。 ### 夜版（黒地）— P と動画に限る Ikeda、NYT「The Choking of Hormuz」、Bloomberg「Data Dash」は黒地。SORAH では G1 の日次カードには使わず、P と動画に限って許す。色定数は INK ↔ PAPER を反転、ACCENT はそのまま、PAST は #3A3A3A、GRID は #262626、AVG は #9A9A9A。輝度差 24 の検査は黒地でも同じ。図の背後に写真を敷くときは、写真の輝度を 25% 以下に落とし、写真の上に置く文字は必ず紙色の縁取り。 ### 組版 — 書体・級数・和欧混植は媒体の仕事 先に組版を決める。デザインガイドライン v5.1 の 03 Typography と 07 データビジュアライゼーションに、手元の書体を実測して突き合わせた結果が下の4規則。「数字だけ太い」「和文が細い」「桁が縦に揃わない」はここで機械的に消える。 ### 組版の4規則 | 規則 | 根拠 | 実装 | 1 桁が縦に揃う場所だけ、数字を等幅送りで置く | 書体の変更後も、目盛・値の列は桁を揃える。散文の数字は自然な送りにする。 | Webはtabular-nums、図版は0の字幅で送りを固定。使用する実書体で収まりを確認する。 | 2 和文を含む行は1書体1ウェイト | 日本語の文中の英数字もNoto Sans JPへ揃える。 | 欠けたグリフだけ代替し、別書体の数字だけが太く見えないよう確認する。 | 3 図版の地はMedium、名指しと数字はBold | Poppins／Noto Sans JPの実ファイル500・700を使用する。旧書体の黒み測定値を新書体へ流用しない。 | 本文・注釈・目盛は500、焦点と主要値は700。UIのヒーロー800・900は別の役割として維持する。 | 4 UI・図版の書体を共通化する | 欧文Poppins、和文Noto Sans JP。2026年9月20日のUI比較04:Bで採用。 | Web、記事、編集カード、動画、印刷へ適用。原版ロゴは変更しない。必要なグリフと使用ウェイトを実ファイルで確認する。 段は card.TYPE の1表に集約した。kicker 21 / 見出し 54（欧文 46）/ landing 29（欧文 25）/ 出典 18（欧文 17）/ 図題 24 / 注釈 22 / 目盛 19 / 線末 22 / 数字の札 132＋単位 34。図版の組版を直すときはここだけ触る。 ### 二言語で刷る 読者の多数は英語なので、同じ図を欧文版と和文版の2枚で刷る。原稿は T(和文, 欧文) と1箇所に並べて書き、language("en") の中で demo() を呼ぶと欧文版になる。原稿が2つのファイルに離れると必ずずれるので、離さない。 | | 変わるもの | 変わらないもの | 組版 | 書体（Noto Sans JP ↔ Poppins）。見出し 54→46pt・最大3行、landing 29→25pt、出典 18→17pt（欧文は同じ情報に 1.6 倍の幅を要する） | ジオメトリ（1080×1350・余白 72・form 枠 936×764＝紙面の 56.6%）、五つのスロットの位置、線の階層、色 | 折り返し | 和文は任意位置＋禁則、欧文は語の切れ目 | 行数の上限で落とす（fail-closed）。収まらないのは体裁の問題ではなく文の問題 | 検査 | 見出しの上限は全角17字 ↔ 68字。敬体の検査 ↔ 句点・問いかけの検査。凡例の言い回しと使わない語は言語ごとの表 | 結論の数字を見出しに置かない・landing を凡例にしない・出典に観測日・見出しの前提を demo() が検算する 和文の折り返しは語の途中で折らない: 数量は単位ごと（「8万km²」）、カタカナ語はひと続きで次行へ送る（「東シベリ／ア海」を作らない）。約物（括弧・句読点）の隣には四分アキを入れない。 ### 和欧混植 境界は文字単位ではなく連（run）単位。数字で始まる欧文連は数量 → 詰める（この30日／2,274万人／1.1°C高い）。英字で始まる欧文連は語 → 四分アキ（NASA GISTEMP v4 の観測）。書体は組み分けない ── 和文を含む行は欧文連も同じ Noto の同じウェイトで組む（規則2）。欠けたグリフがある場合だけ、実書体の文字表を確認し、代替書体と使用箇所を記録する。行末に数字を残さない（追い出し）。縦組みは見出し・注釈に限り、数値軸と年ラベルは横組み固定（JLReq）。 ## 記事・動くポスターの制作 承認済み作例から採用したコンテンツ制作規範。Poppins／Noto Sans JPと既存のScene配色を継承します。18秒・60fpsや淡水の配色は全題材の固定値ではありません。 [Web版](https://sorah.io/sorah-pjt/design/patterns/content/) 01 / EDITORIAL HIERARCHY ## 現象を主役に。日付を、読むための軸に。 見出しだけを大きくして図を押し出さない。現象、コピー、観測期間、値と単位・分母、凡例、注記の順に役割を分けます。観測期間と記事の公開日は別々に扱います。 ![淡水の承認済み日本語図版。地球と河川を主役に、2025年と36%の分母を添えた制作例。](/sorah-pjt/design/assets/freshwater-editorial-ja.jpg) 淡水 / 2026年9月25日承認版の作例。過去の図版を保存し、新たな観測値や全題材の標準配色とは扱いません。 文字の階層 / 配置の見本 ### 世界の大河で 流量が平年割れに。 2025 / 年間河川流量 基準：1991–2020年 36% 年間流量が平年を下回った 世界の流域面積の割合※ 数字の読み方 水量が36%減った、という意味ではありません。分母を数値に添え、意味が変わる条件を遠い脚注だけに置かない。 記事本文は17px、注記は14pxを開始値に。画像は1080px原寸だけでなく、スマートフォンで表示される幅でも確認します。既存UIの最小文字サイズを一律変更するものではありません。 [文字と注記のトークンを取得](/sorah-pjt/design/foundations.json) 02 / READING RHYTHM ## 本文は前へ。補足は、そのすぐそばへ。 湿地を潤し、畑に水を届け、魚を育てる。大河の流れは、自然の循環と人々の暮らしを支えている。※ 図の読み方 青い主流は、低流量が評価された流域の位置を示す目印。全ての支流で同じ減少を観測したという意味ではありません。青緑は地理的な背景で、平年並みを表す色ではありません。 Rivers sustain wetlands, carry water to farms, and support fish. Their flow connects ecosystems and everyday life.Note · Reading the map Blue main stems locate basins assessed as having low flow. They do not indicate an identical observed decline in every tributary. Teal provides geographic context, not a normal-flow rating. 注記は短いラベル、補助色、余白と左罫で区別します。淡くして消さず、本文色とのコントラストを保ちます。原稿の保存ではラベル・本文・出典を残します。 写真クレジットの構成：場所 / 撮影年月日 / 撮影者 / 出典 / ライセンス / 加工の有無。「無料で利用可能」と「著作権なし」を区別します。 03 / VISUAL MEANING ## 見た目の違いに、意味を対応させる。 青の主流低流量と評価された流域を見つける目印 青緑の河川網地理的な背景。正常という評価ではない 点線＋ラベル推定・シナリオなど。意味を言葉でも示す 上記は凡例の説明用見本で、数値を符号化した地図ではありません。青・青緑は淡水の採用配色であり、既存RIVERレジストリの上書きではありません。 - 色・線幅・面積・高さ・動きが表す量を、出典・単位・期間・分母と一緒に記録する。 - 支流の全体像と、評価済みの主流の強調を分ける。線の太さで減少率を暗示しない。 - 観測、補間、予測、シナリオを区別する。未評価・欠測・対象外をゼロや平年並みに置き換えない。 - 背景の写真・陰影と、測定された量を区別する。施設数から電力使用量、面積から体積を推定しない。 04 / FORMATS & LANGUAGES ## 同じ現象を、画角と言語に合わせて組む。 4:5 主図日付・凡例・注記フィードの構図例 9:16 主図日付・凡例・注記縦長動画の構図例 2:3 主図日付・凡例・注記ポスターの構図例 枠内の円は配置用の模式図で、地球データではありません。各媒体の操作UIやクロップ位置は配信時に確認します。安全な余白を全媒体共通の固定値とせず、主役・地名・注記が欠ける場合は再配置します。 ![淡水コンテンツの日本語図版](/sorah-pjt/design/assets/freshwater-editorial-ja.jpg) 日本語：語のまとまりで改行 ![The same freshwater data in the English layout](/sorah-pjt/design/assets/freshwater-editorial-en.jpg) English：文字量に合わせて再配置 両言語で値・期間・尺度・出典を一致させます。日本語記事には日本語図版を用意し、欧文先行を全記事の必須工程にしません。文字のない写真は共通利用し、キャプションと代替テキストを翻訳します。 05 / MOTION POSTER ## 回転と時間変化を、混同させない。 START 冒頭で題材、観測期間、主役が見える。 MIDDLE 移動するのは視点か、データの時点かを明確にする。 LOOP 姿勢・文字・数値・音声が冒頭へ自然につながる。 自転を表す場合は西から東。球体回転とカメラ周回では画面上の見かけが変わるため、既知の地点と経度で検証します。光の移動を実際の流速や個体数と誤認させません。 ループを求められた場合は、エンコード後の終端と冒頭を連続再生して確認します。角度を時間から求め、等速回転の終端だけを減速させない。重複フレームや長い静止による停止感にも注意します。※ 適用範囲 淡水の18秒・60fpsは採用事例です。尺とfpsは題材・表示面・読む時間から決めます。Web Sceneの自動再生規範を、記事内動画の自動再生へ流用しません。 06 / ONE TOPIC, ONE PROJECT ## 制作段階と、配信の状態を分ける。 制作段階 P3 · 動画＋記事全文 確認状態 承認済み · r14 配信状態 引き渡し済み 更新 2026-09-25 · 注記と写真を追加 上は淡水の制作記録を使った状態表示の作例です。「引き渡し済み」は公開完了ではありません。公開状態は配信先ごとに確認し、承認後の変更を新しい版として区別します。 P1 主張・データの成立性・静止画の比較。 P2 記事構成・図版・日英組版・映像の主要場面。 P3 記事全文・媒体別素材・出典・権利・受け渡し。 一覧はサムネイルと状態を軽く表示し、テーマを開いて必要な図版を読み込みます。動画はポスターを先に見せ、再生時に読み込み、非表示時に停止します。原稿更新で全動画を再生成・再配信しない構成を採用します。※ 実装と運用 原本・レビュー用・配信用を分け、不変の素材URLと承認版を保持するための設計規範です。既存サイトの保存先や配信基盤を、このガイドの改版だけで移行したという意味ではありません。 07 / REVIEW CONTRACT ## 制作時に確認する7条。 CP-01〜07は人が成果物で確認する規範です。SDSの文書ビルドが通ったことを、別作品のデータ検証・知覚評価が完了した証拠にはしません。 | 条 | 規範・根拠 | 判定 | CP-01 | 主張とデータの範囲を揃える 制作前に対象期間・地域・単位・基準期間・分母・網羅性を記録する。観測、補間、推定、シナリオ、地理的背景を区別する。施設数を電力消費へ、流域面積の割合を水量の減少率へ読み替えない。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-02 | 本文と注記の階層を分ける 本文は現象と自然・暮らしの関係を進める。比較条件や図の読み方は近くに見出し付き注記を置く。対象年・予測・分母など主張を変える条件は数値の近くにも残す。注記は色と余白で区別し、十分なコントラストを保ち、原稿保存でも落とさない。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-03 | 現象を主役に、日付と単位を読める位置へ 図版の主役を文字で隠さない。コピー、観測期間、数値と単位・分母、凡例、注記に階層を設ける。文字トークンは開始値として使い、実際のスマートフォン表示で確認する。凡例の色・線幅・高さの意味を記し、背景や未評価を正常値として見せない。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-04 | 日英と媒体別の構図を同じデータから組む 日本語記事には日本語図版を用意し、日英の値・期間・尺度・出典を揃える。文字量に合わせて改行と配置を変える。4:5・9:16・2:3は対象媒体に応じた作例で、主役や注記を切る単純クロップをしない。写真は各言語の説明と作者・ライセンス・撮影日・加工の有無を付す。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-05 | データの変化と視点の移動を分ける 動画化前に開始・中間・終了の構図を確認する。固定時点の地球回転を時間変化と見せず、自転を表す場合は西から東を地点で検証する。ループ指定時は姿勢・ラベル・データ・音声の接続と停止感をエンコード後に確認する。18秒・60fpsを他作品の固定条件にしない。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-06 | 制作・承認・配信を別の状態として見せる 1テーマ1入口を維持し、P1〜P3、確認状態、媒体別の配信状態を別に記録する。配信に回した状態を公開済みと呼ばない。承認revision・更新日・更新内容を表示し、更新前のサイトを最新版と案内しない。P1は主張と絵、P2は構成と主要場面、P3は全文と配信素材を揃える。2026-09-26 content production retrospective / freshwater approved example | 人が確認 | CP-07 | 必要な素材だけ読み込み、更新する 一覧は軽いサムネイルと状態を表示し、詳細ページで必要な画像を読み込む。レビュー動画はポスターと再生操作から始める。原本・レビュー用・配信用を区別し、原稿更新で未変更の動画を再生成しない。素材の不変URLと版を維持し、保存先を分ける場合も閲覧権限を変えない。2026-09-26 content production retrospective / freshwater approved example | 人が確認 ## 制作・検査・失敗事例 カード・動画・二言語とコンテンツ制作の規範を、Sceneの規範と区別して掲載します。条文と件数はengine.norm.RULESから生成します。未実行を合格扱いしません。 [Web版](https://sorah.io/sorah-pjt/design/implementation/production/) 過去の失敗事例は当時の書体名・測定結果を保持しています。現在の新規制作はPoppins／Noto Sans JPを使用し、旧書体の測定値を流用しません。 ## 検査の契約 engine.norm.RULESの編集カード・動画・二言語の規範です。適用単位、判定方法、実装位置を明示します。検査結果は制作ごとの出力に添付してください。 50条 / 自動 35条 / 人が確認 15条。画像・動画ごとに検査を実行し、未実行を合格扱いしません。 ### 工程ごと | 工程 | 条 | 自動 | 人 | 光を当てる | 13 | 9 | 4 | 焦点を結ぶ | 14 | 10 | 4 | 写し取る | 20 | 15 | 5 | 三つを貫く | 3 | 1 | 2 ### 検査の入口（領域）ごと | 領域 | 条 | 自動 | 人 | 図 | 12 | 9 | 3 | 動き | 12 | 11 | 1 | 言葉 | 12 | 9 | 3 | 横断 | 14 | 6 | 8 ### 全条項 card：1枚ごと / pair：二言語の対 / video：動画の生成前と生成後 / content：記事連動コンテンツ。公開前に動画の最終フレームと静止画、音声トラックの有無も検証します。 X-01 / card / 人が確認 #### 一つの発見が、図・動き・言葉の三つの現れ方を取る 図・動き・言葉は三つの規範ではない。先に発見が1つあり、図はそれを描き、動きはそれが現れる順を決め、言葉はそれを名指す。三つが別々のことを言っていたら、どれかが発見から離れている。 根拠：v5.1 07「1図1メッセージ」を三領域に拡張 / 実装：人が制作物を確認 X-02 / card / 自動検査 #### 発見の前提は、発行のたびに検算する 「一度も下がっていない」「最後の3年」「増えた年は1年」── 見出しが立っている前提は、毎回データから確かめ、崩れていたら発行しない。前提が崩れた図は、きれいなまま嘘になる。 根拠：各型の demo() が ValueError を投げる / 実装：forms.*.demo X-03 / card / 自動検査 #### 現れ方は発見の種類が決める。作り手が決めない 動きの語彙は7つに閉じていて、発見のカテゴリごとに使えるものが決まっている（推移→時間で刷る、偏差→基準が先、地理→地が先、不確かさ→推定が先、翻訳→量が先…）。「かっこいいから」で選べる余地を残さない。 根拠：norm.REVEAL_FOR / 実装：norm.REVEAL_FOR X-04 / card / 自動検査 #### 二言語は同じ発見を運ぶ 和文版と欧文版は訳ではなく、同じ発見の二つの現れ方。**数量・日付・単位は完全に一致していなければならない。**言い回しは違ってよい。 根拠：読者の多数は英語。数字がずれたら二枚とも嘘になる / 実装：人が制作物を確認 X-05 / card / 自動検査 #### 検査に落ちた出力は生成されない 規範は文書に書いただけでは守られない。機械が判定できる条項は検査に変換し、落ちたら画像も動画も書かない（fail-closed）。例外は台帳の Don't 図版だけ。 根拠：engine.spec / engine.motion / 実装：Card.save / motion.render X-06 / card / 人が確認 #### 光を当てる ── データに対応しない要素を置かない そこにあるものを見えるようにするだけで、何も足さない。装飾・比喩の形・イラスト層・写真の地は、データでないので照らしても現れない。「装飾を排したタイポグラフィ主導」はこの帰結であって出発点ではない。F-07（1枚1色相）・F-09（罫の最小限）の上位原則。 根拠：方向性 v2.1 §3 光を当てる（NASA SVS「何も足さない」） / 実装：人が制作物を確認 X-07 / card / 自動検査 #### 焦点は一つ ── 前に出る発見は1枚に1つ 名前は一つのものにしか付かない。**太字と色を持つ名指し（線末の札・山の名前・寸法線の値）は1枚にちょうど1つ**。二つ目を前に出したくなったら、それは二枚目の図。選ばれなかったものは消さずに後ろへ退く ── 地の重さの注記と Source の層に退避する。削ぐことと隠すことは違う。 根拠：方向性 v2.1 §3 焦点を結ぶ（Migliozzi「記録年だけに色」） / 実装：Card._leads（bold の名指しを数える） X-08 / card / 人が確認 #### 焦点は観察 ── 名づけて、決めない 見出しと landing は観察の文で、評価語・因果の断定・「だから」を含まない。「夏の四つの最高記録は直近の四年」は焦点、「だから危険だ」は結論。SORAH は前者で止まる。結論を出さないことで、図と landing は開いたままでいられる。T-01 の上位原則。 根拠：方向性 v2.1 §3 但し書き / 実装：人が制作物を確認 X-09 / card / 自動検査 #### 基準の所在 ── 立場は基準の選び方にだけ現れる 平年・基準期間・閾値・除外条件を先に決め、**図題か図中の注記に必ず書く**。型は何を基準にしたかを宣言し（Card.basis）、宣言した語が図題か注記に無ければ発行しない。今年だけに色を使い、暫定データの範囲を切り、除外条件（「M4.0以上」「全地被」「都市化の分を含む」）を書く。 根拠：方向性 v2.1 §5 中庸（Rojanasakul “not included”／Goodsell「水分子は描かない」） / 実装：Card.basis / norm._x09 X-10 / card / 人が確認 #### 写し取る媒体 ── 質感・尺・判型は媒体が決める 画面は画面、動画は動画、紙は紙の像を持つ。G1→G2→M1 は**導出であって複製ではない**── 同じデータと同じ焦点でも、媒体が像を決める。どれかを別のものに擬態させない（静止画に動画の残像、動画にページの段組、紙に画面の光）。 根拠：方向性 v2.1 §3 写し取る（Anadol／池田亮司「媒体が像を決める」） / 実装：人が制作物を確認 F-01 / card / 自動検査 #### 作画が紙面を支配する 作画は紙面の 55% 以上（G1 は 56.6%＝936×764px）。作画が小さいのは、何を見せるか決められていないことの現れ。 根拠：商品は版面いっぱいに図がある / 実装：人が制作物を確認 F-02 / card / 自動検査 #### 凡例を置かない 置ける場所があるなら図の上に直接書く。凡例は色と意味を目で往復させる。代わりに、線の端・面の中・点の横に名前を置き、それでも足りなければ**縮小図の列か数字の格子**を敷く（AQUA FLUXUS / GLACIES LIQUOR #1）。 根拠：v5.1 07「凡例より直接ラベル」＋商品の構造 / 実装：人が制作物を確認 F-03 / card / 自動検査 #### 図の中に注釈が1つ以上ある 注釈は説明文ではなく図の一部。パターンか解釈を名指す。「ここにデータがあります」は注釈ではない。 根拠：v5.1 07「注釈が図の主役」 / 実装：人が制作物を確認 F-04 / card / 自動検査 #### 量は順序・発散、種類は分類色で表す 量の大小は順序色、基準との差は発散色で表す。順序のない種類には分類色を認める。fill_kind=categoryを宣言し、分類名を直接併記する。色だけで種類を伝えない。虹（jet / rainbow / turbo）は順序が知覚と一致しないので使わない。 根拠：2026-09-20 対話で分類色を採用 / v5.1 07 / 実装：人が制作物を確認 F-05 / card / 自動検査 #### 長さ・面積で量を表す型はゼロ起点 棒・縞・面・柱はゼロ起点。線・点・地図は任意だが、波線省略はしない。主エンコーディングを宣言してから描く（marks=）。 根拠：v5.1 07「比較を歪めない」 / 実装：人が制作物を確認 F-06 / card / 自動検査 #### グレースケールで生きる データに使う色は、明度だけで区別がつくこと（明度差 24 以上）。赤緑の識別に依存しない。VI Blue #00BFFF はブランド専用でデータに使わない。 根拠：v5.1 07「グレースケールで生きる」 / 実装：人が制作物を確認 F-07 / card / 自動検査 #### 1枚1色相を基本に、分類は種類で色を分ける 有彩色は1枚に1系統（発散だけ2色相）。色は今年か記録か、焦点の合った一つにだけ置き、残りは無彩色の濃淡で退く。分類データは例外として種類ごとに色相を分け、名前を併記する。G1の分類は上限4区分。5区分以上は図を分ける。商品は4点中3点が特色1〜2版で刷られている。 根拠：商品の実仕様（doc H §2-1）＋ Migliozzi / 実装：人が制作物を確認 F-08 / card / 自動検査 #### 1つの要素は1px 以上を占める 系列の点が版面の幅に対して 1px 未満になるまで詰め込まない。元データより細かい解像度に集計しない。読めない密度は密度ではなく汚れ。 根拠：v5.1 07 六角格子の条項 / 実装：人が制作物を確認 F-09 / card / 人が確認 #### 軸・罫・格子は最小限。消して読めるなら消す 残す罫は #F0F0F0 まで薄く、目盛は2〜4本、単位は最上段だけ。商品には軸も目盛も格子罫も無い。 根拠：v5.1 07 Do ＋商品「していないこと」 / 実装：人が制作物を確認 F-10 / card / 人が確認 #### 地図である必然性がある 位置そのものが発見であるときだけ地図にする。量が発見なら地図ではなく量の型へ。面積で量を表すなら正積図法を使う。 根拠：v5.1 07 地図を使ってよい条件 / 実装：人が制作物を確認 F-11 / card / 自動検査 #### 区画を塗るなら、率・種類・回数のどれかを宣言する 区画の塗りが運べるものは三つ。**率**（分母がその区画に属する割合・密度）、**種類**（順序を持たない区分）、**回数**（数え上げ）。**絶対量は選べない** ── 読者は塗られた面積を量として読むので、分母を持たない量で塗ると、広い区画が濃く見えるだけの図になる。回数で塗れるのは区画の大きさが揃っているとき（固定格子）だけで、国や県のように大きさの違う区画では、回数は率に直す。種類のときだけ色相を区分の数だけ使ってよく（上限4）、その色は順序を持たない ── だから凡例ではなく、区分の名前を図の中で直接名指す。表は norm.FILL_KINDS。 根拠：v2.1 の「率でしか塗らない」を三つに分けた（2026-09-06）。禁じるべきだったのは率以外ではなく、分母を持たない量 / 実装：人が制作物を確認 M-01 / video / 自動検査 #### 動きは情報を運ぶときだけ使う 何が変わったかを運ばない動きは装飾。装飾では動かさない。版面（判型・余白・五つのスロットの位置）は動かない。カメラも動かない ──ズーム・パン・パララックスなし。 根拠：v5.1 06 Motion 原則 / 実装：人が制作物を確認 M-02 / video / 自動検査 #### 現れ方は1枚に1つ 7つの語彙（数える／時間で刷る／基準が先／推定が先／地が先／参照が先／量が先）から1つだけ。2つ混ぜると、読者はどちらを追えばいいか分からなくなる。 根拠：norm.REVEALS / 実装：人が制作物を確認 M-03 / video / 自動検査 #### 現れ方は発見の種類が決める 推移なら時間で刷る。偏差なら基準が先。地理なら地が先。不確かさなら推定が先。翻訳なら量が先。作り手の裁量は、その中でどれを選ぶかまで。 根拠：norm.REVEAL_FOR（X-03 の動き側） / 実装：人が制作物を確認 M-04 / video / 自動検査 #### 文字は現れるだけ 260ms のフェードと 8px の上移動、1方向。文字は移動しない・変形しない・回らない。現れる順は読む順（kicker → 見出し → 罫 → 図題 → 作画 → 注釈 → landing → 出典）。 根拠：v5.1 06「要素の出現 260ms / translateY(8px)+fade / 1方向のみ」 / 実装：人が制作物を確認 M-05 / video / 自動検査 #### 図中の注釈は、作画がその位置に届いたときに現れる 注釈が出る順番は、作画が明らかになる順番と同じ。「7月22日が記録」の札は、作画が7月22日を通ったときに出る。これが M-01 の実体。 根拠：v5.1 06「動きは情報を運ぶ時だけ」 / 実装：人が制作物を確認 M-06 / video / 自動検査 #### 速さは1つ（ease-out） イージングは1種類。spring は「操作の応答にだけ」使うものであって、単体で受け取られる図版に操作は無い。 根拠：v5.1 06 の時間・イージング表 / 実装：人が制作物を確認 M-07 / video / 自動検査 #### 止まる 最後の 3 秒以上は完全な静止。**その最後の1コマは静止版と同じ絵**。検査は書き出した動画から実際に最後のコマを取り出し、静止版と突き合わせる ── はっきり違う画素（いずれかのチャンネルで 48/255 以上）が 0.5% 未満、平均差 2.0 未満。H.264 の圧縮差はここに収まり、コマがずれていれば桁で外れる。ループしない。 根拠：v5.1 06「無限ループ禁止。3回で止める」 / 実装：人が制作物を確認 M-08 / video / 自動検査 #### 音は無い 発信のグラフィックに音を持たせない。音が要る主張は、図が足りていない。 根拠：SORAH の発信物はすべて無音 / 実装：人が制作物を確認 M-09 / video / 自動検査 #### 尺は 8〜20 秒 短すぎると作画が読めず、長すぎると静止版で足りる。作画に与える時間は尺の 4〜6 割。 根拠：実測（87 本の線が読める下限が約 5 秒） / 実装：人が制作物を確認 M-10 / video / 自動検査 #### 静止版を必ず持つ prefers-reduced-motion の環境、印刷、サムネイルには静止版を出す。静止版は動画の最後のコマから書き出す（M-07 と同じ絵であることの担保）。 根拠：v5.1 06「prefers-reduced-motion で全アニメーションを停止する」 / 実装：人が制作物を確認 M-11 / video / 自動検査 #### 束はデータの時間の順に現れ、焦点は最後 系列そのものに時間の順がある図（1 本が 1 年の束、発生順のある出来事の点）は、その順に一つずつ置く ── 古い年から新しい年へ、下の線から上の線へ。束が全部置かれてから基準（平均・帯）が現れ、**焦点（今年の 1 本と名指し）は最後**。今年が束から出ていく瞬間が、そうして初めて見える。検査は段取りを実際に回し、各要素が最初に見える時刻を測って順を突き合わせる。 根拠：実測（2026-09-05、夏の束 87 本）。型は部品に sequence / focus の役どころを付けるだけ / 実装：人が制作物を確認 T-01 / card / 人が確認 #### 観察のレジスターに立つ 見出しは図に見えているパターンを名指す。規範・断定・扇動をしない。「〜すべきだ」「危機」「衝撃」は観察ではない。**語彙は T-06 が機械で見る（売り言葉と価値判断の表）。レジスターそのものは人が見る** ── 表に無い語でも、良し悪しを先に決めてから図を選んでいれば、それはもう観察ではない。 根拠：SEE 編集原則 ＋ v5.1 08 / 実装：人が制作物を確認 T-02 / card / 自動検査 #### 見出しは文ではなく名指し 常体。句点で終えない。問いかけにしない。和文は全角17字以内、欧文は 68 字以内（46pt で3行）。1行の切れ目は改行文字で指定する。 根拠：v5.1 08 見出しの作法 / 実装：人が制作物を確認 T-03 / card / 自動検査 #### 結論の数字と術語は見出しに置かない 測った量（+1.73°C・429.1ppm・16万km²）と術語（偏差・パーセンタイル・extent）は本文に潜ませる。見出しが運ぶのは数の**向き**か、例外の**無さ**。 根拠：v5.1 08 / 実装：人が制作物を確認 T-04 / card / 自動検査 #### landing は読み方を渡す。凡例の説明にしない 「色は…を表す」「縦軸は…」は凡例であって読み方ではない。何を1本が表すか、どこを見るか、何と比べたかを渡す。「〜は含まない」を書いてよい。和文54字・欧文100字以内。 根拠：v5.1 08 / 実装：人が制作物を確認 T-05 / card / 自動検査 #### 出典に観測日がある データ名・基準期間・観測日・暫定の別・ライセンスを2行以内に。「今日」「最新」と書くなら、その日付がどこかに必ずある。 根拠：v5.1 07「不確かさを描く」 / 実装：人が制作物を確認 T-06 / card / 自動検査 #### 使わない語がある 二群ある。**売り言葉**（革新的・イノベーション・ソリューション・シームレス／innovative・revolutionary・seamless・unprecedented・alarming）と、**価値判断・規範**（優しい・こわい・ひどい・深刻・正しい・愚か・危険・脅威・過激・〜すべきだ／gentle・scary・devastating・dangerous・wrong・foolish・should）。図に現れているのは量であって善悪ではない。良し悪しは読者が決める ── 作り手が先に決めてしまうと、図は根拠ではなく飾りになる。絵文字も使わない。表は norm.BANNED と norm.JUDGEMENT。 根拠：v5.1 08「使わない語」＋ T-01 の語彙側 / 実装：人が制作物を確認 T-07 / card / 自動検査 #### 同じものを2つの言葉で呼ばない 台帳の語彙（norm.LEXICON）に載っている言い換えを使う。「平年」は書かず基準期間を書く。「anomaly」は書かず difference from … と書く。 根拠：20枚目のカードが1枚目と違う語を使わないため / 実装：人が制作物を確認 T-08 / card / 人が確認 #### 本文の数量は、図でその量に使った色で組む landing の中の数字を図の色で太く組めば、凡例を置かずに本文が凡例になる。1文に2つまで。数字以外の語には使わない。 根拠：NYT の作法 ＋ F-02 / 実装：人が制作物を確認 T-09 / card / 自動検査 #### 和欧混植は組版で解く 和文を含む行は欧文連も同じ書体・同じウェイト。約物の隣に四分アキを入れない。数量は単位ごと、カタカナ語はひと続きで次行へ送る。 根拠：v5.1 03 Typography ＋ doc H §3 / 実装：人が制作物を確認 T-10 / pair / 自動検査 #### 二言語で数量・日付・単位が一致する 和文版と欧文版から数量と年を抜き出して突き合わせ、1つでも違えば発行しない。訳のずれは、片方が古いデータのまま残ることで起きる。丸めの差は 1% まで許す（和文の「万」と欧文の k は位取りが違うので、16万km² と 159k km² は同じ量の別の丸め）。 根拠：X-04 の言葉側 / 実装：人が制作物を確認 T-11 / card / 自動検査 #### 図の中の言葉も、同じ台帳で書く 図題・図中の注記・数字の札の文は、見出しや landing と同じ語の検査を通る（T-06 使わない語 ＋ T-07 台帳の語彙）。四つのテキストスロットだけを見ていると、抜け道が開く ── 「優しい日本と、こわい日本」は見出しに置けば落ちるのに、塗り分けの図題に置けば通ってしまっていた。図の中は言葉の数が少ないぶん、一語が図全体の意味を決める。 根拠：実測（2026-09-06）: 図中の注記はどの検査も通っていなかった / 実装：人が制作物を確認 CP-01 / content / 人が確認 #### 主張とデータの範囲を揃える 制作前に対象期間・地域・単位・基準期間・分母・網羅性を記録する。観測、補間、推定、シナリオ、地理的背景を区別する。施設数を電力消費へ、流域面積の割合を水量の減少率へ読み替えない。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-02 / content / 人が確認 #### 本文と注記の階層を分ける 本文は現象と自然・暮らしの関係を進める。比較条件や図の読み方は近くに見出し付き注記を置く。対象年・予測・分母など主張を変える条件は数値の近くにも残す。注記は色と余白で区別し、十分なコントラストを保ち、原稿保存でも落とさない。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-03 / content / 人が確認 #### 現象を主役に、日付と単位を読める位置へ 図版の主役を文字で隠さない。コピー、観測期間、数値と単位・分母、凡例、注記に階層を設ける。文字トークンは開始値として使い、実際のスマートフォン表示で確認する。凡例の色・線幅・高さの意味を記し、背景や未評価を正常値として見せない。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-04 / content / 人が確認 #### 日英と媒体別の構図を同じデータから組む 日本語記事には日本語図版を用意し、日英の値・期間・尺度・出典を揃える。文字量に合わせて改行と配置を変える。4:5・9:16・2:3は対象媒体に応じた作例で、主役や注記を切る単純クロップをしない。写真は各言語の説明と作者・ライセンス・撮影日・加工の有無を付す。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-05 / content / 人が確認 #### データの変化と視点の移動を分ける 動画化前に開始・中間・終了の構図を確認する。固定時点の地球回転を時間変化と見せず、自転を表す場合は西から東を地点で検証する。ループ指定時は姿勢・ラベル・データ・音声の接続と停止感をエンコード後に確認する。18秒・60fpsを他作品の固定条件にしない。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-06 / content / 人が確認 #### 制作・承認・配信を別の状態として見せる 1テーマ1入口を維持し、P1〜P3、確認状態、媒体別の配信状態を別に記録する。配信に回した状態を公開済みと呼ばない。承認revision・更新日・更新内容を表示し、更新前のサイトを最新版と案内しない。P1は主張と絵、P2は構成と主要場面、P3は全文と配信素材を揃える。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 CP-07 / content / 人が確認 #### 必要な素材だけ読み込み、更新する 一覧は軽いサムネイルと状態を表示し、詳細ページで必要な画像を読み込む。レビュー動画はポスターと再生操作から始める。原本・レビュー用・配信用を区別し、原稿更新で未変更の動画を再生成しない。素材の不変URLと版を維持し、保存先を分ける場合も閲覧権限を変えない。 根拠：2026-09-26 content production retrospective / freshwater approved example / 実装：人が制作物を確認 09 — Rules × inputs ## 少ない規則 × 多い入力 三つの工程は制約であって、多様性の源ではない。制約が生むのは一貫性で、多様性はもう一つの軸から来る。 少ない規則と多い入力の組み合わせが、量と多様性を保ちながら「誰の仕事か一目で分かる」状態を作る。Economist の日刊チャートや Kurzgesagt がそうである。 ![左に三つの工程という少ない規則、中に発見の種類・現れ方・媒体・番組・五群という多い入力、右にこの台帳がいま刷った実際のカードの格子。](/sorah-pjt/dataviz/img/diagram_rules.png) 規則は一貫性を、入力は多様性を担う。右の格子はこの台帳がいま刷ったカードそのもの。暖まる地球の偏差を毎日出す番組は、wonder 系の対重がないと疲弊を運ぶ。 ### 番組への差分（dv_content_formats） | 群 | 差分 | 台帳側の受け | SIGNAL | 発見カテゴリに「翻訳（analog）」を追加。Landing の型に「〜は含まない」を許す | 07 章「暦の翻訳」／T-04 に明文化 | STUDY | サブシリーズ IF（反実仮想・予測の帯）。uncertainty で動く。月 1 | 08 章の初回 | WORK | W1 作品札を「刷った日＝固定された参照、今日＝偏差」として compare の関係で書く | 未着手（判型 P の型と一緒に） | STUDIO | 初回記事は「機械が見つけた四つの食い違い」（T-10 の結果）。自己批評の公開が中庸の証明になる | 10 章の失敗事例がその素材 | R1 記事 | 順路の「不確かさ」節を「見えないもの」に改名し、除外条件を一文で書く | 02 章の小見出しを合わせた | 番組 | wonder 系（aqua / sylvania）を気候番組の対重として位置づけ、「良くなっているものも同じ作法で数える」を役割に明記 | — ### 取らないもの - Anadol の方法（ML 生成・建築スケール・没入）。取るのは媒体が像を決めるという事実だけ。 - 手の感触を主題にする系譜（Dear Data、Data Physicalization、手描き）。SORAH の媒体は画面・動画・印刷であり、手の痕跡はスコープ外。 - 報道の速報性と、結論を言い切る見出し。 - ダッシュボードの網羅。渡された探索は読者の 10〜15% しか使わない。 - bar chart race 型の動き。合同性原則に反する。 - 気候番組での楽観の演出。楽観は wonder 系番組の役割。 - 商品リンクの日次付与。SEE の声が壊れる。売る一枚は WORK だけ。 - 翻訳先を別の物から持ち込むこと（「東京ドーム何個分」）。翻訳先は同じ観測列の中から。 10 — Mistakes, we've drawn a few ## 失敗事例 Economist の分類（誤解を招く／混乱させる／要点を隠す）で、自分たちの失敗を残す。各型の Don't 図もここに属する。直したあとの見出しは、そのあと更に直っていることがある（v0.1 → v0.2 → v0.3）。現在の版は 07 章の図版が正。 | 日付 | 分類 | 直す前 | 直したあと | 原則 | 2026.08.31 | 要点を隠す | この10年の平年は、最初の30年より1.3°C高い | 青い縞は、1976年で終わっている（v0.1）→ 濃い赤の3本は、最後の3年（v0.2、データを日本に） | 見出しは図に見えているパターンを名指す。術語と結論の数字を置かない | 2026.08.31 | 誤解を招く | 北極海氷の縁（地図）で「日本7個分ちいさくなった」 | 量は折れ線（ゼロ起点）へ。地図は場所だけ | 量の発見に地図を使わない | 2026.08.31 | 誤解を招く | この30日、揺れが届いた範囲に5,905万人が暮らす | （取り下げ）→ 断面「西へ行くほど、震源は深い」 | 定義できない量を数えない。相関が出ない日は出さない | 2026.08.31 | 混乱させる | 1本が1年。色は1951–1980年平均との差。 | 1本が1年、128本。平年（1991–2020年）より+1°C以上暑い年は2023年から続く3年だけ | landing は凡例ではなく読み方。基準期間は図題へ | 2026.09.02 | 混乱させる | 小さな多数のパネル名が form の罫に衝突、年ラベルが次段のパネル名に重なる | セルの上にパネル名の高さを取り、年ラベルは最下段の下に。各パネルの右上に結論の数字 | 格子は余白を先に取る。12 枚を見比べさせず、12 個の数字を読ませる | 2026.09.02 | 誤解を招く | 氷は、オレンジの線の内側に縮んだ | 氷が退いたのは、シベリア側（東シベリア海 −16万km²、チュクチ海 +8万km²） | 海ごとに数えてから書く。合計だけ見ると「戻った海」が消える | 2026.09.02 | 要点を隠す | 8 型のうち 6 型が同じデータ（GISTEMP） | 型ごとに「その型でしか見えない発見」を持つデータへ（気象庁・Niño 3.4・HadCRUT5・東京・NSIDC の海別・マウナロア） | 型の選び方は、データの選び方 | 2026.09.02 | 混乱させる | 平均線の名前を線の上に乗せ、記録年の名前を線に重ねた | 山の左肩・右半分の最大点の真上に。重ねるときは紙色の縁取り | 名前は線に乗せない | 2026.09.02 | 混乱させる | 線末ラベルが隣の山の名前と競った（Niño 3.4） | 右に 5 年の余白を取り、札は図題の右の空きへ、点と札を引き出し線でつなぐ | 札の置き場を先に空ける | 2026.09.02 | 要点を隠す | AVG #555555（ACCENT と明度差 10） | AVG #808080（明度差 33） | グレースケールで生きる。検査に落ちた色は使わない | 2026.09.03 | 混乱させる | 見出しの数字だけ太く見える（「2026年は、7か月すべてが帯の上」） | 和文を含む行は欧文連も同じ Noto の同じウェイトで組む | 黒みの実測で Noto DemiLight .277 に対し Gotham Medium .397。混植で1.43倍の段差ができていた | 2026.09.03 | 誤解を招く | 目盛の数値を Gotham（不等幅）で組み、桁が縦に揃っていなかった | 数字は Noto（実質等幅）で組む | DGL 07「数値は必ずタブラー数字」。手元の書体で満たすのは Noto だけ | 2026.09.03 | 要点を隠す | 図題を INK の太字で置き、注釈も名指しも全部太字だった | 太いのは見出しだけ。図題は GRAY_MID の Medium、名指しは Medium、Bold は数字の札だけ | 商品は「太いのが題だけ」。太さで階層を作らない | 2026.09.03 | 混乱させる | 地図の図題の2行目だけ右にインデントしていた | Card.settle() で枠を確定させてから注釈を置く | aspect 固定の軸は最初に文字を実測した時点で枠が縮む。実装の不具合 | — | 混乱させる（連作） | パネルごとに軸や地色を変えた連作 | 同じ判型・同じ地・同じ余白・同じ目盛で 5〜23 枚（Ikeda data.gram） | 連作は 1 パネル 1 データセット、差は数字で言う | — | 誤解を招く（数字の札） | 誤差 ±5 の量を小数 2 桁で書く | 桁は測定精度に合わせる（CO₂ 0.1ppm・気温 0.01°C・面積 万km²） | 桁は精度の主張 | 2026.09.03 | 要点を隠す | 和文の地を DemiLight（黒み .277）と Regular（.306）で組み、1080px の図版で図の線に負けていた | 地を Medium（.368）に上げ、ウェイトを2段に。太いのは名指しと数字だけ | 紙の上の細さと、画面の上の細さは違う。実測して決める | 2026.09.03 | 混乱させる | 「タブラー数字」を散文にも適用し、Gotham の細い 1 が枠の中で泳いだ（「vs. the 1961–1990 mean」） | 等幅送りは桁が縦に揃う場所だけ ── 目盛・パネルの値・数字の札 | 規定の適用範囲を、規定の言葉どおりに読む | 2026.09.03 | 混乱させる | 欧文版で本文の数量に色を付けると、その前後の空白が消えた（「widened it to0.42°Cin 1942」） | 和欧の境界の空白を落とすのは和文版だけ。欧文版では空白は語間なので残す | 組版の規則は言語ごとに持つ。共通化した瞬間に片方が壊れる | 2026.09.03 | 混乱させる | 和文の折り返しが「東シベリ／ア海」「8万km／²」と語の途中で折れた | 数量は単位ごと、カタカナ語はひと続きで次行へ送る禁則を _wrap_ja に追加 | 折り返しは体裁ではなく可読性の規則 | 2026.09.03 | 混乱させる | 海氷図で「E. Siberian −159k km²」が隣の「Laptev」に重なった（欧文は同じ情報に 1.6 倍の幅を要する） | 名指しを先に置き、ぶつかる海の名前は落とす | 重ねるより黙るほうがいい | 2026.09.03 | 誤解を招く | 欧文版で Gotham に無い字（≥ ←→）が豆腐になった | 持っているかを書体に直接訊く（FT2Font.get_charmap）。無い字だけ1字ずつもう一方の書体へ | 書体の中身を推測しない | 2026.09.05 | 要点を隠す（v2.0） | 1枚に太字の名指しが 2〜12 個あった（今年と記録年、開いた海と戻った海、山の名前 5 つ、12 パネルの数字全部、国名と量） | 焦点は一つ。太字と色は 1 枚に 1 つだけ（X-07 を機械化、Card._leads）。残りは地の重さの注記へ退避 | 名前は一つのものにしか付かない。削ぐことと隠すことは違う | 2026.09.05 | 誤解を招く（v2.0） | 基準期間が出典にだけあり、図の中に無い型があった | 型が基準・除外条件を宣言し（Card.basis）、図題か注記に無ければ保存しない（X-09） | 立場は基準の選び方にだけ現れる。だから基準は図の中に | 2026.09.06 | 誤解を招く（v2.4） | 「優しい日本と、こわい日本」が検査を素通りした ── 短くすれば見出しでも通り、図題に置けば長くても通った | 価値判断・規範の語を台帳に置き（norm.JUDGEMENT）、図の中の言葉にも同じ検査をかける（T-11） | 図が言えるのは量であって善悪ではない。日常語でできた価値判断は、長さの検査も文体の検査も素通りする | 2026.09.06 | 要点を隠す（v2.4） | 「率でしか塗らない」が効きすぎて、開票マップ（政党＝種類）も被災履歴マップ（回数）も作れなかった | 塗りを率・種類・回数に分け、塗る前に宣言させた（F-11）。禁じるのは分母を持たない量だけ | 禁則は「何を許さないか」で書く。「何だけを許すか」で書くと、思っていなかったものまで落ちる | 2026.09.05 | 混乱させる（v2.0） | 暦の翻訳の見出しを「春が3週間早い」と書きかけた | 「東京の3月は、百年前の4月はじめ」── 翻訳の観察で止める。日数は landing へ | 焦点は観察であって結論ではない（X-08） | 2026.09.05 | 誤解を招く（v2.0） | IF の見出しに「1.5°C」を置きかけた | 「点線が線に届くのは、2030年代」── 閾値の数字は図中の基準線の名前と landing へ | 結論の数字は見出しに置かない（T-03）。「もし」でも同じ | 2026.09.06 | 誤解を招く（v2.1） | 「データの時間で刷る」を、横軸を左から右へ拭くことだと実装していた。87 本の束が一斉に現れ、今年の線がどこから出てきたのか見えなかった | 束をデータ自身の順に置く ── 1940年の線が先、今年が最後。基準は束のあと、焦点はその後（M-11、段取りを実測して検査） | 時間で刷るとは、紙の左端から刷ることではなく、データの時間の順に置くこと | 2026.09.06 | 混乱させる（v2.1） | 台帳の図解 3 点を、方向性ドキュメントの SVG から流用していた | engine/diagrams.py で規範（条番号）と実データ（ERA5 の夏 87 本、いま刷ったカード）から描き直した | 台帳が「描かずに写す」と書いている以上、台帳の図解も写したものでなければならない | 2026.09.06 | 誤解を招く（v2.2） | 地図の型が「量」と「2時点の比較」しか無く、率の地図を総数のコロプレスで代用しかけた | コロプレス（率）を起こし、率でしか塗らないを型の規定に。同じ焼失面積で、広さの1位（コンゴ）と割合の1位（ギニア）が違うことが図で見える | 塗られるのは面積であって量ではない。コロプレスが答えられるのは率だけ | 2026.09.06 | 要点を隠す（v2.2） | 1か月の地震を全部点で置いたら、濃いのはアメリカだった ── 「地震が多い場所」と読める図になっていた | 検出能の境目（M4.5 以上は世界共通）を basis() で宣言し、色を持つのはその部分集合だけに。帯ごとの回数と観測網の割合を数字の格子に置いた | 点の濃さは、事象の濃さと観測網の濃さの積。見えないものを図の中に書く | 2026.09.06 | 誤解を招く（v2.3） | ホルムズ海峡の通航隻数に 2026 年を入れかけた。3 月から日 3〜6 隻に落ちていて、そのまま平均すると「通航が激減した」図になる | 28 の水路のうちこの海峡だけが同じ月から桁で落ちていることを確かめ、2019–2025 年で数えた。入れなかったことを図題と出典に書いた | AIS の数は受信状況で変わる。落ちた期間を平均に混ぜると、量が減ったように見える | 2026.09.06 | 混乱させる（v2.3） | 「25km」が欧文版だけ数量として読まれ、和文版と突き合わない（k を千倍の接頭辞、m を単位と読んでいた）。同じ図の同じ数字が、二言語で別のものになっていた | km を単位として読み、単位の切れ目を  ではなく「英数字が続かないこと」で取る（和文では「25km四方」の m と 四 の間に境界が無い） | 二言語の検査は、両方の言語で同じように読めて初めて検査になる | 2026.09.06 | 要点を隠す（v2.3） | ヨーロッパの火を合計だけで見て「平年の半分」と書きかけた | 区画ごとに基準と比べると、フランス 2.8 倍・スペイン 2.2 倍。合計と各区画が逆を向いていた | 分母が場所ごとに違う量は、合計では答えられない ## 継承台帳・改版履歴 改版履歴は当時の判断の記録です。本文に古い配色・自動再生などの記述がある場合も、新規制作の指示として使用しません。現在の置き換えは上の継承台帳を参照します。 [Web版](https://sorah.io/sorah-pjt/design/implementation/migration/) ## 25セクションの掲載先 | 旧版の情報 | 現在の掲載先 | 扱い | Design Guidelines / 3つの原則 | [開く](/sorah-pjt/design/ui/#ui-principles) | 現行に継承・適用範囲を明示 | Design Guidelines / ロゴ | [開く](/sorah-pjt/design/logo/) | 現行に継承・適用範囲を明示 | Design Guidelines / カラー | [開く](/sorah-pjt/design/ui/#ui-color) | 現行に継承・適用範囲を明示 | Design Guidelines / タイポグラフィ | [開く](/sorah-pjt/design/ui/#ui-type) | 現行に継承・適用範囲を明示 | Design Guidelines / レイアウトと余白 | [開く](/sorah-pjt/design/ui/#ui-layout) | 現行に継承・適用範囲を明示 | Design Guidelines / コンポーネント | [開く](/sorah-pjt/design/ui/#ui-components) | 現行に継承・適用範囲を明示 | Design Guidelines / モーション | [開く](/sorah-pjt/design/ui/#ui-motion) | 現行に継承・適用範囲を明示 | Design Guidelines / ボイス＆トーン | [開く](/sorah-pjt/design/ui/#ui-voice) | 現行に継承・適用範囲を明示 | Design Guidelines / iOS作法（iOS 26 / Liquid Glass対応） | [開く](/sorah-pjt/design/ui/#ui-ios) | 現行に継承・適用範囲を明示 | Design Guidelines / アクセシビリティ | [開く](/sorah-pjt/design/ui/#ui-a11y) | 現行に継承・適用範囲を明示 | DV Library / 描く技術ではなく、写す技術 | [開く](/sorah-pjt/dataviz/editorial/#dv-premise) | 現行に継承・適用範囲を明示 | DV Library / 三つの工程 — 光を当てる、焦点を結ぶ、写し取る | [開く](/sorah-pjt/dataviz/editorial/#dv-steps) | 現行に継承・適用範囲を明示 | DV Library / 光を当てる — そこにあるものを見えるようにする | [開く](/sorah-pjt/dataviz/editorial/#dv-illuminate) | 現行に継承・適用範囲を明示 | DV Library / 焦点を結ぶ — 一つを選び、言葉を与える | [開く](/sorah-pjt/dataviz/editorial/#dv-focus) | 現行に継承・適用範囲を明示 | Design Guidelines / データビジュアライゼーション | [開く](/sorah-pjt/dataviz/editorial/#ui-dataviz) | 現行に継承・適用範囲を明示 | DV Library / 発見の種類から型を引く | [開く](/sorah-pjt/design/patterns/catalog/#dv-finding) | 現行に継承・適用範囲を明示 | DV Library / 型の台帳 | [開く](/sorah-pjt/design/patterns/catalog/#dv-forms) | 現行に継承・適用範囲を明示 | DV Library / 型の検証 — 外から来た問いと、「もし」 | [開く](/sorah-pjt/design/patterns/catalog/#dv-studies) | 現行に継承・適用範囲を明示 | DV Library / 写し取る — 媒体に定着させる | [開く](/sorah-pjt/design/patterns/media/#dv-capture) | 現行に継承・適用範囲を明示 | DV Library / 検査の契約 | [開く](/sorah-pjt/design/implementation/production/#dv-contract) | 現行に継承・適用範囲を明示 | DV Library / 少ない規則 × 多い入力 | [開く](/sorah-pjt/design/implementation/production/#dv-inputs) | 現行に継承・適用範囲を明示 | DV Library / 失敗事例 | [開く](/sorah-pjt/design/implementation/production/#dv-mistakes) | 現行に継承・適用範囲を明示 | Design Guidelines / 参照と改版 | [開く](/sorah-pjt/design/implementation/migration/#ui-refs) | 現行に継承・適用範囲を明示 | DV Library / 参照 | [開く](/sorah-pjt/design/implementation/migration/#dv-refs) | 現行に継承・適用範囲を明示 | Design Guidelines / 機械可読スペック | [開く](/sorah-pjt/design/DESIGN.md) | 再生成：重複キー・旧Scene色・自動再生を解消 ## 置き換えと適用範囲 ### Sceneの配色 旧記述：App 2024の4配色を値のコピーで指定。 現在：Earth Hues v5 / Grounds v1の題材IDと版を参照。旧作例の画像は制作例として保持し、新しいSceneの配色には使わない。 ### UIのダーク配色 旧記述：#0A0A0A・#141414・ネイビーの定義が混在。 現在：地 #0C1428 / 面 #141F36。ガラスは浮く操作に加え、本文・コンテンツカードにも使用可。合成後の可読性を確認する。 ### 再生と回転 旧記述：App 2024の自動開始とv5.3の初期停止が併記。 現在：時系列Sceneは表示時に自動再生。再生・停止、時刻指定を常時操作でき、非表示時と動きを減らす設定で停止。自動回転や編集動画の自動開始は対象外。 ### 文字の最小サイズ 旧記述：本文14px、キッカー10px、タブ9.5pxの旧例外が残存。 現在：本文15px、補助11px。アイコン付きタブラベルに限り9.5pxを許容し、文字拡大に追従する。大きな文字のコントラスト基準は24px通常または18.66px太字。 ### ボタンとガラス 旧記述：青90%のティントに白文字を載せる旧作例。 現在：ライトのボタン・リンク・アイコンは#006BFFに統一し、ボタン文字は白。白との比は4.62:1（旧版の4.0:1を訂正）。ダークは既定のaction / onAction。ガラスは本文カードにも使用でき、実際の背景との合成後に検証し、不透明な代替を持つ。 ### 製品固有の部品 旧記述：BODY I-OのAIピル・ヘッダー、SORAH AppのNFCや認証が全製品の規範に混在。 現在：製品・機能別の構成例と明示。共通化するのは寸法・可読性・状態・回復導線。 ### ブランドの表現 旧記述：空をUI背景に使った過去仕様、白数値を広いグラデーションに載せる例。 現在：空はアートワークと大きなタイトル専用。UI背景は単色。ブランド面の白文字は暗い位置または下地でコントラストを確保。 ### 地理Sceneと編集カード 旧記述：凡例禁止・1枚1色相・夜版制限が全媒体の規範に見える。 現在：F/M/T/Xはカード・動画・二言語の対象範囲。地理SceneとCrosspointはS-01〜12。18の型と過去の見本は型の資料として復帰。 ### 分類地図 旧記述：区画の種類という型とF-04の分類色禁止が併存。 現在：分類データには種類ごとの色分けを認め、分類名を併記する。量の大小には順序色、基準との差には発散色を使う。G1の分類色は既存の上限4区分を維持。今回の比較作例の色値は正式パレットではない。 ### スキャンの動き 旧記述：本文1.8sと詳細表2.6sが不一致。 現在：機能別の作例として2.6s・0.85s間隔・3面に統一。OSシート表示後は停止。 ### 旧DESIGN.md 旧記述：copyキーの重複、旧配色、自動再生、紙面とUIの規定が混在。 現在：Foundations JSONへロゴ・部品・余白・組版・言葉・iOS・動きを統合。詳細本文と43条の制作検査を同じ正本からDESIGN.mdへ収録。 ### 改版履歴と原資料 旧記述：新しい履歴だけが表に出て、過去の判断へ辿りにくい。 現在：旧版25セクションの掲載先を台帳化。両ガイドの過去履歴と参照をこのページに保存。旧DESIGN.mdは原本として保存し、現行規範には使用しない。 ### D1 / UI比較 A 旧記述：共通の実装・表示規範が未確定。 現在：値と短い状態文で静かに伝える。ゼロ・欠測・対象範囲外・読み込み中・取得失敗を区別し、再試行で地点と時刻を保持。 ### D2 / UI比較 C 旧記述：共通の実装・表示規範が未確定。 現在：2つの連続面は面＋値付きの等値線。双方の単位・集計期間と期間不一致を明示し、同時発生を暗示しない。 ### D3 / UI比較 B 旧記述：共通の実装・表示規範が未確定。 現在：主値と補間表示ラベルを常時表示し、元値・時刻・座標・方法は操作できる詳細へ。 ### D4 / UI比較 B 旧記述：共通の実装・表示規範が未確定。 現在：UI・記事・図版・動画・印刷をPoppins／Noto Sans JPへ統一。実書体とウェイトを同梱し、VI原版ロゴは保持する。 ### D5 / UI比較 B 旧記述：共通の実装・表示規範が未確定。 現在：更新する部品だけ待機。旧値の日時と未反映の選択を区別し、失敗時は選択を保持して再試行。古い応答を現在の選択へ適用しない。 ### 記事連動コンテンツの適用範囲 旧記述：G1の12秒・30fps、欧文版先行を全ての映像・記事へ適用しがちだった。 現在：G1の既定を保持し、記事連動の動くポスターはCP-01〜07、contentEditorial、editorialPosterを適用。対象媒体・言語・目的から構図と尺を決める。2026-09-20 訂正と採用方針 以下の旧履歴は当時の記録です。#006BFFと不透明な白のコントラストは4.62:1で、履歴中の4.0:1とする説明は誤りです。現行の操作色、ガラス、文字サイズ、自動再生、分類色は上の「置き換えと適用範囲」を参照してください。 11 — References ## 参照と改版 正典: SORAH VI GUIDE（ロゴ・CI/UIカラー・タイポグラフィの原典。本ページのロゴはVI原版OLデータから抽出）／ SORAH Document Style（資料・ドキュメントのトーン） 原案: SORAH App（2024）── アートディレクターによる画面遷移仕様（2024-09-03）・UIデザイン31画面（SORAH_APP+++ 0902）・Data Scape仕様書（2024-10-18）・実機キャプチャ（2025-01）。v5.2で要素を各セクションに取り込んだ（From SORAH App 2024 の印） 参照: [Apple Human Interface Guidelines（iOS 26 / Liquid Glass）](https://developer.apple.com/design/human-interface-guidelines) · [iOS & iPadOS 26 Figma Library](https://www.figma.com/community/file/1527721578857867021/ios-and-ipados-26) · [Material 3 Expressive（バネのあるモーション・形態変化）](https://m3.material.io/) · [Google Stitch — DESIGN.md（機械可読スペック形式）](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-design-md/) · [design.md spec（GitHub）](https://github.com/google-labs-code/design.md) · Strava（数値の走査性・動きのあるテクスチャー） · Apple Fitness（ダーク面とリング・大数字） · ChatGPT（抑制されたニュートラル面・会話UI・トーン） · NYT Graphics / The Upshot（注釈層・スクロール前提・再説明テスト） · WSJ Graphics（ダッシュボードからの離脱・連続ものは系として作る） · Dona Wong『WSJ Guide to Information Graphics』（図形式の機能・色は階層） · WIRED（見えないものに形を与える・For Future Reference） 改版: v5.3 — 2026-09-06 アクセシビリティ（10）を追補。SORAHアプリ v0.7 でガイドを実装に当て、自動監査（コントラスト・文字サイズ・タップ領域を light/dark × 100%/200% で走査）にかけた結果を差し戻した。ボタンの地に --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 初版。 このガイドの変更はSORAHの承認を経て改版する。色・コンポーネントの追加は必ずここに反映してから実装する。 11 — References ## 参照 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件）は、別ページの [事例集](/sorah-pjt/dataviz/cases/) にある。この章は台帳が規範を組み立てるときに引いた文献で、事例集とは別のもの。 | 領域 | 出典 | 台帳への寄与 | 方向性（四つの共感） | 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 の作り方