AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
Post on:2023年4月4日
sponsors
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。
テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。
AI CODEの特徴
AI CODEは先日リリースされたばかりのオンラインツールで、制作者はAndrew氏。AIによりノーコードでUIを実装するHTMLとCSSを生成します。
実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。
また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。
AI CODEの使い方
AI CODEの使い方は簡単、登録など面倒なことは一切不要です。
サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。
テキストは英語だけでなく、日本語でも大丈夫です。たとえば、「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、下記が生成されました。
リンクを直接表示すると、実装が完了した状態ですが、テキストを入力して「Generate」ボタンを押すとマークアップの状態から順番にスタイルされていく過程も表示されて面白いです。
生成されたコードは、シンプルです。
HTMLは、ナビゲーションの各アイテムはリスト要素で実装されて<nav>で内包されています。
|
1 2 3 4 5 6 7 8 |
<nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">製品</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> |
各アイテムはdisplay: flex;で水平に配置され、ホバーエフェクトが定義されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
nav { background-color: #333; font-family: Arial, Helvetica, sans-serif; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-around; } nav ul li { margin: 0; } nav ul li a { display: block; padding: 15px; color: #fff; text-decoration: none; transition: background-color 0.2s ease-in-out; } nav ul li a:hover { background-color: #4CAF50; } |
Web制作者が普通に書くコードですね。カスタマイズは必要になりますが、わずか数秒で生成されるのはすごいです。
AI CODEを使ってみた
AI CODEを実際に使用してみました。
「シンプルでモダンなナビゲーション アイテムは日本語 アイテムの前にアイコンをつける」
アイコン用にFont Awesomeのクラスが生成されていますが、アイコン自体はツールにはないようです。
続いて、tailwind.cssで実装。
「シンプルでモダンなナビゲーション アイテムは日本語 tailwind.cssでスタイル」
AI CODEでどのようなUIが生成されたか一覧も表示できます。
英語のテキストが多いですが、日本語のテキストもけっこうありました。
「card with image and text and link」シンプルなカードのコンポーネント。
「create header with logo and navigation menu and dropdown menu」ドロップダウンもちゃんと機能します。
sponsors
