結論：CSSを1行も書かずに、このブログのデザインができた
最初に事実だけ書きます。
このブログのデザインは、すべてClaude Codeが作りました。僕が書いたCSSは0行。裏側では「Tailwind CSS」という仕組みが使われていますが、僕はそれを意識したことがありません。 目指すデザインがあり、それをAIに伝えたら実現された。僕にとってはそれだけの話です。
すべてClaude Codeが生成
納得するまでブラッシュアップした結果
初期構築の当日に基本形が完成
「CSSって何？」という人にこそ読んでほしい記事です。知識ゼロでも、AIにイメージを伝えるだけでブログのデザインは作れます。
僕のデザインの伝え方
デザインの専門知識がなくても、AIにデザインを伝える方法はあります。僕が実際にやっているのは、こんな流れです。
「このブログのコンセプトと戦略に合ったデザインを提案して」とClaude Codeに伝える。ブログの目的やターゲット読者をCLAUDE.mdに書いてあるので、AIはそれを読んで提案してくれる。
「ダーク系のヘッダーがいい」「テック感はあるけど威圧的じゃない感じ」など、イメージを言葉で伝える。AIが具体的な案を出してくるので、「それいいね」「もう少しこうしたい」とやり取りする。
方向性が決まったら、Claude Codeが実装。ブラウザで確認して、気になるところはスクショを撮って「ここ、もう少し余白を広げたほうがいいと思うけど、どう思う？忖度抜きで」と伝える。
一発で決まることもあれば、何回もやり取りすることもある。自分が「これでいい」と思えるまで続ける。結果的に、その時点では100点のデザインになる。
ポイントは「忖度抜きで」と伝えること。AIは人間に気を使って、こちらの意見に合わせようとする傾向があります。でもデザインは「正しい」かどうかが大事なので、プロの視点で正直に答えてもらうほうが結果がいい。
「ヘッダー作って」から始まった
このブログの最初のデザイン作業は、ヘッダーでした。Claude Codeに出した指示はこんな感じです。
この一言で、PC版のナビゲーション、スマホのハンバーガーメニュー、スライドアニメーションまで全部できました。
「ハンバーガーメニューって何？」と思った人のために説明すると、スマホでよく見る三本線（≡）のボタンです。タップするとメニューがスライドして出てくるやつ。
僕は「ハンバーガーメニュー」という言葉を知っていたから伝えられましたが、知らなくても「スマホのとき、メニューは横のボタンを押したら出てくるようにして」でも同じ結果が得られるはずです。
納得するまで終わらない
「AIに任せたら一発でOK」…ではないです。正直に言うと。
最初に出てくるデザインは「方向性はいいけど、細かいところが気になる」くらいの仕上がりです。そこからの微調整が大事でした。
こういうやり取りを繰り返すことで、デザインが磨かれていきます。
重要なのは、自分が「もういい」と思えるまで続けること。AIは何度でも付き合ってくれます。最近はデザインのルールがCLAUDE.mdに蓄積されてきたので、一発で満足できる結果が出ることも増えました。
参考サイトのURLを投げるという技
「こういうデザインがいい」を言葉で伝えるのが難しいとき、僕がよく使う方法があります。
おしゃれだなと思ったサイトのURLをそのままClaude Codeに投げる。
姉妹サイト「サウナと暮らす。」のプロダクトカード（商品紹介パーツ）を作るとき、実際にこの方法を使いました。
「参考サイトのURL」+「ここだけ変えてほしいポイント」。この伝え方が、非エンジニアにとっては一番確実です。
デザインの語彙がなくても、「この色がいい」「この配置がいい」と指差すだけでAIは理解してくれます。
裏側ではTailwind CSSが動いている
ここまで読んで気づいたかもしれませんが、僕はデザインを作る過程で一度もCSSのコードを意識していません。
では裏側で何が起きているのか。Claude Codeは「Tailwind CSS」という仕組みを使ってデザインを実装しています。
Tailwind CSSは、Webサイトの見た目（色、大きさ、配置など）を短い命令文で制御する仕組みです。たとえば、ヘッダーを上部に固定するには：
sticky top-0 z-50 shadow-lgスマホでは隠して、PCでは横並びで表示するには：
hidden md:flex items-center gap-6正直、僕にはこれが暗号にしか見えません。でも、暗号を理解する必要はありませんでした。Claude Codeがこのコードを自動生成してくれるので、僕は「結果が良いかどうか」をブラウザで確認するだけです。
このブログはTailwind CSS v4（最新バージョン）を使っています。v4では設定ファイル（プログラムの動作を決めるファイル）が不要になり、こんな数行でサイト全体の色やフォントが定義されています：
@theme {
--color-accent: #0E7490;
--color-dark: #0F172A;
--color-cyan: #22D3EE;
--font-sans: "Noto Sans JP", system-ui, sans-serif;
}ネットでTailwindを調べると古い情報（v3）が多くて混乱しますが、Claude Codeは最新の方法で実装してくれるので、その心配も不要でした。
僕がハマった3つのポイント
全部うまくいったわけではありません。
最初は記事本文のデザインもAIに任せきりでしたが、記事ごとにバラバラになってしまいました。結局、記事本文は専用のCSSファイルで管理するハイブリッド構成（＝Tailwindと従来のCSSを使い分ける方式）に。AIに全部任せても「記事の見た目は統一したい」という判断は人間がする必要がありました。
AIは1ページ単位ではきれいに仕上げてくれます。でも、トップページと記事ページで文字の大きさが微妙に違ったり、余白の取り方がずれたりすることがありました。「全ページを並べて見比べて統一感をチェックする」のは人間の仕事として残ります。
何度もデザイン修正を依頼するうちに、文字の大きさなどが微妙にバラバラになりました。「統一して」と後から指示し直す場面も。最近はデザインルールをCLAUDE.mdに明記するようにして、この問題はほぼ解消されました。
AIに任せても、AIにはできないこと
Claude Codeは「指示通りにデザインを作る」のは得意です。しかも、イメージを超えた提案をしてくれることもある。でも、以下は人間が判断する領域として残りました。
ページ間のデザイン一貫性。 AIは1ページ単位では整ったデザインを作ってくれます。でも、複数ページを俯瞰して「全体として統一感があるか」をチェックするのは人間の仕事でした。
「この色でいいのか」の判断。 このブログのアクセントカラー（ティール系の青緑）は僕が選びました。AIに「テック系のブログに合う色を提案して」と聞けば候補は出してくれます。でも「この色が好きか」「自分のブログに合っているか」は、AIに決めてもらう話ではありませんでした。
「もういい」のタイミング。 デザインは無限に改善できます。でも完璧を目指していたら公開できない。「ここまでで十分」と判断するのは自分だけです。
非エンジニアがAIでデザインするコツ
- デザインの方向性は自分で決める: ダーク系かライト系か、メインの色は何色か。ここだけは自分の好みで選ぶ必要があります
- 指示は具体的に: 「かっこいい感じで」ではなく「参考サイトのURLはこれ」「メインカラーはこの色」と伝えると精度が上がります
- スクショを撮って伝える: 「ここの余白が気になる」を言葉だけで伝えるのは難しい。スクショに矢印を引いて見せるのが一番確実です
- 「忖度抜きで」と伝える: AIは人間の意見に合わせがち。「プロの目から見てどう思う？」と聞くと、より良い提案が返ってきます
- デザインルールをCLAUDE.mdに書く: カラーパレットやフォントを一度決めたら、AIに「常にこのルールに従って」と伝える。これが全ページの統一感の土台になります
- 最後に全ページ並べて見比べる: AIはページ単位では整えますが、ページ間の一貫性チェックは人間がやる工程として残ります
まとめ
CSSの知識ゼロでも、Claude Codeにイメージを伝えるだけでブログのデザインは作れます。裏側ではTailwind CSSという仕組みが動いていますが、それを理解する必要はありません。
ただし万能ではない。ページ間の統一感やデザインの好み、「もういい」の判断は人間の領域です。
僕のやり方はシンプルです。コンセプトを伝えて、実装してもらって、スクショを撮って微調整して、納得するまで繰り返す。 結果として、自分の中では100点のデザインに仕上がっています。AIから提案されて、その100点が更新されることもある。これが非エンジニアにとっての、リアルなデザイン制作です。