Style · エディトリアル
エディトリアルWebデザインの参考例とAIプロンプト
雑誌や新聞の誌面を思わせる版面設計のAIプロンプト集。大見出し・段組み・引用・写真の扱いで読みごたえを作る。
エディトリアルについて
雑誌・新聞の版面設計をWebに持ち込んだ表現。大見出し、段組み、引用、写真の扱いで読ませます。The New Yorker、Kinfolk、Pitchfork などが参照点で、セリフ書体が主役になりやすい。効くのは、読ませたい文章がすでにあるときです。版面は文章を引き立てる器なので、器だけ整えても中身が薄ければ空虚さが際立ちます。行間は1.8以上、1行は40字前後に抑えること。段組みはモバイルで最初に壊れます。段数の切り替えを設計の最初に決めておいてください。
エディトリアルの視覚パラメータ
- #FAF8F5 紙
- #1A1A1A 文字
- #B02E26 差し色
- #8C8C8C 罫
- 書体
- 見出しも本文もセリフ。行間1.8以上
- 形
- 角丸0。1pxの水平罫でブロックを切る
- 動き
- スクロールに合わせた緩やかなフェードイン
よく使われる場面
- 長尺記事・特集のメディア
- ジャーナリズム・ドキュメンタリー
- 高級ブランドのストーリーページ
- 文化・アート・建築のサイト
- ポートフォリオのケーススタディ
成功のポイント
- セリフ書体（Playfair, Fraunces, Tiempos）が効く
- ドロップキャップ（大きな頭文字）で誌面感を出す
- 引用ブロックは版面を揺らして動きを作る
- 写真キャプションはモノスペース+小サイズ
- 本文カラムは1-2で文字幅60-80字
このスタイルのデザイン
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
図書館カード目録風の検索結果
図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
マンガのコマ割りで読ませるブログ記事一覧
日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。
巨大斜体タイポのファッション・ルックブック
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
新聞紙面風のブログ・記事一覧ページ
大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
ブルータリスト調のブログトップ
太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の「整いすぎ」を拒むラフさを残す設計。
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。