雑誌や新聞の組版をWebに持ち込む。大きなセリフの見出し、多段組、写真とテキストの緊張感。メディア・ブログ・ブランドストーリーに。
向いているプロダクト: オウンドメディア・ブログ、雑誌・新聞のWeb版、ブランドストーリーページ、ロングフォーム記事
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「読ませるための構造」。タイポグラフィの階層と段組で、長い文章を美しく読ませる。装飾ではなく組版の精度で個性を出す。
画面の上の、よく組まれた紙面。
#FBFAF7紙白
#FFFFFFカード（ほぼ使わない）
#111111インク
#6B6B6Bキャプション・日付
#111111罫線。太さ1px/3pxの2種
#C8102E朱。ドロップキャップ・リンク下線・カテゴリ
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* エディトリアル（Editorial / Magazine）のデザイントークン — CSS辞書 /design/editorial/ */
:root {
/* カラー */
--color-bg: #FBFAF7; /* 背景: 紙白 */
--color-surface: #FFFFFF; /* サーフェス: カード（ほぼ使わない） */
--color-text: #111111; /* 本文: インク */
--color-muted: #6B6B6B; /* 補足: キャプション・日付 */
--color-border: #111111; /* ボーダー: 罫線。太さ1px/3pxの2種 */
--color-accent: #C8102E; /* アクセント: 朱。ドロップキャップ・リンク下線・カテゴリ */
/* フォント */
--font-heading: "Playfair Display", "Noto Serif JP", serif;
--font-body: "Source Serif 4", "Noto Serif JP", serif;
/* 角丸 */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-full: 0;
/* 影 */
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 200ms;
--duration-base: 300ms;
--duration-slow: 500ms;
--easing: ease-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
高コントラストのセリフ体の巨大見出し、行長35〜40字の本文、1px/3pxの罫線、ドロップキャップと引用の抜き出しで雑誌の組版を再現すること。カード・角丸・影・グラデーションは禁止。写真は本文幅をはみ出させる。