Claudeをウェブ開発に使う方法：ゼロから構築したデザイナーのガイド

私は開発者ではない。一度もなったことがない。10年以上、銀行やフィンテック企業のインターフェースをデザインしてきた。divが何かは知っていた。Chromeで要素を検証できた。paddingについて意見もあった。しかし、完全なアプリケーションをゼロから書くことは想像もしていなかった。

そしてClaudeを使い始めた。約2ヶ月、夜と週末に作業して、PHP、MySQL、カスタム管理パネル、予約投稿、生成画像システム、Googleが実際にインデックスするSEOを備えた完全な三言語ブログを構築した。WordPressなし。フレームワークなし。テンプレートなし。

これはClaude Codeやvibe codingのチュートリアルではない。実際の業界経験を持つデザイナーがClaudeを開発パートナーとして使い、プロダクション対応のものを構築した時に何が起こるかについてだ。

Claude vs ChatGPTコーディング：数ヶ月の使用後に分かったこと

両方を試した。徹底的に。毎日数ヶ月使った後の発見がこれだ。

ChatGPTは正しく見えるコードを提供する。コンパイルされる。動く。そして3日後、ユーザーが予期しないことをすると壊れることに気づく。コードは技術的に正しいがアーキテクチャ的に脆い。

Claudeはコンテキストを考慮したコードを提供する。データベース構造、既存の関数、達成したいことを説明すると、Claudeは新しい関数を書くだけでなく、既存のものとの競合をチェックする。聞いていない関連関数の変更を提案する。特定の状況に対してなぜ一つのアプローチが別のものより優れているかを説明する。

違いは多言語ルーティングシステムを構築している時に明らかになった。ChatGPTは2言語で動く解決策を提供した。日本語を追加すると、すべてが壊れた。Claudeは最初からサポートする言語数を尋ね、任意の数を処理できるシステムを構築した。

Claudeにコードについてどう話すか

ほとんどのガイドが省略する部分だ。実際の会話。開発者ではなく技術的な語彙を知らない場合、AIに何が必要かをどう説明するか。

デザインブリーフのように説明する。

新しい機能が必要な時、「PHP関数を書いて」とは言わない。望むユーザー体験を説明する。誰かがページを訪問した時に何が起こるか、何が見えるべきか、何かをクリックした時に何が起こるか、裏側でシステムが何をすべきかを説明する。Claudeがそれをコードに変換する。

例えば予約投稿を追加したい時、こう伝えた：「事前にポストを書いて未来の日付を設定したい。その日付が来たら、私が何もしなくてもポストが自動的にサイトで表示されるようにしたい。ホームページは公開されたポストだけを、管理画面で作成した日付ではなく公開日順に表示すべきだ。」

三言語システムの構築

多言語システムはプロジェクト全体で最も難しい部分だった。コードが複雑だったからではなく、決定が複雑だったからだ。

Claudeは1行のコードも書く前に、各決定を考え抜く手助けをしてくれた。スペイン語がプレフィックスなしのデフォルト言語、英語は/en/、日本語は/ja/という構造に決めた。

驚いたのは、私が考えなかったエッジケースをClaudeがどう処理したかだ。誰かが英語のURLを共有したが訪問者のブラウザが日本語に設定されている場合はどうなるか。ポストがスペイン語と英語に存在するが日本語にはない場合はどうなるか。Claudeはこれらのシナリオを予測し、それぞれにフォールバックを構築した。

生成アイデンティティシステム：コードによる生成デザイン

これはプロジェクト全体で最も好きな部分だ。ブログの各ポストがコンテンツハッシュから独自の画像を生成する。AI生成なし、ストック写真なし。同じコンテンツは常に同じビジュアルを生成する。

ClaudeにPHPのGDライブラリを使ってアルゴリズム的に画像を作成することを提案された。タイトルからハッシュを抽出し、ハッシュ文字を色にマッピングし、グリッドパターンを構築し、対称に拡張し、PNGとしてレンダリングする。

コードは何度かイテレーションを経た。最初のバージョンはランダムすぎてノイジーな画像を生成した。デザインの観点からClaudeにフィードバックした：「隣接するセル間のコントラストが低すぎる。画像の中心にもっと視覚的な重みが必要。カラーパレットはランダムノイズではなく、まとまりを感じる必要がある。」Claudeは視覚的フィードバックに基づいてアルゴリズムを調整した。

実際のミスとその修正方法

すべてが順調だったわけではない。エンコーディングの災害：テンプレートで特殊文字を使用した。自分の画面では問題なく見えたが、一部のブラウザで文字化けした。Claudeが問題を特定し、HTMLエンティティに置き換えた。

スラッグの大惨事：管理パネルで投稿タイトルを変更するとURLも変わり、既存のすべてのリンクとGoogleのインデックスが壊れた。Claudeは投稿が公開されるとスラッグがロックされるシステムの構築を手助けした。

日付の混乱：すべての投稿が公開日ではなく作成日を表示していた。Claudeがデータベースにpublished_atフィールドを追加し、日付を表示するすべてのクエリとテンプレートを更新する手助けをした。

このClaude Anthropicチュートリアルがデザイナーとしての構築について教えてくれたこと

ブログはshinobis.comで公開されている。3言語でコンテンツを提供し、独自の画像を生成し、スケジュールに従って公開し、構造化データによる適切なSEOを持ち、予想もしなかった日本語のクエリを含むGoogle検索結果でランクインしている。

PHPを知らずに構築を始めた。MySQL joinsを理解せずに。Apacheサーバーを構成したこともなかった。持っていたのは、人々がデジタル製品とどう対話するかについて10年間考えてきた経験、構築したいものの明確なビジョン、そしてそのビジョンを動作するコードに翻訳できるAIだった。

これが本当の話だ。AIがコードを書けるということではない。それは今やみんな知っている。話は、深いドメインの専門知識と明確なビジョンを持つデザイナーが、AIを魔法のツールではなく開発パートナーとして扱うことで、プロダクション対応のソフトウェアを構築できるということだ。