AIでサイトリニューアルしてみました

アップデートしなきゃと理解しつつも、長らく放置していた自社サイトをこの度リニューアルしました。 これまでのサイトがどちらかと言うと、まるで営業する気のない（笑）ポートフォリオに特化したようなサイトでしたので、もう少し自社のサービスについてしっかりとした説明を取り入れたマイナーアップデートのようなリニューアルです。

個別の案件によって費用感は全く異なるので、あくまでも参考程度ではありますが、各種制作にかかる費用をできるだけ記載するようにいたしました。 これによって少しでも透明性高く、気軽に相談できる要因の一つとなれば幸いです。

さて、以降はこのサイトリニューアルについての裏事情のような内容になりますので、ご興味ある方はこのまま読み進めていただければと思います。

今やすっかり生活に密着しつつあるAI

わたしも数年前からchatGPTをはじめとし、数ヶ月前からClaude codeを使用するようになって、業務にAIが侵食してくる割合がかなり高くなりました。 特に最近は日毎にトレンドのアップデートが目覚ましく、数週間レベルで浦島太郎状態になってしまうような状況です。

取り分け話題になっていたのが、「Claude Design」 これまでのデザインを生成するAIとは一線を画すツールの登場です。 コーディング能力の高い「Claude code」に加えて、デザイン能力の高い「Claude Design」この２つが揃った事で、早速試してみない手は無い！と思い、自社サイトを作り替える事で試してみる事にしました。

とは言え、サイトのデザインコンセプトから作り替えるとなると大掛かりになるので、現状の自社サイトのデザインを踏襲し、足りない要素を追加していく形でアップデートを進めていく方針にしました。

まずはClaude Designに自社サイトのURLを添付し、現状の課題と実現したい事、追加したいコンテンツや情報についてを読み込ませ、提案を待ちます。 画期的なのは、AI側から

「どう言うテイストにしますか？」「Heroセクションのパターンは複数見ますか？」

と、幾つか選択肢の提案をしてくれること。 Web制作者じゃないと指示から漏れてしまいそうな情報をちゃんと聞き返してくれるのは、方向性のズレを小さくするのにとても重要な点。

そうやって生成されたデザインは確かにこれまでのものに比べて段違いに良いものでした。 比較的納得値の高い自分が意図したテイストのものがちゃんと排出される。そう言う感覚だと思います。

ただAIらしい特徴はやはり所々見受けられ、最近では「確かにクオリティーは高いがAI」っぽいものを何となく少しずつ判別出来るようになってきた気がします。それは「何かが破綻している」と言ったものではないので言葉にするのは少し難しいのですが、「整い過ぎている」ことがかえってAI臭を感じさせるのかもしれません…。

話を戻すと、生成されたサイトのトップページデザインをClaude Design上でちまちま修正を入れていたら、あっという間に利用制限がかかってしまいました…。 これは後から学んだ事ですが、Claude Designでは基本的には一発出しで細かな修正は他でやる。と言うのが一番効率が良さそうです。 ちなみにこのClaude DesignはいわゆるJPGのような一枚絵を生成するわけではなくて、コーディングされたデータが生成されてくるのでそのままhtmlファイルをダウンロードすることも可能です。 わたしはそのファイルをダウンロードして、Claude codeでの作業に移行しました。

デザイン生成から「実運用に耐えうるコード」への再構築

この段階で、このファイルをそのままサーバーにアップしてしまえば、

「誰でも簡単にキレイなホームページは作れる」

はある意味では正解とも言えるし正解とも言えない。 なぜならこの段階で生成されたファイルは、見た目は整って見えても、その中身は果たして安全かつ合理的に、そして今後の運用を踏まえた構造となっているのか？と言ったさまざまな側面からのレビューが欠けているからです。

それらを検証するためにClaude codeでの作業を進めます。 誰かが作った家の模型を一旦バラして、中身を確認してまた再構築する。そんな感じの作業。

実際にClaude Designからエクスポートしたファイルの中身を見てみると、CSSはインラインで直書きだし、今後運用・メンテナンスしていくには難しいファイル構造だし、やはり作り直しは必須。こう言った具体的な中身の判別に関してはやはり実務経験者でないと理解できない部分は大いにあるかと思います。

今回リニューアルするにあたり、これまで自社サイトはWordPressで構築していたのですが、今後はAIに更新を投げられるかも？それなら管理画面はもう不要かも。と考え、WordPressでの構築はやめて、Next.jsで静的なページとして構築することにしました。 それから作業に必要な情報を更に揃えます。

・技術スタックの選定 ・アクセシビリティ ・htmlセマンティック ・CSS記述のルール、コンポーネントの考え方 ・ファイルの命名ルール ・構造化データ ...etc

色々ありますが、普段サイト制作する上で考慮すべき点を予め制作のお作法としてまとめます。 それらを読み込ませた上で、ようやくClaude Designで作ったファイルを構築し直していきます。 AI運用する上で、何気にこの「お作法」を準備するのが一番大事で、たぶん一番時間がかかるところかもしれません。ただ、最初にこれを整理できればあとは案件毎に多少ブラッシュアップすれば良いので、2回目以降は楽になるかと思います。

ただじゃぁここまでの流れをWeb制作者じゃ無い人がやるか？って言われると、正直難しいと思います。 もちろん今後更にAIの性能は進化していくとは思いますが、現時点でもそれなりに人が判断すべき点がまだ結構あるので、完全に消えるのはまだほんの少し先かもしれません。

これだけお作法を準備しても、いざ制作を始めるとあれやこれやと気になる点が出てくるのもリアリティ。

やり始めて「あぁ、これはもう完全に転換点かも…」と思ったのは、CSSのちょっとした修正も勿論自分でも出来るのだけど、該当ファイルを探して、該当行を見つけて…って言うのが段々面倒になってきて、自然言語でAIに修正させることが多くなってきて、結果的に自分でコードを書く機会がかなり減りました。

ただ現時点では「自分でも修正出来る」と言うのがミソで、これはCSSに限らず色んな側面でも同様のことが言えます。 なぜならAIが使用出来ないトラブルが発生した時に手動で対応しなければいけないこともあるからで、そこまで対応できてようやくクライアントワークでも使えるのかなと考えます。 実際に今でもAIはトークンの消費が激しく、高確率で使用制限に達してしまうことも多いです。 そんな時は、渋々自分の手を動かします。（笑）

そうやって仕事の合間にちまちまリニューアルを進めて数日。なんとかリリース出来るまでになりました。作業期間は流石に1〜2日と言うわけにはいかないけれど、着手し始めてから1週間と少しくらいでしょうか。 デザインコンセプトやコンテンツも丸っと全部作り直しだったらもう少しかかったかもしれないけれど、アップデート的なリニューアルならこのくらいがリアルな作業日数かもしれません。

これまでならWordPressで構築してたサイトをNext.jsで作り直してデプロイまで進めるとなると流石に最低でも1ヶ月以上はかかるはず。それがこの期間で出来るのはやはり驚異的です。（ほとんどコーディングをしないと言うのが一番大きい）

AI導入でWeb制作の「工数」と「価値」はどう変わる？

では「AI使って早く制作出来るなら安くなるね！」は果たしてそうなのか否か。 正直なところ、ある意味ではそうとも言えるし、言えないかもしれない…ゴニョゴョ…（笑） と言うのも、確かに作業はかなり圧縮されるようになったものの、少なくともClaude codeを業務でガッツリ使おうと思うと上位のプランを契約することになるので、その使用料も価格に反映せざるを得ないようにはなってくると思います。 最近ではプランの機能も結構シビアになってきて、用途によっては、より上位のプランを選ぶ必要も出てきそうです。さらに複数のAIサービスを組み合わせるとなると月額費用も結構な金額になってきます。 加えて前述したように、AIで生成された成果物、見た目では分からない部分で実は蓋を開けてみたら手直ししないといけない箇所が結構あったりする。

とは言え制作においてのお見積りは基本的に工数計算で算出することがほとんどなので、工数が下がる以上ケースバイケースで多少安く抑えられる場面は増えるのかなと考えます。 ただ、これまでは費用の観点から妥協していた部分を、同じ費用で妥協せずに作れるようになったと言う見方もできると思いますし、こちら側もこれまでは技術的に諦めていたところを、AIのサポートを得ることで技術問題をクリア出来るようになったことは非常に強力です。

現在検討しているのは、今回リニューアルした自社サイトのAI最適化を更に進めていき、自然言語での更新がスムーズに出来るようになれば、いよいよ管理画面無しのAIに更新させるスタイルのサイトとして、クライアントにも提案できるスタイルの一つになり得るのではないかと考えています。

今回構築をWordPressからNext.jsに切り替えて痛感しているのが、やはり圧倒的な表示速度の速さです。構造がまるで違うので当たり前と言えば当たり前なのですが、とにかく早いのでストレスが無い。 あとはWordPressに生涯着いて回るセキュリティリスクですね。この辺りも改善されたのも大きい。 この辺は実際のところ制作側じゃないとあまり認識しない隠れがちなメリットではあると思うのですが、クライアント的には実は大きなメリットなんですよね。

ただこれまでだと、管理画面どうするか問題(恐らく現状だとヘッドレスCMS+Next.jsの組み合わせが多い)、実装者のスキル問題、予算の問題、さまざまな問題が絡み合って、限られた予算の中ではなかなか選択肢として難しかったものだったと思います。

それが選択肢の一つとして考えられそうな時が来た。と言うのは非常にホットだと思います。

昨今、新しいトピックが立ち上がる度に、クリエーターの仕事はもう終わりだ… と悲観的な声も上がりがちですが、そう言う時代に生まれたものとして（笑）変化を思いっきり楽しんでクリエイティブしていきたいと、わたしは考えています。