ブログデザイン参考（WordPress非依存・コードベース美麗）
TERASUのお役立ち記事ブログをコードベース（Next.js/Astro/独自実装＝WordPressなし）で美しく作るための参考。デザインが突き抜けているブログを厳選。コンテンツSEO側のベンチマークは 2026-06-16_お役立ち記事_ベンチマーク企業リサーチ、こちらは「見た目・読む体験」軸。
まず見るべき5つ（デザインの天井）
- Josh Comeau https://www.joshwcomeau.com/ — インタラクティブで世界一美しい個人ブログの一角。Next.js/MDX・記事中アニメが圧巻
- Rauno Freiberg https://rauno.me/ — Vercelデザイナー。繊細さの極み（"Devouring Details"必見）
- Linear Blog https://linear.app/blog — ミニマルSaaSブログの最高峰。タイポと余白
- Resend Blog https://resend.com/blog — 今一番美しいと言われるプロダクトブログ
- catnose（日本） https://catnose.me/ — Zenn/サイズミー創業者。日本人で随一の美しい個人ブログ
A. 個人開発者・デザイナーの神ブログ（コードベース）
| サイト |
URL |
何が綺麗か |
| Emil Kowalski |
https://emilkowal.ski/ |
アニメ・トランジションの教科書 |
| Paco Coursey |
https://paco.me/ |
究極のミニマル |
| Lee Robinson |
https://leerob.io/ |
Vercel VP・Next.jsショーケース |
| Chronark |
https://chronark.com/ |
ダーク×洗練・超高速 |
| Maggie Appleton |
https://maggieappleton.com/ |
イラスト×デジタルガーデン |
| Brittany Chiang |
https://brittanychiang.com/ |
ポートフォリオ＋ブログの美しさ |
B. プロダクト企業の美しいブログ（コードベース）
| サイト |
URL |
何が綺麗か |
| Vercel |
https://vercel.com/blog |
Next.js製・高コントラスト |
| Stripe |
https://stripe.com/blog |
余白とタイポの品格 |
| Framer |
https://www.framer.com/blog/ |
動き×ビジュアル |
| Raycast |
https://www.raycast.com/blog |
ダークで上質 |
C. 日本の綺麗なブログ
| サイト |
URL |
何が綺麗か |
| ベイジ（制作会社） |
https://baigie.me/ |
文章×読みやすさ×品。同業の到達点 |
| catnose |
https://catnose.me/ |
日本随一の個人ブログ |
D. 「綺麗なブログ」を探せるギャラリー
| ギャラリー |
URL |
特徴 |
| Godly |
https://godly.website/ |
モダンで美しいサイト集（海外） |
| Awwwards |
https://www.awwwards.com/websites/blog/ |
受賞サイト・blog絞込可 |
| MUUUUU.ORG |
https://muuuuu.org/ |
日本・縦長高品質まとめ |
| I/O 3000 |
https://io3000.com/ |
国内外スタイリッシュ |
TERASUへの示唆
- Josh Comeau / Rauno / Emil は「記事を読む体験そのものをデザイン」している＝TERASUブログが目指す最高到達点
- 共通項：①極端な余白 ②タイポグラフィへの執着（行間・字間・サイズ階層）③控えめだが効くアニメ ④ダーク or 高コントラスト ⑤画像/図解の質
- WordPress非依存（コードベース）だからこそ、このレベルの作り込みが可能＝TERASUの技術力の見せ場
- 量産との両立：テンプレ（記事レイアウト）を1つ美しく作り込めば、以降は文章を流すだけで全記事が美しくなる
関連