アドベントカレンダー用にブログを書く場所がほしかったので生成AI縛りでブログを作った
この記事は 株式会社ヘンリー Advent Calendar 2025 の2025/12/16の記事です。
昨日はm1104mの「サーマルプリンタを子育てに活用してみた」でした！
初めまして！株式会社ヘンリーでエンジニアをしているわくわくです。今日はこのブログを0から1文字もコードを書かずにデザインから公開までに至ったやりかたと考え方でも共有しようと思います。
こんなのが最初の記事で良いんだろうか。Nano Banana Pro で生成したヒーローイメージはなんとも言えない感じになってるし。まぁいいでしょう。
突然ですが私にはいくつか趣味があります。
自作PC、ゲーム配信、ギター…etc と少なくない趣味を持っています。さらに1児の子育てもしています。めっちゃかわいいです。なのでこんなブログを自分の手で0からデザインを作ってコーディングしている場合じゃ無い。そんな暇があったら Escape from Tarkov で SCAV 出撃でもするか FF14 で新式に向けて素材集めでもします。（7.4のレイド曲にトム・モレロが提供したのめっちゃテンション上がりましたね。はやくやりたい。）
ということで自分がクライアントになったつもりで全部AIにお願いしました。もちろんこの記事は人間が書いてます！安心してください(？)
フェーズ1: 何を伝えれば良いかAIに教えてもらった
利用したツール: Perplexity, Claude Code
Perplexityに最近ブログを作るならどんな技術を使ったら良いか聞いてこれでブログ作りたいから必要なインプット教えてと伝え、指示テンプレートの初版を作成してもらいました。その後Claudeにレビューをしてもらい、冗長な箇所や不要な箇所を削ってもらいました。
はい、もはや一番大事なプロンプトを考えることすら放棄してしまったダメ人間です。
できあがった指示がこちら↓
# ブログサイト構築指示書
あなたはフロントエンドエンジニア兼UIデザイナーです。
以下の仕様に基づいて、Astro + Netlify 構成のブログサイトを提案してください。
## 必須要件（これを最優先）
### サイトの目的とターゲット
- 目的:
- 想定読者:
- サイト名:
### デザインの方向性
- トーン: （例: 開発者向けのクリーンで読みやすいデザイン）
- 参考サイト: （具体的なURLがあれば）
- カラー:
- メイン:
- アクセント:
- 背景: ダーク / ライト / 両対応
- 避けたい表現:
### ページ構成
| パス | 役割 | 優先度 |
|------|------|--------|
| / | トップページ | 必須 |
| /blog | 記事一覧 | 必須 |
| /blog/[slug] | 記事詳細 | 必須 |
| /about | 自己紹介 | 任意 |
| /tags/[tag] | タグ別一覧 | 任意 |
---
## コンテンツ管理（Astro Content Collections）
### ブログ記事 (`src/content/blog/`)
# frontmatter スキーマ
title: string (必須)
description: string (必須)
pubDate: date (必須)
updatedDate: date (任意)
tags: string[] (任意)
draft: boolean (デフォルト: false)
heroImage: string (任意)
### 固定ページ (`src/content/pages/`)
title: string (必須)
description: string (必須)
---
## 機能要件
### ブログ機能
- [ ] 記事一覧: pubDate 降順、ページネーション（10件/ページ）
- [ ] タグフィルタリング
- [ ] 目次（TOC）表示: サイドバー or 記事上部
- [ ] コードブロック: シンタックスハイライト（Shiki）
- [ ] 前後記事リンク
- [ ] draft: true の記事は本番で非表示
### SEO / メタ情報
- [ ] OGP画像の自動生成 or 指定
- [ ] RSS/Atomフィード (`/rss.xml`)
- [ ] サイトマップ (`/sitemap.xml`)
- [ ] canonical URL
### パフォーマンス
- [ ] 画像最適化（Astro Image）
- [ ] View Transitions（任意）
---
## 技術スタック
| 項目 | 指定 |
|------|------|
| フレームワーク | Astro v5.x |
| CSS | Tailwind CSS / Vanilla CSS / その他 |
| デプロイ | Netlify（Git連携） |
| Node.js | 20.x |
---
## 出力してほしいもの
1. **ディレクトリ構成**（ツリー形式）
2. **主要ファイルのコード**
- `src/pages/index.astro`
- `src/pages/blog/index.astro`
- `src/pages/blog/[slug].astro`
- `src/content/config.ts`
- `src/layouts/BaseLayout.astro`
- `src/components/Header.astro`
- `netlify.toml`
3. **サンプルMarkdown**（ブログ記事1本）
4. **`package.json`**（必要な依存関係）
コードには日本語コメントを含め、UIテキストも日本語で記述してください。まぁまぁまずまずです。しかし私の怠惰な性格はこれすら埋めることを心が拒否しています。
空欄を埋めるのを手伝ってほしい
そうClaudeに伝えました。もちろんですと答えてくれたので、目的や想定読者、デザインの好み、機能についてヒアリングを丁寧にしていただきました。
非常に良い担当者だと思います。
そうしていくつか質問に答えて最終的に出力された指示書がこちら↓
# ブログサイト構築指示書
あなたはフロントエンドエンジニア兼UIデザイナーです。
以下の仕様に基づいて、Astro + Netlify 構成のブログサイトを提案してください。
---
## 必須要件（これを最優先）
### サイトの目的とターゲット
- サイト名: Spectacle Case
- コンセプト: 眼鏡（＝自分の視点）とケース（＝得た知識の収納場所）のメタファー
- 目的: 技術メモ・備忘録、ゲーミング/配信関連の情報発信、ポートフォリオを兼ねた個人ブログ
- 想定読者: 特に限定しない（自分用メモから同業エンジニア、配信視聴者まで）
### デザインの方向性
- トーン: クリーンで読みやすい、落ち着いた知的な雰囲気
- カラー:
- ベース: モノトーン（白背景、黒〜グレーのテキスト）
- アクセント: 紫系（#7C3AED 前後を目安に調整可）
- ダークモード: 不要（ライトモードのみ）
- フォント: ゴシック系（すっきり、モダン）
- 避けたい表現: 過度なアニメーション、ストック写真、派手な装飾
### ページ構成
| パス | 役割 | 優先度 |
|------|------|--------|
| / | トップページ（最新記事一覧 or ヒーロー＋記事抜粋） | 必須 |
| /blog | 記事一覧 | 必須 |
| /blog/[slug] | 記事詳細 | 必須 |
| /about | 自己紹介 | 必須 |
| /tags | タグ一覧 | 必須 |
| /tags/[tag] | タグ別記事一覧 | 必須 |
---
## コンテンツ管理（Astro Content Collections）
### ブログ記事 (`src/content/blog/`)
# frontmatter スキーマ
title: string (必須)
description: string (必須)
pubDate: date (必須)
updatedDate: date (任意)
tags: string[] (任意)
draft: boolean (デフォルト: false)
heroImage: string (任意)
### 固定ページ (`src/content/pages/`)
title: string (必須)
description: string (必須)
---
## 機能要件
### ブログ機能
- [x] 記事一覧: pubDate 降順、ページネーション（10件/ページ）
- [x] タグフィルタリング
- [ ] 目次（TOC）表示: 不要
- [x] コードブロック: シンタックスハイライト（Shiki）
- [x] 前後記事リンク
- [x] draft: true の記事は本番で非表示
- [ ] コメント機能: 不要
### SEO / メタ情報
- [x] OGP画像の自動生成 or 指定
- [x] RSS/Atomフィード (`/rss.xml`)
- [x] サイトマップ (`/sitemap.xml`)
- [x] canonical URL
### アナリティクス
- [x] Google Analytics 4 対応
### パフォーマンス
- [x] 画像最適化（Astro Image）
---
## 共通レイアウト
### ヘッダー
- サイト名/ロゴ: 「Spectacle Case」（眼鏡アイコンがあると良い）
- ナビゲーション: Blog / About
- SNSアイコンリンク（ヘッダーまたはフッターに配置）
### フッター
- SNSリンク:
- Twitch
- X（Twitter）
- GitHub
- コピーライト表記
---
## 技術スタック
| 項目 | 指定 |
|------|------|
| フレームワーク | Astro v5.x |
| CSS | お任せ（Tailwind CSS 推奨） |
| デプロイ | Netlify（Git連携による自動デプロイ） |
| Node.js | 20.x |
---
## 出力してほしいもの
1. **ディレクトリ構成**（ツリー形式）
2. **主要ファイルのコード**
- `astro.config.mjs`
- `src/content/config.ts`
- `src/layouts/BaseLayout.astro`
- `src/components/Header.astro`
- `src/components/Footer.astro`
- `src/pages/index.astro`
- `src/pages/blog/index.astro`
- `src/pages/blog/[slug].astro`
- `src/pages/about.astro`
- `src/pages/tags/index.astro`
- `src/pages/tags/[tag].astro`
- `src/pages/rss.xml.js`
- `netlify.toml`
3. **サンプルMarkdown**
- ブログ記事1本（技術系サンプル）
- About ページ用コンテンツ
4. **`package.json`**（必要な依存関係すべて）
コードには日本語コメントを含め、UIテキストも日本語で記述してください。良い感じ。良いでしょう。これを Claude Codeにペッと貼り付けました。
フェーズ2: デザインが微妙すぎたので専門家を雇った
利用したツール: Claude Code, Figma Make, Figma MCP
上記でできたデザインはあまりにもあまりでした。先方は素晴らしい対応をしてくれたのできっと私の指示が良くなかったのでしょう。
しかしこれ以上丁寧な指示を作れる気もしません。もっと雑に空気を読んでくれる専門家(我ながらひどい言い方だ)を雇うことにしました。Figma Makeの登場です。
Figma Makeにこう伝えてみました。
個人のエンジニア件、ゲーム配信者の技術記事や配信の小ネタ小技から日常を書くブログサイト。黒や濃いグレーを基調とし、紫やオレンジをアクセントにしてほしい。
トップページはブログの最新記事をわかりやすくし、過去記事も5件はトップに載せたい。
必要なページはBlog, About, Portfolio(制作物)
デザインはモダンな感じでポップさも少しは欲しい
とても言い雑さ。よい。出てきたデザインがこちら。
悪くない、なかなか悪くない。しかし細かなところはまだ調整の余地がありそうに思います。
まず、モバイル対応がされていませんでしたし、私が伝えていないのが良くないのですがサイトタイトルも違います。最新記事が大きすぎるように思いますし、全体的にぼてっとした感じがしています。そこから怒濤の雑な指示をバンバン出していきます。
- 記事詳細ページの実装
- 記事にはタグを複数付けられるように
- ウェブサイトタイトルは Spectacle Case に
モバイルの際はメニューをハンバーガーメニューに格納し、記事一覧のカードビューはコンパクトなレイアウトに変更してください
- Homeをブログ主体のビューにする
- Blog専用ページを消す
- デザインの系統は保持したまま、よりシンプルなデザインにする
デスクトップビューをもう少しブログっぽくしたい。記事一覧を1カラムにして一覧の右にタグ一覧と簡単なプロフィール用意したい。プロフィールはAboutページへのリンクを持っていてほしい
記事一覧アイテムごとにスペースが足りないから調整して
記事一覧のアイテムが詰まってるので、空白を開けてほしい
article間のマージンが増えてないよ
良い感じ。この方針でカードサイズを少しコンパクトにしてマージンも8くらいにしてほしい
タグをクリックしたときにその記事を表示するページに遷移できる？
(divエレメントを指定しながら)これいらない
他にも雑な指示をひたすらに出し続けたと思います。
これはお気に入りの指示。ひどい。
この間FigmaとClaude CodeをMCPで繋ぎ、URLを貼り付けては「これで実装して」と壊れたおもちゃのように繰り返しました。
フェーズ3: 公開準備のタスク整理をしてもらった
利用したツール: Claude Code, Squarespace(ドメイン取得), Netlify
さて、公開の時がやってきました。公開に際して必要なタスクも全部整理してもらいました。サンプル記事の削除はやってもらいました。とても助かります。
Netlifyを利用しており、Squarespaceでドメインを取得したことを伝え設定方法から何まで全部指示出ししてもらいました。アホになりそう。もうアホかも。めでたしめでたし。
そうしてできあがったブログが今皆さんがお読みになっているこのブログです。ZERO知識でなんとかなるかと言われるとちょっと微妙な箇所はあるなとは思うけど格段に簡単になっています。
正直実装面は自分でやっても問題にならないと思うけどデザインを考える、みたいなのを思ってる通りにある程度作ってくれるというのは高校時代に美術で提出物を出したのにもかかわらず最下位付近を取った私にはありがたすぎる世の中です。
トータルかかった時間はめっちゃ短いしなんなら次はもっと速くできそうなイメージもわいています。
ツールの選定基準
Perplexity
とりあえず、最新情報を検索してまとめてきてもらうには最高だと思っているので初回調査にはよく利用している。今回も技術調査を担当してもらった。
Figma Make
別のツール(Gemini Pro)でデザインを作ってもらってどうにかするというのも考えたけど餅は餅屋かなって考え Figma Make を利用した。
結果として正解だったと思っている。MCPでつないで効率よくClaude Codeに意図を伝えられるのでかなり楽だった。
Claude Code
これは使い慣れているためっていうのがメイン。Sonnet/Opusの4.5系もでたし使いたかったのもある。ちなみにGitHubへのcommitとpushも全部やってもらった。へへ。
さいごに
以上！今後はちゃんとブログ記事書いていかないとね。またよろしくお願いします。ではまた〜
