2026.01.30 学習記録 ～コーディングと生成AI～
Kumiko OkawaraHTMLとCSSを書いてくれる生成AI
WebサイトのUI要素やコンポーネントをテキストの指示から自動生成することができる。
プログラミングの知識が少ない人でもWebサイトの作成が容易になるため、近年注目を集めている。
主なAIツール
AI CODE「エーアイ コード」(基本無料)
テキストでUI要素（例：「シンプルでモダンなナビゲーション 日本語」）を指定すると、対応するHTMLとCSSを生成する。
ナビゲーション、ボタン、カード、フォームなど、様々なUI要素に対応。
Cursor「カーソル」（基本無料） / UI Sketcher「ユーアイ スケッチャー」（OpenAI APIキーの料金※無料枠もあり）
手書きのスケッチやドラッグ＆ドロップ操作からWebサイトの画面、コンポーネント、レイアウトを作成し、HTMLとCSSに変換する。
OpenAIのAPIキーが必要。
FRONT-END.AI「フロントエンド ドット エーアイ」（有料）
デザインカンプ（Figmaなど）からWeb画面（HTMLと一部のCSS）を自動生成するクラウドサービス。
VS Codeエディタとの連携も可能。
UI to Code「ユーアイ トゥー コード」（現時点で無料）
プロンプトに応じてHTML、CSS（Tailwind CSS）、JavaScriptコードを生成する。
生成されたコードはチャット内で展開されるため、コピーしてファイルに貼り付ける必要あり。
ツールの特徴
テキストやスケッチからコード生成
プログラミングの知識がなくても、テキストで指示したり、簡単なスケッチを描いたりするだけでHTMLとCSSを生成することが可能。
UI要素の自動生成
ナビゲーション、ボタン、フォームなど、よく使われるUI要素を簡単に生成できる。
デザインカンプからの変換
Figmaなどのデザインツールで作成したデザインカンプをHTMLとCSSに変換できる。
コーディングの効率化
手作業でのコーディング量を減らし、開発時間を短縮ができる。
使用例
- 「ヘッダーにロゴとナビゲーションメニューを配置したシンプルなWebサイト」とAIツールに指示すると、必要なHTMLとCSSが生成される。
- 手書きでWebサイトのレイアウトを描き、UI Sketcherなどのツールに取り込むと、対応するHTMLとCSSが生成される。
- Figmaで作成したWebサイトのデザインカンプをFRONT-END.AIなどのツールにアップロードすると、HTMLとCSSが生成される。
使用上の注意
生成されるコードの品質
生成されるコードは完璧ではない場合があり、必要に応じて修正や最適化が必要。
特に、複雑なレイアウトや動的なWebサイトの場合、手動での調整が必要になることが多い。
デザインの自由度
AIツールによっては、生成できるデザインの自由度が限られる場合がある。
細かいデザインの調整は手作業で行う必要あり。
著作権
AIツールが使用するデータや生成するコードの著作権に注意！
利用規約をよく確認すること。
セキュリティ
生成されたコードにセキュリティ上の問題がないか確認することが重要。
備考・メモ
HTML/CSSの生成AIはまだまだ発展途上。
頼りすぎに注意！
現在は発展途上だが、AI技術の進歩により精度がますます向上していくと予想される。
今後の進歩に要注目！
