Category · ブログデザイン
ブログデザインの参考例とAIプロンプト
ブログトップ・記事詳細・著者ページなど読み物中心のレイアウトのAIプロンプト集。可読性・回遊性を両立する構成。
ブログについて
読み物としての可読性、回遊性、SEOの3点が要。記事一覧ではカードとリストの使い分け、記事詳細ではタイポグラフィと目次の設計が勝負です。著者プロフィール、関連記事、コメント、SNSシェアなど補助要素も統合して考える必要があります。同じ大きさのカードを格子に並べると、視線は惰性で流れます。大小の不均等をわざと作ると、どれが今号の目玉かが伝わる。ロングテールSEOでトラフィックを稼ぐ主力チャネルでもあります。
よく使われる場面
- 企業のオウンドメディア
- 個人ブログ・ニュースレター
- ドキュメント・ガイド・チュートリアル
- メディアサイトの記事フォーマット
- ポートフォリオのケーススタディ
成功のポイント
- 本文幅は60-75文字に収めて可読性重視
- 目次は長尺記事なら必須
- 著者情報はE-E-A-T対策として入れる
- 関連記事で回遊を促す
- 画像は遅延読み込み・WebPで軽量化
このカテゴリのデザイン
マンガのコマ割りで読ませるブログ記事一覧
日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
新聞紙面風のブログ・記事一覧ページ
大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。
ブルータリスト調のブログトップ
太い罫線、極太サンセリフ、蛍光アクセント、モノスペースのメタ情報で組んだ個人ブログ/メディアのトップページ。新聞のように記事を並べつつ、テック系の「整いすぎ」を拒むラフさを残す設計。