「行政文書風CSS」、この企画の“空気”を決める超重要パーツ。
ここがハマると、ただの創作サイトじゃなくて👇
「実在する巨大構造体の記録システム」
になる。
しかも面白いのが、
行政文書って本来“感情を消すためのデザイン”なんだよね。
だから逆に👇
👉 感情を抑えた文面ほど、悲劇が滲む
これがバベル世界とめちゃくちゃ相性いい。
■基本思想
■やること
「読みやすくする」じゃない。
👉 「公的資料っぽく見せる」
■行政文書風CSSの特徴
■①余白が硬い
普通のブログ👇
- 空気感
- 広い余白
行政文書👇
- 詰まってる
- 整列
- 密度高い
■②線が多い
- 境界線
- 表
- 区切り線
👉 “記録物”感が出る
■③強調が冷たい
❌ ポップな色
⭕ 赤字・太字・警告線
■④情報が整理されすぎてる
それが逆に怖い。
■世界観に合う具体CSS
■1. 基本背景
body {
background: #0a0a0a;
color: #d6d6d6;
font-family: "IBM Plex Sans JP", sans-serif;
line-height: 1.8;
}
■2. 文書コンテナ
.document {
max-width: 920px;
margin: 40px auto;
padding: 32px;
border: 1px solid #2f2f2f;
background: #111;
}
👉 “保管ファイル”感
■3. 見出し（重要）
h1, h2, h3 {
border-left: 4px solid #7a1f1f;
padding-left: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
👉 「官報」っぽくなる
■4. 記録番号
.record-id {
font-family: "IBM Plex Mono", monospace;
color: #999;
font-size: 0.9rem;
}
例👇
RECORD ID : C-17-2089-05
■5. 警告ボックス（かなり効く）
.alert {
border: 1px solid #7a1f1f;
background: rgba(122,31,31,0.1);
padding: 16px;
color: #d9b0b0;
}
表示👇
警告：
当区域は黒海接触危険区域に指定されています。
■6. 表デザイン（超重要）
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
padding: 10px;
}
th {
background: #1b1b1b;
}
これだけで👇
👉 “選別局資料”感が出る
■7. 時刻表示
.system-time {
font-family: monospace;
color: #888;
text-align: right;
}
表示例👇
BABEL STANDARD TIME
2089-05-11 21:48
■8. ノイズ感（やりすぎ注意）
ほんの少しだけ👇
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.03;
background-image:
repeating-linear-gradient(
to bottom,
transparent,
transparent 2px,
rgba(255,255,255,0.03) 3px
);
}
👉 古い監視端末感
■9. リンク
a {
color: #cfcfcf;
text-decoration: none;
}
a:hover {
color: #b33;
}
👉 “業務システム”感
■10. 投稿タイトル（めちゃ重要）
.post-title {
text-transform: uppercase;
letter-spacing: 0.06em;
}
表示例👇
【中層C-17切断報告】
■かなり重要な演出
■「感情がない」
デザイン側は👇
- 無機質
- 事務的
- 冷たい
でも内容が👇
避難完了者：68
非避難者：記録対象外
👉 だから怖い
■やりすぎ注意ポイント
❌ SFゲームUI化
- 青発光
- サイバー
- ネオン
これは違う。
❌ アニメ公式サイト化
- キャラドーン
- 派手演出
世界観が軽くなる。
■理想の空気感
混ぜるべきもの👇
- 官公庁
- 災害対策本部
- 古い監視端末
- インフラ管理
- 建築資料
■この企画で超強いこと
あなた、行政書士やってるから👇
👉 “公文書っぽい気持ち悪さ”
を自然に出せる。
これはかなり武器。
