ウェブサイトデザイン

私が運営する4つのサイト（内部通報制度をめぐる裁判記録・この制作物紹介サイト・決算・株価データ検証・E資格 動く数式ノート）は、同じデザインの考え方で作っています。静的サイトジェネレーターの Zensical で作り、GitHub Pages などで公開しています。

このページは、その考え方と、4サイトで見た目をそろえ続けるための運用の解説です。

原則

読む人の注意を、内容だけに向けるための原則です。

1. ミニマル・控えめ：色は紺1色と無彩色のグレー。多色づかい、色付きの枠、アイコン付きの囲みは使いません
2. 罫線を使わない：区切りは、余白、面の濃淡、細い左罫の順に選びます。枠線で囲みません
3. 見出しは太字にしない：サイズ（細字）と、行頭の紺のバーで立てます
4. 警告の赤は警告のときだけ。ブランド色（ENEOSの橙）は共通に入れず、使うサイトだけに置きます
5. 縦の余白は「下の要素」が持つ：margin-top だけで決め、margin-bottom や gap は使いません。補正の計算が連鎖して壊れるのを防ぐためです
6. ライトとダークの両方で読めることを、色を決める条件にします

裁判記録のサイトでは、感情に訴える装飾を避けることが、そのまま信頼性になります。他の3サイトも同じ静かさに合わせ、運営者が同じだと伝わるようにしています。

色・余白・文字

• 色：メインの紺（ダークでは明るい青）、面のグレー、補足の文字色、警告の赤。新しい色は足さず、必要になったら既存の色で表せないか先に確かめます
• 余白：1 → 2 → 4 → 6 → 8rem の段から選び、3.3rem のような独自の値は作りません。スマホでは 6rem と 8rem を 3rem に圧縮します
• 文字：本文16px、見出しは細字。本文の幅は約40字（32rem）に絞ります

値の一覧と使いどころは、ENEOS訴訟の記録サイトの解説のデザインシステムの節にあります。

英数字の表記（全角・半角）

裁判文書は全角の書式なので、全角が習慣になっていました。一方、検索やSNSカードでは半角のほうが確実です。そこで、次の基準を決めて4サイトでそろえています。

裁判文書の引用は、原文の表記のままです。

4サイトで見た目をそろえる仕組み

サイトごとにCSSをコピーして直していくと、すぐにずれます。実際、3サイトで約900行の差が出ていました。そこで、共通のCSSを1か所（正本）に集め、各サイトへ同期する形にしました。

• どこに置くか：3サイトで使うなら layout・components、2サイトなら parts、1サイトだけならそのサイトのCSS。両方で実際に使っているルールだけを共通にします
• コピーは直接直さない：各サイトの shared/ は同期で作り直されるので、共通の変更は正本だけで行います
• サイト固有のCSSも、色は共通の変数だけを参照します（色コードを直書きしない）
• E資格ノートは文字サイズの体系が違うため、tokens.css だけを取り込みます

Zensical で作るときの判断

Zensical は MkDocs/Material と互換を目指していますが、MkDocs のプラグインも Python フックも読みません。そのため、次の方針にしています。

• プラグインやフックに頼らない。ページごとの体裁は、ページ先頭の目印とCSSの :has() で切り替えます
• 標準の部品に任せる。ドロップダウンの開閉は、独自のJSではなく <details>/<summary> にしました。独自の処理は利用者の端末によって動かないことがあったためです
• 共通CSSはクラスと変数だけで完結させる。ページごとにクラスを付ける仕掛けに頼りません
• MkDocs + Material でもビルドできる状態を、予備として残しています

具体的な実装（タブのドロップダウン、アコーディオン、サイドノート、PDFの扱い、公開の自動化）は、裁判記録サイトの技術解説にまとめています。

変更するときの確かめ方

共通CSSを変えたときは、影響するサイトを実際に開いて確かめます。余白を整理したときは、PCとスマホの全セクションの間隔をブラウザで実測し、変更の前後でピクセル単位で同じであることを確認しました。