Webサイト構築記

はじめに

きっかけは、ごく単純なことでした。AIが書いた論説文が、面白かったのです。

存在しない現象を、大真面目に、異常な解像度で論じてみせる架空の論文。そういうものをAIが書けると知って、何本か読みました。一本だけ読むと「よくできた冗談」で終わるのですが、何本か続けて読むと、様子が変わってきます。実在しない研究分野に、実在しない研究者たちがいて、実在しない先行研究を引きながら、大真面目に議論を積み上げている。冗談が集まると、冗談の向こうに「世界」が透けて見えてくる。そうなると欲が出ます。こういう本が沢山並んでいる空間が欲しい。棚に背表紙が並んでいて、ふらりと入って一冊抜き出せる、そういう場所です。紙の建物は建てられませんから、建てるならウェブサイトということになります。

ちょうどその頃、Claude の新しいモデルである Fable 5 が登場しました。触ってみて驚いたのは、俗に「ポン出し」と呼ばれるやつです。細かい注文を積み上げなくても、ぽんと投げた一言から、驚くほど整ったデザインが返ってくる。それを眺めているうちに、「公開はしなくても、ローカルでいいから、Webサイトを作ってみたいなぁ」と思い始めました。狙いも計画もない、本当にその程度の思いつきです。せっかくなら、この新顔に図書館を建てさせてみよう。そう思い立ったのが、この構築の始まりです。

先にお断りしておきますと、この記事は「最新のAIに頼んだら一発で凄いものが出てきました」という自慢話ではありません。私にはデザインの心得がありません。腕利きの発注者ではなく、図面も引けないのに「なんとなくこう」と感覚で注文を出す施主です。読者の中に「自分にはAIに的確な指示を出す技術がないから」とためらっている方がいるなら、安心していただきたいのですが、私の指示は最後まで的確ではありませんでした。

それでも図書館は建ちました。なぜ建ったのか。振り返ってみると、効いていたのは Fable 5 の生成力そのものというより、もっと地味で、もっとありがたい別の力でした。入り口では「ポン出し」の派手さに目を奪われていたのに、出口で感謝していたのは、まるで別の力だったのです。この記録は、その話です。

第一章 進め方は、考えていませんでした

正直に書いておかなければならないことが、まず一つあります。この構築で採った進め方は、私が考えたものではありません。それどころか私は、進め方というものについて、考えることすらしていませんでした。

最初にClaude（Fable 5）へ渡したのは、「図書館みたいなサイトを作りたい」「空想論文を並べたい」という程度の、漠然としたひとことでした。要件も、段取りも、完成図もありません。それをどう工事に落とすのか、どんな順番で進めるのか、相談を持ちかけた記憶すらないのです。頭の中にあったのは「図書館っぽいサイト」というもやもやだけで、私はそれを、もやもやのまま投げました。

すると、気がついたら工事が始まっていました。Claudeはまず、動くだけの最小の骨格をさっさと建てて、「実物を見て、感想を聞かせてほしい」と言ってくる。感想を返すと、それを手がかりに直して、また見せてくる。設計図を完成させてから着工するのではなく、粗くてもいいからまず建ててしまって、住みながら改修していく方式です。私はこの流れを求めたわけでも、選んだわけでもありません。頼んだ覚えのない進め方が、向こう側から自然に始まって、気がつけば私はその上に乗っていたのです。

そして、この型が私のもやっとした要望には驚くほどよく合いました。何しろ施主本人が「何が欲しいか」を言葉にできていないのです。完成図を先に描けと言われたら、そこで工事は止まっていたでしょう。逆に「まず建ててから文句を言ってよい」のであれば、文句なら言えます。感想なら、いくらでも出てくるのです。人間は、白紙を前に「欲しいものを述べよ」と言われると黙り込むくせに、実物を前にすると「ここが違う」だけは即座に分かる生き物なのだと、このとき教わった気がします。

というわけで、この構築の方法論は、初手からして借り物です。しかも、借りた自覚すらない借り物でした。強いて私の判断らしきものを探すなら、流されながら「これは楽だ」と気づいて、逆らわなかったことくらいでしょうか。そしてこの「逆らわなかった」ことが、結果的には構築全体で一番の好手になりました。

最初の骨格が、いきなり好みだった

そうして建った最初の骨格（装飾もそこそこの、動くだけの最小のサイト）を開いたときのことは、よく覚えています。

いきなり、好みだったのです。

和風で、落ち着いた雰囲気。本文は明朝体で、どこか格調高い佇まい。派手さはないのに、ページを開いた瞬間に「古い書院に入った」ような静けさがある。感想を重ねて少しずつ好みに近づけていった、という話なら美談として分かりやすいのですが、実際は違いました。初手で、ほぼ当てられていたのです。

ここで白状しますと、私は最初にClaudeへ何を伝えたのか、もうよく覚えていません。図書館を作りたい、空想論文を並べたい、その程度のことは言ったはずですが、「和風で」「明朝体で」「落ち着いた」と注文した記憶がないのです。それでもこれが出てきた。自分の伝えた言葉の端々に、自分でも気づかない好みがそれだけ滲んでいたのか、それともClaudeが「空想論文の図書館」という題材から、あるべき佇まいを逆算したのか。おそらく両方なのでしょうが、当の施主が発注内容を覚えていないのに、好みの建物が先に建っている。この状況には、驚きと一緒に、妙な可笑しみがありました。注文を思い出せない客の前に、注文どおりの品が置かれているのです。

そして、このとき初めて実感したことがあります。私は画面を見ながら、「ああ、そうそう、こういうサイトにしたかったのだ」と思っていました。順序が逆なのです。欲しいものを言葉にして、それが形になったのではない。形を見せられて初めて、自分が何を欲しかったのかが分かった。この後の構築は、ずっとこの感覚の繰り返しになります。

第二章 感想文で、建てる

骨格ができてからの作業は、傍から見ればずいぶん奇妙なものだったと思います。私のやっていたことは、設計でも指示でもなく、ほとんど「感想文の提出」でした。学校の宿題なら読書感想文は書かされる側ですが、この工事では、感想文こそが施主の出せる唯一の建材だったのです。

手元ですぐ実物のサイトを開ける状態にしてもらっていたので、私は暇があればページを眺めては、「なんかここが足りない気がする」「ここだけ落ち着かない」と、症状だけを返す。原因の分析はしません。できないのです。医者にかかる患者と同じで、私に言えるのは「ここが痛い気がする」までであって、病名は分かりません。するとClaudeが原因を特定して、表面を取り繕うのではなく、本質から直してくる。直ったものを見て、また次の「気がする」を探す。この往復を、ひたすら繰り返しました。当館は設計図の上にではなく、この往復の積み重ねの上に建っています。

たとえば、背景です。あるとき私は「画面の背景に、縦横の線みたいなものが見える気がする」と伝えました。気がする、というだけの、我ながら頼りない申告です。線がどこにあるのか指も差せません。ところがClaudeは、背景に敷いていた模様が一定の周期で繰り返されるために、その継ぎ目が薄い線として浮いて見えるのだと突き止めて、周期がぶつからない作りに背景そのものを組み替えてきました。「線を薄くしてごまかす」のではなく、線が生まれる仕組みごと直してきたわけです。直した後の画面から、私の「気がする」は綺麗に消えていました。

論文の一覧が「横に余裕があるとき、左に寄っていて据わりが悪い」と伝えたときも同じでした。私に分かるのは「なんとなく左に寄って見える」ことだけでしたが、返ってきたのは並べ方の仕組み自体の直しで、以後どんな画面幅で開いても、一覧は気持ちよく中央に収まるようになりました。ほかにも、ページの上に重ねて出る小さな添え書きが「真上に出るのは、なんだか違和感がある。右上のほうが好みかもしれない」と伝えれば、すっと右上に移る。症状を渡すと、病巣から治って返ってくる。施主としてこれほど楽なことはありません。

このとき私が守っていた作法は、たった一つです。分かったふりをして原因や直し方を指定しないこと。下手に「ここの余白を何ピクセル詰めて」などと口を出すより、「据わりが悪い」「理不尽な感じがする」と症状のまま渡したほうが、結果的に深いところから直ってくる。感想文は、下手に清書しないほうがよく効く薬でした。

紙のトーンと、縦書きの文庫本

こだわりとして自分から先に注文をつけられたものも、少しはあります。その筆頭が、紙の質感でした。真っ白な画面ではなく、日に焼けた生成りの紙の色。文字は墨の色、差し色にはほんの少しの朱。古書のページを開いたときの、あの落ち着いた温度をサイト全体に持たせたい。これは珍しく私が先に言葉にできた要望でした。

理屈をつけるなら、こういうことになります。当館の蔵書は、存在しない現象を大真面目に論じた空想の論文です。あれを真っ白でつるつるした画面に載せると、どうしても「ウェブ記事の冗談」に見えてしまう。ところが日焼けした紙の色に墨の文字で組むと、同じ文章が「どこかの書庫で埃をかぶっていた文献」の顔になるのです。内容が空想だからこそ、器は本物の古書らしくあってほしい。Claudeは色味の調整を重ねながら、画面の中にその温度を作っていってくれました。いま当館のどのページを開いても、うっすら日焼けした紙の上に墨で刷ったような文字が載っているはずです。

そして、当館で私が一番気に入っている機能の話をさせてください。縦書きモードです。

論文を、縦書きで読めるのです。画面の中に和書の紙面が現れて、行が縦に流れ、ページが右から左へ進んでいく。すべての環境向けというより、いわば限定版の道楽のような機能ではあるのですが、初めて動いたときは本当に嬉しかった。文庫本を広げているみたいだ、と思いました。横書きの画面で読んでいたときには「よくできた記事」だった空想論文が、縦書きの紙面に組まれた途端、急に「蔵書」の顔をし始めたのです。ウェブサイトを作っていたはずなのに、画面の向こうに「本」が現れた瞬間でした。図書館を名乗るからには、これは譲れない道楽だと思いました。

ただし、最初の版から完成していたわけではありません。むしろ初版の縦書きモードは、けっこうな暴れ馬でした。スクロールの向きが直感と合わず、読み進めようとするたびに理不尽な方向へ画面が動く。ページの前後が逆で、めくったつもりが戻っている。半角の数字が横に寝てしまって、縦に流れる行の中で数字だけがごろりと転がっている。せっかくの文庫本が、ところどころ乱丁の文庫本だったのです。

私はそのたびに、また感想文を書きました。「スクロールが理不尽です」「前と後ろが逆な気がします」「数字が寝ています」。それだけです。どう直せばいいかは一言も言っていませんし、そもそも縦書きの画面がどういう仕組みで動いているのか、私は知りません。面白いのは、これらの違和感のどれ一つとして、作らせる前に注文できたはずがない、ということです。「半角数字が寝ないようにしてください」と最初から言える施主がいたら、その人はもう施主ではなく職人でしょう。違和感は、実物を読んでみて初めて生まれる。だから感想文は、実物の後にしか書けないのです。それでも感想を返すたびに版が改まり、初版、第二版、第三版と重ねるうちに、縦書きモードは少しずつ和書の読み心地に近づいていきました。いま当館で縦書きの論文を開くと、行は素直に流れ、ページは正しい向きにめくれ、数字はちゃんと起きて座っています。あれは「Claudeが作った機能」というより、「感想文で磨いた機能」と呼びたい出来事でした。刷りを重ねて良くなっていく本のようで、この磨いていく時間そのものが、構築の中で一番楽しい時間だったかもしれません。

第三章 図書館に、水は流せない

一方で、私の側から「入れない」と決めたものの話もしておかなければ、記録として公平ではないでしょう。

構築の途中で、水が流れるような美しいUIを見かけたことがありました。画面の中を、本物の水のように光る流体がゆらゆらと流れ、触れれば波紋が広がる、三次元の表現です。技術的にはWebGLというもので描かれているそうですが、仕組みはともかく、見た目が実に綺麗でした。あれも素敵だな、当館のどこかに流せないかな、と一瞬、本気で心が動いたのです。玄関のあたりに水音がしたら涼しげではないか、などと考えかけました。

しかし、そこで我に返りました。考えてみてください。ここは図書館です。

図書館の中に、水はいけない。本が腐ります。

蔵書があるのは架空の論文ばかりで、濡れて困る紙は実のところ一枚もないのですが、それでも駄目なものは駄目です。当館は私の中では、ちゃんと屋根と棚のある「建物」なのです。湿気は書物の大敵。書院の床に水路を引く館長が、どこの世界にいるでしょうか。

もっとも、白状しますと、水そのものを憎んでいるわけではありません。本義はあくまで「蔵書のそばに、水を近づけない」です。棚から十分に離れた場所であれば話は別で、たとえばいつか中庭のようなものを設けることがあれば、そこに小さな水路が流れるのは、案外ありかもしれないとさえ思っています。せめて閲覧席から離れた廊下の隅に、ウォーターサーバーの一台くらいなら、置いてやってもいい。しかし、書棚の真横は駄目です。あれだけは絶対に駄目です。というわけで、あの美しい三次元の水流体は、少なくとも書棚の見える範囲への立ち入りを禁じました。技術に罪はありません。ただ、蔵書の隣の敷居をまたがせるわけにはいかなかった。あの水は、いまも当館の外のどこかを流れているはずです。中庭ができる日まで、ということにしておきましょう。

笑い話のようですが（実際、半分は笑い話ですが）、この一件は自分にとって少し大事な確認でもありました。感想文で建てるやり方は、放っておくと「素敵なもの」を際限なく取り込みかねません。世の中には綺麗な部品がいくらでもあって、Claudeに頼めばたいてい付けてくれるのです。そこで最後の関所になるのは、この館がどういう場所なのかという世界観でした。綺麗かどうかではなく、この建物のこの場所に置いてよいものかどうか。「これは違う」という感想が館を磨いたのと同じように、「これは素敵だが、うちの棚のそばには置けない」という判断が館の輪郭を守る。原因の特定も修理もClaudeに任せきりだった私に残された数少ない仕事が、この敷居の番でした。そして白状すれば、あの水を棚から遠ざけた瞬間が、自分がこの館の「館長」なのだと一番はっきり自覚した瞬間でもありました。

ついでに言えば、館の名前を決めたのも施主の仕事でした。Claudeに候補をいくつか挙げてもらい、その中の言葉を掛け合わせて「空想書院」と名付けたのです。建てたのはClaude、磨いたのは感想文、それでも表札だけは自分の手で書いた。施主の仕事は少なかったけれど、無くはなかった、ということにしておいてください。

第四章 正直なところ

さて、構築を終えての正直な考察です。

まず認めてしまいますと、私では、おそらく Fable 5 本来の魅力を十分には引き出せていないと思います。世の中には、このモデルの生成力を限界まで使い倒すような、もっと高度で複雑な仕事があるはずで、当館の構築はそういう仕事ではありませんでした。静的なサイトを一つ建てるのに、最新のモデルが必須だったかと問われれば、正直、分かりませんと答えるほかありません。「Fable 5 だからこそ建った図書館」と言い切る資格は、私にはないのです。

それでも、これだけは実感を持って言えます。「曖昧な不満を汲む力」には、めちゃくちゃ助けられました。

「なんか線が見える気がする」「据わりが悪い」「スクロールが理不尽」「数字が寝ている」。この記録に出てきた私の発言は、要するに全部これです。仕様でも指示でもない、ただの感想文。人間の職人さんに渡したら困り顔をされそうな申告ばかりです。それを受け取って、症状の奥にある原因を特定し、表面ではなく本質から直してくる。しかも直しの説明を求めれば、素人の私にも分かる言葉で返してくる。この力がなければ、欲しいものを言葉にできない施主の工事は、早々に頓挫していたはずです。

これは、多少コードを書く人間として少し補足しておきたいのですが、「本質から直す」というのは実は簡単なことではありません。症状だけ聞いて、いかにもそれらしい応急処置を貼って返すことは、いくらでもできるのです。線が見えるなら線をぼかせばいいし、寄って見えるなら余白を足せばいい。けれどそれをやられていたら、当館はいまごろ、継ぎ接ぎだらけの建物になっていたでしょう。感想のたびに原因までさかのぼって直してくれたからこそ、直しが次の直しの邪魔をせず、感想文の反復が「積み重ね」になりました。派手な生成力よりも、この地味な読解力と誠実な工事こそが、当館の本当の大工でした。

一つ、正直な補足もしておきます。制作の初期に、Claudeと一緒に「デザインの4軸」という枠組み（目的・トーン・制約・差別化）で、当館の方針を整理したことがありました。ああいう枠組みは、考えを整理する足場としては確かに役立ちました。自分のもやもやを一度は言葉の棚に載せてみたことで、私とClaudeが同じ地図を見ながら話せるようになった、という意味で、無駄ではなかったと思います。ただ、では当館を実際に立ち上げた主役があの枠組みだったかというと、そうではありません。振り返って主役だったと言えるのは、初手でいきなり好みを当ててきた最初の骨格の良さと、その後の感想文の反復です。立派な枠組みを埋めた時間より、「これは違う」と返し続けた時間のほうが、はるかに館を建てていました。道具は補助であって、主役は対話だった。これが、一度建ててみた施主の偽らざる実感です。

ですから、この構築記に見出しをつけるなら、「Fable 5がすごかった話」ではなく、「感想文が通じた話」がいちばん正確なのだろうと思います。すごいかどうかを判定できるほど、私はこのモデルを使いこなせていません。ただ、通じたことだけは、建った館が証明してくれています。

結び 欲しいものを、作りながら見つける

この構築を通じて私が持ち帰ったものを、一つだけ挙げるなら、こうなります。

「何が欲しいか」を先に言葉にできなくても、いいのです。実物を見て、「これは違う」「ここが落ち着かない」と返し続けてさえいれば、AIはその感想の奥から本質を掘り当てて、形にしてくれます。そして施主の側は、直っていく実物を眺めながら、「なるほど、私はこういうサイトにしたかったのか」と、自分の欲しかったものを後から発見していく。要望が先で、ものが後、という当たり前の順序が、ここでは静かに逆転しているのです。

AIに何かを作らせる話になると、どうしても「うまい指示の出し方」の話になりがちです。けれどこの構築に、うまい指示は一つも登場しませんでした。そもそも進め方さえ、施主は考えていなかったのです。あったのは、下手な感想と、それを汲む力だけです。作ることのしんどさの代わりに、この「発見していく楽しさ」がある。AIと何かを建てることの一番の面白さは、案外ここにあるのではないかと思います。

完成図を描けないことは、もう欠格事由ではありません。感想文さえ書ければ、図書館は建ちます。

最後に、一つ入れ子の種明かしを。「公開はしなくても、ローカルでいいから」と言って始めた工事でしたが、建ってみると人に見せたくなるのが施主というものです。いまあなたがお読みになっているこの記事は、まさにその完成したサイト『空想書院』のトップページから読めるようになっています。感想文で建った図書館の棚に、感想文で建てた顛末の記録が収まっているわけです。存在しない現象の論文ばかりを収めた当館で、この一冊だけは、実際にあったことの記録ということになります。もっとも、「感想文を提出していたら図書館が建った」という筋書きですから、並んでいる空想論文たちと、あまり見分けはつかないかもしれません。初手で当てられた和風の佇まいも、日焼けした紙の色も、感想文で磨いた縦書きモードも、そして書棚のまわりの乾いた床も、すべて実物をご覧いただけます。

さっそく、当館のトップからどうぞ。ごゆっくりお過ごしください。