今回のコーポレートサイトのリニューアル、最初からClaude Designを使っていたわけではありません。
最初は、ChatGPTで原稿や構成をつくって、そのままWork側でAstroのサイトとして実装していきました。
これはかなり速かった。
ページはできる。
コードも動く。
ブラウザで普通にサイトとして見られる。
ヒーローもある。
グラフもある。
マーケティングやWeb制作、AIのセクションもある。
「AIだけでも、ここまでできるんだ。」
そこは普通に驚きました。
でも、出来上がったものを見て、もう一つ思ったことがあります。
「これを、そのまま会社の顔として公開したいか。」
そこは違いました。
動く。
ページもある。
コードも書けている。
でも、欲しかったのは「AIでサイトができた」というデモではありません。
実際に自社サイトとして気に入って、これから使っていけるものです。
バランス。
タイポグラフィ。
余白。
セクションの見せ方。
スマートフォンでの見え方。
そして何より、制作会社として見られたときの**「ちゃんとやれる感」**が足りない。
コードとして成立していることと、Visualとして納得できることは別でした。
そこで、実装するAIとVisualをつくるAIを分けることにしました。
候補として見ていたのは、Claude Design、Framer Agent、Figma Make。
CanvaやCanva Codeも補助候補として考えました。
その中で、実際にVisual Prototype担当として試したのがClaude Designです。
ここから、サイト制作の流れがかなり変わりました。
A、B、C。見比べると、判断しやすくなった
Claude Designでは、最初から一案に決めませんでした。
A、B、C。
実際に違う案を出して、並べて見ます。
AはEditorial / Intelligent。
余白が広く、日本語の見せ方も少し編集物に近い。
BはDigital / Clean。
明るくクリーンで、グラフやデータUIのテック感が強い。
CはCorporate / Premium。
黒を大きく使った、少し重厚な方向でした。
3つ並べてみると、自分たちが欲しかったものも見えてきます。
ただ、どれか一つをそのまま採用したわけではありません。
Bの構造。
Aの日本語タイポグラフィと編集感。
CのダークなデータVisual。
それぞれ良かったところを残したい。
「このグラフの感じはいい」
「ヒーローはこれじゃ弱い」
「英語はここまでいらない」
「静止画より動いた方がよさそう」
そんなやり取りを繰り返しました。
ゼロから理想のデザインを言葉だけで説明するより、
これは好き。
ここは違う。
こっちは残したい。
と実物を見ながら返していく方が、圧倒的に判断しやすい。
そうやって最終的にまとまったのが、今のOWL CORPORATEのベースになったDirection Dです。
ここまで来たときは、かなり手応えがありました。
「これなら公開したい。」
最初にWork/Astroでつくったサイトを見たときとは、明らかに感覚が違いました。
このあたりから、
一つのAIに全部やらせる必要はない。
という考え方がかなりはっきりしてきました。
見た目としては、もうほとんど完成していた
Direction Dまで来ると、画面だけ見ればかなり完成しています。
ヒーローがある。
グラフがある。
カードがある。
動きもある。
ここまで見たら、当然こう思います。
「じゃあ、これをそのまま公開すればいいのでは？」
私たちもそう思っていました。
ところが、中身を見ていくと少し話が変わります。
Claude Designから取得した成果物は、普段イメージするような、整理されたHTMLとCSSだけでできているわけではありませんでした。
ブラウザではちゃんと見える。
だから、使えないわけではありません。
ただ、この先を考えると気になることが増えていきます。
ページを増やす。
INSIGHTSの記事を追加する。
問い合わせフォームを動かす。
AI相談を入れる。
SEOやアクセス解析も整える。
公開したあとも、AIに修正してもらう。
そこまで考えると、「画面を表示できること」と「長く運用できるProductionサイトであること」は別でした。
Claude Designを、そのまま本番サイトにするのをやめた
そこで考え方を変えました。
Claude Designから出てきたコードを、そのままProductionとして使うのはやめる。
でも、せっかく気に入ったデザインまで捨てるわけではありません。
見た目の正解は、Claude Designにある。
これを基準にしました。
色。
余白。
文字の大きさ。
グラフの見え方。
カードの位置。
画面全体の密度。
最終的にどう見えれば正しいのかは、Claude Designを見れば分かる。
Production側は、それを正解として別につくる。
今回のOWL CORPORATEでは、Direction DをVisual Sourceとして固定し、本番側をAstroを中心とした構成へ改めて組み直しました。
Productionコードを担当したのはCodexです。
つまり、
VisualをつくるAIと、本番コードを書くAIを分けた。
最終的には、この形がかなりうまくいきました。
同じものをつくったはずなのに、「なんか違う」
Production側の実装ができてくると、また別の問題が出てきます。
必要なものは揃っている。
文字もある。
カードもある。
数字もある。
配置もかなり近い。
それでも、元のデザインと並べると、
「なんか違う。」
ということが普通に起きました。
大きく間違っているわけではありません。
でも、元の方が良く見える。
少し余白が違う。
グラフが弱い。
文字の密度が違う。
ヒーローの重心がずれている。
一つひとつは小さな差でも、全部合わせると印象がかなり変わります。
そこで、Claude DesignとProductionを実際の画面で何度も比べました。
直す。
もう一度見る。
スマートフォンでも見る。
また元デザインを見る。
ここは思っていた以上に繰り返しています。
この**「仕様は合っているのに、見た目は違う」**という話は、それだけで一本書けるくらい面白かったので、Visual QAとして別の記事にします。
スマートフォンにすると、また別のものが見えてくる
PCでかなり近づいても、それで終わりではありません。
スマートフォンで開くと、また違うところが気になります。
PCではちょうどよかった情報量が多すぎる。
横に置けたものが置けない。
装飾が本文に近すぎる。
タップする場所が窮屈になる。
今回も375px、390pxなどで何度も確認しました。
そして、公開して実際にスマートフォンで触ってから気づいたところもあります。
ヒーローの装飾がカードへ少し被っている。
SERVICESページでは、縦の罫線が本文に食い込んでいる。
テストは通っている。
横スクロールもない。
それでも、実物を見ると「ここ変だな」と気づく。
そのたびに直しています。
AIが実装する速度が速いから、こういう修正も以前より軽く回せる。
でも、最後に違和感を見つけるところは、やっぱり実際の画面を見るしかありませんでした。
原稿も、制作ディレクションもAIに任せている
今回AIに任せたのは、デザインとコーディングだけではありません。
サイト全体で何を見せるのか。
どんなページ構成にするのか。
原稿をどうするのか。
どのAIに何を任せるのか。
そういった制作ディレクションもGPTと進めています。
GPTが原稿や制作方針を組み立てる。
Claude DesignがVisualをつくる。
CodexがProductionコードを書く。
必要なら、別のAIにも監査させる。
人間が担っているのは、その出力を見て、
「これは違う」
「こっちは好き」
「ここは直したい」
「これなら公開したい」
と判断する部分です。
つくる作業そのものより、何をつくらせるかを判断する比重が大きくなった。
今回のWeb制作では、そんな感じです。
「同じClaudeなら、そのままつながるのでは？」も試した
ここまで来ると、当然もう一つ考えます。
Claude Designでデザインをつくったなら、そのままClaude Codeへ渡せばもっと簡単なのではないか。
同じClaudeなら、Visualの意図まできれいに引き継いでくれそうです。
もちろん、試しました。
でも、私たちが期待していたような「DesignからCodeへそのまま流れる」形にはなりませんでした。
何ができたのか。
どこでうまくいかなかったのか。
最終的に、なぜ別の役割分担にしたのか。
これは今回のProduction化とはまた少し違う話なので、次の記事でそのまま書きます。
成功した方法だけではなく、うまくいかなかった方法も、そのまま残す。
その方が、これから同じことを試す人にはたぶん役に立ちます。
良いデザインができても、Productionという工程は残った
今回のリニューアルでは、人間がデザインを制作したり、HTMLやCSSを直接書いた箇所はありません。
それでも、良いデザインができた瞬間にサイト制作が終わったわけではありませんでした。
何を正解にするのか。
どのAIに任せるのか。
元デザインと本当に同じに見えるのか。
スマートフォンでも使えるのか。
実際に公開して大丈夫なのか。
コードを書く作業が減った代わりに、比べて、判断して、もう一度試す作業が増えた。
AIでWeb制作が速くなったことは間違いありません。
でも、一番大きいのは「コーディングが自動になったこと」だけではないのかもしれません。
気に入るところまで、何度でもつくり直せるようになった。
今回のOWL CORPORATEでは、そこがかなり大きな変化でした。
そして、その工程を経てProduction化したものが、いまご覧いただいているこのサイトです。
公開した今も、実際に触りながら少しずつ直しています。
その過程も含めて、引き続きINSIGHTSに残していきます。