/* ========================================================================== Springl デザイントークン コンポーネントは必ずこの変数を参照し、生の色コードを書かない。 WordPress テーマに移すときはこのファイルごと持っていく。 ── 編集長の指示 ────────────────────────────────────────── 2026-09-20 ①「ベースの背景は灰色。グローバルナビなど、ポイント部分は青。 余白を重視して、かっこよく、読みやすく」 2026-09-20 ②「明朝は全然合わない。ゴシック体」 「よりクリエイティブでかっこいい雰囲気を出したい」 ②への答えは**強弱**。第2版は全部が「そこそこ」で、平均点は高いが 印象に残らなかった。極端をどこか1〜2か所に集め、残りを静かにする。 大きさ … 56px と 10px を同じ画面に同居させる 色 … 事例だけ全幅の青。他は灰と白で静かに 画像 … 一覧は青のデュオトーンで統一（主役の1枚は染めない） 動き … ロゴの輪が1回まわる、1つだけ ── cehub.jp（--ce-*）との違い ────────────────────────── 地 #f4f6f8 ごく薄い灰 → #e7eaf0 はっきりした灰（白い面を立てる） 青 #0289c9 シアン寄り → #1a4088 くすんだ紺（明るさより深さ） 角 14px → 4px（締めると構造が立つ） 欧文 Montserrat → **Manrope**（2026-09-23 に Archivo から。ロゴと揃えた）。ロゴ・見出し・数字だけに使う ========================================================================== */ :root { /* ── 2026-09-23 **黒と灰色を基調に変えた**（編集長のご判断「WordPress の初期デザインの ロゴを見て、黒ベースはかっこいいと思った。黒と灰色をベースとする、シンプルなデザインに」）。 **トークンの値だけを替えた。** 名前（--sp-blue など）は残してある——コンポーネントが 名前で参照しているので、名前を変えると全ファイルを触ることになる。 「--sp-blue」は「面としての基調色」、「--sp-link」は「文字としての基調色」と読むこと。 **差し色は青を1色だけ**（同日のご判断。赤と見比べて「青でいきましょう」）。 リンク・ラベル（--sp-link）と差し色（--sp-red / --sp-red-on-dark。名前は赤のまま）を青に。 ボタン・帯などの面（--sp-blue）は黒。ロゴの輪の2本目は灰 */ /* 名前の意味（2026-09-20 編集長のご説明）: **Sustainability と Profit が Ring のように循環していく。** 目印は「循環する輪」。右肩上がりの線は誤りだった（循環していない） 青＝ポイント。ナビ・事例の帯・押せるもの以外には使わない。 2026-09-20 編集長のご指示で**くすんだ紺**に変更（前は #1b44e0）。 2026-09-21 編集長のご指示「事例の帯も、グローバルナビに合わせて 少し落ち着いた青に」。**帯とナビを同じ色にした**（前は #1d4a9c）。 彩度を落としたぶん明度を上げて差を付けていたが、 **同じ画面に近い青が2つあると、色がぶれて見える**。 事例を立たせるのは色の違いではなく、全幅であること・ 写真を深い紺（--sp-blue-deep）で染めて帯から分けることでやる */ --sp-blue: #111111; /* **面**としての青（ナビの帯・ボタン） */ --sp-link: #1a4088; /* 文字としての差し色＝青（リンク・ラベル） */ /* **文字**としての青（ラベル・リンク） */ --sp-on-link: #ffffff; /* --sp-link を面に使ったときの文字色 */ --sp-blue-dark: #3d3d3d; /* ホバー */ --sp-blue-deep: #0a0a0a; /* フッター・事例の帯の画像を染める色 */ --sp-blue-band: var(--sp-blue); /* 事例の帯＝ナビと同じ青 */ --sp-blue-soft: #9a9a9a; --sp-blue-wash: #ebebeb; /* ── 差し色は1つだけ（2026-09-22 編集長のご指示）────────────── 「基調カラーの青＋1色（赤など）、あとは白黒（灰色）だけに絞る」。 前は**テーマ7色**を持っていた（2026-09-21 に「競合はどれも1色なので 7色で差を付ける」と入れたもの）。**配色数が多いと洗練されて見えない** というご判断で外した。**色は写真が担う。箱は色を持たない。** 赤は2つ用意する（青と同じ理屈）。 白い面の上では濃い赤、紺の帯の上では明るい赤でないと読めない。 */ --sp-red: #1a4088; /* 名前は赤だが、中身は差し色の青（2026-09-23） */ /* 白い面の上（文字・細い線） */ --sp-red-on-dark: #8aa8ff; /* 紺・黒の面の上 */ /* 文字 */ --sp-ink: #111111; --sp-text: #3d3d3d; /* 地が白に戻ったので 4.70:1 でも通るが、**濃いまま残す**。 薄い青のカード（--sp-soft）の上にも載るので、白ぴったりを前提にしない */ --sp-text-soft: #666666; --sp-on-dark: #ffffff; --sp-on-dark-soft: #b5b5b5; --sp-on-blue-soft: #cfcfcf; /* 面 2026-09-21 編集長のご指示「背景も白のほうが良いかもしれません」。 **地を白にする。** 灰色の地は落ち着くが、同時に沈む。 明るさは「楽しさ」にいちばん直接効く。 白地にすると白いカードが見えなくなるので、 **カードの側を薄い青に**する（白と面が入れ替わる） */ /* **2026-09-22 編集長のご指示**「トップバーとグローバルナビ、ヘッダー、 フッターを除き、背景を薄い灰色に」。 一度 白地（2026-09-21）に振ったが、白一色だと**面の重なりが出ない**。 戻すのは地だけで、**帯と面は白のまま**にする—— こうすると「帯が浮いて、その下に薄い灰色の地があり、 その上に白いカードが乗る」の3層になる。 最初の版（地＝灰・面＝白）と同じ構造だが、**帯まで灰色にしない**点が違う。 `--sp-bg` を変えるだけで切り替わる作りにしてあるので、 コンポーネント側は1行も触っていない。 */ /* **青みを抜いた**（2026-09-22 編集長のご指示「普通の薄い灰色に」）。 前は #eef1f7 で、青を 6% ほど混ぜていた。 この媒体は青が効いている場所（帯・タグ・リンク）が多いので、 **地まで青いと、青の効き目が薄まる**。地は色を持たないほうがよい */ --sp-bg: #f3f3f3; /* 地＝薄い灰（無彩色） */ --sp-card: #ffffff; /* 帯・検索・入力欄などの面 */ /* **カードの面は白にする。** 地が灰色になったので、 薄い青のままだと地に溶けて「面」に見えない */ --sp-soft: #ffffff; /* カードの面 */ --sp-line: #e6e6e6; --sp-line-strong: #d4d4d4; --sp-field-line: #8c8c8c; /* 入力欄の枠。面との差 3:1 以上（WCAG 1.4.11・白の上で 3.4:1） */ --sp-foot: #111111; /* 形 2026-09-21 編集長のご指示「角は、直角ではなく丸みを帯びていた方が」。 **直角に振ったのは行き過ぎだった。** wired.jp を測って角丸を0にしたが、 あれは「かっこいい」の答えであって「楽しい」の答えではない。 ただし**元の 4px に戻すのも違う**——4px は角を丸めたことが 伝わらない中途半端な値で、管理画面の既定値そのもの。 **丸めるなら、丸めたと分かる大きさにする**（12 / 20px、タグは完全な丸）。 wired.jp から持ち帰った規律（刻みを絞る・段差を大きくする・ 太さを2つに）は**そのまま残す**。変えたのは語彙だけ */ --sp-radius: 12px; /* 一覧のサムネイル */ --sp-radius-lg: 20px; /* 大きい写真・カード */ /* **押せるものと入力欄は完全な丸。** 形だけで「押せる／入れられる」が 分かるうえ、角のある箱より人懐こく見える */ --sp-radius-pill: 999px; --sp-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --sp-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.12); --sp-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* 余白 **8 / 16 / 32 / 64 / 96 の5段だけ。** 実測すると、こちらの縦の空きは 12/20/33/16/66/8/97/24/61/116 と**10種類以上**あった。 wired.jp は **8px・16px・33px の3種類**しか使っていない。 野暮ったさは「余白が足りない」ではなく**「刻みが多すぎる」**。 刻みが多いと、揃えたのか揃え損ねたのかが読み手に分からない。 番号は残してあるが、値は絞ってある（使う側を書き換えずに絞れる）。 **2026-09-22 編集長のご指示「全体として、もっと余白をつける」**で、 大きいほうの3段を広げた（32→40 / 64→72 / 96→128）。 **刻みは増やさない**——増やすと「揃え損ねた」ように見える、という 最初の教訓（wired.jp の実測）がそのまま生きている。 4 / 8 / 16 / 40 / 72 / 128（それぞれ約2倍） 面の内側（カードの余白）は**役割の名前で持つ**。 刻みに 24px を足すと 16 と近い値が隣り合うため */ --sp-pad: 24px; --sp-s1: 4px; --sp-s2: 8px; --sp-s3: 8px; --sp-s4: 16px; --sp-s5: 16px; --sp-s6: 40px; --sp-s7: 40px; --sp-s8: 72px; --sp-s9: 128px; /* 書体（すべてゴシック。2026-09-20 編集長のご指示） 欧文 = **Manrope 700**。ロゴと節の見出し（PRACTICE など）・日付・件数を同じ書体にする。 2026-09-23 編集長のご判断「見出しの書体が IDEAS FOR GOOD と似すぎている。 ロゴの書体に揃えて」。それまでは Archivo（素直で字面が強い）だった。 ロゴの Manrope は Twenty Twenty-Five のサイト名で見て「めちゃ美しい」と選ばれたもの。 **Syne を試して却下**（2026-09-20「つぶれた感じ」）——大文字が横に潰れた字面は 小さいラベルで窮屈に見えた。**かっこよさは書体の癖ではなく、レイアウトで出す** 和文 = Zen Kaku Gothic New。素直なゴシックだが字面に芯がある。 Inter / Space Grotesk は生成AIの既定の顔として挙がるので避けた 自前配信（fetch-fonts.js）。届くまでは端末のゴシックで出す */ --sp-font-display: "Manrope", "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; /* ロゴ。見出しと同じ書体だが、名前は分けておく（ロゴだけ替える日のため） */ --sp-font-logo: "Manrope", "Hiragino Sans", system-ui, sans-serif; --sp-font: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif; /* ラベル・日付・著者名＝**モノスペース**。 wired.jp の「かっこよさ」の主成分はこれだった（WiredMono・11px・400）。 カテゴリ名も著者名も日付も、全部モノスペースの小さい大文字で揃っている。 こちらは Archivo 600 に字間 0.3em を振っていたが、 **字間を広げた太いサンセリフは、いちばん手垢の付いた見せ方**。 欧文だけなので読み込みは軽い（和文は従来どおり読み込まない） */ /* **和文は本文と同じゴシックで出す**（2026-10-12 編集長のご指摘「件目を表示」のフォント）。欧文の等幅だけを並べていたので、 日本語は端末任せの書体に落ちていた。欧文の字は IBM Plex Mono、和文の字は次の和文書体が受け持つ */ /* **2026-10-25 等幅をやめて Manrope に**（編集長のご指摘「日時の文字が AI ぽい」。番号・英語の札でも同じご指摘が続いていた）。 名前は --sp-font-mono のまま（約60か所が使っている）。中身は「ラベル・日付・件数の書体」と読む */ --sp-font-mono: "Manrope", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif; /* ラベルの字間。wired.jp は 11px に 1.1px ＝ **0.1em**。 0.3em は振りすぎで、字が散って見える */ --sp-ls-label: 0.03em; /* 2026-10-25 書体を Manrope にしたので詰めた（等幅に振っていた 0.1em は、比例の書体では字が散る） */ /* 文字サイズ */ /* **11 / 14 / 16 / 20 / 36 の5段。段の間を大きく空ける。** こちらは 10/11.5/12.5/13/13.5/14/15/17/19/25/30/34 と12段あり、 しかも 11.5 と 12.5 と 13 のように**差が小さいものが隣り合っていた**。 近い大きさを並べると「揃え損ねた」ように見える。 wired.jp は **11 / 14 / 20 / 32 の4段**で、間が1.4〜1.6倍ずつ空いている。 いちばん効いたのは**節の見出しを 30px → 18px に落としたこと**。 wired.jp が大きい字を使うのは**記事の見出しだけ**で、 節の名前（RECOMMEND STORIES）は 11〜18px のモノスペース。 こちらは「実務から探す」のような節の名前が 30px あり、 記事の見出し（34px）と**ほぼ同じ大きさで competing していた**。 大きい字を1種類に絞ると、そこが自動的に主役になる */ --sp-scale: 1; --sp-fs-body: calc(16px * var(--sp-scale)); --sp-fs-lead: calc(32px * var(--sp-scale)); /* この画面で唯一の「大」 */ /* **節の見出しは、英語を大きく・日本語を小さく** （2026-09-22 編集長のご指示「大きい文字が英語、小文字が日本語。 英語は大きめにするなど、ジャンプ率をはっきりさせてメリハリをつける」）。 40px と 14px で**約2.9倍**の落差を作る。 前は 11px の英語ラベル＋19px の日本語で、英語が添え物だった */ --sp-fs-sec-en: calc(40px * var(--sp-scale)); /* 節の英語（Archivo） */ --sp-fs-sec: calc(14px * var(--sp-scale)); /* 節の日本語 */ --sp-fs-card: calc(17px * var(--sp-scale)); --sp-fs-list: calc(14px * var(--sp-scale)); --sp-fs-eyebrow: calc(11px * var(--sp-scale)); /* モノスペースのラベル */ --sp-fs-meta: calc(11px * var(--sp-scale)); /* ブラウザ側の部品（入力欄・スクロールバー・既定の配色）を明暗に追随させる。 **これが無いと、暗いモードでもスクロールバーと入力欄だけ白いまま残る** */ color-scheme: light; /* フォーカスの輪。**2色で描く**——外側に地の色、内側に反対色を置くと、 明るい面でも暗い面でも必ずどちらかが効く（紺のフッターで青い輪は見えない）。 WCAG 2.4.13（Focus Appearance）の考え方 */ --sp-focus: var(--sp-link); --sp-focus-halo: #ffffff; /* 幅 */ --sp-max: 1240px; --sp-gutter: 24px; } @media (max-width: 1100px) { :root { --sp-fs-lead: calc(27px * var(--sp-scale)); --sp-fs-sec-en: calc(32px * var(--sp-scale)); } } @media (max-width: 1000px) { :root { --sp-s9: 72px; } } @media (max-width: 600px) { :root { --sp-fs-body: calc(15.5px * var(--sp-scale)); --sp-fs-lead: calc(23px * var(--sp-scale)); --sp-fs-sec: calc(13px * var(--sp-scale)); --sp-fs-sec-en: calc(26px * var(--sp-scale)); --sp-gutter: 16px; --sp-s9: 72px; --sp-s8: 48px; --sp-s6: 32px; --sp-s7: 32px; --sp-pad: 16px; } } /* 文字サイズ「大」。--sp-scale だけ変えれば全体が追随する */ html[data-sp-fontsize="large"] { --sp-scale: 1.15; } /* ========================================================================== ダークモード **面としての青（--sp-blue）と、文字としての青（--sp-link）を分けてある。** 分けないと、暗い地で読める明るさに寄せた瞬間にナビの帯まで明るくなる。 --sp-blue ナビの帯・ボタン → 暗いまま --sp-link ラベル・リンク → 明るくする（暗い地で 4.5:1 以上） ========================================================================== */ html[data-sp-theme="dark"] { color-scheme: dark; --sp-red: #8aa8ff; /* 暗い地では明るい青 */ --sp-focus: #ffd166; /* 暗い地では青より黄のほうが確実に見える */ --sp-focus-halo: #0e0e0e; --sp-ink: #f2f2f2; --sp-text: #c8c8c8; --sp-text-soft: #9a9a9a; --sp-bg: #0e0e0e; /* 地 */ --sp-card: #1a1a1a; /* 帯などの面 */ --sp-soft: #1a1a1a; /* カードの面。地より明るくして浮かせる */ --sp-line: #2a2a2a; --sp-line-strong: #3a3a3a; --sp-field-line: #6e6e6e; /* 入力欄の枠（#1a1a1a の上で 3.5:1） */ --sp-foot: #080808; --sp-link: #8aa8ff; /* 暗い地の上の青（4.5:1 以上） */ /* 暗い地では青を明るくするので、その上の文字は**暗く**しないと読めない （白のままだと 2.30:1。実測で捕まえた） */ --sp-on-link: #111111; --sp-blue-dark: #ffffff; /* ホバーでさらに明るく */ /* 暗い地では帯だけ沈める（ナビと同じ色にすると、地から浮かない） */ --sp-blue-band: #1c1c1c; /* 暗い地では、面としての黒（ボタン・今のページ）を**明るい灰の地に白字では見えない**ので 地より一段明るい灰にする（白い文字はそのまま読める） */ --sp-blue: #333333; --sp-blue-wash: #262626; /* タグの下地 */ --sp-blue-soft: #777777; --sp-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --sp-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.55); }