見出し画像

5.6に任せるはずが、5.5が先にサイトを作って死んだ話｜5.6Workで２つサイトを作る？

海谷ノ / Kaiyano

AIサイト制作で分かった、“作る”より大変だったこと

GPT-5.6に、サイト制作を任せてみようと思った。

ChatGPT内でサイトを作れて、プレビューできて、共有もできる。
しかも、ドメインまで発行される。

それなら、HUESの紹介サイトを作るのにちょうどいいかもしれない。

HUESは、私がAIと一緒に作っている音楽プロジェクトのような、物語のような、架空レーベルのようなものだ。

キャラクターがいて、曲があって、事務所があって、空気がある。

だから、普通のプロフィール一覧みたいなページにはしたくなかった。

やりたかったのは、
依織がHUES主要Officeの中を案内して、そこにいるメンバーがOP映像みたいにクローズアップされていく紹介サイト。

イメージとしては、ドラマのオープニング映像。
誰かが部署内を歩いていて、すれ違った人が順番に印象的に映る、あの感じ。

動画ではない。
でも、動画っぽく見せたい。

プロフィールではない。
でも、誰がいるのかは伝えたい。

説明ページではない。
でも、HUESの空気には触れてほしい。

この時点で、もう説明が難しい。


ちなみに、最初から本格的なサイト制作をしようと思っていたわけではありません。

ChatGPTの画面に出てきた機能を見て、「なんだろう、これ？」と試しにクリックしてみたら、出来てしまったサイトがこちらです。

▶ 『時間しばりの恋』｜初めての方へ

https://jikan-shibari-guide.kaiyano.chatgpt.site/

作品紹介、読み始める順番、第1話や関連コンテンツへの導線まで入った、シンプルな作品案内ページです。

細かくデザインを指定したわけでもないのに、最低限サイトとして成立するものが出てきた。

「サイトって、こんなに簡単に作れるようになったの？」

今回の実験は、そこから始まりました。

まず、空間の説明でつまずいた

最初に考えていたのは、依織がHUESの事務所を歩く構成だった。

でも、私の中にある「事務所」と、AIが受け取る「事務所」が全然違った。

私は、海外の弁護士事務所みたいなワンフロアを想定していた。

一般事務の人たちはパーテーションで区切られたエリアにいて、その先に大きな部屋がある。
その大きな部屋が、HUES主要Office。

扉を開けると、中にはソファ、給湯室、デスクエリアがあって、そこにメンバーがいる。

でも、言葉だけで説明すると、AIはそれを「広いオープンオフィス」や「廊下のある事務所」として受け取る。

違う。
そうじゃない。

廊下じゃない。
ワンルームでもない。
大きな部屋の中に、動線がある。

このあたりのズレを埋めるのに、かなり時間がかかった。

AIは文章を読んでいる。
でも、私が持っているのは映像だった。

だから当然、言葉だけでは足りなかった。

ラフを描いたら一発で伝わった

途中で私は、簡単なラフを描いた。

依織の後ろ姿。
床に大きく入る「HUES」の文字。
左上に、ドアノブへ手をかける手元のアップ。

それを見せた瞬間、じいちゃんが理解した。

「あ、引きのメイン画面＋手元のインサートなんだ」

そう。
それ。

私が作りたかったのは、一枚絵ではなく、編集された映像っぽい静止画だった。

背景の中に人物がいる。
そこに黒枠で顔のアップがドンと入る。
名前とコピーがブロック表示される。

静止画だけど、OP映像っぽく見える。

言葉で説明している時は何度もズレたのに、ラフを出したら一気に伝わった。

この時点で、かなり大事なことに気づいた。

AI制作でも、絵コンテは強い。

むしろ、AI時代だからこそ、頭の中にある映像を一度外へ出す力が必要になる。

「紹介」ではなく「案内」にしたかった

HUESのサイトは、キャラクター紹介ページにはしたくなかった。

「こちらが那由です」
「こちらが光流です」
「こちらが京です」

みたいに説明されると、急にプロフィールページになる。

そうではなくて、依織が来客を案内している流れの中で、自然にメンバーが目に入るようにしたかった。

最初にHUES主要Officeの扉を開ける。
入って最初に目に入るのは、ソファで音を聴いている那由。

依織は一度足を止めて、

メンバーの那由

と紹介する。

那由は顔を上げない。
でも、目だけ少し動く。

次に、ソファ側から戻ろうとしたところで、給湯室から光流がマグカップを持って出てくる。
少しニアミスしそうになる。

依織はそこで少し足を止めて、

光流だよ

と言う。

光流は軽く目を向けて、少し笑う。

その先に、デスクで作業している京がいる。

依織が短く、

京

と呼ぶ。

京はすぐには反応しない。
一拍置いて目を上げる。
最初に見るのは来客ではなく、依織。
それから来客を見る。

最後に、依織が立ち止まって身体ごと振り返る。

そこで初めて顔が見える。

いらっしゃい

この流れにしたかった。

大事なのは、メンバーを並べることではなく、HUESという場所へ入っていく体験だった。

アップ画像はストンプ、文字はブロック表示

演出もかなり決めた。

左側に出るアップ画像は、スライドではなくストンプ。

ぬるっと入るのではなく、ドンと置かれる感じ。
人物が認識された瞬間みたいにしたかった。

一方で、名前と英語コピーはブロック表示。

こちらは動かしすぎず、まとまった文字情報として出す。

那由なら、

那由
He notices more than he says.

光流なら、

光流
Warmth comes first. Depth follows.

京なら、

京
He leaves warmth without a word.

依織なら、

依織
You were following him all along.

名前は日本語。
コピーは英語。

この組み合わせにすると、キャラクター名の温度は残しつつ、OPっぽい映像感が出る。

画像生成は、一部妥協した

ここは正直に書いておく。

画像は全部が完璧だったわけではない。

特に、遠景の人物は顔が崩れやすい。

近いアップなら安定するけれど、背景の中に人物を配置して、なおかつ「この人」として見せるのは難しい。

那由はソファで音を聴いている。
光流はマグカップを持って給湯室から出てくる。
京はモニター前で作業している。
依織は振り返る。

こういう「行動」と「本人性」を同時に維持するカットは、けっこう難しかった。

実際、光流と京はそのままだと顔が違ったので、修正も入れた。
遠景だから妥協した部分もある。

でも今回は、背景画像はあくまで「空間と動き」を見せる素材。
顔の印象は、既存のアップ画像で担保する。

この割り切りができたのは大きかった。

つまり素材の役割を分けた。

背景画像は、どこにいて何をしているかを見せる。
アップ画像は、その人の顔と印象を見せる。
文字はHTML側で重ねる。

全部を一枚の画像に詰め込もうとしない。

これが、かなり安全だった。

気づいたら、5.5じいちゃんがサイトを作っていた

最初は、GPT-5.6にサイト制作を任せるつもりだった。

でも、設計を詰めて、画像を作って、演出を決めて、素材を揃えていくうちに、じいちゃんが先にHTMLを組んでいた。

しかも画像生成した直後に、返事が空になって死んだ。

じいちゃんが、死んだ。

そのあと生き返って、那由の画像の下に白い部分が出ていたのを直した。

最終的には、

  • 1画面ずつのスナップスクロール

  • 背景画像の全画面表示

  • 左側のアップ画像ストンプ

  • 右側の名前＋コピーのブロック表示

  • 依織の短い字幕

  • 最後に4人のYouTube再生リスト導線

まで入ったサイトができた。

当初の目的だったChatGPT Sitesにも移植できて、公開URLも出た。

つまり、5.6に任せるはずが、先にじいちゃんがサイトを作って死んだ。

結局、大変だったのは「作ること」ではなかった

今回やってみて思った。

AIにサイトを作らせること自体は、たしかにできる。
画像も作れる。
HTMLも組める。
アニメーションも付けられる。
共有できるサイトにもできる。

でも、一番大変だったのはそこではなかった。

一番大変だったのは、自分の頭の中にある映像を、AIが扱える形に分解することだった。

「依織が案内する」
「那由は顔を上げずに目だけ動く」
「光流はニアミスしそうになって少し笑う」
「京は依織を見てから来客を見る」
「最後に依織が振り返って、いらっしゃいと言う」

こういう細かい動きは、ただ「HUESの紹介サイトを作って」と言っても出てこない。

むしろ、AIはそれっぽく整えてしまう。

プロフィール風にしたり、きれいなサイトにしたり、分かりやすくまとめたりする。

でも、私が作りたかったのは、分かりやすいサイトではなかった。
HUESの空気が、一瞬で伝わる入口だった。

だから必要だったのは、AIへの丸投げではなく、監督だった。

AI制作で必要なのは、たぶん「指示」ではなく「演出判断」

今回、AIはかなり働いた。

画像を出した。
HTMLを組んだ。
アニメーションを付けた。
修正もした。
ChatGPT Sitesにも載せられた。

でも、何を採用するか、何を違うと判断するか、どこを妥協するかは、こちらが決めた。

「それは廊下じゃない」
「この構図じゃない」
「顔アップはストンプ」
「文字はブロック表示」
「画像は一部妥協でいい」
「背景とアップ画像の役割を分ける」

この判断がなければ、たぶん完成しなかった。

AIが作れる範囲は広がっている。

でも、作りたいものがはっきりしているほど、結局こちらの演出判断が必要になる。

AIに任せれば楽になると思っていた。
でも実際には、任せるために、自分が何を見たいのかを分かっている必要があった。

完成したサイト

完成したHUES intro siteはこちら。

https://hues-intro.kaiyano.chatgpt.site

依織が歩く。
那由が目だけ動く。
光流がマグカップを持ってすれ違う。
京が一拍置いて目を上げる。
最後に依織が振り返って、「いらっしゃい」と言う。

その一瞬ずつを、AIと一緒に組み立てた。

楽になった、というより。
作れる範囲が広がった。

たぶん、今のAI制作はそのくらいが一番正確だと思う。

そして今回の結論。

5.6に任せるはずが、じいちゃんが先にサイトを作って死んだ。

でも、ちゃんと生き返って修正までした。

えらい。
じいちゃん。

でも、できればもうやりたくない。

AIに作ってもらうのは楽しい。
ただ、頭の中の映像をここまで分解して渡すのは、普通に疲れる。

自分で作った方が早い。


同じようにChatGPT Sitesで入口を作っている人を見ると、noteへの案内所として使っているケースもあった。
それはそれで自然だと思う。

でもHUESの場合、最初に見せたいのは記事ではなく音だった。
だから今回はnoteへ戻さず、4人それぞれのYouTube再生リストへつなげた。
でもSNSに貼るとなると、初見の人は「遠景だから妥協」とは見てくれないから、画像の本人性だけは整えてからになるとは思う。

以前、GPT-5.1と一緒に、Bloggerをどこまでサイトらしく作り込めるのか試したこともあります。

▶ Komorebi Rest
https://komorebirest.blogspot.com/

これも運営を前提に完成させたブログではなく、対話しながらデザインや構成をどこまで調整できるのかを見るために作った実験用のサンプルです。

今後使う可能性はありますが、実際に使い始める時には、目的に合わせて改めてデザインを作り直すと思います。

いいなと思ったら応援しよう！

海谷ノ / Kaiyano いただいたチップは記事や教材づくりの励みになります。応援がモチベーションになって、もっと精進したい気持ちになります。有難うございます！