GPT-5.6 Work（SoL）でサイト制作してみた。完成品を持ち込むまでが本番だった

GPT-5.6 Work（SoL）を使って、HUESの紹介サイトを公開した。

まずは、完成したものを見てほしい。

▶︎ HUES intro site
https://hues-intro.kaiyano.chatgpt.site/

前回の記事では、このサイトの初版を作るまでの過程を書いた。

▶︎ 制作過程の記事
https://note.com/kaiyano/n/nfa31525795e4

その時点でも、サイトは動いていた。

ChatGPT上でサイトを作り、公開URLを発行するところまでは成功していたので、実証としては十分だったと思う。

ただ、私はそのサイトをSNSには貼れなかった。

理由は単純で、

「作れた」と「人に見せられる」は、同じではなかったからだ。

初版は完成していた。でも、完成形ではなかった

初版にも、HUESの主要メンバーである依織、那由、光流、京が登場していた。

依織の後ろをついてOfficeへ入り、メンバーを順番に見て、最後にそれぞれの音楽へ進む。

サイトの構成自体は、最初からほとんど変わっていない。

それでも公開を止めたのは、遠景にいるキャラクターの顔に、少しずつ違和感が残っていたからだった。

一般的なサイトなら、遠くにいる人物の顔が多少違っていても、大きな問題にはならないかもしれない。

でも、HUESはキャラクターを運用するプロジェクトだ。

髪色が合っている。
服装が似ている。
雰囲気も近い。

それだけでは足りない。

私にとっては、

「ピンク色の髪をした男性」ではなく、依織であること。

「黒髪でマグカップを持った男性」ではなく、光流であること。

そこが最も重要だった。

サイト全体が綺麗に作られていても、登場人物が本人に見えなければ、HUESの入口にはならない。

だから、初版は動いていたけれど、SNSへ出せる完成品ではなかった。

画像を差し替えるだけでは終わらなかった

最初は、背景画像を高画質なものへ差し替えれば終わると思っていた。

実際には、画像を変えると、ほかの部分も気になり始めた。

人物のアップ画像が、PC画面では小さすぎる。

左側に少し表示されるだけでは、キャラクターの存在感が弱い。

そこで、アップ画像は画面の左半分全体から大きく出し、少し中央へ寄せる形へ変更した。

文字の出し方も変えた。

私が最初に「ブロック」と伝えていたのは、四角い枠の中へ文章を入れるデザインではない。

Canvaにある「ブロック」という名前のアニメーションのことだった。

四角が横切り、その動きに合わせて文字が現れる。

四角はそのまま残らず、最後には文字だけが残る。

さらに、名前の下には細い線が伸びるようにした。

こういう部分は、一言で伝えれば済みそうに見える。

でも、言葉の意味を違う形で受け取られると、見た目も意図もまったく別のものになる。

AIとのサイト制作で大変だったのは、コードそのものよりも、

頭の中にある完成形を、誤解されない言葉に変換すること

だった気がする。

「那由だよ」が、ただの二重説明になっていた

もうひとつ気になっていたのが、画面中央下に出ていた文章だった。

右側にはすでに、

NAYU

というキャラクター名と、英語のコピーが表示されている。

その状態で、中央下にただ、

那由だよ

と出しても、初見の人には、なぜ同じ名前を二度説明しているのか分からない。

本来、この言葉は依織のセリフだった。

依織が案内役として、画面の外からメンバーを紹介している。

でも、普通の字幕として表示されていたため、話者が伝わらなかった。

文章を説明的に変える方法も考えた。

ただ、それでは名前の二重説明をさらに強めるだけになる。

必要だったのは文章の変更ではなく、

「これは依織が話している」と分かる見せ方

だった。

そこで、セリフ部分を定番RPGの会話ウィンドウのようなデザインに変更した。

画面下に半透明の黒い枠を出し、話者名として小さく IORI を表示する。

その下に、

「那由だよ」
「光流だよ」
「京」

と依織のセリフが入る。

最後に依織本人が振り返り、

「いらっしゃい」

と言う。

この枠を入れただけで、キャラクター紹介と依織の案内が、別の情報として読めるようになった。

文章そのものはほとんど変えていない。

見せ方を変えただけだ。

でも、その差は大きかった。

SNSのリンクを、最後に並べなかった理由

完成版では、TOPにThreadsとTikTokのアイコンを追加した。

ただし、最後のページには置いていない。

最後にあるのは、

ENTER THEIR SOUND

という言葉と、4人それぞれのYouTube再生リストへの導線だけだ。

SNSのリンクもYouTubeの横へ並べた方が、便利に見えるかもしれない。

でも、このサイトの最後の目的は、SNSのフォロワーを増やすことではない。

HUESの音楽を聴いてもらうことだ。

ThreadsやTikTokまで一緒に並べてしまうと、見る人の選択肢が増え、最後の流れが弱くなる。

そこで、

• ThreadsとTikTokはTOP

• 音楽への入口は最後

と役割を分けた。

リンクをたくさん置くことと、分かりやすい導線を作ることは、同じではない。

「新聞の折込チラシを、そのままSNSへ投稿していないか」

このサイトを作っている途中、広告会社に勤めている人のnoteを読んだ。

その中で印象に残った言葉があった。

正確な引用ではないけれど、意味としては、

新聞広告に入ってくるチラシを、SNSに合った形へ直さず、そのまま投稿しているけれど、それでいいのか。

という話だった。

言い方はかなり強かった。

でも、間違ったことを言っているとは思わなかった。

画像が完成した。

だから、そのままSNSへ投稿する。

AIで画像を作っていると、特にこの流れになりやすい。

生成された時点で、すでに完成品のように見えるからだ。

でも、その画像は、

誰に届けたいのか。
どの媒体で見せるのか。
見た人に何を感じてほしいのか。
そのあと、どこへ進んでほしいのか。

そこまで考えられているだろうか。

Threads、TikTok、YouTube、noteでは、それぞれ見られ方が違う。

同じ画像を同じ形で置くだけでは、媒体に合わせた制作にはならない。

今回のHUES intro siteも、初版の段階で画像もページも存在していた。

でも、それだけでは「生成物が並んだサイト」だった。

キャラクターの本人性を整え、案内役を伝わる形にし、画面ごとの役割を決め、最後にYouTubeへ流す。

そこまで編集して、ようやくHUESの入口になった。

私自身、これからも覚えておきたいと思った。

GPT-5.6 Work（SoL）だけで作ったのか

ここは、かなり正直に書いておきたい。

今回の完成版は、GPT-5.6 Work（SoL）だけで、最初から最後まで制作したわけではない。

細かい構成や画像、アニメーション、文章の見せ方を詰めたのは、主にGPT-5.5との対話だった。

5.5で何度も確認しながら、

「ブロックの意味が違う」
「依織のセリフとキャラクターコピーは別」
「人物をもう少し大きく」
「少し中央へ寄せたい」
「スマートフォン側は任せる」

と修正を重ねた。

そして、HTML、CSS、JavaScript、画像を含む完成版のデータを作り、最後に5.6 Workへ渡して公開サイトへ反映した。

つまり、私の使い方では、

GPT-5.5

対話を重ねながら、完成形を詰める

GPT-5.6 Work（SoL）

完成したコードを読み、サイトとして表示・公開する

という役割分担になった。

私が自分のサーバーを持っていれば、完成したファイルをアップロードすれば終わる。

そう考えると、

では、5.6 Workとは何だったのか。

という疑問も少し残る。

高性能でも、制作途中で使い続けられるとは限らない

5.6 Workは、コードを読み、動くサイトとして表示する力を持っている。

ただ、サイト制作では、一度作って終わりにはならない。

実際の画面を見て、

少し大きくしたい。
位置をずらしたい。
意味が伝わりにくい。
画像を変えたい。
スマートフォンではどう見えるのか。

と、何度も確認しながら詰めていく。

その作業を5.6側で最初から行おうとすると、利用制限や処理の重さが気になる。

完成まで何往復必要になるか分からない以上、軽く何度も対話できる環境の方が制作には向いている。

その結果、

5.5で完成まで作る。
5.6には完成品を渡す。

という形になった。

高性能なモデルがあっても、制作途中で十分に使い続けられなければ、実際の作業には組み込みにくい。

これは性能だけではなく、運用の問題だと思う。

キャラクターサイトでは、コードよりも顔が重要だった

今回、特に不安だったのは、5.6がコードを理解できるかどうかではなかった。

キャラクターの同一性を、どこまで理解できるかだった。

HUESのようなキャラクター運用サイトでは、画像が最重要になる。

依織の髪色、輪郭、目元、表情。

それらを一つずつ説明して作ることもできる。

でも、長く対話を重ね、何度も画像を作ってきた5.5は、すでに「依織らしさ」をある程度共有している。

最近では、こちらが細かく指定しなくても、普通に依織らしい画像を出してくることがある。

今回の差し替え画像も、私が用意したものを渡したあと、5.5が別の画像を作り始めた。

そして、出来上がったものを見て、

「こっちを使おうか」

となった。

これは、単純な画像生成性能の差というより、

長い対話で積み重ねた共通認識の差

なのだと思う。

Webデザイナーの友達に話したら、

「それ、担当デザイナーを途中で替えられない話では？」

と言われそうだ。

たぶん、その通りだと思う。

コードは引き継げても、キャラクターの顔に対する理解までは、簡単に引き継げない。

AIで簡単にサイトが作れた、とは言えない

今回、コードを書けない私でも、公開できるWebサイトを作ることはできた。

そこは、本当にすごいと思う。

ただし、

AIに頼めば、簡単に完成度の高いサイトができる

とは言えない。

完成形を考える。
画像を確認する。
意図を言葉へ変換する。
誤解を修正する。
媒体ごとの役割を整理する。
公開後の見え方を確認する。

その作業は人間側に残る。

むしろ、コードを書かない代わりに、私はディレクター、デザイナー、編集者、検品担当、仕様書作成を全部やっていた気がする。

作業がなくなったのではなく、作業の種類が変わった。

そして、5.5と5.6の間を移動するために、完成データと指示書まで用意した。

Web制作に詳しい人から見れば、

「作業量、増えていない？」

と言われてもおかしくない。

否定はできない。

それでも、私が見せたかった入口はできた

前回の記事では、

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

と書いた。

今も、簡単だったとは思っていない。

自分でコードを書ける人なら、もっと早いと思う。

Webデザイナーへ頼めば、意思疎通もずっと楽だったかもしれない。

GPT-5.6 Workだけですべてが完成したわけでもない。

それでも。

私が見せたかったHUESの入口は、ようやくここにできた。

依織の後ろを歩き、Officeへ入り、那由、光流、京と出会う。

最後に依織が振り返り、

「いらっしゃい」

と言う。

その先に、4人の音楽がある。

最初は「サイトを作れた」という実験だった。

今度はちゃんと、

人に見せられるものとして完成した。

▶︎ HUES intro site
https://hues-intro.kaiyano.chatgpt.site/