ブログ · ブログデザイン
ブルータリスト調のブログトップ
太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の「整いすぎ」を拒むラフさを残す設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/brutalist-blog/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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" を大きなボタンに昇格(黒背景+白文字、角なし)。 マストヘッドの下にメール入力 + 購読ボタンの帯を追加する(赤アクセント背景)。 コンテンツ構造は維持。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>ブルータリスト調のブログトップ — Vibehaus プレビュー</title>
<style>
:root {
--bg: #f0efea;
--fg: #0a0a0a;
--fg-muted: #555;
--accent: #ff2d00;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sans: "Helvetica Neue", "Inter", "Noto Sans JP", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--sans);
color: var(--fg);
background: var(--bg);
min-height: 100dvh;
line-height: 1.7;
}
header.site {
border-bottom: 3px solid var(--fg);
padding: 1rem clamp(1rem, 3vw, 2rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wordmark {
font-family: var(--mono);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: -0.05em;
text-transform: uppercase;
}
.wordmark::after {
content: ".txt";
color: var(--accent);
font-weight: 500;
}
nav.utility {
display: flex;
gap: 1.5rem;
font-family: var(--mono);
font-size: 0.85rem;
text-transform: uppercase;
}
nav.utility a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
nav.utility a.active { background: var(--fg); color: var(--bg); padding: 0.15rem 0.4rem; text-decoration: none; }
/* Masthead */
.masthead {
border-bottom: 1px solid var(--fg);
padding: 2rem clamp(1rem, 3vw, 2rem) 3rem;
}
.issue-line {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
letter-spacing: 0.04em;
}
.issue-line .meta-cluster { display: flex; gap: 2rem; }
h1.masthead-title {
font-family: var(--sans);
font-weight: 900;
font-size: clamp(2.6rem, 10vw, 8rem);
line-height: 1.3;
letter-spacing: 0;
margin: 0;
}
h1.masthead-title .slash { color: var(--accent); }
/* Grid */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
border-bottom: 3px solid var(--fg);
}
article.entry {
border-right: 1px solid var(--fg);
padding: 1.5rem clamp(1rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
article.entry:last-child { border-right: 0; }
article.entry.featured {
grid-column: span 2;
background: var(--fg);
color: var(--bg);
padding: 2.25rem clamp(1.5rem, 3vw, 2.5rem);
}
article.entry.featured .accent { background: var(--accent); color: var(--bg); }
.kicker {
font-family: var(--mono);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.kicker .num { background: var(--accent); color: var(--bg); padding: 0 0.35rem; }
h2.entry-title {
font-family: var(--sans);
font-weight: 900;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.5;
letter-spacing: 0;
margin: 0.25rem 0 0.5rem;
text-transform: none;
}
article.entry.featured h2.entry-title {
font-size: clamp(2rem, 3.6vw, 2.8rem);
line-height: 1.4;
}
.dek {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--fg-muted);
margin: 0;
}
article.entry.featured .dek { color: rgba(240, 239, 234, 0.75); }
.byline {
font-family: var(--mono);
font-size: 0.78rem;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px dashed currentColor;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.byline .read-more {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Big pull quote band */
.pull {
padding: 3rem clamp(1rem, 3vw, 2rem);
border-bottom: 3px solid var(--fg);
background: var(--accent);
color: var(--fg);
}
.pull blockquote {
max-width: 1000px;
font-family: var(--sans);
font-weight: 900;
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
line-height: 1.4;
letter-spacing: 0;
margin: 0;
text-transform: none;
}
.pull .attr {
margin-top: 1.5rem;
font-family: var(--mono);
font-size: 0.85rem;
text-transform: uppercase;
}
.pull .attr::before {
content: "→ ";
}
/* Secondary grid */
.secondary {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 3px solid var(--fg);
}
article.small {
padding: 1.25rem clamp(0.75rem, 1.5vw, 1.25rem);
border-right: 1px solid var(--fg);
}
article.small:last-child { border-right: 0; }
article.small .kicker { margin-bottom: 0.35rem; }
article.small h3 {
font-family: var(--sans);
font-weight: 800;
font-size: 1.05rem;
line-height: 1.4;
letter-spacing: 0;
margin: 0 0 0.5rem;
}
article.small .meta {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--fg-muted);
}
/* Footer info bar */
.info-bar {
padding: 1.5rem clamp(1rem, 3vw, 2rem);
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.info-bar .emph { background: var(--fg); color: var(--bg); padding: 0.1rem 0.4rem; }
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr 1fr; }
article.entry.featured { grid-column: span 2; }
article.entry { border-right: 0; border-bottom: 1px solid var(--fg); }
article.entry:nth-last-child(-n+2) { border-bottom: 0; }
.secondary { grid-template-columns: 1fr 1fr; }
article.small:nth-child(odd) { border-right: 1px solid var(--fg); }
article.small:nth-child(even) { border-right: 0; }
article.small:nth-child(-n+2) { border-bottom: 1px solid var(--fg); }
}
@media (max-width: 560px) {
.grid, .secondary { grid-template-columns: 1fr; }
article.entry, article.entry.featured, article.small { grid-column: 1; border-right: 0; border-bottom: 1px solid var(--fg); }
}
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
.kicker .num{color:#0a0a0a}
article.entry.featured .accent{color:#0a0a0a}
</style>
</head>
<body>
<header class="site">
<div class="wordmark">SIGNAL</div>
<nav class="utility">
<a href="#demo-link-0" class="active">Home</a>
<a href="#demo-link-1">執筆</a>
<a href="#demo-link-2">ノート</a>
<a href="#demo-link-3">購読</a>
</nav>
</header>
<section class="masthead">
<div class="issue-line">
<div class="meta-cluster">
<span>第 42 号</span>
<span>2026.04.23</span>
<span>記事 12 本</span>
</div>
<div>公開で書く</div>
</div>
<h1 class="masthead-title">書きもの <span class="slash">/</span> <br />未整理のまま。</h1>
</section>
<section class="grid">
<article class="entry featured">
<div class="kicker"><span class="num accent">01</span> · エッセイ · 12分</div>
<h2 class="entry-title">公開しない、<br />という規律について。</h2>
<p class="dek">
フォルダから一歩も出ていない下書きへの賛辞。「書いたらまず公開」というインターネットの初期設定に対する反論と、公開しない仕事にも価値がある理由。
</p>
<div class="byline">
<span>守谷 海童 · 2026.04.22</span>
<span class="read-more">読む →</span>
</div>
</article>
<article class="entry">
<div class="kicker"><span class="num">02</span> · ノート · 3分</div>
<h2 class="entry-title">キーボードを、キーボードとして。</h2>
<p class="dek">本物のプラスチックを、音を立てて打つことについて。</p>
<div class="byline">
<span>断片</span>
<span class="read-more">読む →</span>
</div>
</article>
<article class="entry">
<div class="kicker"><span class="num">03</span> · エッセイ · 8分</div>
<h2 class="entry-title">「ミニマル」の、実コスト。</h2>
<p class="dek">引き算にも請求書はあって、足し算より長いことのほうが多い。</p>
<div class="byline">
<span>クラフト</span>
<span class="read-more">読む →</span>
</div>
</article>
</section>
<section class="pull">
<blockquote>
「インターネット上の書きもののほとんどは、生産だ。まれに残るのは、放っておかれて、自分自身になれた文章だけ。」
</blockquote>
<div class="attr">第41号「Drafts」より</div>
</section>
<section class="secondary">
<article class="small">
<div class="kicker"><span class="num">04</span> · フィールド</div>
<h3>古書店で過ごした、3時間。</h3>
<div class="meta">旅 · 4月18日</div>
</article>
<article class="small">
<div class="kicker"><span class="num">05</span> · ノート</div>
<h3>「静」という字を、使いすぎてしまう。</h3>
<div class="meta">ことば · 4月14日</div>
</article>
<article class="small">
<div class="kicker"><span class="num">06</span> · エッセイ</div>
<h3>タブを開きっぱなしにする哲学への反論。</h3>
<div class="meta">仕事 · 4月10日</div>
</article>
<article class="small">
<div class="kicker"><span class="num">07</span> · 断片</div>
<h3>雨の週の、ノートから。</h3>
<div class="meta">ログ · 4月5日</div>
</article>
</section>
<div class="info-bar">
<span><span class="emph">アーカイブ</span> → 2026 · 2025 · 2024 · 2023 · 2022</span>
<span>公開で書く · トラッカーなし · RSS あり</span>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>Homeの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>執筆の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>ノートの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>購読の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
大手メディアのブログも、WordPressテーマのブログも、驚くほど似た顔をしています。アイキャッチ画像、大きな見出し、右サイドバー、共有ボタン——その「テンプレ顔」から脱するための選択が、ブルータリスト調のブログトップです。
整えないことを、選択として見せる
ブルータリズムの肝は、整えられないから雑なのではなく、整えないことを意図的に選んでいると伝わることです。極太サンセリフ、太い罫線、限定的な蛍光アクセント、剥き出しのモノスペース。これらを見た読者は、無意識に「この書き手には明確な意思がある」と感じ取ります。洗練を捨てることが、独立メディアやジン、個人ブログの人格を立てます。
活字と罫線を前に出す
テンプレ顔から脱する最も手軽な方法は、画像や装飾を減らし、活字と罫線を主役に引き上げることです。見出しを物体のように大きく扱い、記事を新聞のように番号で管理する。装飾がない分、書き手の言葉そのものが画面の主役になります。これは文章に自信がある書き手にとって最高の舞台です。
仕上げの判断軸
ワードマークはモノスペース＋「.txt」のようなサフィックスでテック系の遊びを効かせます。マストヘッドの巨大タイトルは line-height 0.85 まで詰め、見出しを画面を占有する物体に。注目記事は黒背景＋白文字の反転カードで階層を1つだけ強く示します。全記事に01/02/03の番号ピルを振ると、新聞的な「記事数の密度」が視覚化される。プルクォートの帯や「Built in public · No trackers」のようなフッターのメタ情報が、個人サイトらしい時系列感と自己言及性を底で支えます。
0.85マストヘッドの line-height。見出しを画面を占める物体にする
01 / 02 / 03全記事に振る番号ピル。新聞的な密度が視覚化される
1つだけ黒地に白文字の反転カード。強い階層は1段に絞る
見本で試せる範囲
架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
ブログの構成要素
使いどころ
- 個人で書き続ける意思のあるライター/デベロッパーのブログ
- 小規模な独立メディア・ジン・ニュースレターの Web 拠点
- SaaS プロダクトでも、エンジニアリング文化を前に出したい公式ブログ
このデザインの分類
背景と狙いどころ
よくある質問
蛍光色はアクセシビリティ的に問題ない？
アクセントを 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 に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
新聞紙面風のブログ・記事一覧ページ
大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。
キリ番と工事中の90年代ホームページ風ブログ
1990年代後半の個人ホームページをブログのトップに再現したデザイン。星柄の壁紙、立体の枠、虹色の見出し、流れる電光掲示板、アクセスカウンタとキリ番、工事中の看板、ウェブリングまでを、見た目だけ借りて中身は現代の組み方で作る。