AIを使えばホームページ制作のコストは下がりますか？

コード生成の速度は上がりますが、コンテンツの設計・文章の確認・デプロイ・修正判断などは人間が行う必要があります。全体のコストは状況によります。AIを活用すると「修正の速度」が上がる、というのが実感に近いです。

プログラミング知識がなくてもAIでサイトを作れますか？

ある程度は進められますが、エラー対応やデプロイ設定、セキュリティの確認などには基礎的な知識が必要です。AIは「補助」であり、最終的な判断や確認は人間が行う必要があります。

Claude CodeとChatGPTの違いは何ですか？

Claude Codeはコードを書いてファイルを直接編集・確認するエージェント型のツールです。ChatGPTは対話型で、コードを提案しますが直接ファイル操作はしません。用途に合わせて使い分けることをおすすめします。

Claude Codeで自社サイトを作って分かったこと｜AIをWeb制作に使う現実

はじめに

プライスレスのホームページ（priceless-inc.com）は、Claude Codeを使いながら制作しました。文章の構成から、コンポーネントの実装、ブログの追加、診断メニューの設計まで、AIと一緒に進めてきました。

この記事は、その過程で分かったことを記録したものです。「AIを使えば簡単にサイトができる」という話ではありません。実際には、使いながら判断が必要な場面がいくつもありました。

なぜClaude Codeを使ったのか

一番の理由は、修正のスピードを上げたかったからです。

サイト制作では、「構成を変えたい」「文章を直したい」「新しいページを追加したい」という要望が次々に出てきます。これを一つひとつ手書きで対応していると、時間がかかります。Claude Codeはコードを生成するだけでなく、ファイルを直接編集・確認できるため、修正のサイクルを速くできると判断しました。

また、自社サイトをAIで制作することは、「AIをWeb制作に使う」という支援を行ううえでの実証でもあります。実際に使ってみないと、何が使えて何が使えないかは分かりません。

実際に行ったこと

構成の設計

最初に行ったのは、サイト全体の構成設計です。

どのページが必要か、各ページに何を載せるか、ナビゲーションはどう設計するかを先に整理しました。ここはAIに任せるのではなく、自分で考えて決めました。AIに「サービスサイトの構成を提案してください」と入力すれば提案は出てきますが、「プライスレスとして何を伝えたいか」は自分たちにしか分かりません。

構成が決まってからClaude Codeに実装を依頼する、という流れで進めました。

コンポーネントの実装

Next.js + Tailwind CSSの環境で、各ページのコンポーネントを実装していきました。

ヘッダー、フッター、サービスカード、CTAボタン、ブログカードなど、それぞれのコンポーネントをClaude Codeと一緒に作りました。「このコンポーネントはこういう構造で、こういうデザインにしたい」という指示を出し、生成されたコードを確認・修正するという流れです。

コード生成自体は速いのですが、「意図通りのデザインになっているか」「スマートフォンで見たときに崩れていないか」の確認は人間が行います。

ブログとMDXの設定

ブログ記事はMDX形式で管理しています。MDXは、Markdownにコンポーネントを組み込める形式です。この設定もClaude Codeと進めました。

gray-matterでフロントマターを取得する、next-mdx-remoteでMDXをレンダリングする、といった実装もAIと一緒に整えました。ブログ記事の追加・修正は、MDXファイルを書くだけでできる状態になっています。

デプロイ設定（Vercel）

サイトはVercelでホスティングしています。デプロイ自体はGitHubとVercelを連携させれば自動で行われますが、独自ドメインの設定やDNS設定に少し手間がかかりました。この点については別記事で書いています。

つまずいたこと

指示が曖昧だとコードがズレる

一番多かったのは、指示の曖昧さによるズレです。

「ここをもう少し見やすくしてほしい」「このデザインをブランドに合わせてほしい」という曖昧な指示は、AIには伝わりにくいです。「背景色を#F8F9FAに変えて、テキストサイズをsm:text-baseにする」のように、具体的に指定する必要があります。

指示を具体的にするためには、自分がどういう状態にしたいかを明確にする必要があります。「何となく雰囲気を変えたい」という段階では、AIに任せても思い通りにはなりません。

ブランド方針の一貫性は人間が守る

サイト全体でブランドの一貫性を保つのは、AIだけでは難しいです。

「このCTAテキストはブランドポリシーに合っているか」「この表現はNGワードではないか」という判断は、都度自分で確認する必要があります。CLAUDE.mdというルール文書を作り、禁止表現や方針を明文化することで、AIがそのルールを参照しながら作業できる状態にしました。

ただし、ルールを作っても抜け漏れは出ます。最終的なチェックは人間が行う前提で進めることが大切です。

デプロイ後の動作確認

コードが生成されても、実際にデプロイして動作確認するまでは問題が見えないことがあります。

ローカルでは問題ないのにVercelでエラーが出る、スマートフォンで表示崩れがある、といったケースが何度かありました。AIはコード生成はできますが、ブラウザでの実際の表示確認はできません。このステップは必ず人間が行う必要があります。

試して分かったこと

Claude Codeを使って一番実感したのは、「AIを使うほど、人間側の判断が重要になる」ということです。

AIはコードを速く書けますが、「それが正しい判断かどうか」は人間が確認します。構成設計、ブランド方針、デザインの判断、動作確認は人間の役割です。AIはそれらを実現するための「実装の速度」を上げてくれるツールです。

また、AIに任せる前に「何を作りたいか」を自分で整理しておくことが重要です。目的が明確でないままAIに指示を出しても、方向性がバラバラなサイトができあがります。

小さな会社でもAIを使えばWeb改善の速度を上げられます。ただし、「AIに丸投げすれば完成する」ではなく、「AIと一緒に進めるための準備と判断が必要」という認識が前提です。

小さな会社に活かせるポイント

AIに作業を依頼する前に、「何を作りたいか」を自分で整理しておく
指示は具体的に。曖昧な指示は曖昧な結果につながる
ブランド方針・禁止事項は文書化しておき、AIがそれを参照できる状態にする
コード生成後は必ず人間が動作確認する
AIは「速度を上げるツール」であり、判断は人間が行うという前提で使う

プライスレスで相談できること

AIをWeb制作や業務効率化に使う際の進め方、指示の出し方、ツールの選定は、支援の中でご相談いただける内容です。「AIを試してみたがうまく使えなかった」という場合も、どこでつまずいているかを一緒に確認します。