設計の憲法

なみのまは、体調に波がある人が読むことを前提に作られています。
このページは、画面のひとつひとつの決め方と、その理由を書いたものです。
「なぜこの表記なのか」「この線は何を意味するのか」が分かるように、決めた数値ごと公開します。
守れなくなったら、黙って変えずに、このページを書き換えてから変えます。

第1条 読む人の条件を、設計の条件にする

想定する読者は、線維筋痛症・ME/CFS の当事者と、その周りの人です。
読む力ではなく、読む体力が日によって変わります。光がつらい日、首を支えるのがつらい日、判断を何度もするのがつらい日があります。
だから、このサイトの設計は「きれいに見えるか」より先に、次の4つで判断します。

1. 眩しくないか（面の明るさ・彩度）
2. 首と目を動かす量が少ないか（1行の長さ・スクロールの量・目次）
3. 判断の回数が少ないか（1画面の選択肢・線の本数・色の数）
4. 手が不自由でも操作できるか（押せる大きさ・キーボードだけで届く）

第2条 文字と行 — 数値ごと決めている

組版の決めと、その理由

項目	決め	理由
本文の大きさ	17px 相当（rem 指定。ブラウザや OS の文字設定に追従）	「大／特大」に切り替えられるよう、固定 px を使わない
行間	2.0（本文）。見出しは 1.45〜1.6	参考にした複数の読みやすいサイトを実測した結果、行間 2.0 が共通していた。1.8 では行の区別がつきにくい人がいる
字間	+0.05em（本文）。和文の見出しも必ず正の値	和文で字間を詰める（負の値）と、目が字を切り分ける負担が増える
1行の長さ	約41字（最大 43em）	視線が行頭に戻るときの迷いを減らす。40〜45字が実測の共通帯
段落の間	本文1行分	「どこまで読んだか」を見失わせない
見出しの上	本文の 4〜5行分の空き	空きで区切る。線で区切らない
書体	和文はお使いの端末の標準ゴシック。欧文は Inter をサイト内に置いて配信	外部のフォント配信サービスを読み込まない（第7条）

第3条 線の意味 — 太さは1種類、意味は3つ

このサイトの線は、すべて 1px です。太い線・影・枠の装飾は使いません。
線の意味は、実線か破線かと、長さで決めています。

線の種類ごとの意味と、使う場所

線	意味	使う場所
実線・画面の端から端まで	領域が変わる	ヘッダーの下、記事の「題」と「本文」の境、章の見出しの下、フッターの上
実線・本文の幅	並んだものの区切り	目次の行、一覧の行、副題の上
破線	同じ領域の中の小さな区切り	記事カードの段の間、柱書きの間、要点の帯、表の罫

決まりごと:
線と線の間は本文1行分以上あける。並んだものの最上部と最下部には線を引かない（見出しの線と余白が境界を兼ねる）。平行する線を2本続けない。縦の線と横の線を接触させない。
見出しの上の短い太い印（1.25rem × 4px）だけは線ではなく記号です。章の始まりを示します。

第4条 色 — 色は使わず、画像に持たせる

文字は墨（#1F2226）、面は紙。アクセントの色を UI に使いません。 色があるのは写真と挿絵だけです。
理由は2つ。彩度の高い面は光過敏の人に負担になること。色で意味を分けると、色の区別がつきにくい人に意味が届かないこと。強調は太字と薄墨のマーカー（#DFE3E8）で行います。
文字と背景のコントラスト比は 15〜17.4 : 1（WCAG の AA 基準 4.5:1、AAA 基準 7:1 を大きく上回る）。ただし純黒の文字を純白に置く 21:1 は使いません。硬すぎて眩しく感じる人がいるためです。

第5条 背景と配色 — 既定は白。ただし選べる

既定の背景は白（#FFFFFF）です。眩しさが気になる人のために、画面右下に出したままの「表示設定」で 背景を5つから選べます。

選べる配色と、背景の色の値

配色	背景	値
明るい	白（既定）／グレー／キナリ	#FFFFFF／#F4F5F7／#F8F6F3
暗い	ダーク（既定）／黒	#17181A／#000000

ダークか黒を選ぶと配色は自動で「暗い」に、白・グレー・キナリを選ぶと「明るい」になります。
黒は有機 EL の画面で発光を止められるので、光がつらい日に向いています。一方、黒に白い文字はハレーションを起こす人もいます。どちらが楽かは人によって逆になるので、既定を押しつけず選べるようにしています。
設定はお使いのブラウザにだけ保存され、サイトには送られません。

第6条 動き — 止まっているのが既定

このサイトは、何も動きません。 スクロールに連動する演出、自動で切り替わるカルーセル、ホバーで動く要素は作りません。
OS の「視差効果を減らす」設定は尊重しますが、それは最終防衛線であって、頼りにしていません。
「表示設定 › 動き › 再生」を選んだときだけ、リンクの色の変化などごく小さな遷移が有効になります。

ただし、手ならし（新しいタブで開きます）のページだけは、的が出たり消えたりします。マウスやトラックボールを練習するための道具なので、動かないと成立しないためです。例外はこの1ページだけです。増やすときは、ここに書き足してから増やします。

この1ページでも、次の4つは守ります。

• アニメーションを使いません（ふわっと出る・大きさが変わる、はありません）
• 減っていく時計やバーを出しません。経過時間も画面に出さず、終わってから出します
• 色を使いません。押した所は点、外した所は破線の丸で残ります
• 「表示設定 › 動き › 止める」のままでも動きます（動きの設定に依存しません）

第7条 測り方 — 測る。そのうえで、外れられるようにする

この条は、公開前に一度書き換えています。はじめは「第三者の解析サービスを使わない」と書いていました。いまは Google アナリティクス（GA4）を使っています。約束を変えたので、変えたことを残します（日付はページ末の「改正の記録」に置いています）。

変えなかったのは、次の1点です。外れたい人が、いつでも、何の不利益もなく外れられること。

外れると何が起きるか「表示設定 › 計測 › 外れる」を選ぶと、そのブラウザでは解析そのものを読み込みません。cookie は1つも作られず、Google へ送られる情報もありません。ブラウザが「追跡を拒否」（DNT／Global Privacy Control）を送っている場合も同じです。外れても、サイトの機能は何も変わりません。

測るもの

このサイトが測っているものと、その目的

測るもの	何のために
ページごとの表示回数・読まれたページ	どの記事が必要とされているかを知り、次に何を書くかを決める
どこから来たか（検索・SNS・リンク元）	検索なのか、X なのか、人づてなのかで、書き方が変わる
画面の幅・端末の種類・おおよその地域	どの幅で読まれているかに合わせて、行の長さと余白を決める
表示設定の選ばれ方（背景・文字サイズ・動き）	眩しさや文字の大きさの既定が、本当に合っているかを確かめる
エラー（見つからないページ・壊れたリンク）	直す
サイト内検索で探された語	探して見つからなかったものを、書く
cookie による識別子	同じブラウザからの再訪を、同じ訪問者として数える
お知らせのメールの開封とクリック	どのお知らせが読まれたかを、サイトの数字だけでなくメールの反応からも知る。開封はメールの中の見えない画像で、クリックはリンクを経由して記録します。「どのアドレスが、いつ開いたか」という形で残ります。登録の確認や解除など、手続きのメールは記録しません

測らないもの

• 広告のための情報。Google シグナルと広告のパーソナライズはオフにしています
• 登録者と閲覧の記録の結びつけ。誰が何を読んだかは見ません
• 氏名・メールアドレスを解析へ送ること
• 画面の録画、マウスの軌跡、ヒートマップ

約束

1. 外れられます。「表示設定 › 計測」から、いつでも。外れたことによる不利益はありません
2. ブラウザが「追跡を拒否」を送っている場合は、最初から読み込みません
3. どの会社に何が送られるかを公開します（「情報の外部送信について（新しいタブで開きます）」）。送信先を増やすときは、そのページを先に書き換えます
4. 測る項目を増やすときは、このページを先に書き換えます
5. 数字を目標にしません。読者数・表示回数を KPI にせず、年に1回だけ見て、直したことをこのページの末尾に書きます

ほかに、外に出していないもの

• 外部のフォント配信を読み込みません
• 登録に使うメールアドレスは、配信と解除のためだけに使います。ほかの用途に使わず、渡しません
• 表示設定（配色・背景・文字サイズ・動き・計測）は、お使いのブラウザの中にだけ保存されます。サイトには送られません

第8条 操作 — 手が不自由でも届く

• 押せるものは 44×44px 以上（WCAG 2.2 の最低基準 24×24px より大きく取る）。
• キーボードだけで全ページの全機能に到達できます。フォーカスは 2px の赤い枠で常に見えます。
• ドラッグ・長押し・ダブルクリックを操作に使いません。
• ページ先頭の「本文へスキップ」で、ナビゲーションを飛ばせます。
• 目次は常に開いています（開く操作をさせない）。長い記事は目次で戻らずに読めるようにしています。

第9条 画像と挿絵 — 情報は画像に頼らない。明るさも、紙に合わせる

• 図版には、AI で生成した挿絵と、編集部が撮った写真があります。どちらであるかは毎回、キャプションに書きます（「イラスト｜編集部（AI生成）」／「写真｜編集部」）。
• 画像に説明文（alt）を必ず付けます。飾りの画像は「飾り」と明示して、読み上げをさせません。
• 情報を画像だけで伝えません。表は表として、数字は文字として書きます。
• 挿絵は、明るい紙でも暗い紙でも眩しくないように出します。第5条で背景を5つから選べるようにしているのに、画像だけが白いままだと、発光を止めたくて黒を選んだ方に、画像だけが光を返すことになります。そこで暗い配色のときは、画像の明るさを自動で落として出しています。落とす量は紙ごとに変えています（ダークより黒のほうを強く落とします）。
• 元の色で見ることもできます。道具の写真などは、色そのものが情報です。画像の右上に出る丸いボタンを押すと、その1枚だけ元の色に戻ります。もう一度押すと戻ります。ずっと元の色で見たいときは「表示設定 › 画像 › そのまま」を選んでください。この設定も、お使いのブラウザにだけ保存されます。
• 挿絵はほぼモノトーンで作っています。色は1か所だけ、小さく使います。

第10条 記事の部品 — それぞれの意味

記事の画面に置いているものと、その意味です。飾りは置きません。ひとつずつ役目があります。

記事の画面に置いている部品と、その意味

部品	意味
In 3 lines（3行でいうと）	記事の要点3つ。ここだけ読んで閉じてもいいように、本文の前に置きます。1行は全角40字までにして、どの画面幅でも3行に見えるようにしています
目次	番号付きで常に表示。「読むかどうか」を決める道具です。長い固定ページにも同じものを置きます。画面が広いときは、右側にいま読んでいる場所が分かる目次も出ます（本文の邪魔をしない位置に置き、フッターより下へは行きません）
この記事の人	著者・話し手・監修者の紹介。目次の後、本文の前
番号付きの章	章は 01 から。長い記事は章で区切り、戻らずに読めるようにする
上下の罫で挟んだ太い文	その回で1文だけ持ち帰るならこれ、という文。名言ではなく記事の核。話し手がいる回では、その人の言葉を置きます
薄墨のマーカー	インタビューで、話の要点を目で拾うため
用語へのリンク	本文に出てくる語を、その記事での初出1回だけ用語集につなぎます。手で書かず機械が入れます
リンクカード	枠と題で見せるリンク。本文の中のリンクは新しいタブで開きます（読みかけの場所を失わないため）。外部のカードには画像を出しません（読者の端末が他社へつながないため）
道具の買える場所	紹介した道具の型番と、買える場所。広告（アフィリエイト）を含む記事では、冒頭にその断りを出します
タグ	枠（カテゴリー）をまたいで主題で束ねるための印。1本に1〜4つまで
ここまでで要点は終わりです（破線の帯）	以降は詳細。体調が良い日に戻ってくればいい
登録した方が読める続き	全編はメールで届く。読む場所を選べるように。会員限定でも、導入と最初の1〜2節は公開します
この記事について	この記事を作るのにかかった稼働・反動・AI の使用範囲・掲載範囲を、毎回書く

第11条 準拠している規格と、検証の仕方

準拠している規格・基準と、その内容

規格・基準	準拠の内容
WCAG 2.2 レベル AA	コントラスト・ターゲットサイズ・フォーカス・キーボード操作・見出し構造・言語属性。コントラストは AAA（7:1）も満たす
JIS X 8341-3:2016	WCAG 2.0 と同一の達成基準。レベル AA に相当
HTML Living Standard／WAI-ARIA 1.2	ランドマーク（header・main・nav・footer）、aria-pressed、aria-current、aria-live
prefers-color-scheme／prefers-reduced-motion	OS の設定に追従。そのうえで手動で上書きできる

検証は4段階で行い、自動判定が満点でも、実地で読めなければ作り直します。

1. 自動: Lighthouse のアクセシビリティ 100点、axe の critical／serious ゼロ
2. 手動: 文字サイズ 200% で横スクロールが出ないこと、キーボードだけで一周できること
3. 3条件: 光過敏・首と上肢・ブレインフォグのそれぞれで、1画面の負担を確かめる
4. 実地: 当事者に、体調の悪い日に読んでもらう

第12条 改正の手続き

この憲法は、編集部の都合で黙って変えません。
変えるときは、このページを先に書き換え、変更日と理由を末尾に残します。
「守れなかった」ことも、隠さずここに書きます。

第13条 角 — 押せるものは丸く、囲いは角ばったまま

直線は「区切り」の意味を持っています。表の罫、節の境、囲い。これらは読むためのしるしであって、押すものではありません。ここに角を丸めると、押せそうに見えてしまいます。

角を丸めるもの・丸めないもの

もの	角
押せるもの（リンク、ボタン、その領域ぜんぶがリンクの箱）	丸くします
領域の中にリンクがあるもの（カード、パネル、メニュー）	丸くします
押せない囲い（表、罫線、ただの枠、区切りの線）	丸くしません
画像・サムネイル	丸くします（囲いではなく面のため）

並んだ箱は、くっつけたまま外側の4つの角だけを丸めます。箱ごとに丸めて隙間を空けると、ばらけて散らかって見えるためです。

第14条 表 — 何の表かを書く。左右で意味が違うときは同じ幅にする

表は、画面では小さく見えますが、読み上げにも、検索にも、生成AIにも同じ形で渡ります。そこで2つ決めています。

• すべての表に「何の表か」を書きます（表の上の小さな一文）。列の名前だけでは、表そのものが何かは伝わらないためです
• 左右が対等な表は、同じ幅にします。そうしないと、文字数の多いほうだけが広がって、対比が対比に見えません
• 「項目 → 説明」の形の表は、項目の側にも読める幅を与えます

第15条 余白 — 何かを足しても、詰まらないようにする

読みにくさは、文字の大きさよりも先に余白の無さから来ます。文字と文字がくっついていると、どこまでが1つのまとまりなのかが分からなくなり、目が行き先を探すことになります。体調に波があるときは、その「探す」がいちばん高くつきます。

そこで、余白に下限を決めました。見た目の好みではなく、数字で決めています。

• 要素と要素のあいだ … 本文の中は 14px 以上、それ以外は 8px 以上
• 題と副題、名前と肩書きのように「1つのまとまり」として読むもの … 4px 以上。まとまりであっても、ぴったりくっつけることはしません
• 囲い（線や地色を持つ箱）の内側 … 四方 12px 以上

例外は2つだけです。それ自体が区切りである線と、ボタンやタグのような部品（部品は高さそのもので場所を作っているためです。第8条の 44px がそれにあたります）。

この条は、目で見て直すのをやめるために作りました。余白が消えるのは、たいてい新しいものを足したときです。書き手が悪いのではなく、入れ物の側が「何が入っても大丈夫」になっていないために起きます。ですのでこの下限は、全ページを描画して機械で測っています。足りないところがあれば、公開の前に分かります。

第16条 リンクの置き方 — 並べない。選ぶ

リンクを箇条書きでずらっと並べるのは、いちばん弱い置き方です。どれが本命か分からず、名前だけでは中身も分かりません。そこで、次のどれかにすると決めました。

リンクの置き方と、その使いどころ

置き方	いつ使うか
文の中のリンク	本文を読みながら「ここが根拠です」と示すとき
表	行き先が複数あって、比べて選ぶとき
カード	その記事でいちばん読んでほしい行き先。1本に2〜3枚まで
箇条書き	並列で、比べる軸が無いときだけ
出典	参照した一次情報。記事の末尾にまとめて

カードを並べすぎると、カードの意味が消えます。全部が「ここぞ」なら、どれも「ここぞ」ではなくなるからです。

改正の記録
2026-09-14 制定（v1）＝サイト公開
公開前の検討
2026-09-05 第4条の運用を決め直した（アフィリエイトを行う。広告である旨を記事の冒頭に表示する）
2026-09-05 第7条を書き換えた（「解析を入れない」→「人を追わずに、直すために測る」。測る項目を明記し、計測から外れる設定を追加）
2026-09-05 第7条をもう一度書き換えた（Google アナリティクスを使う。第三者の解析を使わないという約束を取り下げ、代わりに「読み込む前に外れられる」ことを約束として立てた。併せて「情報の外部送信について」を新設）
2026-09-05 初稿（v1 の原型）
2026-09-05 AI の使い方を決め直した（下書きの作成にも使う。ただし、そのまま公開せず、必ず人が確認・調整してから公開する）
2026-09-07 第6条を書き換えた（手ならしのページだけを例外にしました。練習の道具なので、的が出たり消えたりしないと成立しないためです。例外を1つ作る代わりに、その1ページでも守ることを4つ書きました。例外はこの1ページだけです）
2026-09-07 第9条に追記（画像の明るさを紙に合わせることと、元の色で見る道を書きました。きっかけは「黒い画面で見ると画像の背景が白くてチカチカする」という指摘です。第5条で「黒は発光を止められる」と書いておきながら、画像だけがその選択に従っていませんでした。新しい制限ではなく、抜けていた約束を書き足したものです）
2026-09-11 第15条を新設（余白の下限。きっかけは「よくある質問の答えに項目を足したら、項目のあいだが詰まって読みにくい」というご指摘です。調べたところ、質問と質問を分けるための線が、答えの中の項目のあいだにまで入っていました。足した側ではなく、入れ物の側の問題でした。∴ 好みではなく数字で下限を決め、全ページを描画して機械で測るようにしました）
2026-09-11 第16条を新設（リンクの置き方。リンクを箇条書きで並べるのをやめ、比べるなら表、いちばん読んでほしい1つならカード、と決めました。カードは1本の記事に2〜3枚まで。並べすぎると、どれが本命か分からなくなるためです）