AIで機能付きWEBサイトを生成するAI『Create』が凄い!
Summary
TLDRこの動画では、AIを活用したWeb制作サービス「クリエイト」の紹介が行われています。クリエイトは、テキストの指示を元に機能豊富なウェブサイトを自動的に生成する驚くべきツールです。チャンネル創設者ケトが、Twitter風UIの作成や文字数計算、画像生成など、様々な機能を実際に試してみた様子を解説しています。また、アドオン機能を通じて、翻訳や画像生成などの拡張機能をウェブサイトに取り込むことも可能です。クリエイトは、プロトタイプの作成やシステム開発のUI設計において、効果的な支援を提供するサービスとして注目されています。
Takeaways
- 🌟 AIとWEBに関連する情報共有チャンネルを紹介した
- 🚀 クリエイティブなAIサービスを紹介、テキストからウェブサイトを自動生成する機能がある
- 🎨 Twitter風のUIを真似たウェブサイトが簡単に作成できる
- 📈 テキストを入力すると文字数を計算する機能も提供されている
- 🖼️ 画像生成機能も備え、簡単なテキストの指示で画像を生成できる
- 🔌 アドオン機能を通じて、様々な拡張機能をウェブサイトに取り込むことができる
- 🌐 サービスは無料で利用可能で、有料プランでもより多くの機能を利用できる
- 📝 具体的な使い方やプロンプトの書き方についても解説されている
- 🔍 公式ドキュメントやユーザーが作ったUIのギャラリーも参考にできる
- 💡 プロトタイプの作成やシステム開発のUI設計に役立つ可能性がある
- 🎥 チャンネル登録やメンバーシップを通じて、より多くのコンテンツを解放できる
Q & A
クリエイティブサービスとは何ですか?
-クリエイティブサービスは、テキストの指示を送るだけで、機能がしっかりついたウェブサイトを自動的に生成してくれるサービスです。
このサービスを紹介するチャンネルの内容は何ですか?
-このチャンネルはAIやWEBに関する情報や知識を共有しているチャンネルです。
サービスを実際に使ってみた感想はいかがでしたか?
-実際に使ってみた感想としては、UIだけでなく、機能もしっかりとつけてくれることがすごくすごいと思いました。
作成されたサンプルページの1つはどのようなUIでしたか?
-1つ目のサンプルページはTwitterを真似たウェブサイトで、左側にプロフィールリストトピックブックマークがあり、右側にツイートを入力する場所とトレンドのようなUIでした。
このサービスのどのように機能するか具体的な例を挙げてください。
-例えば、「こんにちは」というテキストを入力してツイートボタンを押すと、ユーザーネーム「こんにちは」と入力されるようになっています。
他の機能を試してみた結果はどのようなものですか?
-文字数計算や画像生成などの機能を試してみました。特に画像生成功能は、簡単なテキストの指示で高品質な画像を生成できると感じました。
アドオン機能について説明してください。
-アドオン機能を使うことで、Stable Diffusion、Google Translate、Google Searchなど様々な機能をウェブサイトに取り込めます。
このサービスを実際に使ったときに気をつけるべき点は何ですか?
-このサービスを使ったときに気をつけるべき点は、プロンプトを細かく指示することが重要であり、それによって作られるウェブページや機能の質が大きく変わることです。
クリエイティブサービスをどのように活用する予定ですか?
-私はシステム開発やWebのUI設計のプロトタイプ作成に活用する予定です。また、AIを活用したテストやクライアントとのイメージ共有にも役立つと思います。
このサービスを使って得られた成果物はどのように共有できますか?
-得られた成果物は、サービスのヘルプや公式ドキュメントを参考にして、PDFでダウンロードしたり、他のユーザーと共有したりすることができます。
このサービスを始めるにはどうすればいいですか?
-始めるには、まずアカウントを作成し、右上の「New Page」からプロジェクトを開き、プロンプトを入力してジェネレートボタンを押すことでウェブサイトが生成されます。
Outlines
🚀 AIによるWebサイト生成サービス「クリエイト」の紹介
この段落では、AIが駆動するWebサイト生成サービス「クリエイト」について紹介されています。クリエイトは、テキストの指示を送るだけで、機能豊富なウェブサイトを自動的に生成してくれるサービスです。特に、UIだけでなく、機能までもをしっかりと取り入れることができると話題となっています。クリエイターやWEB開発者にとって、このサービスは非常に魅力的であり、プロトタイプの作成やシステム開発のUI設計に役立つ可能性があります。
🌐 機能拡張可能な「クリエイト」の使い方
第二段落では、「クリエイト」の使い方が具体的に解説されています。このサービスは、Twitter風のUIを作成することを例に挙げ、ユーザーが入力したデータをタイムラインに反映する機能を取り入れることができます。また、アドオン機能を通じて、Stable DiffusionやGoogle Translateなどの外部サービスを組み合わせることも可能です。これにより、画像生成やリアルタイム翻訳などの拡張機能をウェブサイトに加えることができるのです。
🛠️ 「クリエイト」を使ったWeb制作とプロトタイピング
最後の段落では、「クリエイト」がWeb制作とプロトタイピングにおいてどのように役立つかが議論されています。「クリエイト」は、具体的なWEB制作での活用方法が湧まないものの、テストやプロトタイピング、顧客とのイメージ共有などの分野で非常に有用であると述べられています。また、AIの力を借りて自然言語でUIを作り出すことが、ユーザー体験の共有において大変便利であると強調されています。このサービスを活用することで、開発者は手間を省き、効率的にプロトタイピングを行うことができるでしょう。
Mindmap
Keywords
💡AI
💡クリエイト
💡ウェブサイト
💡UI
💡画像生成
💡アドオン
💡Stable Diffusion
💡Google Translate
💡プロンプト
💡ユーザーネーム
Highlights
AIサービスを使って自信を持って進める
クリエイトというサービスを紹介
テキストの指示を送るだけでウェブサイトを自動的に生成
AIを使ってダッシュボードやサインアップページなどのUIを作成
機能もしっかりとつけてくれる
3つの作りたページを紹介
Twitter風のウェブサイトを作成
ユーザーネームが自動入力される機能
文字数計算システムを作成
画像生成をしてくれるページも作成
拡張機能アドオンを使ってさまざまなページを作成
画像生成のクオリティは微妙
WebのUIを作るのとChatGPTのHTMLCSSJSコードを吐き出す
使い方とアカウント作成の説明
無料で使えるが他社と共有するリンクは無料1つまで
プロンプトを入力してウェブページを表示する環境
Twitterの例でUIの作り方
機能を取り入れることができる
ユーザーが入力したツイートをタイムラインに反映
GoogleTranslateを使ってリアルタイムで翻訳
CREATEプロンプトを使ってクリエイトを効果的に使う
ノーションにクリエイトの公式ドキュメントがある
ブラウザギャラリーから世界中のユーザーが作ったUIを参考
Transcripts
はいこんにちはケトですえ今回はですね
結構いい感じです久しぶりにですね自信
持って進められるAIのサービスを持って
きましたということで今回はクリエイトと
言われるサービスなんですけどこのツール
はですねテキストの指示を送るだけで機能
がしっかりとついたウェブサイトを自動的
に生成してくれるっていうサービスです
はいもうそう聞くだけで結構すごそうなん
ですけど実際にですね色々とやりながら
解説していきたいと思いますえちなみに私
のチャンネルはAIやWEBに関するなり
や情報を共有してるチャンネルです
チャンネル登録が集めない方はチャンネル
登録のどお願いいたしますそれでは本題に
入っていきますはいえということで今回は
ですねこちらのクリエイトっていう名前の
サービスを紹介してくんですけどこれは
ですねまAIを使ってダッシュボードとか
サインアップのページとかさえこんな感じ
のウブページのUIを作ってくれる
サービスになるみたいですえそしてですね
冒頭でもお伝えした通りUIだけじゃなく
てえ機能もですねしっかりとつけてくれ
るっていうところが結構すごいなと思った
サービスのなりますはいで実際にですね私
が作成してみたページは3つぐらいあり
ます1つずつ紹介していきたいと思います
え1つ目はですねこれはTwitterを
ですねちょっと真似てくれといった
ウェブサイトになってますでま左側に
プロフィールリストトピックブックマーク
みたいのがあってツイートボタンがあって
ツイートを入力する場所で右側にトレンド
みたいのがあるっていう感じですねま
こんな感じのUIを作ってくれるっていの
はですねまチャットGPTとかでもでき
そうだと思うんですけどこっからがすごい
んですけどここんにちはみたいなことを
打ってツイートボタンを押すとですねはい
こんな感じでえユーザーネームが
こんにちはとはい入力してくれるんですよ
おはようと打つとはいおはようと追加され
ますこれすごくないですかまこのですね
機能の部分までしっかりと対応してくれ
るっていう感じですはいで他に作ってみた
のは文字数計算っていうことでテキストを
入力すると文字数を入力してくれるような
えシステムっていうかまページを作ってみ
たりってこともできましたそしてですねこ
が一番すごいなと思ったんですけどはい見
てくださいもうこれ皆さん想像つきますよ
ね画像生成をしてくれるページもですね
なんと作ることができましたはいこれ
後ほども紹介するんですけどそういう拡張
機能っていうかアドオンみたいのがあって
それを入れることによってですねこんな
ページもできるんですよっていうことで
キャットとして生成ボタンを押すとはい何
でしょうかねこれちょっとおかしいですね
じゃあ犬にしてみますかああま犬っぽく
なったえリアルな犬ってしときますかあ
いけたよかったよかったまこのぐらいの
レベルの画像生成はできるっていう感じ
ですま画像生成自体のねクオリティは微妙
なんですけどこの機能をですね本の2行
ぐらいのテキストの指示分だけで作りまし
たていうサービスになってますはいでこう
いったですねWebのUIを作るのって
ChatGPTでもなんかTwitter
っぽいUIを作成してくださいみたいな
ことを言えばえHTMLCSSJSのコド
をですね吐き出してくれてまそれをですね
コピペしていけばこんな感じで
TwitterぽいUIが簡単にできるん
ですけどまこんな感じの機能がおそらく
クリエイトには入ってるんだろうなと思い
ますオープンAIのGPTの機能でこう
行動ですねうまく生成してくれるような
機能が入りつつリアルタイムでえ作って
くれるみたいなものだと思いますま
チャットGPTで再現しようと思えば
細かくですねプロンプトとかを指示して
こんな感じで行動を出してってえウェブ
ページを表示する環境でえコピペしてけは
ですねえ実現すると思うんですけどえそれ
をですねま1つにまとめてくれてるような
サービスだと思いますていうサービスに
なるんですけどどうですかね皆さん
めちゃくちゃすごくないですかっていう
ことでこっからはですねこのクリエイトの
ですね使い方をですね具体的に解説して
いきたいと思いますえまずはですね
アカウント作成してもらうとこんな感じの
画面が出てきますので右上のニューペー
ジってところから作ることができますえ
そしてですねこちらえ無料で使いますえ
ただですね他社に共有するリンクは無料だ
と1つまでかなおそらくで有料プランとか
に入れば複数になるっぽいですとりあえず
えページを作る分にはですねいくらでも
無料で作ることができましたえただ共有
するのは1つだけっていう感じですはいと
いうことで使い方はですね右上のニュー
ページっていうところをクリックして
もらうとえ新しいですねえプロジェクトを
開くことができますで右側がですね
プロンプトを入力する場所になりますで
左側が実際に表示されるものになってき
ます例えばですがTwitterっぽい
UIのwebサービスを作ってくださいと
入力してですねはい右下のジェネレート
ボタンを押すとはいこんな感じでリアル
タイムにえTwitterっぽいUIのえ
ページができてくっていう感じですで左上
にビルディンググっていうのがえ動いてる
と思うんですけどこれがですね止まれば
アットデートってなれば完成ですねはいと
いうことでTwitterっぽいUIの
ウブサービスはこんな感じになりました
まあまあまあ見た目はま微妙ですけどえ
一応ですねレスポンシブにも対応してい
ますでコードもしっかりと見ことができ
ますまこれをベースにしてですねえWEB
制作やまシステム開発のUI設計とかをし
てくっていうのはですねま1番いい使い方
なんじゃないかなって思ってますそして
ですねこのサービスの肝はですね機能も
取り入れることができるっていう感じです
はい例えばなんですけど機能として
ユーザーが入力したツイートをタイム
ラインに反映するていうですね指示分を
入力してサイドジェネrateトってする
とえなんかですね入力欄みたいなのが出て
きましたねはいこれでここでですね
テキスト入力してツイートのボタンを押せ
ばおそらくタイムラインに反映されると
思いますでこれのデモの仕方がですね右上
にあるデモボタンをクリックしてもらって
デモページに移動してもらえばえ確認する
ことができます例えばこんにちはと言って
ツイートボタンを押してみますはいいけ
ましたねこれすごくないですかこれが
できるのってなかなかいいですよねはい
そしてですねコードもですねしっかりと
はい書かれていますのでこれをベースに
ですねなんかまプロトタイプみたいのを
作って見るみたいので活用できるんじゃ
ないかなと思いますまどういう機能がいい
ですかこんな感じですかまここに入力して
ボタンを押したらタイムラインに反映さ
れるような仕組みがいいですかえもしくは
このボタンを入力してツイートボタンを
押したら本当に投稿しますかっていう
ポップアップが出てきてからえ投稿が実際
にされるっていう設計の方がいいですか
みたいなこういう微妙なところの違いの
話し合いって結構生まれがちなんですけど
そういうもののプロトタイプの作成として
はかなり優秀なんじゃないかなって思い
ますましたまもちろんですねこれを参考に
システム開発えWebのUI設計みたいの
をしてくっていうのもいいと思うんです
けどま初戦AIなんでねえその辺のサクっ
となんかやっちゃいたいみたいなところで
活用するっていうのがめちゃくちゃ便利だ
なって思いましたえということでま
Twitterの例はこんな感じなんです
けどえ先ほどですね画像生成をする
サービスも紹介させていただいたんです
けどそれのやり方もですね解説していき
たいと思いますはいということで新しい
ページを開いてですねえ同じように画像を
生成するサービスを作ってくださいみたい
なことを入力するんですけどここで使っ
てくのがですねこちらのADONのボタン
ですねはいここクリックするとチット
GPTやstableディフュージョン
GoogleTranslate
Googleサーチなどいろんなですね
アドオンが存在しますまこの機能を使って
ですねウェブサイトに入れ込むことが
できる機能を盛り込むことができるって
ものになりますこれを使ってですね
stableディフュージョンを使って
画像生成のウェブサイトを作ったっていう
感じですえでは具体的に実際にやり方は
ですねまずステーブルディフュージョンの
えアドンをクリックしますするとですね
ここの指示分のところにステーブル
ディフュージョンていう風に出てくるので
ここから続いてステーブル
ディフュージョンの機能を使って画像を
生成してくれるサービスを作ってください
みたいな感じに言うとこれだけでさっきの
やつが完成しますやばいっすよねっていう
ことでジェネレートはいということで完成
ましたちょっと英語で出てきてしまったん
ですけど昨日の確認として実際にデモ画面
で画像を生成してみたいと思いますという
ことでここにドッグと入力して
ジェネレートイメージのボタンを押してみ
ましょう押し
ますはい出てきちゃったよすごいなこれ
すごくないですかいやなかなかすごいな
ちょっとじゃキャットで行ってみます
か画像の切り替えはどういう風になるあこ
こんな感じねま画像のクオリティは
めちゃくちゃ低いすねステイブル
ディフュージョンの無料で使えるやつなん
でしょうねかなりえ質の低いやつを使っ
てるんだと思いますまこんな感じでアド
オンをですね使ってくっていう感じですえ
いろんなアドオンが入ってますので
ちょっといくつかですね試してみたいと
思います色々できると思いますえこれ僕も
初見なんですけど1個思いついたのははい
GoogleTranslateを使って
リアルタイムで翻訳してくれるサービスて
いうのをですねやってみたいと思います
ジェネレート生ってすげえぞこれこれ
テキストも選択できるのかえ翻訳する言語
も選択できるってとこまで作ってくれるの
かなこれはちょっと期待できるぞはい完成
したみたいですということでデモの方で
実際にやってみましょうじゃこんにちはを
イングリッシュに
トランスレーターなりましたねこんにちは
僕の名前はケトですよろしくお願いします
トランスレーターありますね中国語にも
行けんのやってみますやれてるねえっと
フランス語行けてるね行けてないね
フランス語はフランス語ちょっと文字分け
しちゃったねじゃイングリッシュから日本
語こんにちは私の名前はケトです
ありがとうおお行けてますねこれすごいな
はいどうですかねで他にもですね色々と
UI自体は作ってみたんですけどえ機能を
するものもあれば機能をしないものもあり
ましたはいえ例えばなんですけどこんな
感じの話す言葉を選択して翻訳後の言葉を
選択するそして録音開始すると翻訳が
できるみたいなものを作ろうとしたんです
けどうまくいきませんでしたはいなんか
UIはですねいい感じに言ったんですけど
なんか録音機能がしっかりと動いてくれ
なかったですまこの辺はえプロンプ次第に
なってくるのかなと思いますはいであとは
ですねURLを入力して要約を開始すると
ここに要約の文章が出てきて最後PDFで
ダウンロードできるようになるみたいな
ものもですねやってみてできそうな雰囲気
はすごいあるんですけどこのくるくる回る
やつがですね一生止まりませんえこれも
プロンプト次第でうまくいくのかっていう
のは分かりませんがどうなんですかねえ皆
さんちょっと挑戦してみてくださいはいえ
そしてちなみになんですけどこちらの
CREATEプロンプトていうですね
チャットGPTのGPTストアにある
カスタムGPTを使うとですねいい感じに
ですねクリエイトを使うためのプロンプト
をですねこんな感じに出してくれるので
これ皆さん使ってみるとすごくイメージ湧
かもしれませんはいあとですねえ
ノーションにえクリエイトの公式
ドキュメントがですねこうずらっと書いて
ありますのでえこちらもですね参考にして
みると指示分の作り方に関しては役に立つ
と思いますえクリエイトの1番左下のヘル
プっていうところから入ることができます
えそして自分のアイコンのところにですね
えクリックしてもらってブラウザ
ギャラリーてところをクリックすると
いろんなですねえ世界中のユーザーさんが
作ったえUIっていうのが出てきますので
まこんなものも作れるんだなっていうこと
で参考にしてみるといいかもしれませんえ
例えばこんな感じのダッシュボードドっす
よねいやこれすごいなこのUIは本当に
テキスト指示だけで作ったと思うとかなり
すごいですねでプロンプトがすごく細かく
書かれてますねねこれはかなり勉強になる
んじゃないかなって思いますはいという
ことで今回はクリエイトを紹介させて
いただきましたはいということで以上に
なります皆さんいかがでしたでしょうか
結構すごいっすよねま実際にえ具体的に
WEB制作で使ってくっていうイメージは
まどうしても湧かないんですけどまなんか
テストとかねまプロトタイプとかお客さん
とのなんかイメージ共有とかそういう
ところでサクっとやる分にはかなり使える
んじゃないかなって思いましたなんかね
こうUXのこうユーザーが求めている
システムの動きとかっていうのをえ細かい
ところまで共有してくのって結構大変だっ
たりすると思うのでそういう場面でねこう
サクっと自然言語で作れるものがあれば
ですねかなり便利なんじゃないかなとかっ
て思いましたえ皆さんいかがでしょうかえ
ということで今回の動画は以上になります
えクリエイトえぜひ皆さん使ってみて
くださいえ概要欄に掲載しておきますので
使ってみてくださいはいえということで
以上になりますこの動画がいいと思いまし
たらグッドボタンとチャンネル登録ぜひお
願いいたしますまたYouTubeの
メンバーシップもやってます
メンバーシップに入っていただけると無料
で公開してるdisordの有料部分が
解放されたりライブ配信のアーカイブを
見ることができます興味がある方は入って
みてくださいえでは以上になります最後
までありがとうございまし
[音楽]
た
5.0 / 5 (0 votes)