Style · 新聞風
新聞風Webデザインの参考例とAIプロンプト
新聞の紙面を思わせる大見出し・多段組・モノクロ寄りのAIプロンプト集。情報密度を魅力にする設計。
新聞について
紙の新聞紙面をWebに再現する表現。大見出し、多段組、太いセリフ書体、モノクロ寄りの配色、刻印的なカットラインなど、情報密度そのものを魅力にする設計です。カード型の一覧が余白を取って数件しか見せないのに対し、多段組みは多数の記事を一望させます。ジャーナリズム、選挙、ドキュメンタリー、歴史コンテンツと相性がいい。最大の難所はモバイルで、多段組みは容易に崩れます。ブレイクポイントでの段数切り替えを、設計の最初に決めてください。
新聞の視覚パラメータ
- #F7F4EC 紙
- #16130F 文字
- #A61B1B 見出しの差し色
- #B8B2A6 罫
- 書体
- 太いセリフの見出しに本文セリフ。多段組み
- 形
- 角丸0。罫線の太さ3段で構造を出す
- 動き
- なし
よく使われる場面
- 選挙・政治キャンペーン
- ドキュメンタリー・ジャーナリズム
- 歴史・アーカイブコンテンツ
- 年末総括・特集記事
- 出版社のWebマガジン
成功のポイント
- 見出しは新聞調の太いセリフを選ぶ
- 本文は段組み(2-3カラム)を攻める
- 罫線で情報ブロックを区切る
- 紙質感のテクスチャを薄く敷く
- キャプションは細ゴシックで対比をつける