自然言語でWebサイトを作れる「Create」

KEITO(以下、KEITO):はい。次は、今ものすごく話題になってる「Create」です。

池田朋弘氏(以下、池田):知らないです。

KEITO:ご存じないですか。この1週間でめちゃくちゃ話題のサービスになっていて、自然言語でWebサイトを作れるものなんですけど。ChatGPTでもコードを吐き出したりできるので、Webの形を作るのはなんとなくできそうだとは思うんですけど。Createだと、その作ったWebサイトに機能を入れることができるんですよね。

具体的に言うと、この右側が、僕が作ったやつです。「KEITOチャットAI」と言って、「こんにちは」と送れば、裏側でChatGPTが動作してしっかりと返してくれる。このチャットボットを、本当に30分ぐらいで作りましたね。しかも僕、プログラミングなんて一切できないので。本当に自然言語だけで「チャットボットを作ってくれ」と言ったら、作ってくれる。

池田:Createでこのサービスを作ったってことですよね。

KEITO:そうです。こうやって言えば、ChatGPTみたいに出してくれると思いますね。このUIと機能をセットで作りました。

池田:へぇ~。これって別にAIチャットに限らず、いろんなものが作れるってことですよね。

KEITO:そうです。

池田:Google Mapで、自分の好きな店だけをブックマークして出すようなWebサービスとかができるってことですもんね。

KEITO:完全にできますね。シンプルにWebサイトとかも簡単にできます。これとかもCreateで作ったやつなんですけど。

池田:しかもけっこういいじゃん。

KEITO:そう。けっこういい感じなんですよ。ChatGPTと「DALL-E 3」(ChatGPTを使って画像を生成するサービス)で画像を出して、「これをそのまま再現してくれ」と言ったらこうなりましたね。

静的なLPだけではなく、中の機能までも作れる

池田:へぇ~。今コメントで、「『Create』で、ドキュメントテキストだけで10分でLPを作れちゃいました」ってコメントがありましたね。

KEITO:ありがとうございます。これかなりすごいですね。

池田:「Gamma」(AIスライド作成サービス)とはまた違うってことですもんね。静的なLPだけではなくて、中の機能までも作れる。

KEITO:中の機能までもできちゃいます。

池田:こりゃすげえな。

KEITO:具体的に「KEITOチャットAI」を作ったやりとりを紹介させていただきます。これがチャットアプリなんですが、初めは「チャットアプリを作ってください」とユーザーがメッセージを送ったら、ChatGPTが返答する。

プロンプト内で機能を呼び出せるんですよね。その機能の一覧に、ChatGPTや「Stable Diffusion」(画像生成サービス)もあります。画像生成AIのシステムも作れますし、翻訳機能もあるので翻訳サービスも作れる。

池田:なるほど。

KEITO:あとはお天気情報や、PDF生成とか、QRコード生成。

池田:あ、「GPT-4 Vision」もいけるんだ。なるほど。この前ニュースで、写真をアップしたらPixar風にスタイルを変えてくれるようなアプリがあったんですけど。これを使ったら、GPT-4 Visionを使ってアップして、一瞬でできますよね。

KEITO:あぁ、スタイルを指定してStable Diffusionで出すのは、ぜんぜんいけると思います。

池田:なんてこった。そんなことまでできちゃうのか。すごいな。

エンジニアがプロトタイプを作る手間を削減

KEITO:本当にすごいですね。今後のノーコードツールの標準の考え方になってきそうだなぁと、僕は予想してますね。

池田:確かに。すごい。

KEITO:ちょっと専門的にはなっちゃうんですけど。Web制作する時にパーツごとにバラバラに作っていく概念があって、それができるんですよね。例えばこれは僕のポートフォリオサイトになってるんですけど。ヘッダー部分はポートフォリオヘッダーデザインにして、コンポーネント(他のプログラムから呼び出されたり連結されたりして使用される、プログラム部品)という考え方で作っています。

こっちのページで、このヘッダーデザインを自然言語で編集していく。色とか、メニューをもう1個追加してとか。このコンポーネントを、僕のこのポートフォリオサイトのヘッダー部分に呼び出しています。

池田:なるほど。

KEITO:このスライダーもコンポーネントで作って呼び出しています。“About us”のところも、1個ずつセクションごとにコンポーネントを作っていって、全部合致させて、最終的にポートフォリオサイトができる。本当にノーコードみたいなかたちでできるんですよね。

池田:すごいなぁ。

KEITO:本当にWeb制作の技術者はしかり、僕みたいなディレクションとかプロジェクトマネージャーみたいな立場の人でも(使える)。エンジニアからすると、プロトタイプを作るってすごく無駄な作業だと思うんですよね。それをディレクターとか上流の人が、その場でさくっと自然言語だけで作っちゃって、「こんな動きをイメージしてますか?」みたいな会話ができると、すごくいいなって思うんですよね。

池田:コミュニケーションがスムーズですよね。いちいち期間をもらって「ちょっと作ってきますね」とか言って、いざ持っていったら(相手の意図と)すれ違ってるってことがなくなりますね。

KEITO:そうです。そういうことってめちゃくちゃありますからね。こういった部分で使えると思いますね。

「Create」でイメージどおりのデザインを作るポイント

池田:ちなみに、ちょっとコメントが来てるんですけど、デザインもCreateはけっこう調整して作ってくれるんですか。見た感じそれなりにきれいだなと思って。

KEITO:そうですね。デザインも、全体のデザインを作るよりかは、やっぱりパーツごとに作っていったほうが、きれいにはなりやすいですね。全体のデザインを作るならば、さっき最初に見せたような、画像を添付して「同じ感じで再現してくれ」というやり方だと、一発出しのガチャ要素が強くなっちゃうかもしれない。

池田:そんなこともできるんだ。なるほど。

KEITO:さっきの画像を添付して、「このイメージみたいに」と言えば、この程度のデザインはできますね。

池田:そういうことか。これは1枚の画像なんですね。

KEITO:そうです。右側のところは画像で、左が実際に生成されたものですね。

池田:なるほど。すげえな。ありがとうございます。これは勉強になりました。

実務で使いやすい画像加工ツール

KEITO:次はけっこう優しい感じのツールなんですけど。「Clipdrop」という画像加工アプリですね。これは、生成AI界隈で声を大にして紹介されてる場面は少ないんですけど。僕が顧問に入ってる中で、画像加工をしていく時にはこれが一番現実的でした。

やっぱりAIを使ってアップスケールしていったりすると、「AIが生成してる感」がすごく出ちゃったり。あとAIで画像をうまく編集するツールっていっぱいあるんですけど、生成AIっぽい、どこかいらない要素がついちゃう。Clipdropは、これが一番ないんですよね。

シンプルに画像の背景を削除してくれたり、アップスケールもシンプルにしてくれる。生成AIが盛り上がりすぎて、「AIを使って画像をどうにかきれいにしたい」みたいな要望が最近はすごく多くて。そういう人に対して、一番勧めてるのがこれですね。

池田:そうなんだ。シンプルで使いやすい感じなんですかね。Clipdropってもともと、Stability AIだった気がする。なんかJasperに変わってません? 

KEITO:最近変わってますよね。(JasperがClipdropを)買収してますね。あと、画像の背景削除のクオリティが一番高いですね。僕もYouTubeをやってるんでよく使うんですけど、どれよりも一番いいなと思ってますね。

池田:僕は毎回、背景を消す時は「remove.bg」ってサイトばっかり使ってたんですけど。

KEITO:あれも有名で、僕も使ってた時あったんですけど、こっちのほうがきれいな気がしますね。

池田:そうなんだ。へぇ~。

KEITO:どんな背景でも本当に人だけくり抜いてくれますね。あと、こうやって部分的に消すのがすごく使えるって言われますね。

池田:これは確かに便利かも。

KEITO:やっぱりこういうWebツールを使うと、デザイナーに外注するまでもなくて。ちょっとした作業なら自分でやっちゃえばいいのに、みたいなところで求められています。AIが関わってる、コテコテにすごいことができるようなツールを紹介しても、そこを学ぶリスクがあるというか、効率が悪いじゃないですか。

池田:確かに。「学んでもそこまで使うシーンがないよね」みたいな。

KEITO:そうです。なのでこういうものが一番刺さるって最近わかりましたね。

細かな外注をなくせるメリットも

池田:確かに。ちなみにこのClipdrop、いくつか機能があるかなと思うんですけど。さっきの背景を消す。あとは特定のクリーンアップで場所を消す。あとアップスケールは、解像度が低い画像をよりきれいにする機能ですよね。

KEITO:そうです。本当にシンプルなアップスケールです。AIがどうこうといった、AI生成を交えたアップスケールではまったくないですね。

池田:他にもいくつか機能があるかなと思うんですけど。「これは知られてないけど、意外と便利」とか、顧問先でウケる機能ってあります? 

KEITO:今言ったやつもそうですけど、テキストリムーバーとか。いい感じにテキストを削除してくれる機能がありますね。

池田:なるほどね。それ、いいかも。最近画像生成で作ると、よくわからない謎の文字が勝手に入ってくるケースがよくあるんですよ。これを使って消せるってことですよね。

KEITO:消せます。

池田:それはいいかもしれない。こういうのは地味に便利かもしれないですね。

KEITO:(顧問先で)画像系の加工でいろいろ話が膨らんでいったら、これを紹介するようにしてますね。

池田:なるほど。最近Adobeも「Firefly Services」っていうAPIサービスが出たかなと思うんですけど。こっちもプログラミング上からAPIでも使えるんですよね? 

KEITO:そうなんですよ。APIがあるのが、またいいなと思って。「これをこの仕組みに入れちゃえばいいじゃないですか」みたいなことも言いますね。

池田:確かに。なるほどね。ありがとうございます。非常に勉強になりました。

KEITO:Clipdrop、いいですよね。効率化のポイントとして、細かな外注をなくせるところがいいのかなって思いますね。

池田:いいですね。すばらしい。