1限目
学科 生成AI基礎⑥
コードの生成AIについて
2限目
学科 生成AI基礎⑥
コード生成AIのご紹介
3限目
学科 生成AI基礎⑥
課題制作
4限目
学科 生成AI基礎⑥
課題制作
5限目
学科 生成AI基礎⑥
課題制作
本日のテーマ
コードの生成AIについて
手作業でのコーディング量を減らし、
開発時間を短縮してくれる生成AIがあります。
コーダーになりたい場合は書けることを求められますので、
使いどころには気を付けましょう。
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。
HTMLとCSSを書いてくれる生成AIについて
HTMLとCSSを書いてくれる生成AIは、WebサイトのUI要素やコン
ポーネントをテキストの指示から自動生成するツールです。
プログラミングの知識が少ない人でもWebサイトの作成が容易になる
ため、近年注目を集めています。
以下に、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コードを生成します。
生成されたコードはチャット内で展開されるため、コピーしてファイルに貼り付ける必要があります。
これらのツールの特徴
テキストやスケッチからコード生成: プログラミングの知識がなくても、テキストで指示したり、簡単なスケッチを描いたりするだけで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ツールが使用するデータや生成するコードの著作権には注意が必要です。
利用規約をよく確認しましょう。
セキュリティ:
生成されたコードにセキュリティ上の問題がないか確認することが重要です。
コメント