やってやりましたよぉ！
デザイン決まったぁ
計画編ではどんなデザインにするのかまで決定。更にページ内の細々とした部分をClaudeと共にあーでもないこーでもないと決定していった。内容としては宿泊レビューで使う「宿泊先を詳細に表示するブロック」や「PCで表示した際の記事ページ横をどうするか？」「記事ページ下はどんな内容を表示するのか？」という部分も記事にするととんでもねぇ量になるところまで全て消化し終えた。
ということで、ここからはいよいよ実装！
と行きたいところだが、Claudeは「テスト環境を作り、そこで色々と試してから本番環境へ移すべき」と言ってきた。またデザインを決定したと同時にデザイン更新するまでの手順というか流れも同時に作ってもらうことに。
大まかな流れとしては、
デザインの決定→テスト環境構築→テスト環境でWebデザインを更新→問題なければデザインを本番環境へ
という流れが望ましいらしい。本当、素人に一つ一つ教えてもらってアリがてぇ。では実際にやってみることにいたしやしょう。
テスト環境構築
それにしてもテストとは一体何だべね？ということなのだが、Claude曰く決まったのは「設計図」なのであって、皆さんに見せる前には「テスト」をする必要がある。枠を組み立てたのは良いが脆い状態のまま見せるのは非常に危険だろうぉ？ということだ。
テスト。なーる。そりゃそうだ。ということでここからはテスト環境を構築する。
自分が使用するサーバーはエックスサーバーのレンタルサーバー。このサーバー内にテスト環境を構築する必要がある。本番環境というのは今御覧頂いている状態を指している。
ここからは非常にニッチでつまらない人はつまらない内容になる。まぁこういうのに興味がある人がここにたどり着いているはずだ。そう考えれば気楽になる。
本番環境にClaudeにあれこれお願いして実装することはできる。ただ、もしその途中でこれから使用するデータを削除してしまったり、何らかの影響で表示が崩れてしまった場合にはそれに対処する必要がある。そしてその対処内容によってはサイトを閉鎖する必要があるのだ。
まぁ別に閲覧数は少ない当サイト。閉鎖したって問題はねぇだろと思ってしまうが、対処しきれず公開を終了するというのは一番もったいないことだ。なので、本番環境を全てコピーし、擬似的環境下で同じデータを使用しつつデザイン更新を図ろう。というのが今回の目的だ。
エックスサーバー内にはそれを想定した機能が用意されていて、テスト環境を簡単に構築できるようになっている。ちなみにエックスサーバーでは紹介キャンペーンもやっているよ（大宣伝）
しかし、このコピーは自分にとってかなり厄介だった。写真を大量に使用するようなサイトだと画像一つ一つをサーバー内に保存しているからか、何十GBもコピーすることになり、全然コピーが終わらねぇ！エラー出てきて勝手に終わったぁ！ということが何度も。
もし同じようなことを考えている人がいれば、サイトの根幹部分であるテンプレートだけをコピー→プラグインを使用して本番環境のデータを入手するというのが手っ取り早いだろう。
コピーは結局2日も掛かったし、更にはこのサーバー内に侵入されるのを防ぐSSH認証とBASIC認証も必要。素人が手を出すなんて面倒なものばかりである。
また後ほど登場するClaude Codeとサーバーを接続する手順も踏む必要がある。
コンピュータ同士での接続に使用するFTP通信というのがここで登場するのだが、Claudeに「あぁ適当に繋げちゃって！」なんて指示もすることも可能ではある。
ただ、それをすることで本番環境全て大大大大削除というパワープレーをぶちかましてくるやもしれない。なのでそれを避けるためにも色々と設定が必要。テスト環境内の特定フォルダだけアクセスできるようにする設定もここで重要になる。
ここでのやり方は全てAIに教えてもらったのだが、AIが無かったらこんなことヤラねぇぞ！という気分である。しかも記事としてはあまりにもマニアック過ぎる内容になっていて、人を選ぶことをしてんなぁと思うのである。
いよいよClaude Codeへ
Claudeのチャット機能からいよいよバイブコーディング機能であるClaude Codeへ。自分が使用するレンタルサーバーと接続、サーバー内に保存しているサイトの根幹部分であるHTMLファイルへアクセス、Claude Codeを使ってHTMLの書き換えをしてもらうという内容。
今回のClaude Codeを使用するまで自分のイメージとしては「サイトのHTMLを全て書き換え」てから更新だと思ったのが、サイト内の「それぞれの箇所を書き換えて、問題なければ次へ」という形が望ましいという。問題が発生した時に切り分けができるし、特定することが容易になるからだそう。いや本当、冷静に考えれば確かにそのとおりだわ。
では実際に置き換わっていった流れを画像と共に見ていこう。まず記事ページのタイトル部分から。
記事ページ
まず旧デザインを見てもらいたい。以下は映画バイオハザードについての記事を引用したものだ。
旧デザインを見てもらうとわかるが、記事画像→タイトルという順番だった。それが、新デザインに更新してみると、
今回のデザイン更新によってタイトル→記事画像にすることにした。なぜ順序を変更したのか？理由としては「タイトルを観ることでページが合っているかを閲覧者が把握しやすい」ということだった。やべっそんなこと1度も思ったことねぇぞ。
この時点でタイトル部分以外は何も変わっていないことがわかる。すごいねぇ。こんな部分的に変えられるのかぁ。
注目してもらいたいのがヘッダー（画面上部）のサイトタイトル部分。これはテスト環境を構築した際にアイコンがどこか行った。なので、表示が崩れている。こういうことも起こりうるのでテスト環境は大切なんだねぇ。
次にヘッダー部分と記事横の部分を更新。
実は旧デザインのタイトル部分はというと「アイコン＋タイトル文字」を組み合わせた画像になっていた。本当は「アイコン+文字配列」が出来たのだが、開設当初の自分はそんな機能なんて知る由もなく、突き進んだ。今回でアイコン画像とタイトル表記が独立した状態になっている。いや本当、無学な自分には出来ないことが成し遂げられているね！素晴らしいね！
記事の連載であることを知らせる部分も作ってもらうことになっているが、そこも呆気なく出来てしまった。
本当に「じゃあお願いします」「あっできました」という感じ。人間の手は全く加えられていない。
トップページ
いよいよトップページを改修。トップページでは純粋に最新記事が並んでいるだけだった構造が、
最新記事1個を大きくし、見やすくなっている。横にあった「ここ最近の最新記事」という部分を削除することで、競合状態を解消。ちなみにClaudeから「同じ内容の表示がされてますけど？」と指摘されて、えっそうなの？と今更に気づくという有様だった。
またトップページ内のハンバーガーボタンを押すとこれまでは検索やカテゴリーが表示されるようになっていたが、今回の更新に伴い、
カテゴリーや連載へすぐにアクセスできるようになっている。
更新による速度
当サイトでは長らく「表示速度の遅さ」をGoogleから指摘され続けてきた。3000文字程度で写真が数枚のページでも数秒待たないと表示されないという問題があり、それを解消⋯できていなかった。だってやり方がわからないんだもん！
今回の更新によって、記事の表示速度によるスコアはご覧の通り。
めちゃくちゃ改善されているっ⋯！ただ記事の表示速度は「広告の有無」や「画像数」によって変化する。また閲覧する側の環境にも左右されるので、改善と一概には言い切れない。
AIがあったから出来たけど、
今回はClaudeを使って更新したが、自分で操作する必要のある箇所はいくつもあったので完全にAIがやってくれた訳では無いことをご承知願いたい。
特にサーバーと接続する部分に関してはAIが触れると逆にデータの喪失を引き起こしかねないし、セキュリティ面でもリスキーなものだ。更にはWordPress側でもHTMLの書き換えはできるけど、追加した内容を反映させるであるとか、データ管理であるとかも自分で操作する必要がある。
デザインについても出力されたものを適当にOKしまくっていると、もしかすれば他のサイトと似通った部分があったりして著作権違反にもなる場合がある。AIが提示したものを黙って認めているととんでもないことになりかねない。
結局、使う側である人間にもある程度の知識は必要だ。
今回の更新によってAIって便利だねぇという陳腐な感想で納めようと思うが、本来であれば自分が勉強し知識として吸収し活用するという部分が薄まっているのがちょっと気になるかなぁというところだ。
しかし、逆にAIを使わないでどうするの？という時代が迫ってきているのかなぁと思う体験だった。
というわけで更新しました
3年目に突入して初めてデザインを更新しました。以前の如何にも素人感満載のよりかはClaudeのおかげで変えられた部分は多いのかなと思います。
しかし海外のニュースサイトに影響受けすぎだなぁと思ったりしています⋯白と黒でサイトを構成するとどうしても似通う部分はあるのかなと勉強になりました。
3年目は色々とこのサイトを活用していきたい所存です。というところで、今回はここまで。あとYouTubeもやってるから見てねぇ。
