スタイルガイド

このブログの見た目の決まりと、その実物を並べたページです。

記事を書くときの記法は 記法ガイド が担います。

色

黒・灰色は値ではなく役割で選びます。段階の数は「読み手が区別できるか」で決めていて、区別できない差に2つの役割を割り当てません。目安は明度差で、13/255 ほどしか違わない2色は見分けられないので、同じ色と見なしてどちらかの段階に寄せます。

文字（ink）は3段階

3段階とも白背景でコントラスト比 4.5（WCAG AA）を満たします。ink-faint はその条件で置ける最も薄い値で、これより薄くしたいときは文字ではなく別の表現（余白・記号）に変えます。

白はスケールの1段階ではなく背景の色そのもので、役割を選ぶ余地がありません。

罫線（rule）は3段階

罫線は「囲うための線」と「切るための線」で役割が違います。枠は形を作るので見え、区切りは読みの邪魔をしない濃さで足ります。ここの比は文字の読みやすさではなく白背景との差の強さを表す数字です。

見出しの下の罫線が薄いのは意図です。節の区切りは直前の空き（56px）が担っていて、線は「そこに境目がある」と気づかせる程度で足ります。読みやすさの指標ではないので濃くしません。

面（surface）は2段階

面は白背景との差だけで意味を出します。濃くすると上に載る文字のコントラストが動くため、白に近い2段階に留めています。

本文のリンクは下線を持つ。色は背景に合わせて替える

色だけでリンクを名乗りません。 色が見えない読者には、青い文字も紫の文字も隣の黒い文字とほぼ同じ濃さに見えます。白背景で AA を保ったまま本文の文字と 3:1 を作れる色は存在しないので、リンクであることは下線が示し、色はそれに添えます。静止して下線が付くのは本文・箇条書き・表のセルの中のリンクで、見出しのアンカーや記事への入口の中のリンクには付きません（カードと記事の行はカーソルを乗せたときだけタイトルに下線が出ます）。

リンクは背景が濃くなるぶん暗い側へ振った段階を持ちます。link-blue は白背景で AA を満たしますが、インラインコードの背景や note の色の付いた背景に乗ると下回るため、同系色のまま暗くした値に替えます。訪問済みは紫で、こちらは白背景でもコードの背景でも足ります。

比を取る背景が3種類あるので、下の表はそれぞれの背景に対する比です。note は4色あるので、そのうちいちばん厳しい背景との比を載せています（AA を満たすかはそこで決まります）。

青は読み物の中のリンクの色です。 レイアウトの導線（「連載一覧へ」のような全件への行き先、パンくず、日付、著者名）には青を使わず、文字のスケールの ink-mute に置いて、反応で ink-strong に1段階濃くします。同じページで本文のリンクと導線が同じ青だと、どちらが読み物の続きなのかが見分けられません。

全件への行き先には末尾に > を置きます。 色を青から ink-mute に落としたぶん、静止した状態ではリンクだと分かる手がかりが色から消えます。文言（「◯◯一覧へ」）と記号の2つで行き先を名乗り、反応では下線が付きます。記号を使うのはこの導線だけで、装飾として他の場所には置きません。

大きさは置かれ方で決まります。単独の行として置くとき（サイドバー・記事末の連載ナビ）は「行として並ぶもの」のスケール、カードの中に入るとき（トップページの特集・著者紹介）はそのカードの説明文と同じ大きさです。カードの中でいちばん弱い情報が、その上の説明より大きくなると、まとまりが崩れて見えます。箱によって説明文の大きさが違うので、導線の大きさも箱ごとに変わります。

選択されると色が消えるので、下線だけが残る

テキストを選択すると、ブラウザは選択範囲の文字も下線も選択の文字色1色で塗り直します。リンクの色は残りません。下線に色を指定しても残りません。選択中にリンクを名乗れるのは下線だけで、ひとつ上の「色だけで名乗らない」がそのまま効いてきます。

前の文 選択中のリンク 後ろの文

このとき、下線は選択の帯に収まっていないと見えません。帯からはみ出した線は背景と同じ色で描かれて消えます。帯の高さは行間で決まるので、いちばん低いのは行間の狭いところ——表のセルです。

そのため本文のリンクの下線の位置は、見た目の好みではなくこの制約で決めています（いま ）。記事への入口にカーソルを乗せたときに出る下線も同じ位置です。

ブラウザの描画に決められる値は、スケールに乗せずに理由を添えて置きます。 間隔の4の倍数にも文字の大きさのスケールにも属さない値なので、理由が無いと根拠のない値に見えます。この種の値を増やすときは、まず本当に描画の制約なのか——好みで選べる値ではないのか——を確かめます。

ブランド色

ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、文字色には使いません。本文の ink-strong との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つはネイビーの図形とひと組で読ませる小さな文字で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、文字がそのページの面そのものになっている 404 の数字です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。

ネイビーの比 16.34 は「白文字を載せられる濃さ」を、クリムゾンの 5.35 は「白文字で AA を満たす」ことを表します。どちらも文字色としての比ではありません。

暗い背景の上は別のスケール

ink / rule / surface は白背景の上で決めた値なので、ネイビー背景では1つも使えません（ink-strong は 1.63 しか出ません）。白背景に3段階置いたのと同じ考え方で、暗い背景の上にもスケールを置いています。比はネイビー背景に対する値です。

面と線を同じ値にしません。 明度だけ上げると彩度が残るので（背景も navy-raised も彩度 81%）、1px にすると鮮やかな青の筋に見えます。線は白を薄く重ねた rule-on-dark を使うと、明るくなると同時に彩度が落ちて（50%）色味が引きます。rule-on-dark だけ比が空欄なのは、半透明で明度が確定しないためです。

差し色は役割で分けます。 brand-crimson は暗い背景で 3.06 しかなく線や記号として見えないので、そこには1段階明るい crimson-on-dark を使います。逆に塗り面は brand-crimson のままです（白文字で 5.35。明るい方は 4.51 で余裕がありません）。暗い背景で「読める差し色」と「白文字を載せられる差し色」は同時に成立しません。

ダークモードのスケール

表示テーマは3つあります。端末の設定に従うのが既定で、ヘッダーのボタンで明るい・暗いを選べます。2つの切り替えにすると「端末は暗いがこのサイトは明るく読みたい」を表せず、そこから端末の設定へ戻る道も無くなるため、3つ持っています。

暗いほうのスケールは、明るいほうと同じ役割の並びを別の値で作ったものです。背景は色味を持たせず無彩色に寄せています。上の「暗い背景の上のスケール」はフッターのネイビー背景の上でだけ使うもので、彩度があるぶんページ全体の背景には重すぎます。

比はページの背景（dark-surface-base）に対する値です。

ink-faint は明るいほうと同じく「AA を満たす最も薄い段階」です。 上の表の比はページの背景に対する値ですが、実際にいちばん厳しいのはインラインコードの背景で、そこでも AA を満たす値にしています。これより薄くしません。

ブランドのネイビーは、暗い背景では背景とほとんど見分けが付きません。 面に使っても線に使っても消えるので、フッターの帯は1段階暗い値にして色味だけ残し、選択中のページ・選択中のタブの下線・共有ボタン・タグの hover・フォーカスリングは明るい線と明るい塗りに置き換えています。

テキスト選択の帯は向きを逆にします。 明るいほうは濃いネイビーの帯に白い文字ですが、暗い背景ではネイビーを中間まで明るくしても、帯として見える前に白い文字が AA を割ります。そこでネイビーを薄くした帯にして、文字を背景の色で描きます。色相はブランドのまま、彩度は半分に落としています（そのままだと蛍光の紫青になります）。無彩色の帯にすると反転表示のように見えて、ブランドの色味が消えます。コードブロックの背景は両方のテーマで暗いので、明るいほうでもこの帯を使います。

同じコントラスト比でも、明るい面は暗い面より膨らんで見えます。 白背景の濃い丸をそのまま反転すると暗い背景では浮きます。同じ強さを移すのではなく、その部品が担う役割から決めます。所在や反応の印は明るいまま、装飾は1段階落とします。

リンク

背景が3種類あるので、明るいほうと同じく分けて測ります。

背景に色が付いた面

背景だけ明るいまま残すと、中の文字がテーマ側に付いていって沈みます。 note の4色と表彰の淡い金は、背景ごと暗くしています。ページの背景との差は、面のスケールより1段階上に取っています。上の表の surface-mute と見比べると、帯として1つの塊に見える程度に離れているのが分かります。

「背景より1段階濃い」は、暗い背景では「1段階明るい」になります。 note の中のインラインコードと表の見出しは、明るいほうでは背景から計算して1段階濃くしていますが、暗いほうは持ち上げる向きが逆になるので値を直接持っています。

トークンにない色

上のスケールの外に残っている色は2種類で、どちらも役割があって残しているものです。

• note の4色 — 色相を持つ背景。中のインラインコードの背景は、その背景より1段階濃い同じ色になります
• 表彰・殿堂の淡金 — メダルは灰→銅→金、殿堂のカードは淡金。ブランド色は表彰に広げません

どちらもテーマで入れ替わります（上のダークモードのスケールを参照）。

ink / rule / surface のスケールの外にある色はありません。段階と数しか違わない色を別の役割として置くと、どちらを使うかの判断ができなくなります。 新しい色を入れるときは、まず近い段階との差を見て寄せられないかを確かめます。

文字

大きさ

記事タイトルと本文 h2 が同着になっていないかは、下の並びで確かめられます。

部品の大きさは7つの段から選びます。 値ではなく役で選べるように、段に名前が付いています。

段の外にあるのは3つだけです。記事タイトルは幅で変わるので clamp で持ちます。404 ページの数字は1箇所でしか使わない一点ものです。行き先の名前に添える総数は、いちばん下の段でも名前と 1px しか違わず名前の一部に見えるので、段より小さく置きます。タグのチップの件数もこの総数と同じ役なので、同じ値です。

見分けの付かない差に2つの役を割り当てません。 新しい部品の大きさを決めるときは、まず近い段との差を見て寄せられないかを確かめます。1px 未満しか違わない2つの値は、読者には同じ大きさに見えます。

上の本文見出し h2〜h6 は段の外です。あちらは互いの比が階層を作る列なので、土台の大きさに追従する必要があります。

見出しの階層はサイズだけでなく、サイズ・太さ・直前の空き・罫線の4つで作ります。サイズだけで表そうとすると上下が詰まります。避けたいのは同着で、比を大きく取ること自体が目的ではありません。記事タイトルの下限を上げるとモバイルで字数が足りなくなるため、太さ（800 対 700）とページ先頭という位置、h2 側の空きと罫線が階層を支えています。

行間

段階は3つだけです。1つの役割に1つの値しか持ちません。下の見本は同じ大きさの文字を3つの段階で組んだもので、差は行送りだけです。

役割の割り当ては次のとおりです。

アイコンや順位の丸のように1行しか入らない小さな箱では、line-height は行間ではなく箱の高さを決める値です。字を丸の中心に置くために 1 を使う場所があり、これは行間のスケールの外にあります。

太さ

段階は3つだけです。中間の段階（500 / 600）は置きません。フォント側に該当ウェイトがないとブラウザの合成太字になり、輪郭が濁ります。

13〜14.3px の記事名を太らせると、隣のメタより先に帯全体が重くなります。行の中の主従は「メタから太字を外す」側で作ります。

間隔

間隔は4の倍数だけを使います。 上限は決めず、刻みだけを置いています。

段階を数え上げないのは、使う値が並びの間隔だけでも 4〜48px と幅広く、どこで打ち切る理由も無いからです。刻みを4pxに揃えておけば隣の段階が必ず 4px 差になり、5px と 6px のように見分けの付かない差が生まれません。色を3段階に絞ったのと狙いは同じで、迷う余地を減らすためです。

形と反応

角丸は3段階

小さな部品・箱・ピル（チップの形。円も同じ値）の3つだけで、中間の段階（3 / 5 / 6 / 10px）は置きません。段階が増えると「どれを使うか」の判断ができなくなります。

小さな部品はチップ・サムネイル・操作部品、箱はカード・コードブロック・note・details です。

チップは枠だけで作り、地を持ちません。 地を敷いても白背景との差が 1.09 しか出ず、形を作っているのは枠の方だからです。そのぶん枠は rule-base ではなく rule-strong を使います（白背景との差が 1.36 から 1.61 になります）。

影は持たない

影は1段階も持ちません。読み物を並べる場所では輪郭をなるべく作りません。 記事へ送るカードは囲みを持たず、1件のまとまりは外の空きが中の空きより十分大きいことが作ります。連載一覧や特設ページのパネルは、隣の列との間が 48px で、サムネイルと文字の間（12px）の4倍です。枠線を持つのは強調のために枚数を絞った枠（トップページの「特集」）と、リンクプレビューだけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。

hover は1部品1反応

同じ「押せる」の合図なので、速さは 0.05 秒の1つだけです。反応は待たせるものではないので短い側に寄せています。0.1 秒だと変化が半分進むのに 29ms かかり、カーソルを乗せて 20ms の時点でまだ3割しか動いていません。0.05 秒なら 15ms で7割動くので、ほぼ即時に見えます。

イージングは触りません。体感を決めているのは秒数だけで、20ms 時点の進捗は ease 30% 対 ease-out 31% とほぼ同じでした。

反応は入れ子のうち外側だけが返します。

アイコンだけのリンクにチップと同じ反応を持たせるのは、下線が引く相手を持たないからです。絵柄に下線を引いても何も起きたように見えないので、丸い背景を持たせてそこを1段階変えます。

下線と背景は同時に動きません。 背景が変わる部品（ナビゲーションの行・チップ・アイコンだけのリンク）では下線を出さず、下線が付くのは背景を持たない部品です。本文のリンクのほか、パンくず・日付・著者名・カテゴリ名・タグクラウド・「すべての連載を見る」のような全件への導線、そして記事への入口のタイトルがこれにあたります。どちらか一方しか動かないので、部品ごとにどちらだったかを覚える必要がありません。

記事への入口が下線側なのは、背景も囲みも持たないからです。以前は中身の色を1段階落として返していましたが、その差は 1.62:1 しかなく、反応が起きたことを読み取れませんでした。状態は前後を並べて比べられないので、同時に見える2色の判別より大きい差が要ります。文字色を濃くする方向はもう無い（ink-strong が最も濃い段階）ため、色ではなく下線に替えています。

カードでも行でも反応は同じです。 記事一覧のカードと「よく読まれている記事」の行は、どちらもサムネイル・タイトル・年月の組で、同じ「記事1本への入口」です。形が違うだけで反応が変わると、読者からは同じものが場所によって別の動きをすることになります。当たる範囲は行のほうが広く、行のどこを押しても記事へ飛びますが、反応は行き先を名乗るタイトルと画像に出します。押せる範囲より反応が狭いぶんには、押しても何も起きないという裏切りは起きません。特集や連載のパネルも同じで、説明文や余白を押しても行き先へ飛びます。本文末の帯にある We’re hiring も、カードの形の1行き先としてここに入ります。

反応が出るのは、記事へ行くリンク——サムネイルとタイトル——を指している間だけです。 記事一覧のカードには日付・著者・カテゴリ・シェアボタンという別の行き先も並んでいて、カードに乗っていること自体を合図にすると、そこを指している間もカードが「この記事へ行く」と名乗ってしまいます。カーソルの真下にあるのは別の行き先なので、両方が同時に名乗ると押した先が読めません。

この線引きは、指している瞬間だけを止める形では引けません。 別の行き先どうしの間には隙間があり、メタ情報の項目の間で 28px、シェアボタンの丸の間で 12px あります。そこで反応が戻ると、メタ情報の上を1回なぞるだけで6回以上ついたり消えたりして点滅に見えます。カードの中の余白は連続した1つの面ではなく、行き先と行き先の隙間なので、余白での反応は誘いとして働くより先にノイズになります。

背景で返すのはナビゲーションの行です。サイドバーの軸やヘッダーのドロップダウンのように、メニューの項目が縦に並ぶ場所では、行の背景が変わるのが通り相場です。読み物の中に置いた記事の入口は、ここから外れます。

ヘッダーの帯の中だけは、下線も背景も動かさず文字色を1段階濃くします（帯から下がるドロップダウンの行は背景が変わります）。

フッターのリンクだけは例外で、下線が左から 0.25 秒で伸びます。読者がわざわざ辿り着いた先なので動きを持たせても認知負荷にならない、という判断です。開閉・展開は反応ではなく状態の変化なので、別の時間を持ちます。タブの切り替え、ドロップダウンと引き出しの開閉、検索窓の拡張、折りたたみの開閉がこれで、いずれも hover より長い側（0.12〜0.2 秒）に置きます。変わったことが読み取れるまで動きが続く必要があるからです。

フォーカスリング

キーボードで辿っている場所の目印は、ネイビー 2px のフォーカスリング1つです。反応（hover）と所在（focus）は別の役割なので、フォーカスリングに差し色を使いません。

リングは所在だけを示すので、反応は反応で別に返します。 記事への入口・目次・年月のカードは、キーボードで行き先を名乗るリンクに来たときにも、カーソルを乗せたときと同じ反応（タイトルの下線・画像の引き・面）を出します。リングだけにするとキーボードで辿る読者だけが「押せばこの記事へ行く」という合図を受け取れません。ヘッダーの帯の中だけは例外で、64px の帯に下線を重ねると合図が2つになるためリングだけにしています。

暗い背景（フッターとヘッダーの帯）ではネイビーが見えないので、on-dark-strong に替えます。白背景の入力欄のように背景が明るいまま暗い場所に置かれる部品は、色ではなく outline-offset: -2px で内側に逃がします。

状態

部品が「今どうなっているか」は、新しい色を足さずに、すでにあるスケールの中で1つだけ動かして表します。動かすのは太さか面のどちらか一方で、両方は動かしません。

現在地（active / current）

表し方は2通りあり、その部品がクリックできる面（ヒットエリア）を持つかどうかで決まります。文字だけが並ぶ帯では太字にし、ヒットエリアを持つ部品では面を塗ります。帯の中で面を塗ると現在地だけが浮き、ヒットエリアを持つ部品で太字にすると押せる範囲が変わらないので所在が読めません。

パンくずの帯がこの形です。3つが同じ色のまま素・下線・太字で見分けられます。色は動かしません。 14px の帯の中で色と太さを同時に動かすと、現在地だけが黒く浮いて見えます。

現在地はリンクにしません。押しても同じ場所に来るリンクは、行き先を辿るときに空振りになります。目で見る読者・支援技術・機械の3方向に同じ違いを渡すため、太字と併せて aria-current="page" を付けます。

無効・空（disabled）

このサイトには押せなくなるボタンやフォームがありません。代わりに「まだ無い」「もう押せない」を表す形が3つあります。

歯抜けを詰めません。 投稿が無い月を一覧から落とすと、無いのか見落としなのかが読者に区別できません。同じ大きさの空き枠を置いて、無いことを見えるようにします。

ink-faint は白背景でコントラスト比 4.5 を満たす最も薄い文字色です。これより薄くしません。 「無効だから読めなくてよい」ではなく、無効な項目も何であるかは読める必要があります。

部品

note

4色あり、背景は色相を持ちます。中のインラインコードの背景は、その背景より1段階濃い同じ色になります。4色でも表のヘッダでも同じ規則が効きます。書き方は記法ガイドにあります。

表

ヘッダに背景色（surface-tint）を敷き、本文行は白で揃えます。全セルの罫線が行を追う役割を果たしているので、縞は入れません。横に溢れる表は .scroll が受けます。

チップ

タグはピル型のチップで表します。枠だけで地を持たず、hover で背景がネイビーに変わります。右肩の件数は、サイドバーやヘッダーの一覧で名前に添える総数と同じ役なので、同じ大きさ・同じ ink-faint です。hover で地が反転する間だけ、反転後の文字色を継ぎます。実物はタグ一覧にあります。

この形を借りるのは、記事タイトルの上で名乗るチップ（受賞・連載）だけです。アイコンを持ち、太字で文字色が一段濃いので、タグのチップとは見分けが付きます。反応は地がネイビーではなく灰に変わります。実物は受賞記事と連載の記事にあります。

群のある一覧

行き先が多い一覧（タグ一覧の「すべてのタグ」は全件を並べます）は、頭文字や年で群に分け、左のラベルが群を名乗る行に並べます。群の範囲は空きではなく行の上下の罫線が示します。群が多いときは節の先頭に群への飛び先を1行置きます。実物はタグ一覧と著者一覧にあります。

1件が数行にわたる一覧では、ラベルを行の左ではなく群の上に置きます。このときの群の範囲は罫線ではなく空きが示し、群の切れ目を件と件の空きのちょうど2倍にとります。ラベルは件より少しだけ字下げの外に出しますが、階層を作るのは空きの側なので強くは振りません。2列に並べるときは、行の高さを左右でそろえるグリッドではなく多段組にします。グリッドだと背の低い側の下に余りが出て、同じ群の中の空きが群の切れ目より広くなることがあり、空きが階層と逆のことを言い始めます。実物はカテゴリ一覧にあります。