FUKUDOYA Web Renewal

このウェブサイトをリニューアルした。ここ数か月、AIと一緒に作業する中で、私にとって初めての経験が次々とあった。その過程を記録として残しておきたいと思い、このページを作ることにした。

2013年頃から古いウェブサイトを作成・更新していたのだが、レスポンシブデザインではなく、スマートフォンでは使いにくかった。次第に更新する意欲も薄れていった。そんな中、2026年4月、ロンドンのウェンブリー・アリーナでBABYMETALのライブを見てからちょうど10年になったので、記念のページをサイトに追加した。そのページはChatGPTに相談しながら作った。やり取りが思っていた以上にスムーズだったので、サイト全体をリニューアルしてみようと考え始めた。

旧サイト「Fukudoya Gallery」のランディングページ

プロンプトをどう書けばよいのか、どこまで詳しく伝えればよいのかといった知識は、ほとんどなかった。そこでまず、旧サイトの代表的なページのスクリーンショットをアップロードし、右側のメニューをインタラクティブにできるか尋ねてみた。正確な言い回しは覚えていないが、この程度の静的ページならCodexを使わなくても対応できる、というような回答だった。

ところが、あるページを作り始めると、うまく進まなくなった。イメージと違うので修正を頼むと、回答はだんだん複雑な方向へ進んでいく。違うと指摘すると、さらに話が絡まっていった。履歴を確認して、却下した案を復活させないように頼んだところ、今度は最初の頃の状態に戻りかけ、また同じところをぐるぐる回り始めた。だんだん腹が立ってきたのでCodexに頼んでみた。すると、問題はあっという間に解決した。修正案を示すだけでなく、フォルダー内のHTMLやCSSまで書き換えてくれた。これがうれしくて、それ以降、コードについてはCodexに大いに助けてもらうことになった。

ChatGPTには、日本語原稿の構成確認や校正、修正案の提案、英語の推敲を頼んだ。Geminiには、参考資料を探してもらったり、事実関係を確認してもらったりした。これが正しい使い分けなのかは分からないが、少なくとも私には、この進め方がいちばん自然だった。

サイト全体のデザインを形にするうえで、圧倒的に時間がかかったのがガラパゴスのページだった。

旧サイトにもガラパゴスのページはあったので、新しいフォーマットに移し替えるだけなら簡単だと思っていた。ところが作業を始めると、昔の文章では物足りなく感じ、あらためて調べ直すことになった。記念に取っておいたパンフレットなどをクローゼットの奥から引っ張り出し、細かなことをいくつも確認し直した。動物や植物の名前を記録していないものも多かったので、ChatGPTとGeminiにはずいぶん助けられた。写真とパンフレットを目で見比べるだけで一つひとつ特定していたら、おそらく10倍の時間がかかり、それでも分からないものがたくさん残っていただろう。

左：Galapagos Travelogue、右：Galapagos Photo Gallery

画像の配置もさまざまな方法を試し、このページを作りながら、サイトで使うレイアウトの多くが生まれた。特にフォトギャラリーには時間がかかった。現在のスタイルにたどり着くまで何日かかったのかは覚えていないが、かなり長くかかったことだけは確かだ。旧サイトでは、画像をブラウザーいっぱいに一枚ずつ表示していたため、写真が全部でどれくらいあるのか、全体像をつかみにくかった。今回まず考えたのは、旧サイトのランディングページのように画像をタイル状に並べ、クリックすると拡大する方法だった。途中でさまざまなレイアウトを試したが、最終的には最初の案に近い形に落ち着いた。自分でも気に入っているレイアウトの一つになった。ただし、この形式は画像の数が多くないとあまり面白くならず、キャプションも付けられない。その後に作ったページでは、旅行記で採用した3列の画像グリッドを使うことが多くなった。

驚いたことの一つは、「HTMLで作られているウェブサイトは全体の約30％しかない」とも読める情報を目にしたことだった。調べてみると、これは今風の大げさな見出しのようなものだった。実際には、ほとんどすべてのウェブサイトがHTML、CSS、JavaScriptで作られている。「30％」というのは、複雑なプログラミングを必要とせず、主にデザインとHTML・CSSのコーディングで構成される、比較的シンプルな制作案件を指していた。それを知って安心した。JavaやPythonで作る複雑なサイトが主流になり、自分はまた時代遅れの方法を選んでしまったのかと一瞬心配したが、取り越し苦労だった。

画像はWebP形式にするのが望ましいということも知らなかった。JPEGより効率がよく、画質を保ちながらファイルサイズをおよそ30％軽くできる。必要以上に大きな画像を使わないよう、AIからも何度も指摘された。旧サイトを見返すと、巨大なファイルがいくつも見つかった。表示が遅いことには気づいていて、画像ファイルが大きいからだろうとも思っていたのに、直さずにいた。画像最適化の重要性を、私はすっかり甘く見ていた。

CSSが大きく変化し、進化していたことにも驚いた。新しい制作では、jQueryがもはや必須ではないことも知った。何より大きな違いは、Internet Explorerへの対応を心配しなくてよくなったことかもしれない。正直に言えば、昔も面倒になるとIE対応は無視しがちだった。

こうして文章を書いたりコードを触ったりしていると、時間を忘れてしまう。画像のレイアウトがようやく思い描いたとおりに動いたときは満足感があるし、文章を書くことで小さな発見があったり、記憶をもう一度見つけたりすることも、ただ楽しい。

サイトをリニューアルするにあたり、日本語だけじゃなく英語も欲しいと思った。方法論として、最初は日本語と英語を左右のコラムに並べる形式にして1ページ作ってみた。それなりに収まっていたのだが、次のページを作ろうとすると、すぐに行き詰まった。段落はやたらと長くなる。英語と日本語では、ジャスティフィケーションや行間、フォントサイズなど調整すべき点も違う。もちろんCSSで切り替えることはできるが、作るときの複雑さが半端ない。

それで、日英それぞれのページを分けてミラーリングすることにした。画像やhtmlの記述はほとんどそのまま使えるので、結果として、その方が楽だったかもしれない。

女房殿に相談したら「けちくさい。今時、機械翻訳で多言語化したら？」とハッパをかけられた。なるほどではある。AIに相談したところ、Google Translate のウィジェットで翻訳させるようにUIを組み込んだらどうかという提案があった。それで、英語のページにそのウィジェットを入れてみた。日本語から翻訳するより、英語からの方が自然に訳せるのではないかと思った。すると、英文のページがアラビア語に変わるじゃないか！ただし、リンクなどは消されていてPDFファイルのようなページになる。今さらながら技術の進歩には驚かされる。すると、英文のページがアラビア語に変わるじゃないか！

これで、女房殿にも「できたよ」と胸を張れるようになった。それだけでなく、さまざまな言葉を使う人にも少しは優しいサイトになったと思う。

本語版を読んでいる方にも、その面白さを一度体験してもらいたいと思う。

ライブコンサートで一緒になる知人たちの間では、「最新が最高」という言葉をよく聞く。今回作ったページについては、少し違うように思う。新しいページほど、それまでに蓄積した知識が多く反映されているのは確かだが、結局は内容のほうが大切だ。題材や場所そのものの価値、写真の質、物語の強さがうまく重なったとき、そのページはよくまとまったと感じる。自分のページに順位を付けるつもりはないが、現時点で特に気に入っているのは次の三つだ。

先に書いたように、Galapagos Photo Galleryには多くの時間をかけたので、強い思い入れがある。Lofotenは、何より写真が気に入っている。そしてASTERISMのページは、自己満足にすぎないかもしれないが、バンドの魅力をうまく引き出せたと感じられる写真が好きだ。

こうして私は、このウェブサイトを作ってきた。旧サイトに比べればページ数はまだずっと少なく、書きたいこと、というより記録として残しておきたいことがたくさんある。AIには助けてもらったが、結局のところ、作業とは画像を整理し、言葉を練り直し、自分が残したい記憶を形にすることなのだと思う。その記録が誰かのもとにも届くなら、さらにうれしい。

8月1日の公開前に Opening set を作成していたら、その時点で作成中の1ページをなくしてしまった。探したけどVS Codeのタイムラインにも、バックアップにもないしと慌てたが、英語版が残っていたので、これから復元することができた。英語版をもとに日本語へ戻した文章だったが、AIがこれまでのやり取りを踏まえてくれたのか、元の日本語より素直になったような気もした。AIは、私の文章をゼロから作ることはできないが、ブラッシュアップは得意なようだ。