AIが文章からホームページを作成、
HTMLやCSSをリアルタイムに出力します。
アカウント不要ですぐに使えて、自然な文章で
書くだけ。日本語文章でも大丈夫です。
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode-thumb.jpg)
目次
リンク先
使い方
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode1.jpg)
使い方は簡単で上のテキストボックスに自然な文章で作って欲しいものを入力するだけです。
ホームページなどのメニューを作ってみました。
GENERATEを押すと早速生成が始まり、HTML、CSSと書き出してくれます。
リアルタイムに出来上がっていき、画面下部のプレビューで視認することができます。
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode2.jpg)
マウスオーバーで色が変わるボタンを作ってみました。
HTMLにボタン要素を書き出して、CSSにはその要素で:hoverプロパティを追加して
文章通りのボタンが出来上がりました。
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode3.jpg)
ホームページの部分だけでなくページ全体も生成が可能です。
背景が海と指示してみた所、CSSのBody要素にpixabayからの背景イメージを取得してきました。
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode4.jpg)
抽象的な文章でもしっかりと認識してくれます。
もうこのままコピペだけで使えそうですね。
![AIが文章からホームページを作成、HTMLやCSSをリアルタイムに出力するWebサービス 『AI CODE』](https://pc.mogeringo.com/wp-content/uploads/2023/04/aicode5.jpg)
少し複雑なグリッドデザインでも難なくスラスラと書き出してくれました。
HTMLコードではbody内にDIVでwrapperなど基本的な書き方をしてくれます。
もうホームページを作成するのにコードを書く時代は終わったのでしょうか。
すごい時代になったものです。
コメント