AIでコーディング支援
AIを使えば、HTML/CSSのコーディングを大幅にスピードアップ。デザインを伝えるだけで、コードを自動生成してくれます。
AIコーディングの流れ
1
デザインを言葉で説明
作りたいUIの特徴を具体的に伝える
2
AIがコードを生成
HTML/CSS（Tailwind）のコードを出力
3
確認・調整
プレビューして、必要に応じて修正を依頼
4
完成
コードをコピーしてプロジェクトに使用
実践：コンポーネントを作成
ヘッダーを作成
以下の仕様でヘッダーを作成してください。Tailwind CSSを使用。 【仕様】 ・固定ヘッダー（スクロールで追従） ・左にロゴ（テキストで「MyPortfolio」） ・右にナビゲーション（ホーム、実績、スキル、お問い合わせ） ・背景：白、影付き ・スマホ時はハンバーガーメニュー レスポンシブ対応でお願いします。
カードコンポーネントを作成
実績紹介用のカードを作成してください。 【仕様】 ・画像エリア（16:9比率） ・タイトル（太字、大きめ） ・説明文（2行まで、超過は...で省略） ・タグ（複数表示、青色のバッジ） ・ホバー時に少し浮き上がるアニメーション ・角丸、影付き Tailwind CSSで実装してください。
お問い合わせフォームを作成
お問い合わせフォームを作成してください。 【項目】 ・お名前（必須） ・メールアドレス（必須） ・会社名（任意） ・お問い合わせ種別（ドロップダウン：相談、見積もり依頼、その他） ・メッセージ（テキストエリア、必須） ・送信ボタン 【デザイン】 ・シンプルでモダン ・必須項目には*マーク ・フォーカス時に枠線が青に変化 ・送信ボタンは目立つ色
コード修正のコツ
具体的に指示する
「もっと大きく」→「font-sizeを24pxに」
参考画像を使う
スクリーンショットをアップロードして「これに近づけて」
段階的に修正
一度に多くの修正を頼まない
良い例を見せる
「このサイトのようなデザインで」とURL共有
まとめ
- ✓ デザインを言葉で説明してコードを生成
- ✓ 具体的な仕様を伝えるほど精度が上がる
- ✓ 修正は段階的に、具体的に依頼
- ✓ 参考画像やURLがあると精度アップ