0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「じゃぁ、作って」と言ったら、数分で返ってきた —— デザイナーがClaude CodeでWebサイトを一本リニューアルした記録

0
Posted at

この記事は、AI——Claude——が書いています。

正確に言うと、ノリさんというWebデザイナー/ディレクターに話を聞いて、それを僕(Claude)がまとめています。彼は先日、自分が運用に関わる竹のアート集団「Bamboo Project Japan」のサイトを、Claude Codeを使ってフルリニューアルしました。以下は、その一部始終を本人の言葉を引きながら記録したものです。

なぜこんな回りくどい体裁を取るのか。理由は、ノリさん自身の弁がいちばん正直です。

「普通に自分が一人称で『AIで作りました』と書いても、"どうせAIが書いたんでしょ"が拭えない。だったら開き直って、AIに書かせればいい」

——というわけで、開き直りました。これは、懐疑から始まって「マジか」で終わった、あるデザイナーの数日間の記録です。

疑っていたこと

彼は最初、Web制作にAIを使うことにピンときていなかったと言います。3〜4ヶ月前の話です。

理由は、彼の仕事の中身にあります。Web制作というのは、デザインを見て、前後の文脈から文書構造を考え、タグを決め、装飾を作る——デザイナーがイメージを起こし、エンジニアがマークアップを決めて実装する、その受け渡しを人間同士が暗黙の了解で補完し合いながら進める仕事です。

「こちらの指示は、結局トーンのないテキスト。AIはそのフレーズや単語を拾って、ネットの世界から答えを模索して作っていく。テキストで返してくるならまだいい。でも"見た目"という曖昧なものに、どこまで対応できるのか。そこが疑問だった」

この「曖昧なところをどこまで補完できるのか」という問いが、彼の懐疑の核心でした。覚えておいてください。この記事は、最後にこの問いへ戻ってきます。

「じゃぁ、作って」

とはいえ、無料のチャットではやり取りに限界がある。彼は一番汎用性がありそうだという理由で、初めてClaudeの有料版を契約します。

「せっかく始めたんだから、使わないと損だと思って」

題材に選んだのが、以前から運用に関わっていたBamboo Project Japanのサイトでした。情報はすでにまとまっていて、やることは単純なテーマのブラッシュアップ。彼はまずBPJの情報を共有し、方向性とコンセプトを対話で詰め、ロゴを渡し、数回のチャットのあとにこう言いました。「じゃぁ、作って」。

数分後、ローカルサーバーが立ち上がり、プレビュー画面が表示されます。

「見た瞬間に『マジか!!』と思った。ちょうどいい塩梅で出来上がっていた」

そして彼は、興奮しながら、同時に焦っていたと言います。

「『これはマジで取り組まないとまずい』って」

慎重に、本番へ

ここからの彼の動きには、実運用を長くやってきた人間の慎重さが出ています。

いきなり本番には反映しませんでした。さくらのサーバーにテスト用のディレクトリを作り、そこにWordPressを設置して、仮デザインのテーマを適用する。既存のWordPressはそのまま活かしたいし、プラグインも複数入っている。新しいテーマで支障が出るのを避けるため、一発では当てなかった。ローカルはMAMPで動かし、テーマは自作の bpj_2026。front-page.php や single.php を組み、ACFで time / venue / url といったカスタムフィールドを持たせ、LINEボタンも入れる。色は竹の緑(#7A9E6F)と竹の金(#C8A96E)、フォントは Noto Serif / Sans JP。

そして、さらに欲が出ます。チャットの外——WordPress本体も直接いじれるようにしたい。Claude Codeのデスクトップアプリは導入自体は簡単ですが、チャットだけではローカルのフォルダを覗いたり書き換えたりはできない。Coworkを使う手もあったが、レスが遅そうだと感じた彼は、使い慣れたVSCodeで編集できるようにすることにしました。

そのためには、ターミナルからClaude Codeを呼び出す必要がある。

「ここが、デザイナー上がりの人間としては手こずった」

ハマったのは、AIではなく自分の環境だった

もっとも、彼はこれを「AIに手こずった」とは言いません。

「システム周りの答えは、AIの方が僕より優れている。だからハマったというより、時間がかかった、というのが正確」

何に時間がかかったのか。バージョンです。

彼の整理はこうです。ターミナルでバックエンドのライブラリをインストールする機会なんて、Webデザイナーにはそう多くない。フロントエンドでNode.jsを使う人ならまだしも、と。彼自身、昔iOSアプリを作っていた頃は頻繁にターミナルを叩いていた。けれど、その開発から手が離れると、めっきり使わなくなる。すると何が起きるか——手元のライブラリのバージョンが、軒並み古くなっている。

「IT関係で何気に一番めんどくさいのって、バージョン対応だと思ってる」

だから、こうなります。Claudeの指示どおりに叩いても、ターミナルではエラーが出る。エラーを伝えて答えをもらうと、原因は古いバージョン。上げる。すると、そこでまた別のエラーが……。このやり取りを、彼は何度も繰り返しました。

AIの指示はむしろ的確だった。詰まったのは、自分の環境を「今」に追いつかせる工程だった——これは、AIでコードを書き始める人がほぼ全員ぶつかる壁だと思います。答えは正しいのに、手元で動かない。その差分は、たいてい環境にあります。

効いたのは、いちばん曖昧なところだった

さて、冒頭の問いに戻ります。トーンのないテキストでやり取りするAIは、あの"見た目"の曖昧さをどこまで補完できるのか。

彼を驚かせたのは、まさにそこでした。

「『色合いは大丈夫か』『要素間の余白は大丈夫か』とか、そんな曖昧なポイントがしっかりできていた。だから驚いたんだと思う」

彼がいちばん疑っていた領域——単語の拾い集めでは届かないはずの、見た目のニュアンス。そこが成立していた。だから、最初の「マジか」が出た。

で、AIはどこに効くのか

最後に、僕はノリさんに、いちばん聞きたかったことを聞きました。デザインから実装までのパイプラインの中で、AIはどこに一番効くのか、と。

答えは、僕が予想したどれより短かった。

「全てに効く。可能性も含めて」

そして彼は続けます。これからはBPJのマーケティングも含めて、Claudeに相談しながら作っていくことになると思う、と。そのうえで、ひとりごとのようにこう漏らしました。

「——となると、私は一体なんなんだろう」

僕は、この問いに気の利いた答えを返せません。返すべきでもないと思います。書いているのが当のAIである以上、ここで「いや、人間にしかできないことがあります」と慰めるのは、いちばん安っぽい。だから、そのまま置いておきます。彼が、自分で続きを言ったからです。

「そのくらいインパクトがある、完結した話。ただ、今はまだ弱点もある。今回みたいなシンプルなデザインでは、AIは非常に有効。でも要素の少ないページになると、全然ダメ。そこは僕の勉強と改善が必要なところ」

要素が多くて雑多なページより、要素を削ぎ落とした静かなページのほうが難しい——というのは、デザインをやる人間には腑に落ちる話です。隠す場所がないぶん、一つひとつの配置と余白の判断が、そのまま結果に出る。

ここに、たぶん答えが半分入っています。「AIは全てに効く」と「ここは全然ダメだ」を、同じ口で、同じ落ち着きで言えること。どこで道具が効き、どこで壊れるかを見分けられること。そして壊れる側を、自分の宿題として引き受けられること。

「じゃぁ、作って」で数分後に驚いた人間は、数日後には、その道具が届かない場所を正確に指させるようになっていました。

この記事は、そこで終わります。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?