Works

AIと一緒にこのサイトを作った話——Claude Code 活用体験記

2026年3月27日 admin

Works — Portfolio

AIと一緒にこのサイトを作った話

このサイト自体を、AIアシスタント「Claude Code」と対話しながらゼロから作りました。その体験と、中小企業・個人事業主の方へのご提案をまとめています。

WordPress テーマ開発 AI活用 2026年3月

このサイトについて

このサイトは、AIアシスタントである「Claude Code」との対話を通じて、デザインの考え方から実際のコーディングまで、すべてを一から構築したWordPressオリジナルテーマです。制作にあたってテンプレートや既製テーマは一切使用していません。

制作期間2026年3月
種別WordPressオリジナルテーマ開発
使用技術PHP / CSS / WordPress標準機能
AI活用ツールClaude Code(Anthropic)
対応デバイスPC・スマートフォン・タブレット

Claude Code とは

「Claude Code」は、Anthropicが開発したAIアシスタントをターミナル(コマンド操作画面)から使えるツールです。「こんな機能を作りたい」「このデザインにしたい」と日本語で伝えると、AIがコードを書いたり、修正案を提案したりしてくれます。

プログラマーやエンジニアでなくても使えるわけではありませんが、開発スピードが大幅に上がることが最大の特徴です。「1人でやると数日かかる作業が、AIとの対話で数時間に短縮される」という感覚が何度もありました。


実際に使ってみた体験と感想

よかったこと

もっとも助かったのは、「どうすれば実現できるか」を自分だけで悩まなくていい点です。「カード一覧をグリッド表示にして、1枚目だけ大きくしたい」と伝えると、具体的なコードと一緒に理由も説明してくれます。実装しながら学べる感覚がありました。

また、デザインの一貫性を保ちやすい点も印象的でした。テーマ全体の色やフォントを設計トークンとして定義しておくと、AIもその設計に沿った提案をしてくれます。「なんとなくバラバラになってきた」という問題が起きにくくなりました。

特に印象に残った場面

カスタマイザーから色を自由に変更できる機能を作ってほしいと依頼したところ、設定画面の追加・CSSへの反映・リアルタイムプレビュー対応の3点をまとめて実装してくれました。自分で一から調べたら半日以上かかっていたと思います。

難しかったこと・気をつけた点

AIはとても優秀ですが、「何を作りたいか」を明確に伝える力は人間側に必要です。曖昧な指示だと的外れな提案が返ってくることもありました。「誰に向けて」「どんな印象を持ってほしいか」を言語化してから依頼するのが、うまく使うコツだと感じています。

また、AIが生成したコードをそのまま使うのではなく、内容を理解してから採用する習慣が大切です。意図せず不要な処理が含まれていることもあるため、最終的な判断は人間が行う前提で使う必要があります。


制作したサイトの特徴

デザインコンセプト「白いターミナル」

白を基調にしながら、テック感をさりげなく取り入れたデザインです。派手にしすぎず、かつ「ただの白いサイト」にならないよう、色使いと余白のバランスを何度も調整しました。アクセントカラーはターミナル(コマンド画面)を連想させる緑を採用しています。

管理画面から色・文章を自由に変更できる

WordPressの「カスタマイズ」機能と連携しており、プログラムの知識がなくても管理画面から以下の項目を変更できます。

  • サイト全体のカラーパレット(背景色・アクセントカラー・テキスト色など)
  • トップページのキャッチコピー・自己紹介文
  • プロフィール情報・スキル・SNSリンク
  • お問い合わせセクションの説明文

スマートフォンにも完全対応

PC・スマートフォン・タブレットのいずれでも快適に閲覧できるよう設計しています。現在、Webサイトへのアクセスの半数以上がスマートフォンからという統計もあり、スマホ対応は必須です。

表示速度を意識した軽量設計

余計なプラグインや外部ライブラリを使わず、必要な機能だけをコンパクトに実装しています。表示が遅いサイトは検索順位にも影響するため、速度の最適化は最初から考慮しました。


この経験があなたのビジネスに活かせること

このサイト制作を通じて実感したのは、AIを使いこなすことで、個人でもかなりの品質・機能のWebサイトやシステムを短期間で作れるということです。

大手のWeb制作会社に頼むほどではないけれど、「ちゃんとしたサイトが欲しい」「業務を楽にするツールが欲しい」——そんなニーズに、AI活用を取り入れた柔軟な開発でお応えします。

こんなお悩みがある方へできること
お店のサイトが古くてスマホで見づらいスマホ対応サイトのリニューアル・新規制作
Excelやメールで管理している業務を楽にしたい業務に合わせた簡易Webシステムの開発
ネット予約・問い合わせフォームを設置したい予約システム・フォーム導入・既存サイトへの追加
チラシや名刺のデザインも相談したい印刷物のデザイン作成・ロゴ制作
何から始めればいいかわからない現状のヒアリングから一緒に考えます

「IT・Webのことは苦手で…」という方ほど、遠慮なくご相談ください。専門用語を使わず、現状の課題からいっしょに整理するところから始めます。


振り返り

AIと一緒に作業することで、「作れるものの幅」と「作るスピード」の両方が広がりました。一方で、AIはあくまでも道具であり、何を作りたいか・誰のために作るかという方向性を決めるのは人間だと改めて感じています。

技術は手段であって目的ではありません。このサイトも、「こういう人に見てほしい・こういうことを伝えたい」というゴールを先に決めてから、それに合わせて技術を選んでいます。お客様のビジネスへのご支援でも、同じ考え方で取り組んでいます。

Contact

まずは気軽にご相談ください

Webサイトの新規制作・リニューアル・業務改善ツールの開発など、
小さなことでもお気軽にご連絡ください。

お問い合わせはこちら

返信は通常2営業日以内を目安にしています

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です