Style · 新聞風

新聞風Webデザインの参考例とAIプロンプト

新聞の紙面を思わせる大見出し・多段組・モノクロ寄りのAIプロンプト集。情報密度を魅力にする設計。

Designs002 Style新聞 Keyword新聞風

新聞について

紙の新聞紙面をWebに再現する表現。大見出し、多段組、太いセリフ書体、モノクロ寄りの配色、刻印的なカットラインなど、情報密度そのものを魅力にする設計です。カード型の一覧が余白を取って数件しか見せないのに対し、多段組みは多数の記事を一望させます。ジャーナリズム、選挙、ドキュメンタリー、歴史コンテンツと相性がいい。最大の難所はモバイルで、多段組みは容易に崩れます。ブレイクポイントでの段数切り替えを、設計の最初に決めてください。

新聞の視覚パラメータ

  • #F7F4EC
  • #16130F 文字
  • #A61B1B 見出しの差し色
  • #B8B2A6
書体
太いセリフの見出しに本文セリフ。多段組み
角丸0。罫線の太さ3段で構造を出す
動き
なし

よく使われる場面

  • 選挙・政治キャンペーン
  • ドキュメンタリー・ジャーナリズム
  • 歴史・アーカイブコンテンツ
  • 年末総括・特集記事
  • 出版社のWebマガジン

成功のポイント

  • 見出しは新聞調の太いセリフを選ぶ
  • 本文は段組み(2-3カラム)を攻める
  • 罫線で情報ブロックを区切る
  • 紙質感のテクスチャを薄く敷く
  • キャプションは細ゴシックで対比をつける

このスタイルのデザイン

他のスタイル