Createで機能付きWebサイトを作る方法

TL;DR

Createでは、作りたい画面や動作を自然言語で指示し、生成結果をデモ画面で確認するだけで、機能付きWebサイトの試作ができる。アドオンを選べば画像生成や翻訳も組み込めるが、録音やURL要約など正常に動かない例もあるため、完成品よりプロトタイプや顧客との仕様共有に向いている。

Transcript

はいこんにちはケトですえ今回はですね 結構いい感じです久しぶりにですね自信 持って進められるAIのサービスを持って きましたということで今回はクリエイトと 言われるサービスなんですけどこのツール はですねテキストの指示を送るだけで機能 がしっかりとついたウェブサイトを自動的 に生成してくれるっていうサービスです はいもうそう聞くだけで結構すごそうなん ですけど実際にですね色々とやりながら 解説していきたいと思いますえちなみに私 のチャンネルはAIやWEBに関するなり や情報を共有してるチャンネルです チャンネル登録が集めない方はチャンネル 登録のどお願いいたしますそれでは本題に 入っていきますはいえということで今回は ですねこちらのクリエイトっていう名前の サービスを紹介してくんですけどこれ... Read More

Key Insights

• Createは、自然言語による指示からWebページのUIと動作機能をまとめて生成し、構築結果をリアルタイムで画面へ表示するサービスである。
• 基本操作は、右上の「New Page」で新規プロジェクトを開き、右側へ要件を入力して「Generate」を押し、左側の生成結果を確認する流れである。
• ツイート投稿の試作は、入力した文章をタイムラインへ反映するよう追加指示することで、デモ画面上でも投稿動作を確認できた事例である。
• 生成されたページは、画面表示だけでなくコードも確認できるため、Web制作やシステム開発におけるUI設計の土台として利用できる。
• アドオンは、ChatGPT、Stable Diffusion、Google Translate、Google検索などの機能を、生成するWebサイトへ組み込むための仕組みである。
• Stable Diffusionを指定した画像生成ページは短い指示で動作したが、生成画像の品質について話者は低いと評価しており、品質面には限界がある。
• Google Translateを使った翻訳ページは、入力文と翻訳先言語を選択でき、日本語から英語や中国語、英語から日本語への変換が実演された。
• Createは完成品の開発よりも、操作の細かな違いを試すプロトタイプ作成や、顧客とUXの動作イメージを共有する用途に適していると話者は評価している。

Questions & Answers

Q: Createで機能付きWebサイトを作る方法は？

右上の「New Page」から新しいプロジェクトを開き、右側の入力欄に作りたいWebサービスの画面と機能を自然言語で記述して、「Generate」を押す。左側に生成過程がリアルタイムで表示され、構築完了後はデモ画面で操作を試し、必要なら追加の指示を送って機能やUIを修正する。

Q: Createでツイート投稿機能を実装する方法は？

最初にTwitter風のUIを生成し、続けて「ユーザーが入力したツイートをタイムラインに反映する」という趣旨の指示を送る。生成後に右上のデモボタンから動作確認画面へ移り、入力欄へ文章を入れてツイートボタンを押すと、投稿がタイムラインへ追加されることを確認できる。

Q: Createのアドオンとは何ですか？

アドオンは、生成するWebサイトへ外部の機能を組み込むための仕組みである。動画内ではChatGPT、Stable Diffusion、Google Translate、Google検索などが表示され、Stable Diffusionによる画像生成とGoogle Translateによる翻訳を備えたページが実際に作成された。

Q: Createで画像生成サイトを作る方法は？

新しいページを開いてアドオン一覧からStable Diffusionを選び、その機能を使って画像を生成するサービスを作るよう指示する。生成後はデモ画面の入力欄へ「dog」や「cat」などを入れ、画像生成ボタンを押して結果を確認できる。ただし、話者は生成画像の品質を低いと評価している。

Q: Createで翻訳サイトを作る方法は？

アドオンからGoogle Translateを選び、入力した文章をリアルタイムで翻訳するサービスを作るよう指示する。生成例には文章の入力欄と翻訳先言語の選択機能があり、日本語から英語や中国語、英語から日本語への翻訳が確認された一方、フランス語では期待どおりにならない場面もあった。

Q: Createで生成したWebサイトの動作を確認する方法は？

生成処理が終了した後、画面右上にあるデモボタンを押してデモページへ移動し、入力やボタン操作を実際に試す。ツイート投稿の例では文章がタイムラインへ反映され、画像生成の例では入力内容に応じた画像が表示されたため、見た目だけでなく機能の挙動まで確認できる。

Q: Createは無料でどこまで使えますか？

話者が試した範囲では、ページの作成自体は無料で複数行うことができた。一方、他者へ共有するためのリンクは無料利用では1つまでのようだと説明され、有料プランでは複数共有できる可能性が示された。ただし、料金や正式な上限の詳細は動画内で確定情報として説明されていない。

Q: Createで正常に動かなかった機能は何ですか？

音声を録音して翻訳するページでは、UIは作成できたものの録音機能が正常に動かなかった。また、URLを入力して内容を要約し、最後にPDFとしてダウンロードする構想では、処理中の表示が止まらず完了しなかった。話者は、指示文を改善すれば動く可能性があるものの、結果は不明としている。

Q: Createはどのような用途に向いていますか？

Createは、完成したWebサービスをそのまま提供する用途より、プロトタイプ作成、UI設計の検討、顧客との動作イメージ共有に向いていると話者は評価している。投稿前に確認画面を出すか、そのまま投稿するかといった細かなUXの違いを、自然言語から素早く形にして比較できるためである。

Q: Create向けの指示文を改善する方法は？

GPTストアにあるカスタムGPTの「CREATE Prompt」を使うと、Create向けの指示文を作る参考になる。また、画面左下のヘルプから開ける公式ドキュメントや、利用者アイコン内のブラウザギャラリーも活用できる。特にギャラリーでは、他の利用者が作ったUIと詳細なプロンプトを確認できる。

Summary & Key Takeaways

• Createは、右上の「New Page」からプロジェクトを開き、右側の入力欄へ作りたいWebサービスを自然言語で記述して生成する。左側には構築中の画面がリアルタイムで表示され、生成が完了するとレスポンシブ対応のUIやコードを確認できる。まず画面を作り、追加の指示で必要な動作を実装する流れが基本となる。

• 機能の追加では、ツイート入力をタイムラインへ反映する指示が実演され、デモ画面で投稿動作まで確認できた。さらにStable Diffusionのアドオンを選び、画像生成サービスを作る例や、Google Translateを使って入力文と言語を選択できる翻訳サービスも紹介された。UIだけでなく、外部機能を組み込んだ試作品を短い指示で生成できる。

• すべての構想が正常に動くわけではなく、音声を録音して翻訳するページでは録音機能が動かず、URLの内容を要約してPDF化するページでは処理が完了しなかった。公式ドキュメント、カスタムGPTの「CREATE Prompt」、他の利用者のギャラリーを参考に指示を改善しながら、UX検討や顧客との動作イメージ共有に使うのが現実的である。