第3部:実践サイト制作 Step 11 / 14

ブログサイト制作

ブログは情報発信の基盤。SEOで集客し、ファンを増やすための重要なツールです。AIでデザインから記事作成まで効率化しましょう。

ブログサイトの構成

🏠

トップページ

最新記事一覧、人気記事、カテゴリー

📝

記事ページ

本文、目次、関連記事、シェアボタン

📁

カテゴリーページ

カテゴリー別の記事一覧

👤

プロフィール

運営者情報、SNSリンク

AIでブログデザインを作成

記事一覧(カード型)

ブログの記事一覧をカード型で作成してください。

【カードの内容】
・サムネイル画像(16:9)
・カテゴリータグ
・記事タイトル(2行まで、超過は省略)
・投稿日
・抜粋(3行まで)

【レイアウト】
・PCで3カラム、タブレットで2カラム、スマホで1カラム
・ホバーで影が強くなるエフェクト

ダミーデータ6件分でお願いします。

記事ページのレイアウト

ブログ記事ページのレイアウトを作成してください。

【メインコンテンツ】
・記事タイトル(h1)
・投稿日、カテゴリー、読了時間
・アイキャッチ画像
・本文エリア(prose形式)
・目次(h2の見出しから自動生成を想定)
・著者プロフィール
・関連記事

【サイドバー(PC時のみ表示)】
・プロフィールウィジェット
・人気記事
・カテゴリー一覧

Tailwind CSS + @tailwindcss/typography でお願いします。

ブログ記事もAIで作成

記事の下書きを生成

以下のテーマでブログ記事を作成してください。

【テーマ】初心者向けWebデザインの始め方
【想定読者】Webデザインに興味がある未経験者
【文字数】2000文字程度
【構成】
- 導入(フックと記事の概要)
- 本文(見出し3〜5個)
- まとめ

SEOを意識して、見出しにはキーワードを含めてください。

注意:AIの出力はそのまま使わず、自分の経験や独自の視点を加えて編集しましょう。

まとめ

  • トップ、記事ページ、カテゴリーが基本構成
  • カード型の記事一覧が見やすい
  • 記事の下書きもAIで効率化
  • AI出力は必ず編集してオリジナリティを追加
前へ:LP制作 次へ:公開と運用