日沼諭史の「AI活用入門塾」

ChatGPTの「サイト」機能で、自社サイトからWebアプリ、ECサイトまで作れる!

 今や当たり前の存在になってきたスマホやパソコンで使えるAIツール。まだ本格的に触れたことがない人でも、便利に使いこなすためのヒントをお届けします。

 ChatGPTに、新たに「サイト」という機能が追加されています。名前の通り、Webサイトを作成することができる機能ですが、シンプルな静的ページだけでなくデータベースなども使った動的なWebアプリも作れて、公開までできるというもの。さっそく試してみましょう。

データベースを扱うサイトも、ネット公開も自動で

 ChatGPTのサイト機能は、ChatGPT Plus(月額3,000円)以上のプランで使用可能です。デスクトップアプリやWeb版のChatGPTから利用でき、現在のところスマホアプリからは利用できません。

サイト機能の入口

 サイト機能が対応する範囲は広大です。静的なページで構成するWebサイト、たとえば自社や自社製品を紹介するようなコンテンツはもちろん、動きのあるインタラクティブなページ、データベースや外部APIを使うようなWebアプリも作れます。ECサイトも小規模なものであれば実現可能です。

 さらに、作成したWebサイトを「○○○.chatgpt.site」のようなドメインや自社(カスタム)ドメインでアクセスできるようにすることも可能です。ユーザー側での込み入った設定作業や手続きはいりません。最初にプロンプトで十分な指示をすれば、あとは待つだけでWebサイトを公開するところまでやってくれるのです。

 使い方は、メニューから「サイト」を選ぶか、プロンプト欄に「@Sites」と入力して、それに続けて指示を書くだけ。最初はWebサイトの公開まではせず、自分用や社内用の小さなWebアプリを作るところから始めるのが無難かもしれません。

「@Sites」の後にプロンプト入力することで、サイト機能(スキル)で作業を進める形になる

 また、短すぎるプロンプトだと期待しているようなWebサイトにならない可能性が高いので、ChatGPTのチャットなどで相談してサイト機能用のプロンプトを作成してもらうのがおすすめです。

ChatGPTと相談してプロンプトを作成
それをサイト機能のプロンプト欄に貼り付け
ある程度複雑なWebアプリになると「Work」への移動が推奨される

3Dメモツールが30分で完成、Webアプリが誰でも作れる

 ここでは実例として、立体空間でメモを管理できる付箋ツール的なものを、自分限定のWebアプリとして作ってみることにしました。空間全体をメモ作成できるキャンバスとし、付箋は平面的に配置することも、奥行き方向に配置することもできる、というような内容です。

サイト機能で3D付箋ツールを作成してもらっているところ

 指示してから30分ほどでできあがりました。メモの作成、編集、内容確認、移動ができ、奥行きがあるので3D空間で視点を前後に移動しながらメモをチェックしていけます。メモしたデータは記憶され、Webサイトを離れても再びアクセスした時には前の状態を維持する仕組みです。

完成した3D付箋ツール
奥行き方向を移動しながらメモ管理

 さらにおまけで、付箋を削除したとき、床のゴミ箱に投げ捨てられるアニメーションも追加しました。まれにゴミ箱を外れて削除されずに元に戻ってしまう、というようなちょっとした遊びゴコロも入れてみましたが、指示通り見事に実装できています。

付箋の最小化ボタン、削除ボタンを押すと紙くずに

 3DのUIをもち、データ管理も可能なWebアプリがプロンプト一発で完成しました。ここからログイン機能を追加してユーザーごとにデータを持つようにしたり、インターネットに公開して知り合いに使ってもらえるようにしたり、というのも時間をかけずに実現できるはずです。

 Codexのようにプログラムを扱っているような感覚もなく、自然なやり取りだけで成果物だけがポンと生まれるイメージ。日常業務で必要に感じたツールをその場で作って、みんなで使えるようにする、といった気軽な使い方でぜひ試してみてください。

サイト機能で作成したものは一覧して管理可能
設定で一般公開に切り替えられる。アクセス状況もチェック可能