【ChatGPT Sites】YAMLギャラリーサイトが10分で公開できた件

これまで、NotebookLMでスライドデザインを指定するためのYAMLを100種類以上作成してXで発信し、こちらのNote（スライドデザインを簡単に作れるYAMLライブラリー①、スライドデザインをお洒落にするYAMLライブラリー②）にまとめてきました。

しかし、Noteではサムネイル画像が縦に並んで見づらい、YAMLプロンプトをコピペするためにXのリンクをさかのぼらなければならない、ため使いづらいという問題がありました。

そんなとき目に留まったのが、ChatGPTの新しい「Sites」機能を使えば、Webサイトが作れるという情報…！

ChatGPT Sitesとは？

ChatGPT Sitesは、以前は「Cowork Sites」と呼ばれていた機能です。当初は2026年6月に、企業向けのCodexユーザー限定でリリースされました。

その後、GPT-5.6およびChatGPT Workのリリースと同時に提供範囲が拡大され、個人向けのChatGPT Work／Codexユーザーも利用できるようになりました。

一言でいうと、サーバーや公開先を自分で用意したり、別のサービスと契約したりすることなく、ChatGPT Work／Codexで作成したWebアプリやゲームなどを、そのままインターネット上に公開できる機能で、めちゃくちゃ便利そう。

ということで、ChatGPT Workから「Sites」を使って、160種類のサムネイル画像とYAMLを一覧してDLできる、ギャラリーサイトを作ってみることにしました。

ギャラリーサイトの作り方

試行錯誤の末といいたいところですが、なんと一言プロンプトを入れるだけで、3分30秒でテストサイトが完成。ClaudeCodeで整理した全データを渡すと、5分で160種類のデータを完璧にアップすることができてしまいました…簡単すぎるし、UIデザインも使いやすいし、やばすぎる。

出来上がったサイトはこちらです↓

NotebookLM Slide Style Library

それではサイトの作り方を振り返っていきましょう。

① 左側のツールバーから「サイト」を選択

まず、ChatGPT Workの左側にあるツールバーから「サイト」を選択します。

Sitesを使うと、Webサイト制作の専門知識がなくても、作りたいサイトの内容を文章で伝えるだけでサイトを作成できます。

② 作りたいサイトを文章で依頼

Work画面で、次のように入力しました。

まずは、６種類のYAMLとサムネイル画像が入ったワードファイルを渡してテストサイトを作ります。すると、約3分30秒でテスト版のギャラリーサイトが完成しました。

テスト版には、次のような機能が実装されていました。

• サムネイル画像の一覧表示

• デザインの検索

• 詳細画面の表示

• YAML全文の確認

• YAMLのワンクリックコピー

• スマートフォン表示への対応

最初に少量のデータで試したことで、サイトのデザインや操作方法を確認してから進めることができます。

③ Claude Codeで情報をJSONに変換

次に、160種類の情報をサイトへまとめて登録するため、Claude Codeを使ってデータを整理しました。

各デザインについて掲載していたnote記事とXの投稿リンクをClaude Codeに渡すと、自動で次の情報を抽出してJSONファイルに変換してくれます。

• 通し番号

• デザイン名

• カテゴリ

• サムネイル画像のURL

• YAML全文

• Xの投稿URL

• noteの記事URL

JSONは、多くの情報を同じ形式で整理できるファイルです。

今回のように160種類ものデータをWebサイトへ登録するときは、一つずつ手作業で入力するよりも、JSONとしてまとめて渡す方が効率的でした。

④ JSONファイルをChatGPT Workに渡す

作成したJSONファイルをChatGPT Workにアップロードすると、ファイルの内容を読み取って、160種類すべてのサムネイル画像とYAMLが入っていることを確認してくれました。

と依頼してみます。

⑤ 約5分で160種類のサイトが完成

…なんと約5分で、160種類すべてを掲載したギャラリーサイトが完成しました。完成後も、「サムネイルを横に4枚表示するかたちにして」「意味の通じるところで改行して」「スマホでも見やすくして」などと、チャットで希望を伝えるだけで修正できます。

サイトが完成したら最後に、

と入力すると、サイトの閲覧設定が変更され、ログインしていない人も閲覧できる状態になります。

完成したサイト

完成したサイトでは、160種類のスライドデザインをサムネイルで比較できます。

気になるデザインをクリックすると、対応するYAML全文が表示され、そのままコピーできます。

また、カテゴリによる絞り込みや検索にも対応しています。

NotebookLM Slide Style Libraryを見る

ChatGPT Workを使って感じたこと

これまでWebサイトを作るには、デザイン、コーディング、データ整理、公開設定など、複数の作業が必要でした。しかしChatGPT WorkのSitesでは、

1. 作りたいものを文章で伝える

2. 必要なファイルを渡す

3. 修正点をチャットで伝える

4. そのまま公開する

という流れでサイトを作成できて、めちゃくちゃ便利！サイトのUIデザインもClaude Codeなどで作るよりおしゃれで使いやすいので、これからWebサイトを作るのはChatGPT Work一択になりそうです…。

まとめ

今回の制作時間は、おおよそ次のとおりです。

• テスト版サイトの作成：約3分30秒

• 160種類を掲載したサイトの作成：約5分

• その後の修正と一般公開：チャットで順次対応

もちろん、事前にYAMLや画像を準備し、JSON形式で情報を整理する作業は必要ですが、160種類のデータを掲載した検索・絞り込み・コピー機能付きのサイトを、短時間で作成して公開できたのは驚きでした。

ChatGPT WorkのSitesは、単にWebページを生成するだけではなく、手元のコンテンツを「探しやすく、使いやすい形」に変換するためのツールとしても活用できそうです。Webページを作ったことのない人でも、おどろくほど簡単に作れるので、ぜひいろいろなアイディアで使ってみてください！