ブログ · ブログデザイン

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

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

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/newspaper-blog/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月26日 UPDATED — 2026年10月18日 CATEGORY — ブログ LICENSE — CC0 1.0

プレビュー

AIへの指示文

ジャーナリズム系オウンドメディア向けの、新聞紙面風のブログ・記事一覧ページを作ってください。

要件:
- 配色: 紙色 #f6f1e7 + 墨黒 #14110c のみ。彩色は一切なし。
- 上部に大型の "MASTHEAD"（紙名）。極太セリフ書体（Playfair Display、Tiempos、Bodoni 等）で 4-6vw、両側に発行号・日付・天気アイコン的な小さな情報。
- 下に "ALL THE NEWS THAT FITS THE WEB"（任意の英文タグライン）を細いセリフで小さく。
- メイン記事 1 件をフルブリード型でフィーチャー（巨大セリフ見出し + 小見出し + リード文 + 著者・日付）。
- 下に 3-4 段組みのレイアウトで記事カードを 5-7 件並べる。各記事はカテゴリ（"OPINION" "TECH" "CULTURE"）+ 太いセリフ見出し + リード 2-3 行 + 著者。
- 罫線は墨色の極細（0.5px）から太め（2px）まで階層的に使い分け。
- 2-3 個の縦罫線でカラムを区切る。
- フォント: 見出し Playfair / 本文 Source Serif Pro または Lora。
- 日本語は Noto Serif JP（明朝）でフォールバック。
- フルレスポンシブ。768px 以下で 1 段組みに崩す。

バリエーション

タブロイド版

masthead を全幅黒地・白抜きにしてタブロイド紙風に。
フィーチャー記事の見出しを更に巨大化（10vw まで）し、写真を1枚大きく入れる。
他は同じ構造で、罫線をやや太めに。

ニューズレター版

masthead 下に「Issue №42 · 月刊」風のメタを足し、
記事一覧の代わりに 1 通分のニュースレター本文 + サイドに目次を 3-4 項目並べる。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。

CC0 · 改変・商用利用自由 · revision f1bd094ccf40

コードを表示

<!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: #f6f1e7;
        --bg-deep: #ece4d0;
        --ink: #14110c;
        --muted: #4a3f30;
        --quiet: #7a6f5e;
        --rule: #14110c;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Source Serif Pro", "Lora", "Noto Serif JP",
          "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "kern", "liga";
      }
      .wrap {
        max-width: 1280px;
        margin: 0 auto;
        padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
      }

      /* Masthead */
      header.masthead {
        text-align: center;
        padding-block: 1rem 1.25rem;
        border-bottom: 3px double var(--ink);
      }
      .masthead-bar {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--rule);
        margin-bottom: 1rem;
      }
      .masthead-bar .left,
      .masthead-bar .right {
        display: inline-flex;
        gap: 1rem;
      }
      .masthead .title {
        margin: 0;
        font-family: "Playfair Display", "Tiempos", "Noto Serif JP",
          "Hiragino Mincho ProN", Georgia, serif;
        font-weight: 900;
        font-size: clamp(2.6rem, 7.5vw, 6rem);
        line-height: 1;
        letter-spacing: -0.02em;
      }
      .masthead .tagline {
        margin: 0.6rem 0 0;
        font-style: italic;
        font-size: 0.95rem;
        color: var(--muted);
        letter-spacing: 0.02em;
      }

      /* Section nav */
      nav.sections {
        margin-top: 1rem;
        padding-block: 0.75rem;
        border-bottom: 1px solid var(--rule);
        display: flex;
        gap: 1.4rem;
        justify-content: center;
        flex-wrap: wrap;
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.74rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 600;
      }
      nav.sections a { color: var(--ink); text-decoration: none; }
      nav.sections a:hover { color: var(--muted); }
      nav.sections a.active { border-bottom: 2px solid var(--ink); padding-bottom: 4px; }

      /* Featured story */
      article.feature {
        padding-block: clamp(2rem, 4vw, 3rem);
        border-bottom: 1px solid var(--rule);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      @media (min-width: 880px) {
        article.feature { grid-template-columns: 2fr 1fr; gap: 2.5rem; }
      }
      .feature .kicker {
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.6rem;
      }
      .feature h1 {
        margin: 0 0 0.85rem;
        font-family: "Playfair Display", "Noto Serif JP", Georgia, serif;
        font-weight: 900;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.35;
        letter-spacing: 0;
      }
      .feature h1 :lang(ja) { letter-spacing: 0; line-height: 1.3; }
      .feature .deck {
        margin: 0 0 1.25rem;
        font-style: normal;
        font-size: 1.1rem;
        color: var(--muted);
        line-height: 1.6;
        max-width: 60ch;
      }
      .feature .lede {
        margin: 0 0 1.25rem;
        font-size: 1rem;
        line-height: 1.85;
        column-count: 1;
        max-width: 65ch;
      }
      @media (min-width: 880px) {
        .feature .lede { column-count: 2; column-gap: 2rem; column-rule: 1px solid var(--rule); }
      }
      .feature .byline {
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.78rem;
        color: var(--muted);
        letter-spacing: 0.04em;
        padding-top: 0.85rem;
        border-top: 1px solid var(--rule);
        max-width: 65ch;
      }
      .feature .byline strong { color: var(--ink); }

      .feature aside {
        padding-left: 1.25rem;
        border-left: 1px solid var(--rule);
        font-size: 0.92rem;
      }
      @media (max-width: 879px) { .feature aside { border-left: 0; padding-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); } }
      .feature aside .label {
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 0 0 0.6rem;
      }
      .feature aside h3 {
        font-family: "Playfair Display", "Noto Serif JP", Georgia, serif;
        font-size: 1.4rem;
        line-height: 1.3;
        margin: 0 0 0.5rem;
        font-weight: 800;
      }

      /* Articles grid */
      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }
      @media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; } }
      @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

      article.story {
        padding: 1.75rem 1.5rem 1.5rem;
        border-bottom: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
      }
      @media (min-width: 720px) { article.story:nth-child(2n) { border-right: 0; } }
      @media (min-width: 1024px) {
        article.story:nth-child(2n) { border-right: 1px solid var(--rule); }
        article.story:nth-child(3n) { border-right: 0; }
      }
      .story .kicker {
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--ink);
        margin: 0 0 0.5rem;
      }
      .story h2 {
        margin: 0 0 0.65rem;
        font-family: "Playfair Display", "Noto Serif JP", Georgia, serif;
        font-weight: 800;
        font-size: 1.5rem;
        line-height: 1.35;
        letter-spacing: 0;
      }
      .story h2 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
      .story p {
        margin: 0 0 1rem;
        font-size: 0.95rem;
        line-height: 1.7;
        color: var(--muted);
      }
      .story .byline {
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.74rem;
        color: var(--quiet);
        letter-spacing: 0.04em;
      }

      footer.foot {
        padding: 2rem 0 1rem;
        border-top: 3px double var(--ink);
        margin-top: 0;
        font-family: "Inter", "Noto Sans JP", sans-serif;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: center;
      }
    [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}
}
.story .byline{color:#655b4c}
</style>
  </head>
  <body>
    <div class="wrap">
      <header class="masthead">
        <div class="masthead-bar">
          <div class="left">
            <span>Vol. 04 · Issue 26</span>
            <span>2026-04-26</span>
          </div>
          <div class="right">
            <span>Tokyo · Cloudy 14°</span>
            <span>¥ 480 / Free Online</span>
          </div>
        </div>
        <h1 class="title">The Daily Margin</h1>
        <p class="tagline">— All the news that fits, in print and pixel —</p>
      </header>

      <nav class="sections" aria-label="Sections">
        <a href="#demo-link-0" class="active">Top Stories</a>
        <a href="#demo-link-1">Tech</a>
        <a href="#demo-link-2">Opinion</a>
        <a href="#demo-link-3">Culture</a>
        <a href="#demo-link-4">Business</a>
        <a href="#demo-link-5">Letters</a>
      </nav>

      <article class="feature">
        <div>
          <p class="kicker">Lead Story · Tech</p>
          <h1>AIに伝える、というデザイン。<br/>「プロンプトの版面」が新しい設計図になる。</h1>
          <p class="deck">UIを文章で指示する時代に、紙面のように「型」が必要になっている。</p>
          <p class="lede">
            Cursor、v0、Claude Code といった AI コーディング支援の登場で、開発者はキーボードから一文字ずつ書く代わりに、デザインの意図を日本語で説明するようになった。問題は、誰もまだ「どう書けば伝わるか」を体系化していないことだ。ボタンの角丸、見出しの重み、グリッドの間隔。これらを毎回ゼロから言葉にするのは消耗する。本誌は、現役のデザイナーとエンジニアの協力を得て、この「プロンプトの版面」を編み上げる連載を始める。初回は SaaS のヒーローセクションを取り上げ、9 つの定型を比較する。
          </p>
          <p class="byline">By <strong>Editorial Desk</strong> · 2026-04-26 · 6分で読める</p>
        </div>
        <aside>
          <p class="label">Editor's Pick</p>
          <h3>「グラデーションが多すぎるSaaS」を批評する</h3>
          <p style="margin:0;color:var(--muted);font-size:.92rem;line-height:1.7;">同じレシピで違うものを作るのは、デザインではなく装飾だ。Stripe以降の追従文化を再考する。</p>
        </aside>
      </article>

      <div class="grid">
        <article class="story">
          <p class="kicker">Opinion</p>
          <h2>「ダークモード」の本当のコスト</h2>
          <p>視認性、消費電力、ブランド統一感。三方向のトレードオフを、企業は本当に検証しているだろうか。</p>
          <p class="byline">By S. Mori · 4 min</p>
        </article>
        <article class="story">
          <p class="kicker">Culture</p>
          <h2>余白を売る時代の終わり</h2>
          <p>ミニマル広告は十年で擦り切れた。次の十年、何が「上質」の言語になるのか。</p>
          <p class="byline">By K. Tanaka · 7 min</p>
        </article>
        <article class="story">
          <p class="kicker">Tech</p>
          <h2>Pagefind が変えた静的検索</h2>
          <p>Algolia 不要の時代へ。日本語インデックスの実用性を計測した。</p>
          <p class="byline">By H. Sato · 5 min</p>
        </article>
        <article class="story">
          <p class="kicker">Letters</p>
          <h2>「ベントー」 は終わったのか</h2>
          <p>読者からの寄稿。Apple 流の機能紹介グリッドの賞味期限について。</p>
          <p class="byline">By A. Reader · 3 min</p>
        </article>
        <article class="story">
          <p class="kicker">Business</p>
          <h2>個人開発者の AdSense 損益分岐</h2>
          <p>月間 12 万 PV の壁を超えるために必要なコンテンツ密度を算出した。</p>
          <p class="byline">By Y. Nakamura · 8 min</p>
        </article>
        <article class="story">
          <p class="kicker">Tech</p>
          <h2>View Transitions API は何を変えたか</h2>
          <p>SPA でなくてもアニメ遷移ができる時代に、フロントエンドは何を担うのか。</p>
          <p class="byline">By J. Watanabe · 6 min</p>
        </article>
      </div>

      <footer class="foot">
        © 2026 The Daily Margin · Founded 2023 · Tokyo & Online · ISSN 0000-0000
      </footer>
    </div>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>Top Storiesの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>Techの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>Opinionの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>Cultureの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>Businessの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>Lettersの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

新聞は、限られた紙面に最大限の情報を詰め込むために、長い年月をかけて版面設計を洗練させてきました。多段組み、見出しの階層、細い罫線による区切り——その密度の高いレイアウトは、「カード一覧」が主流の現代ブログとは正反対の発想に立っています。

情報密度を「魅力」に変える

カード型のブログ一覧は、余白をたっぷり取り、1記事を大きく見せます。快適ですが、一度に見渡せる記事は数件だけ。新聞紙面は逆に、多段組みで多数の記事を一望させます。これは「情報を浴びたい」「腰を据えて読み物を探したい」という読者の欲求に応える構成です。スカスカのブログが氾濫する中で、密度そのものが差別化と読み応えの約束になります。紙面のリズム——大見出し、リード、本文、囲み記事——が視線を引き留め、滞在時間を伸ばします。

崩れる形カード型で1記事を大きく

快適ですが、一度に見渡せる記事は数件だけです。腰を据えて読み物を探しに来た読者には、選択肢が足りません。

効く形多段組みで一望させる

情報を浴びたい読者の欲求に応えます。大見出し・リード・本文・囲み記事という紙面のリズムが視線を引き留め、滞在時間を伸ばします。

ジャーナリズムの権威を借りる

新聞の版面は、長年「真剣な報道」と結びついてきました。その様式をまとうだけで、ブログの記事は「個人の雑感」ではなく「読むに値する論考」という格を帯びます。報道、評論、調査記事、シリアスな専門メディアと、この様式は深く一致します。

仕上げの判断軸

最大の難所はモバイルです。多段組みはスマホで容易に崩れるので、ブレイクポイントでの段数切り替えを設計の最初に決めてください。

段組み・明朝・細い罫線の組み合わせは目が滑りやすいので、行間と文字サイズを実機で必ず検証します。巨大なセリフ見出しはLCP（描画速度）の主因になりがちなので、font-display: swap とフォントのプリロードで対処します。

見本で試せる範囲

架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。