題名の通り。元々このサイトはテンプレートが微妙という思いがあり、今後10年くらいは耐えうるものにアップデートしたかった。そのついでに、現時点でフロントエンドのデザインをLLMで行うとどうなるのか試したかった。大人の自由研究である。結果としてはぼちぼちなものができた。本記事はその過程を記述する。
研究用ページの作成
博士課程の学生は、基本的には個人の業績を記述するページを作ることが望ましい。会議や就活などさまざまな場面で役立つからだ（まあ、役立つから作るというのも、資本主義的であるが…）。他にも研究室のwebサイトの立ち上げであったり、workshop用のページを即席で作らなければならない場合もある。
楽なのはal-folioというJekyllベースの静的サイト作成ツールを使って、GitHub pagesかCloudflareで公開することだ。al-folioはいわゆるCVやpublication, distill-styleのblog postなど、自分の研究内容を発表する際にあったらいいなと思う機能が搭載されており、ほどほど便利である。実際最近の国際会議のworkshopでも、al-folio使われてるなあみたいなのがぽこぽこある。
欠点としては、Jekyllというプロダクト自体が若干枯れている点がある。まあal-folioを使わない場合だと、今では静的サイトの生成ではAstroを使うのがナウな感じらしいが、そんなページ数が多くなければ気にする必要もないかなという印象もある。
al-folioに関しては、昔はあらゆる機能がてんこ盛り状態でコードベースが肥大化していた点、またフロントエンド側がjQueryとBootstrapの組み合わせで作られていて、一部界隈からは😅みたいな感じだったが、最近だとgemsを使ったプラグイン機構にアップデートされたり、jQuery + BootstrapをやめてTailwind CSSベースにしたりと、いろいろと洗練された形に近づけるよう努力している感じがある。最初はもうやめようかな思ってたけど、まあそれならいいかと撤回しアップデートすることにした。
サイトデザイン
今回は試行錯誤した結果ある程度の知見を得たが、正直なところ本格的な知識があるわけでもないので本当にこのやり方で現時点で正しいのか自信がない。ただ誰かの役には立つとは思う。
まずよく知られていることとして、coding agent使って自己紹介ページをポン出しするとだいたいAIっぽいサイトが出力される。昔で言うBootstrap臭である。これを緩和するための策はいくつかある(調べればskillとか出る)が、あまり個性的すぎるとそれはそれで駄目なので、良い塩梅に個性を出したいという思いがあった。Claude Designを使うとそこら辺の試行錯誤は楽であったので、まずはそこで大まかなキーカラーやレイアウトを決定する。
これで一定程度のサイトは作れるが、綺麗だけどなんか締まらないデザインになりがちだった。やはり画像がないとデザインに制約がある。そこでscreenshotとって、適当な画像生成ツールで無数の案を生成していった。ヘッダ画像なりアイコンを変えて試していく。そうするとこの方向性で良さそうとなるので、それでまた詰めていき、最終的なキー画像を作る。
そんで最後はそのキー画像を元にサイトをちこちこ作る。そこら辺はClaude Code(個人的な雑感だが、現時点ではデザイン系はclaudeが強い)に投げて対話すれば良いのでそこまで苦労する話ではない。ぼくはなんでそうなるの(わら)、まとめられるでしょ、シンプル！ナイトモード対応！レスポンシブ！いけるいける！もっとやれるよ！がんばって！と応援を送ることで解決する。何事もLoveが重要である。
最後の微調整であるが、結局最後はscssよんでソースコード弄って終わってしまった。バイブコーディング失敗である。まあそんな感じで今回のブログができた。肌感であるが、7割くらいの完成度であればポン出しでもなんとかなるが、それを8割から9割にするためにはキー画像からちこちこ作るという往復作業が必要だった。
おわりに
ただそれでも自分の完成度としては9割で、10割にするのはやっぱセンスが必要だなーという実感がある。結局何を伝えたいかというメッセージを持たないとふんわりした感じになって終わってしまう。イチローも感性が大事と言っていた。感性を磨いていくことが今後の社会生活において重要である。LLMを捨て山に登るしかない。コッカラッス！