日経電子版を支えていく Kasane Design System

Transcript

1. ⽇経電⼦版を⽀えていく Kasane Design System デジタル編成ユニット Webチーム ⽥中 泰⽃ / Taito Tanaka Frontend Conference Fukuoka 2026/09/12 Webチーム - もっといいメディア、もっといいウェブをつくる © Nikkei Inc.
2. ⾃⼰紹介 ⽥中 泰⽃ / Taito Tanaka (@taitotnk) • デジタル編成ユニット Web チーム 所属 • 2023 年新卒⼊社 • ⽇経電⼦版 Web の開発、Design System の構築 • アクセシビリティ、サッカー (J リーグ) Better insights for a better world © Nikkei Inc.
3. 今回話すこと • 過去から学ぶ持続可能なデザインシステムとは • Kasane Design System での取り組み Better insights for a better world © Nikkei Inc.
4. ⽇経電⼦版 • www.nikkei.com • 2010 年 3 ⽉創刊 • 有料会員: 106 万⼈ (2026 年 1 ⽉時点) • Navigation Request: 約 3000 万/⽇ (Web のみ) • 新しい記事の投稿: 1000 /⽇ ※ 資料公開⽤に画像を⾮表⽰にしています Better insights for a better world © Nikkei Inc.
5. 新しいデザインシステム • アクセシビリティのボトムアップ • AI 活⽤ • ダークモードへシームレスに対応したい • ⾃分たちの拠り所を整備しておきたい • ⾞輪の再発明を避けて⼀貫性を担保 • デザインと実装のブレをなくす • デザインと実装の⺠主化 Better insights for a better world © Nikkei Inc.
6. 命名理由 • 重ね合わせ / 積み重ねる • 活版印刷の技法の「重ね刷り」 • 新聞が積み重なっているイメージ • コンポーネントを重ねて⼤きなものを構築 • 廃れないように積み重ねていきたい願い Better insights for a better world © Nikkei Inc.
7. 過去から学ぶ 持続可能なデザインシステムとは Better insights for a better world © Nikkei Inc.
8. ⽇経グループのデザインシステムの先駆け Origami 2015 年に買収した英メディア Financial Times のデザインシステム 出典 [1] Better insights for a better world © Nikkei Inc.
9. ⽇経の最初のデザインシステム (2016) • 全社的に使うことを想定していた • Origami の思想も組み込まれていた • 当時の技術的制約の中でよく考えられた設計 ◦ Nikkei UI Sass, Handlebars, Vanilla JS, Fractal ▪ 今のような便利な CSS プロパティは なかった ▪ Better insights for a better world IE も考慮する必要があった © Nikkei Inc.
10. ⽇経の最初のデザインシステム (2016) • 全社的に使うことを想定していた • Origami の思想も組み込まれていた • 当時の技術的制約の中でよく考えられた設計 ◦ Nikkei UI Sass, Handlebars, Vanilla JS, Fractal ▪ 今のような便利な CSS プロパティは なかった ▪ Better insights for a better world 続かなかった… IE も考慮する必要があった © Nikkei Inc.
11. 続かなかった理由 • 事業要件の複雑化 ◦ アプリケーションの数が肥⼤化し、チームのリソースにも限界があった • 組織の再編によりチームが解散した ◦ リテラシーが⾼いメンバーがメンテナンスする前提で作られていた ◦ 意思決定などのコンテキストもコアメンバーの脳内に留まっていた • 技術のパラダイムシフトに追従できなかった ◦ メンバーの世代交代で Sass を書くのが当たり前ではなくなった ◦ プロダクト側の 2 回の基盤移⾏の技術刷新に取り残された Better insights for a better world © Nikkei Inc.
12. 過去から学ぶ • 無理のない体制を確保する • コンテキストを残す • Web 標準に寄せる Better insights for a better world © Nikkei Inc.
13. 過去から学ぶ • 無理のない体制を確保する • コンテキストを残す • Web 標準に寄せる Better insights for a better world © Nikkei Inc.
14. ⽇本経済新聞社の関連サービス Better insights for a better world © Nikkei Inc.
15. ⽇本経済新聞社の関連サービス これ全部サポートする？🤔 Better insights for a better world © Nikkei Inc.
16. 適⽤対象を絞る • 全社的なデザインシステムにするとステークホルダーが多すぎる ◦ 意思決定の難しさ ◦ 開発速度の低下 • 成熟している全サービスに組み込んでいくのは⾮現実的 • → 「⽇経電⼦版」 のみを対象にする Better insights for a better world © Nikkei Inc.
17. 最⼩限の⼈数で集中的に取り組む エンジニア × 2 デザイナー × 2 週 1 の定例と⾮同期の議論 意思決定がしやすい⼈数 & モチベーションの⾼いメンバーで編成 Better insights for a better world © Nikkei Inc.
18. 過去から学ぶ • 無理のない体制を確保する • コンテキストを残す • Web 標準に寄せる Better insights for a better world © Nikkei Inc.
19. コンテキストを残す LLM Wiki の活⽤ • https://gist.github.com/karpathy/442a6bf 555914893e9891c11519de94f • /kasane-wiki-ingest: ⼀次情報を取り込む • /kasane-wiki-query: 経緯を調べ、Wiki を 育てる • /kasane-wiki-lint: 内部の整合性を検査する Better insights for a better world © Nikkei Inc.
20. 過去から学ぶ • 無理のない体制を確保する • コンテキストを残す • Web 標準に寄せる Better insights for a better world © Nikkei Inc.
21. Web 標準に寄せる • 基盤移⾏で Sass を剥がすことに苦労した • 世の中的に Sass は使われなくなった ◦ 特定の技術にベットしていた代償 ◦ 今の CSS はかなり便利になった • → Web 標準に極⼒寄せる ◦ 後⽅互換性が配慮され続け、⻑く残る ◦ Vanilla CSS, Web Components, DTCG Spec など Better insights for a better world © Nikkei Inc.
22. Kasane Design System Better insights for a better world © Nikkei Inc.
23. Kasane Design System の取り組み • 設計思想 • 設計原則 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
24. Kasane Design System の取り組み • 設計思想 • 設計原則 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
25. 設計思想 堅さ 快適さ 明快さ 時事性に応えることができる Better insights for a better world © Nikkei Inc.
26. 堅さ―⽇経らしい堅さを⼤切にする 開発者 エンドユーザー Better insights for a better world • 制約により⽇経のブランドイメージを 守ることができる • 堅実さや信頼感を感じられる • 使っていることが誇らしく感じられる © Nikkei Inc.
27. 快適さ―不快な思いを与えない 開発者 エンドユーザー Better insights for a better world • 快適さが保証される • アクセシビリティが保証される • 混乱する UI を⽬にしない • 個々の特性に依存せず使える © Nikkei Inc.
28. 明快さ―意思決定に迷いを与えない 開発者 エンドユーザー Better insights for a better world • 標準的な表⽰や挙動が保証される • 洗練された⾃由度 • 整備されたドキュメント • ⽇経特有の⽂脈が不要 • 直観的に操作可能 © Nikkei Inc.
29. 3 つの柱により時事性に応えることができる ニュースは常にやってくる。 堅さを⼤切にするからこそ、 嬉しい内容にも悲しい内容にも対応できる。 快適さを⼤切にするからこそ、 毎⽇の体験を⽀え続けることができる。 明快さを⼤切にするからこそ、 新しい情報やコンテンツに注⽬させることができる。 Better insights for a better world © Nikkei Inc.
30. Kasane Design System の取り組み • 設計思想 • 設計原則 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
31. 設計原則 ― 堅さ • デザイントークンから参照する • 規約を読み込まずにブランドイメージを守ることができる 仕組みを考える • 変えられないものを先に決め、仕組みでビジュアルの⾃由 を縛る Better insights for a better world © Nikkei Inc.
32. 設計原則 ― 快適さ • WCAG 2.2 AA 準拠 • パフォーマンスを考慮する • アニメーションは必要最⼩限にする Better insights for a better world © Nikkei Inc.
33. 設計原則 ― 明快さ • 選択肢を最⼩限にする ◦ 例: props による選択肢を極⼒抑える • 新しい機能を⾜すときは同時に削られるものを考える • 新しい独⾃の⾔葉を⽣み出さない ◦ 例: 社内でしか通じない⾔葉で命名しない ◦ 例: label props → aria-label ? innerText ? ▪ aria-label props, <XxxLabel /> として定義すべき • 標準仕様を必ず守る • 世間の UI 慣習を⼤切にする • 些細なことでもドキュメントに残す Better insights for a better world © Nikkei Inc.
34. Kasane Design System の取り組み • 設計原則 • 設計思想 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
35. 全体構成 • TypeScript • Vitest, Chromatic, Storybook • Oxlint, Oxfmt, Stylelint • Changesets • pnpm workspace によるモノレポ ◦ kasane-tokens: デザイントークン ◦ kasane-icons: アイコンアセット ◦ kasane-css: ベーススタイル/コンポーネントライブラリの CSS ◦ kasane-react: React コンポーネントライブラリ ◦ kasane-web-components: ウェブコンポーネントライブラリ Better insights for a better world © Nikkei Inc.
36. 全体構成 Better insights for a better world © Nikkei Inc.
37. 全体構成 Better insights for a better world © Nikkei Inc.
38. kasane-tokens • デザイントークンを集約するパッケージ • Design Tokens Community Group が策定 する Design Tokens Specification に準拠 ◦ Color ◦ Typography ◦ Spacing ◦ Shadow ◦ Corner Radius ◦ Width/Height Better insights for a better world https://www.designtokens.org/tr/2025.10/ © Nikkei Inc.
39. Color の Design Token の構造 意味を持たず、⾊相と明度のみで命名された カラーパレット UI 上の役割‧⽤途に基づいて意味付けされた コンポーネント横断で使う汎⽤カラートークン 特定コンポーネントのバリアント‧状態に紐づいた コンポーネント固有のカラートークン Better insights for a better world © Nikkei Inc.
40. Semantic/Component Token のグルーピング • Text: 通常テキスト • Background: 背景⾊ • Shape: アイコンや装飾など、テキスト以外のオブジェクト • Border: 区切り線 塗る場所でグルーピングすると、⼈間にも AI にもフレンドリーに Better insights for a better world © Nikkei Inc.
41. 全体構成 Better insights for a better world © Nikkei Inc.
42. kasane-css • ベース/コンポーネントスタイルを集約 • Vanilla CSS を採⽤ • ◦ React と Web Components の両⽅で利⽤ ◦ kasane-tokens の Custom Properties を参照 ◦ 現代の技術なら⼗分戦える @layer kasane で利⽤側との詳細度の衝突を避け る設計 ◦ “layering” = “kasane” だけに... Better insights for a better world © Nikkei Inc.
43. なぜ web-components？ • ⽇経電⼦版の中で全てのアプリケーションが React で作られているわけではない ◦ ⼀部のページでは Java + JSP の世代も残って いる • 今は kasane-react と成⻑中 Better insights for a better world © Nikkei Inc.
44. Kasane Design System の取り組み • 設計原則 • 設計思想 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
45. カラーパレットの設計 カラースペース OKLCH Better insights for a better world コントラスト⽐基準 WCAG 2.2 + APCA © Nikkei Inc.
46. カラースペース • OKLCH を採⽤ • LCH の改善版 ◦ OK の意味 ▪ “It is called the Oklab color space, because it is an OK Lab color space.” ▪ • https://bottosson.github.io/posts/oklab/ Lightness (明度), Chroma (彩度), Hue (⾊相) Better insights for a better world © Nikkei Inc.
47. カラースペース 旧カラーパレット: HSL 新カラーパレット: OKLCH Green 90 Blue 90 Red 90 Green 120 Blue 120 Red 120 3.21 : 1 Lc 64 5.66 : 1 Lc 80 5.53 : 1 Lc 81 5.1 : 1 Lc 80 5.13 : 1 Lc 80 5.48 : 1 Lc 80 同じ明度であれば⾊相が異なってもコントラスト⽐が概ね揃う → WCAG 2.2 と APCA の両⽅を担保しやすい Better insights for a better world © Nikkei Inc.
48. コントラスト⽐ Light/Dark 共通で WCAG2.2 AA と APCA Bronze Level で評価 ボディテキスト要素 テキスト要素 テキスト以外 (アイコン等) 4.5 : 1 以上 4.5 : 1 以上 3 : 1 以上 かつ かつ かつ Lc 75 以上 Lc 60 以上 Lc 45 以上 例外としてオレンジ⾊は APCA 基準のみで評価 Better insights for a better world テキスト要素 テキスト以外 (アイコン等) Lc 60 以上 Lc 60 以上 © Nikkei Inc.
49. APCA (Accessible Perceptual Contrast Algorithm) • ⼈間が知覚するコントラストに近い • 単位は Lc (Lightness contrast) • 同じ⾊の組み合わせでもどちらが前⾯に 来るかで Lc が変わる • フォントファミリー、サイズ、ウェイト によって必要な Lc の基準値が変わる • WCAG 3 に採⽤される流れがあったが、 現在はドラフトから削除 Better insights for a better world https://apcacontrast.com/ © Nikkei Inc.
50. なぜ APCA も採⽤したのか (ダークモード対応) WCAG 2.2 だけではダークモードの知覚の部分に課題がある 出典 [2] Better insights for a better world © Nikkei Inc.
51. なぜ APCA も採⽤したのか (オレンジ⾊の課題) ブランドカラー (NIKKEI Blue) の補⾊であるオレンジ⾊が 登録導線などで広く使われており、重要な導線のため変更が難しい Better insights for a better world © Nikkei Inc.
52. なぜ APCA も採⽤したのか (オレンジ⾊の課題) ⾒やすい ⾒やすい WCAG 2.2 を達成するために テキストを黒⾊に変更すると重い印象が残る Better insights for a better world © Nikkei Inc.
53. なぜ APCA も採⽤したのか (オレンジ⾊の課題) ⾒やすい くすんでいる APCA なら明るいオレンジ⾊でも基準を満たすことができる Better insights for a better world © Nikkei Inc.
54. WCAG と APCA のチェック機構 Better insights for a better world https://huetone.ardov.me/ © Nikkei Inc.
55. Kasane Design System の取り組み • 設計原則 • 設計思想 • デザインシステムの全体構成 • 外⾒に関する⽅針の⾒直し ◦ ⾊ ◦ フォント Better insights for a better world © Nikkei Inc.
56. font-family の⾒直し Before -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; After "Hiragino Sans JP", -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Noto Sans CJK JP", "Segoe UI", Meiryo, sans-serif; iOS/macOS での和⽂表⽰⽤に、独⾃ font-face “Hiragino Sans JP” を定義し、欧⽂と合うようにウェイトを調整 Better insights for a better world © Nikkei Inc.
57. 統⼀感のある和欧混植を実現 Before After 欧⽂のウェイトが和⽂より若⼲太い すべてのブラウザで和欧のウェイトが揃う ⽂字が少し鮮明になり読みやすくなる Better insights for a better world ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.
58. 統⼀感のある和欧混植を実現 Before • 和⽂: Hiragino Kaku Gothic ProN ◦ • 欧⽂: San Francisco ◦ • • → 和⽂ W3 (=300) / 欧⽂ 400 font-weight: bold ◦ Better insights for a better world バリアブルフォント (100-900) font-weight: normal ◦ 欧⽂のウェイトが和⽂より若⼲太い W3, W6 のみ → 和⽂ W6 (=600) / 欧⽂ 700 ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.
59. 統⼀感のある和欧混植を実現 • 和⽂を Hiragino Sans に変更 ◦ • After W0-W9 (ProN に無い W4/W7 を使⽤可能) @font-face の unicode-range を使⽤し 和⽂に限定 ◦ 欧⽂は含めず San Francisco にフォールバックさせる • font-weight: normal では W4 を指定 ◦ • font-weight: bold では W7 を指定 ◦ • → 欧⽂ 400 と揃う → 欧⽂ 700 と揃う すべてのブラウザで和欧のウェイトが揃う ⽂字が少し鮮明になり読みやすくなる アンチエイリアス指定で太さは緩和 Better insights for a better world ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.
60. font-family の⾒直し Before -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; After "Hiragino Sans JP", -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Noto Sans CJK JP", "Segoe UI", Meiryo, sans-serif; パフォーマンスを重視し Web フォントは使⽤せず、 Windows/Android 標準搭載の Noto Sans JP を優先指定。Windows ではメイリオよりも優先。 Better insights for a better world © Nikkei Inc.
61. Meiryo から Noto Sans JP へ (Windows) Before After Meiryo Noto Sans JP 丸く横⻑な字形、滲んで⾒える 癖がなく整った字形で、すっきり Better insights for a better world © Nikkei Inc.
62. “Noto Sans JP” は何が良い? Meiryo 出典 [3] Noto Sans JP 出典 [4] 2007年に Windows Vista に同梱された 2014年、Google, Adobe が共同開発。 古いフォント。電⼦版で2019年から採⽤。 ⾼品質を売りにした新しいフォントで、 昔の低解像度な画⾯で「明瞭」に⾒える、 柔軟な字詰めに対応するなど⾼機能。 可読性を重視した書体。 2025年に Windows 10/11 に搭載。 横⻑で丸みが強くカジュアルな雰囲気で、 美しく整っており癖のない字形で、 現代の⾼解像度だと癖が⽬⽴つ。 ニュートラルな印象を与える。 Better insights for a better world © Nikkei Inc.
63. Meiryo 廃⽌は⽂字表現充実の第⼀歩 ⾼度な⽂字表現に対応した現代的フォント 変更前 Meiryo Noto Sans JP ヒラギノ⾓ゴシック + San Fransisco OSごとの電⼦版へのアクセス数 Windows 変更後 Android macOS iOS 古い端末がなくなれば 100% に • 字詰め等の⾼度な⽂字表現は Meiryo では実現できない • Noto Sans JP への移⾏により、 すべての環境で字詰め等の最新機能が適⽤できるように Better insights for a better world © Nikkei Inc.
64. ⽂字表現改善計画例: ⾏頭記号の⽂字詰め text-spacing-trim: trim-start 「, （, ［, 【 などの約物が⾏頭にくる場合に左端の余⽩を詰められる 左端が揃い、整った印象を与える Better insights for a better world ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.
65. font-family の⾒直し Before -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; After "Hiragino Sans JP", -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Noto Sans CJK JP", "Segoe UI", Meiryo, sans-serif; 近いうちに変更予定 Better insights for a better world © Nikkei Inc.
66. これからの⽇経電⼦版を⽀える。
67. WE ARE HIRING!! https://hack.nikkei.com/ Better insights for a better world © Nikkei Inc.
68. 参考⽂献 [1] Origami design principles at the Financial Times, Medium, 2015 https://medium.com/@kaelig/origami-design-principles-at-the-financial-times-a76a14d24050 [2] 第1回 デジタルコンテンツの視認性と WCAG2 のコントラスト⽐の課題, 技術評論社, 2023 https://gihyo.jp/article/2023/08/apca-01 [3] マイクロソフト、 Vista の新フォント「メイリオ」について説明 〜可読性の高いフォントで生産性も向上 , PC Watch, 2006 https://pc.watch.impress.co.jp/docs/2006/0516/ms.htm [4] アドビ、⽇中韓ほか多⾔語対応したオープンソースフォント「Source Han Sans」発表, マイナビニュース, 2014 https://news.mynavi.jp/techplus/article/20140716-a388/ Better insights for a better world © Nikkei Inc.