| 目次 |
|---|
私はフロントエンド開発で、見た目が整った美しいUIを作っていく時間が好きです。
しかし正直、時折発生する繰り返し作業は苦痛で、気力を持っていかれます。
同じレイアウトを何度も組み直したり、CSSの位置ズレを調整したり、Tailwindのクラスを当て続けたり、ブラウザごとのクセに対応したり……。そういう細かい退屈な作業が積み重なると、地味に効いてきます。
数年前までは、それが当たり前でした。
でも今はAI、とくにClaudeとWindsurf、そしてTailwind CSSのおかげで、私の作業スタイルは完全に変わりました。
この記事は理論ではなく、いまの私の実務の話です。
個人的な体験ベースですが、ちゃんと実用的で、難しすぎない内容で書いていきます。
それでは、始めましょう。
はじめに：”すべて手作業でやる”をやめた理由
何年もの間、私はほとんど全部を手で書いていました。
- ヒーローセクション
- 特徴紹介のグリッド
- ボタン、カード、レイアウト
- 余白の微調整
- 繰り返し出てくるTailwindのクラス
しかも、Figmaでデザイナーがちょっとした修正を入れるたびに、コンポーネントの半分を作り直すことも珍しくありませんでした。
ある日、ふと思ったんです。
「なんで今、2025年に、2020年みたいな作業をしてるんだろう？」
そこからAIを試し始め、” Claude＋Tailwind CSS＋Windsurf ” の構成を業務に取り入れてみました。
結果、開発の流れがガラッと変わりました。
大げさではなく、いまはHTMLとTailwind周りの作業の60〜80%はAIがやってくれます。私がやるのは、最後の20%を整えることだけ。
このブログでお伝えするのは、いまの私のやり方そのものです。
まだ完璧ではないし、派手でもない。でも、現場で本当に使っているリアルなやり方です。
AIがフロントエンド開発の時間を大幅に減らしてくれる理由
AIはあなたの仕事を奪うわけではなく、“退屈な部分”を肩代わりしてくれる存在です。
私自身、数ヶ月しっかり使ってみて、はっきり分かったことがあります。
AIが得意なこと
- セマンティックなHTMLを素早く組み立てる
- Tailwind CSSでレイアウトを作る
- Figmaのスクショから、実際に動くコンポーネントに落とし込む
- スクショからレイアウト崩れの原因を見つけて直す
- ユーティリティクラスを整理して見やすくする
- アクセシブルなマークアップの提案をする
AIが苦手なこと
- 完璧な余白の設定（Tailwindのspacingは結局、最後に人が調整する）
- ピクセル単位の完全一致
- 高度なレスポンシブデザイン
- 適切なデザインの判断
結果として私の作業は、自然と以下のシンプルな形になります。
1. AIでまず下書きを作る → 2. 自分でレビューしつつ微調整
今となっては常識かもしれませんが、このバランスが一番良いなと思っています。
私の毎日のワークフロー（ゼロ → コンポーネント）
これは、ほぼ毎日使っている手順です。
- Figmaの該当セクションをスクショする
- その画像をClaudeにアップロードする
- Tailwind CSS用のプロンプトを送る
- ClaudeがHTML＋Tailwindを生成してくれる
- 余白やレスポンシブをもう一段だけ調整してもらう
- 生成結果をプロジェクトに貼り付ける
- 最後に自分で必要なところだけ整える
この手順により、これまで30〜45分かかっていた作業が、だいたい3〜5分で終わり、開発が本当に楽になります。
Figmaのスクショ → Tailwind CSSへの変換（実際にやってみた感覚）
Figmaの一部分をスクショして、そのままClaudeに投げる。
これだけで、驚くほどちゃんとした形のコードが返ってくることが多いです。しかも意外と綺麗。
私が実際に使っているプロンプトはこれです：
このFigmaのスクリーンショットを、綺麗でセマンティックなHTML＋Tailwind CSSに変換してください。
要件：
レスポンシブ対応（モバイル → デスクトップ）
Tailwindのspacingスケールを使う（gap-6、p-8 など）
セマンティックタグを使う（section、h1、main など）
必要ならプレースホルダー画像を使う
インラインスタイルは禁止
クラスは読みやすく、できるだけ最小限に
そしてClaudeはだいたい、こんな雰囲気のコードを返してきます
（例）：
<section class="mx-auto max-w-screen-xl px-6 py-16 text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
Manage Projects Faster with AI
</h1>
<p class="mt-4 max-w-2xl mx-auto text-gray-600">
Build and ship UI components in minutes, not hours.
</p>
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<a href="#" class="rounded-lg bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700">Get Started</a>
<a href="#" class="rounded-lg border px-6 py-3 font-medium text-gray-700 hover:bg-gray-100">Learn More</a>
</div>
</section>完璧かと言われると、もちろんそうではありません。
でも、時間が大幅に浮くのは間違いないです。
余白やタイポグラフィ、レスポンシブの細部は自分で微調整します。
ただ、土台がすでにできた状態からスタートできる。ここが本当に大きいと感じます。
AIでTailwind CSSのスタイリングを一気に当てる
HTMLはすでにあるけど、見た目を整えるのに時間をかけたくない。
そんなとき私は、AIにTailwindのスタイル当てを任せます。
使っているプロンプトはこちら：
このHTMLをTailwind CSSでスタイリングしてください。
レスポンシブ対応、余白の一貫性、そしてユーティリティクラスはきれいに整理された状態を意識してください。
Claudeは、見た目がそれなりに整っていて、クラスも統一感のある形で返してくれます。
素のHTML → Tailwind化の例：
素のHTML
<div class="card">
<h3>Starter Plan</h3>
<p>Ideal for individuals.</p>
</div>Tailwindでスタイリング
<div class="rounded-xl border p-6 shadow-sm">
<h3 class="text-lg font-semibold">Starter Plan</h3>
<p class="mt-2 text-gray-600">Ideal for individuals.</p>
</div>もちろんこれも、毎回ピクセル完全一致…というわけではありません。
でも速い、ここが強みです。
AIでHTML/CSSのデバッグをする（意外とよく使う）
これは、AIの使い方の中でもたぶん一番“過小評価されてる”やつです。
レイアウトがなんか変な時ってありますよね。例えば：
- flexの要素がズレて揃わない
- いらないoverflowが出る
- 余白が謎に崩れる
- カードの高さが揃わない
こういうときに私は、問題の部分をスクショしてClaudeに投げて、こう聞きます。
このレイアウトが崩れている理由を説明して、Tailwind CSSでの具体的な解決策を出力してください。
するとClaudeは、わりと高確率で原因を突き止めます。例えば：
- 親要素に必要なクラスが足りていない
- flex-directionが意図と違う
- 不要なpaddingが入っている
- width/heightの前提がズレている
正直これだけでも、ここ数ヶ月で何時間も節約できました。
毎日使っているツール（リアルにおすすめ）
Claude
特に強いのはこのあたりの作業：
- スクショ → コード化
- Tailwind CSSの説明（「これ何？」をすぐ解決してくれる）
- レイアウト崩れのデバッグ
- HTMLのリファクタリング
正直、画像を見て理解する力（ビジュアル推論）が異常に強いと感じます。
Windsurf
AI利用に最適化されたコードエディタ。
次のような用途で便利です：
- コンポーネントのリファクタリング
- 複数ファイルを横断した改善
- プロジェクト構成に合わせたコード生成
Tailwind系のツール
- Headwind：クラスの並び替え（ソート）に便利
- オンラインのクラスソーター：ユーティリティを綺麗に保つために使う
どれも小さいツールですが、効いてくる場面が多いです。小さな手間が減るのは大きな効果につながります。
使ってみて分かった ”避けるべき使い方”
AIを使い始めてから、いくつか学んだことがあります。地味だけど大事です。
- レスポンシブは必ず自分で確認する（最後は実機・ブラウザでのチェックが重要）
- 適当なpx指定は、Tailwindのspacingに置き換える
- AIのコードをそのまま鵜呑みにしない
- AIはユーティリティクラスを盛りがち
- レイアウトの設計判断は、人間の役割
そしてもうひとつ。
AIを使い続けるほど、”どう指示すれば良い結果が返ってくるか” が分かってきます。
結局、AIをうまく使うコツは “誘導の仕方を学ぶこと” でした。
まとめ
私は、AIがフロントエンド開発者そのものを置き換えることはないと考えています。
でも、これまで当たり前だった ”遅くて、繰り返しの多い作業” は、確実に置き換わっていきます。
私の場合、いまは土台となるコードの約70%をAIに任せています。
その分、私は最後の仕上げ、本当に重要なところに集中できるようになりました。
もしまだ、Claudeで スクショ → Tailwind化 を試したことがないなら、ぜひ一度やってみてください。
数秒でコンポーネントが丸ごと生成されるのを見た瞬間……世界が変わります。
これからは賢く作ろう、無理して頑張る時代は終わりです。
