DESIGN.md Templates

Appearance

マガジン・エディトリアル デザインインスピレーション ​

紙面のようなデジタル体験。タイポグラフィが主役 -- これがエディトリアルデザインの本質だ。Vogue、Monocle、そして世界中のラグジュアリー誌に共通するのは、セリフ体の見出しとサンセリフ体の本文が織りなす緊張感である。ドロップキャップが段落を導き、プルクォートが読者の目を引く。このページでは、紙面の美しさをデジタルに翻訳するデザインシステムを解説する。

このページの使い方

スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。

デザイン哲学 -- 紙面の緊張感 ​

セリフ体が権威を語り、サンセリフ体が情報を伝える。

最高のマガジンページでは、文字そのものが美しい。72pxのセリフ体見出しが読者を引き込み、14pxのサンセリフ本文が情報を流し込む。この極端なサイズコントラストが、エディトリアルデザインの核心だ。

なぜセリフ体なのか ​

  • 権威と信頼: セリフ体は歴史と格式を体現する
  • 大サイズでの美しさ: 72px以上でセリフのディテールが映える
  • エディトリアルレッド: #c41e3a のドロップキャップが紙面に血を通わせる

以下が、この哲学を体現したマガジンレイアウトのプレビューである:

REVUE
CultureDesignTravel
Feature Story
The Architecture
of Silence
静寂の建築。安藤忠雄が追求し続ける「光と影の対話」は、コンクリートという無機質な素材に命を吹き込む。
Also in this issue
Tokyo After Dark
夜の東京が見せる別の顔。ネオンと静寂が共存する街。
The New Minimalism
過剰を捨て、本質だけを残す。新しいミニマリズムの潮流。

カラーパレット -- 紙面の白とクリーム ​

エディトリアルデザインは白が基本。純白(#ffffff)とクリーム(#f8f6f1)の切り替えがセクションの呼吸を生む。

Background Surface Hierarchy

page
#ffffff
cream
#f8f6f1
surface
#f0ede6
dark
#1a1a1a

テキスト階層とエディトリアルレッド ​

Heading Serif#1a1a1a / Georgia
Body text for articles and descriptions#4a4a4a
Caption, date, and author name#8a8a8a
ADrop Cap / #c41e3a

プルクォート ​

「デザインとは、複雑なものを単純にすることではない。本質を明らかにすることだ。」
-- Kenya Hara
Token値役割
bg-page#ffffff純白ページ
bg-cream#f8f6f1クリーム紙面
text-primary#1a1a1a墨色見出し
text-body#4a4a4a本文
accent-editorial#c41e3aエディトリアルレッド
border-heavy#1a1a1a太い区切り線

タイポグラフィ -- セリフとサンセリフの対話 ​

エディトリアルデザインではタイポグラフィが主役。72pxのセリフ見出しと14pxのサンセリフ本文の極端なコントラストが紙面を支配する。

Feature
Beauty in
Imperfection
不完全の中に美を見出す日本の美意識。侘び寂びの哲学がモダンデザインに与えた影響を辿る。
Georgia / 48px / Weight 700 / LS -1px

コンポーネント -- エディトリアルの部品群 ​

ボタンとリンク ​

Subscribe
Read More
Editorial Link

エディトリアルグリッド ​

Latest Stories
Architecture
Concrete Dreams
Fashion
The New Black
Travel
Lost in Kyoto
Culture
Wabi-Sabi Now

レイアウト -- マルチカラム構造 ​

Layout Structure

Sticky Header (72px, white, serif logo)
Hero - Feature Story (72px serif title)
Main Column (680px)
Sidebar
Editorial Grid (4 stories on cream)
Dark Footer

使い方ガイド ​

Stitch への投入方法 ​

  1. /Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/MAGAZINE_EDITORIAL.md をプロジェクトの DESIGN.md にコピー
  2. Google Fonts から Playfair Display を読み込み設定
  3. Stitch に「この DESIGN.md に従ってマガジンのトップページを作成してください」と指示

適したプロジェクト ​

  • オンラインマガジン・メディアサイト
  • ラグジュアリーブランドのブログ
  • カルチャー系Webメディア
  • アート・デザイン系ポータル

不向きなプロジェクト ​

  • ダッシュボード（データ密度が高い）
  • SaaSのランディングページ（テック寄り）
  • ECサイト（商品が主体）

フォント読み込み注意

Playfair Display はGoogle Fontsから読み込む必要があります。display=swap を指定してFOUTを最小限に抑えてください。日本語のセリフ体は Noto Serif JP を推奨します。