ブログ · ブログデザイン

ブルータリスト調のブログトップ

太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の"整いすぎ"を拒むラフさを残す設計。

PUBLISHED — 2026年4月23日 UPDATED — 2026年4月23日 CATEGORY — ブログ LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/brutalist-blog/

概要

大手メディアのブログも、WordPressテーマのブログも、驚くほど似た顔をしています。アイキャッチ画像、大きな見出し、右サイドバー、共有ボタン——その「テンプレ顔」から脱するための選択が、ブルータリスト調のブログトップです。

整えないことを、選択として見せる

ブルータリズムの肝は、「整えられないから雑」なのではなく「整えないことを意図的に選んでいる」と伝わることです。極太サンセリフ、太い罫線、限定的な蛍光アクセント、剥き出しのモノスペース。これらを見た読者は、無意識に「この書き手には明確な意思がある」と感じ取ります。洗練を捨てることが、独立メディアやジン、個人ブログの「人格」を立てるのです。

活字と罫線を前に出す

テンプレ顔から脱する最も手軽な方法は、画像や装飾を減らし、活字と罫線を主役に引き上げることです。見出しを物体のように大きく扱い、記事を新聞のように番号で管理する。装飾がない分、書き手の言葉そのものが画面の主役になります。これは「文章に自信がある書き手」にとって最高の舞台です。

仕上げの判断軸

ワードマークはモノスペース＋「.txt」のようなサフィックスでテック系の遊びを効かせます。マストヘッドの巨大タイトルは line-height 0.85 まで詰め、見出しを画面を占有する物体に。注目記事は黒背景＋白文字の反転カードで階層を1つだけ強く示します。全記事に01/02/03の番号ピルを振ると、新聞的な「記事数の密度」が視覚化される。プルクォートの帯や「Built in public · No trackers」のようなフッターのメタ情報が、個人サイトらしい時系列感と自己言及性を底で支えます。

使いどころ

個人で書き続ける意思のあるライター/デベロッパーのブログ
小規模な独立メディア・ジン・ニュースレターの Web 拠点
SaaS プロダクトでも、エンジニアリング文化を前に出したい公式ブログ

カテゴリ: ブログ
スタイル: ブルータリスト / モノクロ / エディトリアル / ボールド

背景と狙いどころ

Context

Category · ブログデザイン

ブログ

記事一覧・記事詳細ページ。

カテゴリ一覧を見る →

Style · ブルータリスト

ブルータリスト

生々しい、装飾を拒むラディカルさ。

スタイル一覧を見る →

Style · モノクローム

モノクロ

単色または白黒で統一されたトーン。

スタイル一覧を見る →

AIへの指示文

個人ブログまたは小規模メディアのトップページを、ブルータリスト調で作ってください。

キャンバス:
- ペーパーグレー背景 (#f0efea)、近黒インク (#0a0a0a)、ミュート (#555)。
- アクセントは蛍光レッド (#ff2d00)。使用場所は限定し、ブランドを一点で立たせる。
- サンセリフ (Helvetica Neue / Inter) を見出し・本文に、モノスペース (JetBrains Mono) をメタ情報・ナビに。
- 罫線は 3px (構造線) と 1px (内部分割) の2段階のみ。

ヘッダー:
- 左に "SIGNAL" のワードマーク。モノスペース、weight 700、letter-spacing -0.05em、最後に赤い ".txt" を添える。
- 右にユーティリティナビ (Home / Writing / Field Notes / Subscribe)。モノスペース、uppercase。アクティブは黒背景+白文字のピル。
- 下辺に 3px の境界線。

マストヘッド:
- 上部に1行のメタ行 (uppercase mono): "Issue № 42"、"2026.04.23"、"12 entries"、右に "Published in public"。
- 巨大タイトル "Writing / unsorted."、clamp(3rem, 12vw, 10rem)、weight 900、line-height 0.85、letter-spacing -0.05em、uppercase。"/" を赤アクセントに。
- 下辺に 1px の境界線。

メイングリッド (3 カラム):
- 左に "featured" 記事 (span 2)。黒背景+白文字で反転。
  - kicker 行に赤い "01" 番号ピル + "Essay · 12 min read"。
  - 大見出し (clamp 2.25rem → 3.2rem、weight 900)、2行構成。
  - デック (概要文) をミュート色で。
  - 下部に点線ボーダー + byline + "read →" リンク。
- 右の2つは通常カード。1px 境界線で分離。
- 下辺に 3px の境界線。

プルクォートバンド:
- 背景全面を赤アクセント、文字は近黒で反転。
- blockquote は clamp(1.75rem, 4vw, 3rem)、weight 900、line-height 1.05。
- 下に "→ from issue №41, 'Drafts'" の attribution (mono, uppercase)。
- 下辺に 3px の境界線。

セカンダリグリッド (4 カラム):
- 4つの小記事カード。kicker に赤番号ピル、h3 (weight 800)、メタ情報を mono ミュート。
- 1px の縦境界線で区切る。
- 下辺に 3px の境界線。

下部インフォバー:
- モノスペース、uppercase。左に archive リンク列、右に "Built in public · No trackers · RSS inside"。
- "Archive" 部分だけ黒背景+白文字の emph ピル。

レスポンシブ:
- 900px 以下: 3カラム → 2カラム、featured は span 2 維持。4カラムは 2カラムへ。
- 560px 以下: 全て 1カラム積み。

JS 不要、純粋 HTML/CSS。

バリエーション

ダーク反転版

背景と文字色を完全反転 (#0a0a0a → #f0efea)。
赤アクセントはそのまま維持。
featured 記事は逆に明るい背景+暗い文字にして、反転の反転を効かせる。

ニュースレター寄り版

ヘッダーの右端の "Subscribe" を大きなボタンに昇格(黒背景+白文字、角なし)。
マストヘッドの下にメール入力 + 購読ボタンの帯を追加する(赤アクセント背景)。
コンテンツ構造は維持。

よくある質問

蛍光色はアクセシビリティ的に問題ない？

アクセントを 1 色に絞り、面積を小さく保てばコントラストは十分取れます。赤背景のプルクォートバンドは文字を近黒で入れるため 4.5:1 を超えます。色盲対策として、赤アクセントに必ず記号(番号ピル、"/")を添える設計にしています。

極太フォントは日本語で使えますか？

Helvetica Neue / Inter の日本語フォールバックは不自然になるので、日本語の見出しには Noto Sans JP Black か Hiragino Sans W9 を明示的に当ててください。英字部分だけ Helvetica/Inter に振る font-family 構成で綺麗に揃います。

画像なしでトーンは保てる？

保てます。このブルータリスト型は画像に頼らない前提で設計されています。画像を入れる場合は、フィルタで彩度を落とす(`filter: grayscale(1) contrast(1.1)`)と統一感が崩れません。

マンガのコマ割りで読ませるブログ記事一覧

日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。

ブログコミックモノクロ

新聞紙面風のブログ・記事一覧ページ

大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。

ブログ新聞エディトリアル

装飾を拒むブルータリズムのヒーロー

角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。

ブルータリストボールド