「ブログのデザインをFigmaで作ったけど、CSSが書けない…」
そんな状態から、AIに全部やってもらったら1日でここまでできたという体験談です。使ったのはAnthropic社の「Claude Code」。プログラミングの知識がなくても、日本語で「こうして」と伝えるだけでAIがコードを書いてくれるツールです。
この記事では、実際にやったこと・ハマったこと・学んだことを全部公開します。
今日やったことの全体像
| 作業 | 内容 | かかった時間 |
|---|---|---|
| 記事カード | トップページの記事一覧をFigmaデザイン通りに | 2時間 |
| フッター | 月と星の装飾付き、中央揃えのフッター | 30分 |
| 記事ページ | 白背景化、日付の色調整、関連記事の整理 | 20分 |
| テーブルとコード | ダークテーマのコードブロック、コピーボタン追加 | 15分 |
| 世界観の演出 | ヒーローに星アニメと月、NO IMAGEに月アイコン | 15分 |
| ブログ記事 | Claude Code入門記事の執筆と投稿 | 30分 |
| 図解作成 | Figma Plugin APIでロードマップ図解を自動生成 | 20分 |
合計で約4時間。普通にやったら何日もかかる作業量です。
一番大変だったこと: Cocoonとの戦い
このブログはWordPressの無料テーマ「Cocoon」を使っています。Cocoonは高機能で便利なのですが、デザインを独自にカスタマイズしようとすると、テーマのCSSと激しく衝突します。
CSSだけでは勝てなかった
最初はCSSだけでカードのデザインを変えようとしました。でもCocoonのCSSは非常に強力で、こちらが!importantを付けても、もっと高い優先度で上書きされてしまいます。
5回くらい「これでいけるはず」「まだダメ」を繰り返して、最終的にたどり着いた方法は「PHPでHTMLを丸ごと書き換える」というアプローチでした。
解決策: PHPの出力バッファリング
WordPressがHTMLを出力する前に、PHPで内容を書き換える方法です。
// functions.phpに追加
add_action('template_redirect', 'my_card_buffer');
function my_card_buffer() {
ob_start('transform_cards'); // 出力を一時的にためる
}
function transform_cards($html) {
// Cocoonのカード部分を検索して、自分のHTMLに置き換え
return preg_replace_callback(
'/<article.*?entry-card.*?<\/article>/s',
'rebuild_card',
$html
);
}こうすることで、ブラウザには最初から自分のデザインのHTMLだけが届きます。CSSの優先度バトルも、JavaScriptでの書き換え時のチラつきも、全部解決しました。
学んだこと
CocoonのようなCSSが強力なテーマをカスタマイズするなら、CSSで戦わずにPHPでHTMLを書き換えるのが正解。Claude Codeはこの方法も含めて、試行錯誤しながら最適解にたどり着いてくれました。
フッターもPHPで丸ごと置き換え
カードと同じ手法をフッターにも適用しました。Cocoonのフッター構造は複雑で、CSSだけでは中央揃えすらうまくいきません。
PHPで出力を丸ごと自分のHTMLに置き換えることで、Figmaで描いた通りの月と星が輝くフッターが一発で完成しました。
コードブロックにコピーボタンを付けた
技術記事にはコードブロックが欠かせません。「コードの見た目をかっこよくして、コピーボタンを付けて」と頼んだだけで、ダークテーマのコードブロックと右上のコピーボタンが完成しました。
ボタンを押すとクリップボードにコピーされて「Copied!」と表示が変わります。こういう細かいUXの実装も、Claude Codeなら一瞬です。
ヒーローエリアに夜空の演出を追加
トップページのヒーローエリア（一番上の大きな画像部分）に、CSSだけで星のきらめきアニメーションと月の装飾を追加しました。
画像を使わずCSSのグラデーションとアニメーションだけで実現しているので、ページの読み込み速度に影響しません。「Melatonin」（リズムゲーム）のようなエモい夢の世界観を目指しています。
Figmaで図解を自動生成した
驚いたのが、Claude CodeからFigmaのPlugin APIを操作して、図解を自動生成できたこと。
「ロードマップの図解を、ぐっすりーなのブランドカラーで、アイコン付きで作って」と頼んだだけで、Figmaに直接デザインが生成されました。フォントや色も指定通り。
ブログの解説図やSNS用の画像を量産するのに使えそうです。
Claude Codeを使ってみて感じたこと
良かったこと
1. 試行錯誤を代わりにやってくれる
「CSSで上書き」がダメなら「JSで書き換え」、それもダメなら「PHPで出力バッファリング」と、アプローチを変えながら解決策を探ってくれます。自分でやったら1つの方法で心が折れていたと思います。
2. WordPressへの反映が即座
REST APIを使って、ローカルで編集したファイルをWordPressに直接送信する仕組みを作ってくれたので、FTPやファイルマネージャーを開く必要がありませんでした。
3. 複数の技術を横断できる
CSS、PHP、JavaScript、WordPress API、Figma API…1日の中でこれだけの技術を使い分けてくれるのは、AIならではです。
注意が必要だったこと
1. 同じ問題で何度もやり直すことがある
CocoonのCSS対策では5回くらい失敗しました。「もう一回試す」より「別の方法を考えて」と明確に伝えた方が早く解決します。
2. 確認は自分の目でやる
「更新しました」と言われても、実際にブラウザで見ると崩れていることがあります。スクリーンショットを撮ってClaude Codeに見せると、的確に修正してくれます。
3. 長い会話は精度が落ちる
3時間以上の長いセッションになると、前に言ったことを忘れたり同じ失敗を繰り返すことがあります。区切りのいいところで/clearしてリセットするのが大事です。
まとめ: AIとの協業は「具体的に伝える」が全て
今日1日で学んだ最大の教訓は、「AIへの頼み方で結果が全く変わる」ということ。
| 結果が悪い頼み方 | 結果が良い頼み方 |
|---|---|
| 「デザインを直して」 | 「記事カードの高さを180pxにして、サムネイルは左に220px」 |
| 「Cocoonを上書きして」 | 「CSSでは勝てないのでPHPで出力バッファリングして」 |
| 「フッター微妙」 | 「Figmaの数値通りに、月がtop28px、金色ラインがtop58px」 |
具体的な数値、参考画像、そして「何がダメだったか」をセットで伝える。これがAIと上手に仕事をするコツです。
明日以降は、ヒーローの背景画像をMelatonin風のエモいイラストにしたり、記事のアイキャッチ画像を作っていく予定です。このブログ自体が「AIでどこまでできるか」の実験場なので、進捗はまた記事にします。
コメント