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

Embed

Start on current slide

Slide 1

Slide 1 text

⽇経電⼦版を⽀えていく Kasane Design System デジタル編成ユニット Webチーム⽥中泰⽃ / Taito Tanaka Frontend Conference Fukuoka 2026/09/12 Webチーム - もっといいメディア、もっといいウェブをつくる © Nikkei Inc.

Slide 2

Slide 2 text

⾃⼰紹介⽥中泰⽃ / Taito Tanaka (@taitotnk) ● デジタル編成ユニット Web チーム所属 ● 2023 年新卒⼊社 ● ⽇経電⼦版 Web の開発、Design System の構築 ● アクセシビリティ、サッカー (J リーグ) Better insights for a better world © Nikkei Inc.

Slide 3

Slide 3 text

今回話すこと ● 過去から学ぶ持続可能なデザインシステムとは ● Kasane Design System での取り組み Better insights for a better world © Nikkei Inc.

Slide 4

Slide 4 text

⽇経電⼦版 ● www.nikkei.com ● 2010 年 3 ⽉創刊 ● 有料会員: 106 万⼈ (2026 年 1 ⽉時点) ● Navigation Request: 約 3000 万/⽇ (Web のみ) ● 新しい記事の投稿: 1000 /⽇ ※ 資料公開⽤に画像を⾮表⽰にしています Better insights for a better world © Nikkei Inc.

Slide 5

Slide 5 text

新しいデザインシステム ● アクセシビリティのボトムアップ ● AI 活⽤ ● ダークモードへシームレスに対応したい ● ⾃分たちの拠り所を整備しておきたい ● ⾞輪の再発明を避けて⼀貫性を担保 ● デザインと実装のブレをなくす ● デザインと実装の⺠主化 Better insights for a better world © Nikkei Inc.

Slide 6

Slide 6 text

命名理由 ● 重ね合わせ / 積み重ねる ● 活版印刷の技法の「重ね刷り」 ● 新聞が積み重なっているイメージ ● コンポーネントを重ねて⼤きなものを構築 ● 廃れないように積み重ねていきたい願い Better insights for a better world © Nikkei Inc.

Slide 7

Slide 7 text

過去から学ぶ持続可能なデザインシステムとは Better insights for a better world © Nikkei Inc.

Slide 8

Slide 8 text

⽇経グループのデザインシステムの先駆け Origami 2015 年に買収した英メディア Financial Times のデザインシステム出典 [1] Better insights for a better world © Nikkei Inc.

Slide 9

Slide 9 text

⽇経の最初のデザインシステム (2016) ● 全社的に使うことを想定していた ● Origami の思想も組み込まれていた ● 当時の技術的制約の中でよく考えられた設計 ○ Nikkei UI Sass, Handlebars, Vanilla JS, Fractal ■ 今のような便利な CSS プロパティはなかった ■ Better insights for a better world IE も考慮する必要があった © Nikkei Inc.

Slide 10

Slide 10 text

⽇経の最初のデザインシステム (2016) ● 全社的に使うことを想定していた ● Origami の思想も組み込まれていた ● 当時の技術的制約の中でよく考えられた設計 ○ Nikkei UI Sass, Handlebars, Vanilla JS, Fractal ■ 今のような便利な CSS プロパティはなかった ■ Better insights for a better world 続かなかった… IE も考慮する必要があった © Nikkei Inc.

Slide 11

Slide 11 text

続かなかった理由 ● 事業要件の複雑化 ○ アプリケーションの数が肥⼤化し、チームのリソースにも限界があった ● 組織の再編によりチームが解散した ○ リテラシーが⾼いメンバーがメンテナンスする前提で作られていた ○ 意思決定などのコンテキストもコアメンバーの脳内に留まっていた ● 技術のパラダイムシフトに追従できなかった ○ メンバーの世代交代で Sass を書くのが当たり前ではなくなった ○ プロダクト側の 2 回の基盤移⾏の技術刷新に取り残された Better insights for a better world © Nikkei Inc.

Slide 12

Slide 12 text

過去から学ぶ ● 無理のない体制を確保する ● コンテキストを残す ● Web 標準に寄せる Better insights for a better world © Nikkei Inc.

Slide 13

Slide 13 text

過去から学ぶ ● 無理のない体制を確保する ● コンテキストを残す ● Web 標準に寄せる Better insights for a better world © Nikkei Inc.

Slide 14

Slide 14 text

⽇本経済新聞社の関連サービス Better insights for a better world © Nikkei Inc.

Slide 15

Slide 15 text

⽇本経済新聞社の関連サービスこれ全部サポートする？🤔 Better insights for a better world © Nikkei Inc.

Slide 16

Slide 16 text

適⽤対象を絞る ● 全社的なデザインシステムにするとステークホルダーが多すぎる ○ 意思決定の難しさ ○ 開発速度の低下 ● 成熟している全サービスに組み込んでいくのは⾮現実的 ● → 「⽇経電⼦版」のみを対象にする Better insights for a better world © Nikkei Inc.

Slide 17

Slide 17 text

最⼩限の⼈数で集中的に取り組むエンジニア × 2 デザイナー × 2 週 1 の定例と⾮同期の議論意思決定がしやすい⼈数 & モチベーションの⾼いメンバーで編成 Better insights for a better world © Nikkei Inc.

Slide 18

Slide 18 text

過去から学ぶ ● 無理のない体制を確保する ● コンテキストを残す ● Web 標準に寄せる Better insights for a better world © Nikkei Inc.

Slide 19

Slide 19 text

コンテキストを残す 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.

Slide 20

Slide 20 text

過去から学ぶ ● 無理のない体制を確保する ● コンテキストを残す ● Web 標準に寄せる Better insights for a better world © Nikkei Inc.

Slide 21

Slide 21 text

Web 標準に寄せる ● 基盤移⾏で Sass を剥がすことに苦労した ● 世の中的に Sass は使われなくなった ○ 特定の技術にベットしていた代償 ○ 今の CSS はかなり便利になった ● → Web 標準に極⼒寄せる ○ 後⽅互換性が配慮され続け、⻑く残る ○ Vanilla CSS, Web Components, DTCG Spec など Better insights for a better world © Nikkei Inc.

Slide 22

Slide 22 text

Kasane Design System Better insights for a better world © Nikkei Inc.

Slide 23

Slide 23 text

Kasane Design System の取り組み ● 設計思想 ● 設計原則 ● デザインシステムの全体構成 ● 外⾒に関する⽅針の⾒直し ○ ⾊ ○ フォント Better insights for a better world © Nikkei Inc.

Slide 24

Slide 24 text

Slide 25

Slide 25 text

設計思想堅さ快適さ明快さ時事性に応えることができる Better insights for a better world © Nikkei Inc.

Slide 26

Slide 26 text

堅さ―⽇経らしい堅さを⼤切にする開発者エンドユーザー Better insights for a better world ● 制約により⽇経のブランドイメージを守ることができる ● 堅実さや信頼感を感じられる ● 使っていることが誇らしく感じられる © Nikkei Inc.

Slide 27

Slide 27 text

快適さ―不快な思いを与えない開発者エンドユーザー Better insights for a better world ● 快適さが保証される ● アクセシビリティが保証される ● 混乱する UI を⽬にしない ● 個々の特性に依存せず使える © Nikkei Inc.

Slide 28

Slide 28 text

明快さ―意思決定に迷いを与えない開発者エンドユーザー Better insights for a better world ● 標準的な表⽰や挙動が保証される ● 洗練された⾃由度 ● 整備されたドキュメント ● ⽇経特有の⽂脈が不要 ● 直観的に操作可能 © Nikkei Inc.

Slide 29

Slide 29 text

3 つの柱により時事性に応えることができるニュースは常にやってくる。堅さを⼤切にするからこそ、嬉しい内容にも悲しい内容にも対応できる。快適さを⼤切にするからこそ、毎⽇の体験を⽀え続けることができる。明快さを⼤切にするからこそ、新しい情報やコンテンツに注⽬させることができる。 Better insights for a better world © Nikkei Inc.

Slide 30

Slide 30 text

Slide 31

Slide 31 text

設計原則 ― 堅さ ● デザイントークンから参照する ● 規約を読み込まずにブランドイメージを守ることができる仕組みを考える ● 変えられないものを先に決め、仕組みでビジュアルの⾃由を縛る Better insights for a better world © Nikkei Inc.

Slide 32

Slide 32 text

設計原則 ― 快適さ ● WCAG 2.2 AA 準拠 ● パフォーマンスを考慮する ● アニメーションは必要最⼩限にする Better insights for a better world © Nikkei Inc.

Slide 33

Slide 33 text

設計原則 ― 明快さ ● 選択肢を最⼩限にする ○ 例: props による選択肢を極⼒抑える ● 新しい機能を⾜すときは同時に削られるものを考える ● 新しい独⾃の⾔葉を⽣み出さない ○ 例: 社内でしか通じない⾔葉で命名しない ○ 例: label props → aria-label ? innerText ? ■ aria-label props, として定義すべき ● 標準仕様を必ず守る ● 世間の UI 慣習を⼤切にする ● 些細なことでもドキュメントに残す Better insights for a better world © Nikkei Inc.

Slide 34

Slide 34 text

Kasane Design System の取り組み ● 設計原則 ● 設計思想 ● デザインシステムの全体構成 ● 外⾒に関する⽅針の⾒直し ○ ⾊ ○ フォント Better insights for a better world © Nikkei Inc.

Slide 35

Slide 35 text

全体構成 ● 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.

Slide 36

Slide 36 text

全体構成 Better insights for a better world © Nikkei Inc.

Slide 37

Slide 37 text

全体構成 Better insights for a better world © Nikkei Inc.

Slide 38

Slide 38 text

kasane-tokens ● デザイントークンを集約するパッケージ ● Design Tokens Community Group が策定する Design Tokens Speciﬁcation に準拠 ○ Color ○ Typography ○ Spacing ○ Shadow ○ Corner Radius ○ Width/Height Better insights for a better world https://www.designtokens.org/tr/2025.10/ © Nikkei Inc.

Slide 39

Slide 39 text

Color の Design Token の構造意味を持たず、⾊相と明度のみで命名されたカラーパレット UI 上の役割‧⽤途に基づいて意味付けされたコンポーネント横断で使う汎⽤カラートークン特定コンポーネントのバリアント‧状態に紐づいたコンポーネント固有のカラートークン Better insights for a better world © Nikkei Inc.

Slide 40

Slide 40 text

Semantic/Component Token のグルーピング ● Text: 通常テキスト ● Background: 背景⾊ ● Shape: アイコンや装飾など、テキスト以外のオブジェクト ● Border: 区切り線塗る場所でグルーピングすると、⼈間にも AI にもフレンドリーに Better insights for a better world © Nikkei Inc.

Slide 41

Slide 41 text

全体構成 Better insights for a better world © Nikkei Inc.

Slide 42

Slide 42 text

kasane-css ● ベース/コンポーネントスタイルを集約 ● Vanilla CSS を採⽤ ● ○ React と Web Components の両⽅で利⽤ ○ kasane-tokens の Custom Properties を参照 ○ 現代の技術なら⼗分戦える @layer kasane で利⽤側との詳細度の衝突を避ける設計 ○ “layering” = “kasane” だけに... Better insights for a better world © Nikkei Inc.

Slide 43

Slide 43 text

なぜ web-components？ ● ⽇経電⼦版の中で全てのアプリケーションが React で作られているわけではない ○ ⼀部のページでは Java + JSP の世代も残っている ● 今は kasane-react と成⻑中 Better insights for a better world © Nikkei Inc.

Slide 44

Slide 44 text

Slide 45

Slide 45 text

カラーパレットの設計カラースペース OKLCH Better insights for a better world コントラスト⽐基準 WCAG 2.2 + APCA © Nikkei Inc.

Slide 46

Slide 46 text

カラースペース ● 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.

Slide 47

Slide 47 text

カラースペース旧カラーパレット: 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.

Slide 48

Slide 48 text

コントラスト⽐ 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.

Slide 49

Slide 49 text

APCA (Accessible Perceptual Contrast Algorithm) ● ⼈間が知覚するコントラストに近い ● 単位は Lc (Lightness contrast) ● 同じ⾊の組み合わせでもどちらが前⾯に来るかで Lc が変わる ● フォントファミリー、サイズ、ウェイトによって必要な Lc の基準値が変わる ● WCAG 3 に採⽤される流れがあったが、現在はドラフトから削除 Better insights for a better world https://apcacontrast.com/ © Nikkei Inc.

Slide 50

Slide 50 text

Slide 51

Slide 51 text

なぜ APCA も採⽤したのか (オレンジ⾊の課題) ブランドカラー (NIKKEI Blue) の補⾊であるオレンジ⾊が登録導線などで広く使われており、重要な導線のため変更が難しい Better insights for a better world © Nikkei Inc.

Slide 52

Slide 52 text

なぜ APCA も採⽤したのか (オレンジ⾊の課題) ⾒やすい⾒やすい WCAG 2.2 を達成するためにテキストを黒⾊に変更すると重い印象が残る Better insights for a better world © Nikkei Inc.

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

統⼀感のある和欧混植を実現 Before After 欧⽂のウェイトが和⽂より若⼲太いすべてのブラウザで和欧のウェイトが揃う⽂字が少し鮮明になり読みやすくなる Better insights for a better world ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.

Slide 58

Slide 58 text

統⼀感のある和欧混植を実現 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.

Slide 59

Slide 59 text

統⼀感のある和欧混植を実現 ● 和⽂を 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.

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

Meiryo から Noto Sans JP へ (Windows) Before After Meiryo Noto Sans JP 丸く横⻑な字形、滲んで⾒える癖がなく整った字形で、すっきり Better insights for a better world © Nikkei Inc.

Slide 62

Slide 62 text

“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.

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

⽂字表現改善計画例: ⾏頭記号の⽂字詰め text-spacing-trim: trim-start 「, （, ［, 【などの約物が⾏頭にくる場合に左端の余⽩を詰められる左端が揃い、整った印象を与える Better insights for a better world ※ 資料公開⽤に画像を⾮表⽰にしています © Nikkei Inc.

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text

これからの⽇経電⼦版を⽀える。

Slide 67

Slide 67 text

Slide 68

Slide 68 text

参考⽂献 [1] Origami design principles at the Financial Times, Medium, 2015 https://medium.com/@kaelig/origami-design-principles-at-the-ﬁnancial-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.