🎬 LIVE配信アーカイブはこちら。

▶ 該当シーンを動画で見る（0:31〜）

2026年10月16日（金）朝7時、GPTs研究会の朝LIVEは、司会のただっちのあいさつで始まりました。この日のゲストは、AIクリエイティブデザイナーのともみんです。この回のテーマは、ChatGPT Webサイト作成の実例です。

ただっちは、この回のテーマをこう紹介しています。

ただっち

「これ本当にチャットGPTで作ったのプロが仕上げたウェブサイト大公開ということでお届けしてまいります。」

ChatGPTのサイト機能で、ランディングページやホームページが作れるようになりました。ただっちによると、ともみんが作るLPは「異次元」です。そこで今日は、ともみんがどういう視点で作っているのかを、実物で見せてもらう流れでした。

ただっちは、自分の立場も短く話しました。起業家や経営者の人生とビジネスを応援する仕事をしていて、AIのコミュニティの運営や講座を、ともみんと一緒に続けているそうです。

ともみんの名乗りは、AIとクリエイティブを使いこなしながら、見る人それぞれの制作物の表現が楽しくなるように伝えている、というものでした。

画面共有に入るまでには、少し間がありました。ともみんは「ちょっと待ってね」と言いながら、見せたいページを探しています。タブを開きすぎて、どれがそのページか分からなくなったそうです。ただっちの側では、4つの入り口が並んだ画面が見えていました。

サイト作りの前提も、ここで話しています。ともみんは、LPやホームページを作る人がいるはずだと前置きして、昨夜の作業に触れました。夜中の3時ごろまで作っていたそうです。そこで感じたことを、ともみんは次のように語っています。

ともみん

「やっぱり入れる言葉によって全然違うんだよね。」

「自分がどういうサイトを作りたいのかっていうのは、本当に明確にする必要があるなって思ってるんですが、」

ともみんの考えは、同じChatGPTでも入れる言葉で出来上がりが変わるので、先に、自分がどんなサイトを作りたいのかをはっきりさせておく、というものでした。

そのうえで、ともみんは最近4つのサイトを作ったと話します。ただし、その4つは、100個作ったサイトの中から選んだものです。今日は、まず1つを見ていくことになりました。

ともみん

「ちなみに、これ、百個作ったうちの四つのうちの、とりあえず一個。」

「今日は見ていこうかなと思ってます。」

見せ方にも、ともみんらしさがありました。4つのうち、どれを見たいかを、視聴者に聞いてから選ぶ進め方です。最初に画面を共有した時、ともみん自身が「私が開いてるページじゃないやつだこれ」と気づき、開き直す場面もありました。

サイトを作る人が、どんな言葉で頼み、どこまで見せるか。この回は、その手の内を朝の30分で見せてもらう回でした。

朝7時に始まった30分の中で、いちばん先に耳に残ったのは、ともみんの「入れる言葉によって全然違う」という一言でした。夜中の3時まで作った人の実感として、頭に残っています。100個作ったうちの4つを見せる、と手の内を出してくれる回の始まりでした。

▶ 該当シーンを動画で見る（3:34〜）

見せてもらう候補は、ラーメン、グランピング、チーズ専門店、ペット用品の4つでした。ともみんは、視聴者に「どれを開いてみたいでしょうか」と聞いています。

ここで、ただっちが確かめました。実在のお店のサイトなのか、という質問です。ともみんの答えは明快でした。すべて架空です。4つとも、ともみんが作った100個のうちのサイトです。

チーズ専門店のサイトには、チーズを作る職人も出てきます。この職人も、架空の人物として入れているそうです。ともみんは、画面を指しながら、こう話しました。

ともみん

「このチーズは存在しないし、このワンちゃんも存在しません。」

「全部偽物でございます。」

サイトの中では、チーズもワンちゃんも動き出します。それでも、ともみんは、全部偽物ですと言い切りました。

チーズ専門店を見たいというリクエストも届きました。ただっちは、チーズ屋さんも可愛いと受けています。ともみんも、可愛らしさがよく出ているのはチーズ専門店だと話しました。

コメント欄にも、反応がありました。ただっちは、LP構造を学んだ卒業生も見に来てくれていると、視聴者にお礼を伝えています。

どのサイトを開くかは、多数決で決めることになりました。ともみんが決めたルールは、誰か一人、もう一人が同じものを選んだら、それにする、というものです。

ただっちは、先に自分の希望を答えました。ペットです。ともみんは「ワンちゃん飼ってるから」と受けています。さらに、ペットのサイトを見てどうだったかと聞かれ、ただっちは、動画が入っていることを挙げました。

その時、ただっちは、動画のリアリティがすごいと感じたそうです。思わず見てしまって、長く見続けてしまいそうだ、という感想でした。

そこへ、コメントでもペットを推す声が届きました。ともみんが「ペットが人気」と読み上げると、ただっちも「ぜひペットを見てみたい」と続けます。

ただっちが挟んだ質問も、見逃せません。これは、どういう基準で作ってきたのか、という問いです。いろいろな業種を100個作ったと聞いての質問でした。

ただっち

「これはどういう基準でこう作ってたんですか。」

「うん、いっぱいいろんな業種ね百個ありましたけど。」

ともみんは「どういう基準？」と聞き返しました。そのあと、ともみんは、コメント欄の「ペットが人気」という声を読み上げています。

ともみんは、ペットに決めると宣言して、画面をペットのサイトに切り替えます。

ともみん

「じゃあとりあえずペット行きたいと思います。」

4つとも架空のお店で、チーズも犬も存在しない。ともみんは、そう言い切りました。それでも、サイトの雰囲気は業種ごとに作り分けられていたんです。多数決で、視聴者の声もあってペットに決まった流れも、朝LIVEらしい場面でした。

▶ 該当シーンを動画で見る（8:00〜）

ペットのサイトが開くと、まず動画が動き出しました。ただっちは「可愛い」と声を上げています。ともみんは、これがループ動画であることを説明しました。

ただっちは、動きの自然さに驚いていました。ともみんは、音が聞こえるかを確かめてから、音楽の仕組みを見せています。サイトには、音楽のオンとオフを切り替えるボタンが付いていて、音を止められます。

ただっちは、オンオフもできるのかと感心しています。ページを開いた人が、音を止められる作りです。

そこから、ともみんは画面を下へ進めます。流れは、動画から始まり、ペットの寝る場所、ご飯の器、ハーネスの順でした。

ともみんは「結構こだわりました」と話し、一気にワンちゃんたちが動き出す見せ方を示しました。

このワンちゃんたちは、AIで生成した画像だそうです。一番上のトップにいる子たちを使って全体を作ったので、同じ雰囲気のワンちゃんになっている、とともみんは明かしました。

ただっちは「これがAIなのね」と驚いています。

ただっちの見立ては、こうです。ワンちゃんや猫ちゃんの画像は、AIがよく学習している題材なので、自然に出やすいのではないか、という見方でした。

ともみんは「標準的なものが出るのね」と受け止めています。題材によって出来が変わる、という話にもつながる一言です。

そして、この回の大きな告白が出ます。ともみんは、このLPを自分では書いていないと話しました。さらに、サイトのテーマもChatGPTが決めたそうです。

動画の入れ方も話題になりました。ただっちが、動画はさすがに自分で作って入れるのか、と聞くと、ともみんは、トップの動画は差し替えたと答えています。

LPやホームページを作る時のコツは、トップだと、ともみんは短く言い切りました。一番上の部分が最も重要で、そこを動画にする、目を引く動きを入れる、といった工夫をすると、うまくいきやすいという話です。

ともみん

「でやっぱLP作るときのLPとかホームページ作るときのコツはもうトップだよね。」

「この部分がやっぱり超重要になるから、一番最初の部分は、まあ、動画にするなり。目を引くモーションだったり、エフェクトみたいなのを入れたくて、いい感じになりやすいかなと。」

ただっちは、これまでは動画サービスのURLを差し込む形だったと振り返りました。動画そのものを入れられる点がすごい、という反応です。ただっちも、以前なら画像をサイトにアップして、裏側にURLを置く手間があったと整理しています。

ともみんは、動画を入れる場所が分からない時でも、言葉で頼めば入ると話します。URLは入れていません。出来上がった動画を、そのまま入れただけだそうです。

ともみん

「URL入れてないよ。出来上がった動画をそのまま入れただけ。」

「そのままこの動画をLPに入れてくれとか、ホームページに入れてくれ。って。するだけで。」

「LPを自分では書いていない。テーマもGPTさんが決めた」。この告白には驚きました。コツはトップで、動画はURLではなく動画そのものを入れ、LPやホームページに入れてくれと頼むだけです。音楽のオンオフボタンまで付いていました。

▶ 該当シーンを動画で見る（13:15〜）

動画の話の流れで、ともみんは、AIで作ったサイトの弱点も隠さず話しました。静止画が続くと、AIっぽさが残るからです。

では、どこがAIっぽいのか。ともみんは、画面を指しながら、いくつかの点を挙げています。背景の色、文字、そして、ここのレイアウトです。ただっちも、確かに、そこはAIっぽいと同意しました。アイコンを入れがちなところも、特徴として挙げられています。

こうしたAIらしい部分が続くと、見た人は、AIで作ったな、と気づいてしまいます。そこでともみんの対策は、間に動きを入れることです。ともみんは、次のように話しました。

ともみん

「やっぱ静止画で続いてたら、ちょっとAIっぽさって残るんだけど、」

「AIが出しがちな色っていうのは。」

「あとやっぱ文字とかはAIっぽいっていうところはあるよね。」

「ここの間にどういうモーションになってる？エフェクトとかを入れ込みながら楽しめるか、みたいなところがポイントになるかなと思います。」

ただっちは、こんなものが作れるようになったのか、と感嘆しています。ともみんも「すごくない？」と返しました。

作り方の難しさについても、ともみんは触れました。やり方に、難しいものはいりません。それよりも、アイデアの方が重要だそうです。

実例として出たのが、ペットのサイトの最後に出てくる、犬の足跡です。ページを下まで進めると、足跡がぴょんぴょんと出てきます。ともみんは、これをつけたのか、と自分に問いかけるように話し、仕組みを説明しました。

ともみんによると、クリエイティブの作業として作るなら、足跡を一個ずつ出現させて付けていく必要があります。今回、ともみんがやったのは、言葉で伝えることだけでした。

ともみん

「このね、足跡、足跡が、ワンちゃんの足跡が最後にバーって出てくるようなエフェクトをつけて、みたいな。そういう感じでお伝えをしてるんですね。」

ともみんは、AIの組み合わせは無限にある、と話しています。

ともみん

「そうこんな感じですね。なのでえっと組み合わせってめちゃくちゃ無限にあるので、AIの組み合わせをうまく使うとこういう感じの。あの本格的なサイトを作ることができます。」

ただっちが、ChatGPTだけで作ったのかと質問しました。ともみんの答えは、動画のところだけ、別のAIを使ったというものです。そのAIを、ともみんは「ジェミニちゃん」と呼んでいます。それ以外は、ChatGPTで作ったそうです。

ただっちは、足跡の可愛さを受けて、クリエイターのこだわりが出る部分だと話しました。作る人の感性が出るところです。

ただっち

「一般人だとまあこれでいいかと思っちゃうけど、そこのその人なりのこだわりだったり可愛いって思うポイントだったりっていうそこが何か大事な感じがしますね。」

ただっちは、足跡のような小さな演出に、その人らしさが出る、そこが大事だと見ていました。

AIっぽさは背景の色・文字・レイアウト・アイコンに出ると、ともみんは隠さず挙げました。和らげる手は、間に動きを入れること。犬の足跡も「最後にバーッと出るエフェクトをつけて」と言葉で頼んだだけだそうです。

最後の一押しは作る人のこだわり、というただっちの言葉が残りました。

▶ 該当シーンを動画で見る（17:12〜）

ペットのサイトのあと、ともみんは、画面の共有を切り替えました。知り合いの方が作ったサイトを紹介するためです。

その方は、昨日が誕生日で、本も出版されたそうです。ともみんが出版した漫画の本のプロデュースを担当してくれた方でもあります。肩書きはKindle出版プロデューサーです。ともみんは最近、この方にAIをレクチャーしました。

そして、その方が作ったサイトが素敵だったので、見ている人にも見てほしいと話しています。

サイトを開くと、出版プロデューサーが手がけた本が並んでいます。ともみんの本も、その中に入っていました。ここで、ともみんは、スクロールした時の動きを見せます。

画面が切り替わると、ただっちは「すごい」と声を上げました。本の一覧からは、Amazonのページを見られます。開くと、本は早速1位になっていました。ともみんが「三冠じゃないですか」と言うと、ただっちも、おめでとうございます、と祝福を伝えています。

ともみんが続けて見せたのは、PC版とスマホ版の違いです。最初はPC版で、次にスマホ版に切り替えています。

スマホ版では、下にスクロールするだけで画面が進みます。ともみんが言うには、ここにバーが出ています。スクロールすると、作品の奥の世界に入っていくようなエフェクトを入れました。ブワーッと迫ってくる感じが、テーマだそうです。

幅も見やすいように、レスポンシブ（画面の大きさに合わせて見え方を変える設計）をかけてあります。

ともみん

「これもスクロールするとこんな感じで変わります。行きます。せーの。」

「スクロールすると作品の奥の世界に入るようなエフェクトを入れているので、わーんと迫ってくる感じ。ブワーって迫ってくるっていうのをちょっとテーマに作っていて、」

「ちゃんとレスポンシブもかけながらえっとスマホでもパソコンでもしっかりとサイトが見えるように構築しています。」

ただっちは、感心して「すごいですね」と受けたあと、作る時の視点を聞いています。見る人の視点で作るのか、それとも、サイトを作った方の表現を引き出して作るのか、という質問です。

ただっち

「これはなんか、こういうのを作るときって、どういう視点？見る人の視点？」

ともみんの答えは、トップの作り方でした。一番最初のトップが動かない、というよくある形にはしません。本を使って、自分らしさを表すものにしたい。そこで、本をどう表すかが、ポイントになりました。

そのため、トップで本がどう出現するのかから考えたと、ともみんは説明しました。

ただっちは「他との差別化を考えて」と補いました。ともみんは、その言葉を受けて、デザイナーでなくてもトップは作れると続けています。

ともみん

「本がどう出現するのかから考えた。」

「そもそもデザイナーじゃないとトップが作れないかっていうとそういうわけではなくて、指示をきちんと入れるかもしくは意識をすれば何かしら考えられる。」

自分で考えるのもよいし、AIの力を使いながら考えるのもよい、とも話しています。ともみんは、トップの見せ方を考える作業は、デザイナーだけのものではない、という考えでした。

スクロールすると本が迫ってくる。この動きには、私も目を引かれました。PC版とスマホ版で見え方が違い、レスポンシブがかけてあります。「デザイナーでなくても、指示を入れるか意識すれば、トップは考えられる」というともみんの言葉は、作る人の背中を押してくれます。

▶ 該当シーンを動画で見る（23:25〜）

ChatGPT Webサイト作成の実例が終わると、話は、作ったあとの確認に移りました。ともみんは、100個作って気づいたこととして、得意と苦手があると話します。

ともみんの整理では、AIのジェミニは、人物やペットが動く動画が得意です。ChatGPTで作ると、スライドのような仕上がりになりやすいそうです。この癖を知ったうえで、どちらでどこを作り、どうはめるかを考える、という話でした。

そして、ともみんが、ここは本当に見てほしいと強調したのが、確認の話です。

ともみん

「ただこのチャットGPTが100個サイトを作って気づいたことは、チャットGPTが得意なことと苦手なことがやっぱりあるんで。」

「ここは本当に見てほしい。ちゃんとスマホとパソコンから見て見れてるのかな？リンク飛べるかな？みたいなところは、念のため見てほしいな。」

調整しないと、スマホで見た時に崩れることがあります。ただっちも、改行の位置が変になる例を挙げて、ともみんの話に同意しました。音楽がちゃんと鳴るかも、確かめてほしい点です。

ただっちは、一発で出して終わりにしないことが大事だとまとめました。作ったら、見る側の視点に立って、チェックする、という意味です。

ただっち

「作ってそのままじゃなくて、一発出しじゃなくて、ちゃんとチェックして。見る側の視点に立ってみて、っていうところが大事ですよね。」

ともみんによると、これはデザインの基本です。ところが、デザインの専門ではない人が作るようになると、見る側の目線が抜けやすくなるそうです。公開してから、スマホで見られないと気づく場合もある、という話でした。

ともみん自身もやりがちだと打ち明けたのが、公開範囲の設定です。全体公開になっていないまま、人に渡してしまう失敗でした。ただっちも「限定公開、ありますよね」と受けています。

URLを渡しても相手は見られず、アクセス権をください、というやり取りになることがある、という話でした。ともみんは、サイトがちゃんと全体公開になっているか、スマホからも見られるか。この2点を、特に押さえてほしいと話しました。

見る機器の話も続きました。ともみんは、スマホとパソコンのほかに、タブレットなど、見る方法はいくつもあると話しています。

色の見え方も、人によって違います。ともみんは、見やすい文字の大きさや色を意識しなければ、自分の見える世界で作ってしまう、と話しました。反対に、見えやすい世界を取り入れるかどうかも、設計の段階で選べます。

端末ごとの違いも、挙げられました。iPhoneでは音が鳴りにくい場合があり、iPhoneかAndroidかなど、端末ごとの設計が必要になることがあるそうです。折りたたみ式のスマホやタブレットを使う人もいます。スマホの大きさも、人によって違います。

ともみん

「作る人って。そう自分が見ているものがすべてだと思いがちなの。」

「いろんな端末いろんな色いろんななんか条件で見ている。」

ただっちは「自分の視点で見てしまいがち」と受け止めています。ともみんは、そこを意識するだけで、AIに入れる指示も、直す場所も変わってくる、と話しました。

ただっちは最後に、この日の話を2つの視点にまとめています。こんなことができるのか、という作る側の視点と、使う側、見る側の視点です。

この回で一番強調されたのが、公開前の確認です。スマホとPCで見えるか、リンクが飛ぶか、音楽が鳴るか、全体公開になっているか。全体公開になっていないまま渡してしまう失敗は、ともみん自身もやりがちだと話していました。

見る人の端末も色の見え方も一つではないと受けて、ただっちは作る側と見る側の両方の視点でまとめました。

▶ 動画で最初から見る（0:31〜）

▶ 朝LIVEの動画を見る（0:31〜）