私は開発者ではありません。今まで一度もそうなったことはありません。十年以上にわたり、銀行やフィンテック企業のインターフェイスを設計してきました。div が何かを知っていました。Chrome で要素を検査できました。パディングについても意見がありました。しかし、ゼロからフルアプリケーションを書くことは、これまで思い描いたことがありませんでした。
それから Claude の使用を始めました。そして約2か月、平日夜と週末を使って、PHP、MySQL、カスタム管理パネル、予約投稿、生成的な画像システム、そして Google が実際にインデックスする SEO を備えた、完全に三言語対応のブログを作りました。WordPress なし。フレームワークなし。テンプレートなし。
これは Claude Code や雰囲気重視のコーディングについてのチュートリアルではありません。現場の実践経験を持つデザイナーが Claude を開発パートナーとして活用し、製品レベルのものを作るときに起こることについてです。間違い、ブレークスルー、そしてコーディングと AI とのコミュニケーションの両方について私が学んだこと。
Claude vs ChatGPT for coding: what I found after months of use
両方を徹底的に試しました。数か月間、日常的に使った結果、以下のことが分かりました。
ChatGPT は見た目には正しそうなコードを出します。コンパイルされます。実行されます。そして3日後、ユーザーが予期せぬことをすると壊れることに気づきます。コードは技術的には正しいですが、構成上は脆弱です。周囲のシステムを考慮せず、目の前の問題だけを解決します。
Claude は文脈を考慮したコードを提供します。データベース構造や既存の関数、達成したいことを説明すると、Claude は新しい関数だけを書くだけではありません。すでに存在するものとの競合をチェックします。私が求めていなかった関連関数への変更を提案します。私の特定の状況に対して、なぜ一つのアプローチが別のものより適しているのかを説明します。
多言語のルーティングシステムを構築していたとき、その違いは明らかになりました。ChatGPT は二言語で動くソリューションをくれました。日本語を追加したとき、すべてが壊れました。Claude は事前に、サポートする言語の数をいくつにする予定かを尋ね、初めから任意の数に対応できるシステムを組みました。
とはいえ、ChatGPT は素早い調査やブレインストーミングには向いています。実装へ進む前にアイデアを探るために使います。二つは異なる段階で使う道具です。
How I talk to Claude about code
これが多くのガイドが省略する部分です。実際の対話です。あなたが開発者ではなく、技術的な語彙を知らないとき、AI に何が必要かをどう説明しますか。
それはデザインブリーフのように説明します。
新しい機能が必要なとき、私は「PHP の関数を書いて」とは言いません。望むユーザー体験を説明します。誰かがページを訪れたときに何が起きるか、彼らが何を見てほしいか、何かをクリックしたときに何が起こるか、そして裏側でシステムが何をするべきかを説明します。 Claude はそれをコードに翻訳します。
例えば、予約投稿を追加したいとき、Claude に次のように伝えました。「事前に投稿を作成し、未来の日付を設定したい。指定した日付が来たら、私が何もしなくてもサイト上で自動的に公開されるようにしてほしい。ホームページには公開済みの投稿だけを、公開日で並べ替えて表示し、管理画面で作成した日付では表示しないようにしてほしい。」
この説明には技術用語は含まれていません。しかし Claude に必要なものをすべて伝えます: ユーザーフロー、ビジネスロジック、表示要件、並べ替えに関するエッジケース。
三言語システムの構築
多言語システムは、プロジェクト全体で最も難しい部分でした。コードが複雑だからではなく、意思決定が複雑だからです。各言語に独自の URL 構造を持たせるべきでしょうか。3つの異なる言語の SEO をどう扱いますか。 投稿の翻訳が存在しない場合はどうなりますか。
Claude は、コードを1行も書く前に各決定について考える手助けをしてくれました。スペイン語をデフォルト言語としてプレフィックスなし、英語は /en/、日本語は /ja/ を使用する構造に落としました。各投稿にはスペイン語のスラグが posts テーブルにあり、英語と日本語の翻訳スラグは post_translations テーブルにあります。
私が驚いたのは、Claude が私が考えもしなかったエッジケースにどう対処したかです。英語の URL を共有しても、閲覧者のブラウザが日本語に設定されている場合はどうなるでしょうか。スペイン語と英語で投稿が存在していて、日本語には存在しない場合はどうなるでしょうか。Claude はこれらのシナリオを予見し、それぞれのケースにフォールバックを組み込みました。
生成的アイデンティティシステム：コードによる生成的デザイン
これがプロジェクト全体で私のお気に入りの部分です。ブログの各投稿は、内容のハッシュから独自の画像を生成します。AI 生成なし、ストック写真なし。同じコンテンツは常に同じビジュアルを生み出します。
このコンセプトを Claude に次のように説明しました。「各投稿には、投稿内容から自動的に作成されるユニークな画像がほしい。視覚的な指紋のように。内容が変われば画像も変更される。内容が同じなら画像は同じである。」
Claude は画像をアルゴリズム的に作成するために PHP GD ライブラリを使用することを提案しました。投稿タイトルからハッシュを抽出し、ハッシュの文字を色に対応させ、グリッドパターンを作成し、対称的に拡張して PNG としてレンダリングします。結果として、すべての投稿がその内容に結びついた視覚的に一意のアイデンティティを持つ決定論的なシステムになります。
コードは何度も繰り返しがありました。最初のバージョンは、画像があまりにもランダムでノイジーになりすぎました。デザインの観点から Claude にフィードバックを伝えました。隣接セル間のコントラストが低すぎる、画像の中心部にもっと視覚的な重みが必要、色のパレットは一貫性を感じるべきで、ただのノイズのようではいけない。Claude は私の視覚的なフィードバックを元にアルゴリズムを調整しました。
実際のミスと、それをどう修正したか
すべてが順調だったわけではありません。エンコーディングの災難: テンプレートで特殊文字を使用しました。自分の画面では問題なく見えましたが、いくつかのブラウザでは文字化けして表示されました。Claude が問題を特定し、記号を HTML 実体参照に置換しました。
スラグの大惨事: 管理パネルで投稿タイトルを変更すると、URL もそれに連動して変わり、既存のリンクやGoogleのインデックスが崩れました。Claude は、投稿が公開されたらスラグをロックするシステムを構築する手助けをしてくれました。
日付の混乱: すべての投稿が公開日ではなく作成日を表示していました。Claude はデータベースに published_at フィールドを追加し、日付を表示するすべてのクエリとテンプレートを更新する手助けをしてくれました。
この Claude Anthropic チュートリアルが、デザイナーとしての構築について私に教えてくれたこと
ブログは shinobis.com で公開中です。3言語のコンテンツを提供し、独自の画像を生成し、スケジュール通りに公開し、構造化データを含む適切なSEOを備え、私が予想もしなかった日本語のクエリを含む Google 検索結果にもランクします。
始める前は PHP の知識も MySQL の結合も知らずに作りました。Apache サーバの設定をしたこともありません。私にあったのは、人々がデジタル製品とどのように相互作用するかを考える10年の経験、作りたいものの明確なビジョン、そしてそのビジョンを動作するコードへ翻訳できる AI です。
ここにある真実の物語は、それを AI がコードを書けるということではありません。今となっては誰もが知っています。物語は、深い専門知識と明確なビジョンを持つデザイナーが、AI を魔法の道具ではなく開発パートナーとして扱うことで、実運用に耐えるソフトウェアを構築できる、ということです。
