Claude Code自社導入事例｜短納期と高品質を両立するWeb制作

ドコドアがClaude Codeを導入した目的は、AIの力で制作のスピードを上げ、その分の時間をWebサイトの品質を高めることに使うためです。

定型的な作業はAIに、品質を高める工程は人に

Web制作には、HTMLやCSSの記述、WordPressへの組み込み、表示崩れの確認など、欠かせないものの創造性はそれほど求められない作業が数多くあります。こうした作業に時間を取られると、本来注力すべきデザインの作り込みや使いやすさの検討に、十分な時間を割けなくなってしまいます。

そこで弊社は、定型的な作業をAIに任せ、生まれた時間を「人にしかできない仕事」に充てる方針を立てました。具体的には、次のような工程です。

• ユーザーの行動を想定した導線設計や情報設計
• ブランドの世界観を表現するデザインの作り込み
• アニメーションなど、細部の演出
• お客様への提案内容のブラッシュアップ

短納期とハイクオリティの両立を目指して

Web制作には、「早く作ろうとすると品質が下がりやすく、品質を高めようとすると時間がかかる」というジレンマがあります。AIに定型的な作業を任せれば、全体の作業時間を短縮しながら、品質を高める工程にはしっかりと時間をかけられます。

つまり、Claude Codeの導入は、お客様に「短納期」と「ハイクオリティ」を同時にお届けするための投資なのです。

弊社のコーディングチームでは複数のAIツールを比較検討したうえで、Claude Codeを導入しました。

複数のAIツールを比較して導入を決定

導入前には、デザインデータからコードを生成するツールなどを検証していました。その中でClaude Codeは、コードの生成だけでなく、実装プランの作成や不具合の調査、コードレビューまで幅広く任せられる「AIエージェント」である点が評価されました。

弊社の制作案件は主にWordPressで構築しているため、まずはWordPressサイトの実装に用途を絞り、コーディングチームの全員がClaude Codeを使いこなせる状態を目指しました。

Claude Codeを選んだ三つの理由

AIエージェントには、Codex CLIやGemini CLIなどもあります。その中で弊社がClaude Codeを選んだ理由は、次の三つです。

社内の他チームとノウハウを横断で共有できる

社内の他チームと同じツールを使うことで、Skillsや運用ノウハウをチームの垣根を越えて共有できます。会社全体でAI活用を進め、互いに改善し合える体制を整えられる点が決め手になりました。

Skillsで品質を均一にできる

Skillsとは、作業の手順やルールをまとめて、AIに繰り返し使わせられるようにする仕組みです。いわば、AIに渡す「作業マニュアル」のようなものです。メンバー全員で同じSkillsを使うことで、担当者による仕上がりの差を小さくできます。

関連記事：Agent Skillsとは？作って終わりにしない運用設計まで解説

デザインデータを直接読み取って実装できる

Claude Codeは、Figma MCP（デザインツールのFigmaとAIを連携させる仕組み）と組み合わせることで、Figmaのデザインデータの構造を読み取りながら実装を進められます。画像からコードを推測するのではなく、レイアウトや色の情報をデータとして受け取れるため、デザインに忠実な実装がしやすくなります。

Claude Codeの活用を進める中で、少しずつ成果が見え始めています。ここでは、2026年7月〜9月の途中経過をご紹介します。

制作の作業時間を約25%削減

2026年7月から9月までの期間で、コーディング（実装）にかかる作業時間を約25%削減できました。これまでと同じ作業を、およそ4分の3の時間で進められるようになったということです。

効果が大きかったのは、ページの骨組みの作成やWordPressへの組み込みなど、パターン化しやすい作業です。なお、この数字はあくまで2026年7月〜9月時点の途中経過であり、案件の内容や規模によっても変わります。後述する取り組みを通じて、今後も改善を続けていきます。

生まれた時間を品質向上に充てる

従来はコーダーが一行ずつ書いていたコードを、Claude Codeが下書きとして生成します。コーダーはその確認と調整に集中できるようになりました。

削減できた時間は、デザインの再現度を高める調整や表示の確認、細部の作り込みなど、Webサイトの品質を高める作業に充てています。そのため、同じ納期でも、より丁寧に仕上げられたWebサイトを受け取れるようになります。

AIは、導入するだけで成果が出るものではありません。弊社では、AIが力を発揮できる環境と仕組みをつくるために、次の四つに取り組んでいます。それぞれの取り組みによって、Webサイトを依頼する側にとって何が変わるのかもあわせてご紹介します。

①AIが読み取りやすいデザインデータを作る

AIが出力するコードの品質は、元になるデザインデータの作り方に大きく左右されます。そこで、コーディングチームとデザインチームが連携し、Claude Codeで正しく出力されやすいデザインデータの作成ルールを定めました。

具体的には、Figmaのオートレイアウトやコンポーネント、色の変数といった機能を活用し、レイアウトや色の情報をAIが正確に読み取れる構造でデザインを作成しています。ルールは両チームで相談しながら、随時見直しています。

デザインの再現度が高まる

確認したデザインのとおりに、Webサイトが仕上がりやすくなります。「デザインと実際のサイトの見た目が違う」と感じて修正を依頼する手間も減ります。余白や色といった細かなニュアンスまで反映されやすいため、ブランドの世界観を大切にしたいWebサイトにも適しています。

②手作業をAIに置き換えるSkillsを作る

弊社では、FigmaのデザインからWordPressサイトを実装するSkillsを皮切りに、毎回ほぼ同じ手順で進める作業を中心に、AIに任せられる作業を随時Skills化しています。

反対に、お客様の意図をくみ取った表現の判断など、言葉にしにくい感覚的な作業は、引き続き経験を積んだスタッフが担当しています。AIと人の役割をはっきり分けることが、品質を保つうえで大切だと考えています。

担当者によって仕上がりがブレない

どの担当者が手がけても、同じ手順・同じ品質で仕上がるため、安心して任せられます。また、定型的な作業がスピーディーに進むので、公開日が迫っているときでも相談しやすくなります。

③チーム全体でSkillsを改善し続ける

Skillsは一度作れば完成ではありません。実際の案件で使った結果をもとに改善点を洗い出し、チーム全体で共有しながら、Skillsを更新し続けています。一人の気づきがチーム全員の作業に反映されるため、組織としての制作力が着実に積み上がっていきます。

修正をお願いしてから反映までが早くなる

改善を重ねるほどAIの作業は正確になり、手直しにかかる時間も減っていきます。そのため、修正をお願いしてから実際にサイトへ反映されるまでの時間が短くなります。

④最終確認は必ず人が行う

どれだけSkillsの精度が上がっても、AIが生成したコードをそのまま納品することはありません。さまざまな端末での表示確認や、ボタン・フォームなどの動作チェックなど、最終的な品質の確認は必ず人が行っています。

スピードを優先しても品質が犠牲にならない

AIで作業を効率化していても、仕上がりは必ず人の目で確かめてから納品されます。「早く作ってもらったけれど、品質が心配」という不安を感じることなく、Webサイトを受け取れます。

AIを活用したWeb制作には、スピードの面で大きなメリットがあります。一方で、AIの使い方や品質管理の方法は制作会社によってさまざまです。依頼先を選ぶ際は、次のポイントを確認しておくと安心です。

AIをどの工程で活用しているか

AIを「何に」使っているかは、制作会社によって異なります。定型的な作業の効率化に使っているのか、デザインそのものまでAIに任せているのかによって、仕上がりの品質や独自性は変わります。打ち合わせの際に、AIの活用範囲を確認してみるのがおすすめです。

人による品質チェックの体制があるか

AIが生成したものには、誤りが含まれる可能性があります。表示や動作の確認を人が行う体制があるかどうかは、品質を見極めるうえで重要なポイントです。

AIで生まれた時間を何に使っているか

AIで生まれた時間を、納期の短縮だけでなく、デザインや使いやすさの向上にも還元しているかどうかも確認したいポイントです。スピードと品質の両方を大切にしている制作会社であれば、安心して任せられるでしょう。

本記事では、Web制作会社であるドコドアがAI（Claude Code）を導入してみた結果をご紹介しました。要点を振り返ります。

• Claude Code導入の目的は、定型的な作業をAIに任せ、生まれた時間をWebサイトの品質を高めることに使うこと
• 2026年7月〜9月の途中経過として、コーディングにかかる作業時間を約25%削減
• デザインデータの整備、Skills化、Skillsの継続的な改善、人による最終確認の四つに取り組んでいる
• Webサイトを依頼する側にとっては、デザインどおりの仕上がり、担当者によらない安定した品質、修正反映の早さといった形で違いが表れる

Claude Codeを中心としたAI活用によって、ドコドアの制作体制は着実に進化しています。今後も取り組みを重ね、より早く、より質の高いWebサイトをお届けしていきます。

ドコドアでは、AIと人がそれぞれの得意分野を担うことで、短納期とハイクオリティの両立を目指しています。AIの活用で生まれた時間は、お客様のWebサイトの品質向上に還元します。

こんなお悩みをお持ちの企業様へ

次のようなお悩みをお持ちでしたら、ぜひ一度ドコドアにご相談ください。

• 公開日が迫っており、短期間でWebサイトを立ち上げたい
• 納期は守りたいが、デザインや使いやすさにも妥協したくない
• 以前の制作会社では、修正のたびに時間がかかって困った経験がある
• AIを活用した最新の制作体制で、Webサイトを作ってほしい

「この納期で実現できるか」「どのくらいの品質を目指せるか」といったご相談だけでも歓迎しています。

お問い合わせフォームより、お気軽にご連絡ください。