担当：Dr.よこぼ
実験結果：情報を削り、役割の違う4つの場所を持つラボへ再構成できた
-------
よこぼのAIラボを大改修したら、最後に残ったのは「遊ぶ？読む？」だった
よこぼのAIラボを大幅にリニューアルした。
最初に考えていたのは、もっと楽しく、もっと見栄えのよいサイトにすることだった。しかし、実際に始めると問題はデザインだけではなかった。
遊べるもの、研究ログ、ラボの説明。全部を一つのページに並べるほど、何のサイトなのかが分からなくなる。
そこで今回は、トップページ、実験室、資料室、ラボ案内を、それぞれ別の役割を持つ場所として作り直した。
GPTにイメージを作ってもらい、Claudeと設計を相談し、Codexで実装する。途中、ラボ案内だけはどうしても決まらず、Fableにも相談した。
かなり回り道をしたが、最終的に効いたのは「何を足すか」よりも「何を捨てるか」だった。
まず、旧サイトを観測する
リニューアル前のサイトがこちらである。
実験ログ、遊べるもの、ラボの紹介など、必要な情報はすでに揃っていた。一方で、入口も情報も同じ場所に並んでいたため、サイトへ来た人が最初に何をすればよいのかは少し分かりにくかった。
今回の実験は、ここから「よこぼのAIラボとは、どんな場所なのか」をもう一度考えるところから始まった。
トップページ：作って、増やして、最後に丸ごと削った
最初に打ち出したのが、「遊ぶ？読む？」というコンセプトだった。
実験やゲームに触るなら遊ぶ。試行錯誤や考えたことをたどるなら読む。まずは二つの行動を入口にして、トップページを試作した。
この時点で方向はかなり見えている。ところが、ヒーローの下には「3つのエントランス」「いま動いている実験」、さらにもう一度入口を案内する領域まである。
親切にしようとして、同じことを何度も説明していたのである。
次は「3つのエントランス」をもっと強く見せようとした。遊ぶ、読む、ランダム転送を、研究所の三つの扉として作った。
扉という考え方は面白かった。しかし、少しずれている。訪問者に選んでもらいたいのは扉のデザインではなく、遊ぶか、読むか、偶然に任せるかである。
そこから、トップページは現在の左右二面構成へ近づいていった。左に遊ぶ世界とニャビット、右に読む世界とDr.よこぼを置く。「遊ぶ？読む？」とキャラクターの対応も、かなり分かりやすくなった。
ただし、まだヘッダーの情報が多く、左右の色にも十分な差がない。入口を強くしたいのに、上のメニューと中央のボタンが競合していた。
なお、アセット制作中には別の問題も発生した。
「Dr.よこぼを作ってほしい」と頼んだところ、普通の眼鏡の青年が生成されたのである。
確かに博士っぽい。だが、当ラボのDr.よこぼではない。
AIにとってキャラクター名は、こちらが思うほど自明ではないらしい。キャラクターの参照画像と、変えてよい部分・いけない部分を明示する必要性を確認した。
そして現在のトップページがこちらである。
最も大きな変更は、何かを追加したことではない。
ヒーローより下に置いていた紹介、カード、入口の繰り返しを、ほぼ丸ごと削った。
残したのは「遊ぶ？読む？」、二つの入口、ランダム転送、ラボ案内への小さな導線、更新情報、そしてフッターである。ヘッダーもロゴだけに近い状態へ整理した。
せっかく作ったものを消すのは少し勇気がいる。しかし、削ったことで初めて、トップページが説明資料ではなく「ラボの入口」になった。
実験室：明るい展示室から、通電した暗いラボへ
遊ぶ側の「実験室」も、最初はGPTに完成イメージを作ってもらった。
楽しそうではある。しかし、このままだと資料室も似た青い研究所になり、二つの場所の違いが出ない。
実験室は、読む場所ではなく、触る、起動する、試す場所である。そこで全体を暗くし、装置の光や画面が浮かび上がる方向へ寄せた。
序盤から中央に置きたかったのが、ニャビットのホログラムである。
この段階では、ニャビットは止まった画像だった。その後、背景、投影シリンダー、ニャビットを別々のアセットに分け、ニャビットだけに走査線、明滅、浮遊、グリッチをかけられるようにした。
背景にシリンダーを焼き込み、猫だけを別に置いたときは、画面サイズが変わるたびに猫が筒から漂流した。シリンダーとニャビットを同じ箱に入れて一緒に拡大縮小することで、ようやく筒の中へ収まった。
カードの情報もかなり削った。世界観や説明をカードへ詰め込まず、状態、タイトル、短い説明、起動と研究ログへの導線までにした。
遊んで終わりではなく、そこから資料室の試行錯誤へ移れることも重要だった。「遊ぶ」と「読む」は、別々のサイトではなく、同じ実験の表と裏である。
資料室：実験室の色違いをやめる
資料室も、最初はGPTにイメージを作ってもらった。
単体では十分に研究所らしい。しかし初期の実験室と並べると、どちらも青い未来研究所である。遊ぶ場所と読む場所が、ほぼ同じ体験になっていた。
そこでClaudeとかなり相談し、資料室はダークグリーンと紙の世界へ寄せた。
実験室は、暗い空間の中で装置を起動する。資料室は、研究ノートを静かにたどる。本文は明朝、日付や実験番号は等幅文字。成功だけでなく、調整中や失敗も同じ時間軸に並べた。
同じラボの中にあることは保ちつつ、画面の読み方は変える。色だけではなく、そこで取る行動からデザインを分けたことで、実験室との対比がようやく生まれた。
ここでも小さな制作実験をしている。資料室のニャビットは、3Dキャラクターではなく、研究ノートの挿絵のような単色線画にした。
生成時には背景をピンクにして、あとから透過する。緑の線画とピンクは色が離れているため、背景を抜きやすい。
画像生成で最初から完璧な透過を狙うより、あとで処理しやすい背景色を指定する。この方法は、キャラクターの細い線や表情を残したいときにかなり有効だった。
ラボ案内：最も迷ったページは、Fableで着地した
最後が「ラボ案内」である。
旧サイトにあった「よこぼのAIラボってどんなところ？」という説明を引き継ぎながら、現在のラボ全体を案内するページにしたかった。
まずGPTに作ってもらったのが、こちらのイメージである。
ラボの説明は分かりやすい。だが、白く清潔な研究所を目指した結果、かなりクリニック感が出た。
そこで「説明ページ」ではなく、館内に置かれている案内冊子にしようと考えた。
方向としては近づいた。しかし、まだ何かがしっくりこない。トップ、実験室、資料室が強い世界を持ったぶん、普通の紹介ページでは弱かった。
このページは、かなり格闘した。
最後はFableにも相談し、ページを「説明の一覧」ではなく、ラボの思想と館内をたどる体験として組み直した。
現在のラボ案内には、Fableの提案したテイストがかなり入っている。
実験室や資料室へ誘導するだけでなく、そもそもこのラボは何をする場所なのかを伝える。AIで何かを完成させる場所というより、AIで遊び、その途中で起きた変化を観測する場所である。
ラボ案内は補助ページだと思っていた。しかし実際には、サイト全体の意味を最後に決めるページだった。
今回わかったこと
今回の大改修では、ページごとにかなり違う問題が発生した。
トップページは、作ったものを削れなかった。実験室は、資料室との差が出なかった。資料室は、実験室の色違いになりかけた。ラボ案内は、研究所を目指してクリニックになった。
どれも、装飾を足すだけでは直らなかった。
そのページで何をしてほしいのかを決め、役割に合わない情報を捨てる。必要なら画像生成AIへ戻り、別のAIにも相談し、実装してからもう一度考える。
そうして最終的に残った構造は、かなり単純である。
- トップページで、遊ぶか読むかを選ぶ
- 実験室で、実際に触る
- 資料室で、試行錯誤をたどる
- ラボ案内で、この場所の意味を知る
情報量を減らしたのに、以前よりラボの全体像は伝わるようになった。
サイトを大きくしたかったはずなのに、最後にやったことは大幅な引き算だった。
極めて興味深い観測結果である。（Dr.よこぼ）