-本日のアジェンダ-

　

1限目
学科 生成AI基礎⑥
コードの生成AIについて

2限目
学科 生成AI基礎⑥
コード生成AIのご紹介

3限目
学科 生成AI基礎⑥
課題制作

4限目
学科 生成AI基礎⑥
課題制作

5限目
学科 生成AI基礎⑥
課題制作

　

---

　

HTMLとCSSを書いてくれる生成AIについて

主な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コードを生成。
生成されたコードはチャット内で展開されるため、コピーしてファイルに貼り付ける必要がある。

使用例:

「ヘッダーにロゴとナビゲーションメニューを配置したシンプルなWebサイト」とAIツールに指示すると、必要なHTMLとCSSが生成される。
手書きでWebサイトのレイアウトを描き、UI Sketcherなどのツールに取り込むと、対応するHTMLとCSSが生成される。
Figmaで作成したWebサイトのデザインカンプをFRONT-END.AIなどのツールにアップロードすると、HTMLとCSSが生成される。

※コーダーとしてアピールする場合は、当然自分で書けることを求められるのでご注意。

使用上の注意点:

生成されるコードの品質:

生成されるコードは完璧ではない場合があり、必要に応じて修正や最適化が必要。
特に複雑なレイアウトや動的なWebサイトの場合、手動での調整が必要になることが多い。

デザインの自由度:

AIツールによっては、生成できるデザインの自由度が限られる場合がある。
細かいデザインの調整は手作業で行う必要がある。

著作権:

AIツールが使用するデータや生成するコードの著作権には注意が必要。
利用規約をよく確認。

セキュリティ:

生成されたコードにセキュリティ上の問題がないか確認することが重要。