ブログ · ブログデザイン

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

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

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

マンガ評論メディアの記事一覧ページを、マンガのコマ割りで作ってください。

要件:
- 配色: 紙白 #f7f4ec + 墨黒 #0d0d0d。彩色は基本これだけ。アクセントに朱 #c8312b を1点だけ。
- ヘッダーは縦書きのタイトル（屋号風）+ 横書きの月号「Issue 第42号」。
- メイン記事一覧を CSS Grid で「マンガのコマ割り」風の非対称グリッド化。
  - 大コマ1（ヒーロー記事、1.5x幅）
  - 中コマ × 4
  - 縦長コマ × 1（連載コラム）
- 各コマは太い黒境界（4px）、内部は写真プレースホルダー（モノクロのトーン）+ タイトル文字 + 効果音文字
- 効果音文字（「BANG!」「ドーン」「シュッ」等）を変形大文字でランダムに散らす
- 吹き出しを 2-3 個、コマ内またはコマ間に配置（言葉と尻尾付き）
- 横方向のスクリーントーン（網点）を一部のコマに適用（CSS background dot pattern）
- 上部に「右開き」を示す矢印ヒント（読み順は右→左）
- フォント: 見出しは漫画フォント（Mochiy Pop One）、本文 Noto Sans JP、効果音は太字italic変形。
- JS不要、フルレスポンシブ。スマホでは縦積みに崩す。

バリエーション

フルカラーアメコミ版

配色を ベン・デイ・ドット風に：明るい黄・赤・青を使い、コマの境界はそのまま太黒。
効果音はアメコミ調 "POW!" "ZAP!" の太字オールキャップに。

縦読みウェブトゥーン版

全体を縦長カラム1本に変更し、コマを上から下にスクロールしながら読む構成。
韓国・中国系ウェブトゥーン体験を Web 化。

このプレビューのコード

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

CC0 · 改変・商用利用自由 · revision 8b071624a7d9

コードを表示

<!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 {
        --paper: #f7f4ec;
        --paper-2: #efeadb;
        --ink: #0d0d0d;
        --ink-2: #2a2a2a;
        --muted: #5a5650;
        --quiet: #8a8580;
        --shu: #c8312b;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Mochiy Pop One", "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic", sans-serif;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "palt", "kern";
        min-height: 100dvh;
      }

      /* Paper grain */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        opacity: 0.08;
        mix-blend-mode: multiply;
      }

      /* Header */
      header.bar {
        position: relative;
        z-index: 5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
        border-bottom: 6px solid var(--ink);
      }
      .brand {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }
      .brand::before {
        content: "";
        width: 22px; height: 22px;
        background: var(--shu);
        border: 3px solid var(--ink);
        border-radius: 50%;
      }
      .meta {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
        font-size: 0.85rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .meta b { color: var(--shu); }

      /* Read direction hint */
      .hint {
        position: relative;
        z-index: 5;
        text-align: right;
        padding: 0.8rem clamp(1rem, 4vw, 2.5rem) 0;
        font-family: "Hiragino Mincho ProN", serif;
        font-size: 0.78rem;
        color: var(--muted);
        letter-spacing: 0.06em;
      }
      .hint b { color: var(--shu); margin-left: 0.5rem; font-size: 1rem; }

      /* Manga panel grid */
      main.panels {
        position: relative;
        z-index: 5;
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem);
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      @media (min-width: 720px) {
        main.panels {
          grid-template-columns: repeat(6, 1fr);
          grid-auto-rows: minmax(140px, auto);
        }
      }

      .panel {
        position: relative;
        background: var(--paper);
        border: 5px solid var(--ink);
        padding: 1rem 1.25rem;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 200px;
        transition: transform 0.15s, background 0.15s;
      }
      .panel:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 var(--ink);
        background: white;
      }

      /* Panel sizing — non-uniform like a manga page */
      .panel.hero { grid-column: 1 / span 4; grid-row: 1 / span 2; min-height: 360px; }
      .panel.tall { grid-column: 5 / span 2; grid-row: 1 / span 3; min-height: 540px; }
      .panel.wide { grid-column: 1 / span 4; grid-row: 3 / span 1; }
      .panel.med-1 { grid-column: 1 / span 2; grid-row: 4 / span 1; }
      .panel.med-2 { grid-column: 3 / span 2; grid-row: 4 / span 1; }
      .panel.med-3 { grid-column: 5 / span 2; grid-row: 4 / span 1; }

      @media (max-width: 719px) {
        .panel { grid-column: auto !important; grid-row: auto !important; min-height: 180px !important; }
        .panel.hero, .panel.tall { min-height: 240px !important; }
      }

      /* Panel inner content */
      .panel-tag {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        color: var(--shu);
        margin: 0 0 0.5rem;
      }
      .panel-tag.k {
        color: var(--ink);
      }
      .panel-title {
        margin: 0 0 0.6rem;
        font-size: 1.05rem;
        line-height: 1.4;
        font-weight: 800;
        letter-spacing: 0;
      }
      .panel.hero .panel-title { font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.35; }
      .panel.tall .panel-title { font-size: 1.05rem; line-height: 1.4; }
      .panel-deck {
        margin: 0 0 0.85rem;
        font-size: 0.85rem;
        line-height: 1.7;
        color: var(--muted);
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-weight: 400;
      }
      .panel.tall .panel-deck { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
      .panel-byline {
        font-family: "Hiragino Sans", sans-serif;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        color: var(--quiet);
        font-weight: 500;
      }
      .panel-byline b { color: var(--ink); }

      /* Image area replacement — half-tone monochrome */
      .panel-image {
        position: relative;
        flex: 1;
        background: linear-gradient(135deg, #2a2a2a 0%, #5a5a5a 70%, #1a1a1a 100%);
        margin: 0.5rem 0;
        min-height: 80px;
        overflow: hidden;
      }
      .panel-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.65) 1.5px, transparent 1.5px);
        background-size: 6px 6px;
        opacity: 0.4;
        mix-blend-mode: screen;
      }
      .panel.hero .panel-image { min-height: 180px; background: linear-gradient(180deg, #1a1a1a 0%, #4a4a4a 60%, #2a2a2a 100%); }

      /* SFX text scattered over panels */
      .sfx {
        position: absolute;
        font-family: "Mochiy Pop One", "Hiragino Sans", sans-serif;
        font-weight: 800;
        color: var(--paper);
        text-shadow:
          -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
          -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
          -3px 0 0 var(--ink), 3px 0 0 var(--ink),
          0 -3px 0 var(--ink), 0 3px 0 var(--ink);
        z-index: 3;
        pointer-events: none;
        font-style: normal;
      }
      .sfx.lg { font-size: 2.4rem; letter-spacing: 0.04em; }
      .sfx.md { font-size: 1.6rem; }
      .sfx.shu { color: var(--shu); }

      /* Speech bubble */
      .bubble {
        position: absolute;
        background: var(--paper);
        border: 3px solid var(--ink);
        padding: 0.45rem 0.75rem;
        border-radius: 18px;
        font-family: "Mochiy Pop One", "Hiragino Sans", sans-serif;
        font-size: 0.72rem;
        font-weight: 800;
        z-index: 3;
        max-width: 14ch;
        line-height: 1.35;
      }
      .bubble::after {
        content: "";
        position: absolute;
        width: 0; height: 0;
      }
      .bubble.tail-bl::after {
        bottom: -14px; left: 14px;
        border: 8px solid transparent;
        border-top: 14px solid var(--ink);
      }
      .bubble.tail-bl::before {
        content: "";
        position: absolute;
        bottom: -10px; left: 16px;
        width: 0; height: 0;
        border: 6px solid transparent;
        border-top: 11px solid var(--paper);
        z-index: 4;
      }

      /* Bottom credit */
      footer.foot {
        position: relative;
        z-index: 5;
        padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
        border-top: 6px double var(--ink);
        font-family: "Hiragino Mincho ProN", serif;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        color: var(--muted);
        text-align: center;
      }
      footer.foot b { color: var(--shu); }
    [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}
}
.panel-byline{color:#655f58}
</style>
  </head>
  <body>
    <header class="bar">
      <div class="brand">月刊・劇画通信</div>
      <span class="meta">Issue <b>第42号</b> · 2026.04 · ¥0 / 無料</span>
    </header>

    <p class="hint">読む順 <b>→</b> 右上から左下へ</p>

    <main class="panels">
      <a class="panel hero" href="#demo-link-0">
        <p class="panel-tag">特集 · COVER STORY</p>
        <h2 class="panel-title">「コマ割りWEB」が、<br/>2026年に来る理由。</h2>
        <div class="panel-image">
<span class="bubble tail-bl" style="bottom: 12px; left: 12px;">これが…<br/>本物のコマ割り…！</span>
          <span class="sfx lg shu" style="top: 12px; right: 14px; transform: rotate(-12deg);">ドーン!!</span>
        </div>
        <p class="panel-deck">紙の漫画文法を Web に持ち込む実験は、なぜ今再評価されているのか。架空の評論家3名を設定した誌面の見本。</p>
        <span class="panel-byline">By <b>森 俊樹</b> · 8 min read</span>

      </a>

      <a class="panel tall" href="#demo-link-1">
        <p class="panel-tag">連載 · COLUMN</p>
        <h2 class="panel-title">縦読みの誕生</h2>
        <div class="panel-image">
          <span class="sfx md" style="top: 30%; left: 12%; transform: rotate(8deg);">スッ</span>
        </div>
        <p class="panel-deck">韓国発祥のウェブトゥーンが世界を席巻。連載第3回は「縦読みが生んだ新しい時間感覚」について。スクロールが時間軸として機能する仕組みを解剖する。</p>
        <span class="panel-byline">By <b>西村 桜</b> · 連載 №03</span>
      </a>

      <a class="panel wide" href="#demo-link-2">
        <p class="panel-tag k">レビュー · REVIEW</p>
        <h2 class="panel-title">『鋼のサーガ』最終巻、感想戦。</h2>
        <p class="panel-deck">10年連載の終結。ファン3名の濃厚レビュー座談会、3万字。</p>
        <span class="panel-byline">By <b>田中 健</b> · 32 min read</span>
        <span class="sfx md" style="top: 8px; right: 16px; transform: rotate(15deg);">完結</span>
      </a>

      <a class="panel med-1" href="#demo-link-3">
        <p class="panel-tag">技術 · TECH</p>
        <h2 class="panel-title">CSS で吹き出しを描く 3 通り</h2>
        <p class="panel-byline">By <b>佐藤 隆</b> · 6 min</p>
      </a>

      <a class="panel med-2" href="#demo-link-4">
        <p class="panel-tag">対談 · INTERVIEW</p>
        <h2 class="panel-title">架空の漫画家・青葉シンに聞く、コマの呼吸</h2>
        <p class="panel-byline">By <b>編集部</b> · 14 min</p>
      </a>

      <a class="panel med-3" href="#demo-link-5">
        <p class="panel-tag k">ニュース · NEWS</p>
        <h2 class="panel-title">2026年春アニメ化作品一覧</h2>
        <p class="panel-byline">By <b>編集部</b> · 4 min</p>
      </a>
    </main>

    <footer class="foot">
      © 2026 月刊・劇画通信 · <b>完全無料</b>・著作権フリー · Made in Tokyo
    </footer>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>「コマ割りWEB」が、 2026年に来る理由。の見本</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>CSS で吹き出しを描く 3 通りの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>架空の漫画家・青葉シンに聞く、コマの呼吸の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>2026年春アニメ化作品一覧の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

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

概要

マンガのコマ割りは、長い年月をかけて日本で磨かれた「視線誘導の発明」です。読者は教わらずとも、コマからコマへ、ページの上から下へと目を運ぶ。この身体に染み込んだ読み方を、ブログ記事一覧というありふれた構造に持ち込むのが、この設計です。

均等グリッドが失うもの

通常の記事一覧は、同じ大きさのカードを格子状に並べます。整然としていますが、すべての記事が「同格」に見えるため視線は惰性で流れ、どこにも引っかからない。マンガのコマ割りは逆に、大ゴマ・中ゴマ・縦長ゴマという大小の不均等をわざと作ります。大ゴマに置かれた記事は今号の目玉として強く認識され、ページ全体に緩急のリズムが生まれます。視線がコマからコマへ跳ねるぶん、回遊と滞在時間が伸びるのは自然な帰結です。

崩れる形同じ大きさのカードを格子に

整然としていますが、すべての記事が同格に見えるため視線は惰性で流れ、どこにも引っかかりません。読まれずに閉じられます。

効く形大ゴマ・中ゴマ・縦長ゴマ

不均等をわざと作ると、大ゴマの記事が今号の目玉として認識されます。視線がコマからコマへ跳ねるぶん、回遊と滞在時間が伸びます。

効果音と吹き出しの役割

「ドーン」「シュッ」といった効果音文字や吹き出しは、単なる装飾ではありません。それらは紙面に「声」と「動き」を与え、静的な記事一覧をエンターテインメントの場に変える。読み始めた瞬間に「いつもの一覧と違う」と気づかせる初速の驚きが、離脱を防ぐ最大の武器になります。ただし多用は禁物で、1画面に効果音は2〜3個まで。多すぎると紙面は騒がしいだけのノイズに転落します。

2〜3個1画面の効果音。多すぎると騒がしいだけのノイズになる

4pxコマの黒境界。細いとコマではなくただの枠線に見える

縦1列モバイルの崩し方。非対称を無理に保つと読みにくい

仕上げの判断軸

コマの黒境界は4px前後の太さで明確に。線が細いと「コマ」ではなく「ただの枠線」に見えます。

読み順は矢印で明示してください。右→左か左→右かは、初見の読者には自明ではありません。

モバイルでは無理に非対称グリッドを保たず、縦1列に素直に崩したほうが読みやすさを守れます。

見本で試せる範囲

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