2025年11月3日

開発

教務DXプロジェクトHPの開発について

豊田　暁洋情報システム支援課　課長補佐

技術ブログ

Claude Codeとともに開発したWebサイト

教務DXプロジェクトでは、HP作成にあたり新たなチャレンジを取り入れています。それは、一切コードを書かずに、対話だけでWebサイトを構築するというものです。

「そんなことが可能なのか？」

多くの方がそう思われるかもしれません。しかし、2025年の今、AI技術の進化により現実のものとなりました。この記事では、Claude Codeという革新的なAIアシスタントとの協働により、麻布大学DXプロジェクトの公式Webサイトを構築した開発プロセスの概要をお伝えします。

プロジェクトの背景：DX推進の一歩として

麻布大学教務DXプロジェクトは、2023年の学長方針に基づき、「学内のDX化を通じ、学生・保護者への情報共有や教職員の働き方改革に向けた推進を図る」ために組織されました。

私たちは事務職員が中心のチームであり、全員がプログラミングの専門家ではありません。しかし、以下のような明確なビジョンがありました：

- 迅速な情報発信：プロジェクトの成果を学内外に広く共有したい

- 柔軟な更新体制：技術者でなくても簡単にコンテンツを更新できる仕組み

- モダンな技術基盤：最新のWeb技術を活用した高速・安全なサイト

- 学習機会の創出：新しい開発手法を学び、組織のDXリテラシーを高める

従来であれば、外部の制作会社に依頼するか、技術スタッフを確保する必要がありました。しかし、私たちは第三の道を選びました：AIとの対話による共創です。

Claude Codeとは：開発パートナーとしてのAI

[Claude Code](https://claude.com/product/claude-code)は、Anthropic社が開発した革新的なAI開発アシスタントです。従来のコード補完ツールとは一線を画し、以下の特徴を持っています：

🧠 高度な文脈理解能力

プロジェクト全体を把握し、技術的な意図を深く理解します。単なる「指示の実行」ではなく、目的を理解した上で最適な実装方法を提案してくれます。

💬 自然言語での対話

「ここの色をもう少し明るくして」「モバイルでも見やすいレイアウトにしたい」といった自然な日本語での指示に応えてくれます。専門用語を知らなくても、やりたいことを伝えるだけで実装してくれるのです。

🔄 自律的なタスク実行

ファイルの作成、編集、Git操作、依存関係のインストールなど、開発に必要な一連の作業を自動で行います。私たちは「何を作りたいか」を伝えるだけで、「どう作るか」はClaude Codeが担当してくれました。

🎓 教育的な説明

実装した内容について、なぜその技術を選んだのか、どのように動作するのかを丁寧に説明してくれます。私たちは開発を進めながら、同時に最新のWeb技術を学ぶことができました。

開発プロセス：対話から始まるサイト構築

Phase 1：環境設定

まず、最初に取り組んだのは、Claude Codeとの共創環境を構築することでした。Claude Codeは主にターミナル上で動作しますが、作業フォルダまでターミナルで移動するのは手間がかかります。そこで、VSCodeの拡張機能（Claude Code for VSCode）を用い、エディタと連動する形で運用することにしました。このような構成だと、VSCodeが開いているフォルダでClaude Codeを起動することができ、Claude Codeが出力したコードをそのまま編集できます。また、Claude Codeは日本語入力に難がありましたが、同じくVSCodeの拡張機能であるClaude Code Assistant for VSCodeを導入することで解決しました。

【図１　VSCode 上で起動するClaude Code（左下）と　Claude Code Assistant（右下）】

Phase 2: 仕様の策定

次に、どのような構成でWebサイトを作るのか検討を行いました。このとき、要件としては次の内容を意識しました。

１．無料で構築ができること

２．https による通信が可能なサイトであること

３．GitHub等を活用し、バージョン管理ができること

４．VSCode ＋ Claude Codeによる開発と相性が良いこと

主にWeb検索を用いた情報収集を行ったところ、「Astro.jsによりテンプレートを作成し、Claudeflare Pagesでホスティング、microCMSで記事管理、GitHubで更新管理を行う」という方法に行きつき、Claude Codeに相談をし、レポートにまとめるよう指示しました。

その結果、Claude Codeは図２の構成を含んだ開発手順書を作成してくれました。

【図２　Claude Code が出力したシステム構成概要と技術スタック】

- Astro.js: 高速な静的サイト生成

- MicroCMS: ノーコードでコンテンツ管理

- Cloudflare Pages: グローバル配信とセキュリティ

- TailwindCSS: モダンなデザインシステム

このアーキテクチャで良いでしょうか？

驚いたことに、Claude Codeは単なる技術の羅列ではなく、なぜその技術が適しているかを明確に説明してくれました。私はその提案に妥当性があると感じ、プロジェクトを進めることにしました。

Phase 3: 基盤構築

技術スタックが決まると、Claude Codeは即座にプロジェクトのセットアップを開始しました。

// Claude Codeが自動生成したプロジェクト構造
azabu-dx-lab/
├── src/
│   ├── components/      // 再利用可能なUIコンポーネント
│   ├── layouts/         // ページレイアウト
│   ├── lib/            // MicroCMS統合
│   ├── pages/          // ページルート
│   └── styles/         // グローバルスタイル
├── public/             // 静的アセット
└── astro.config.mjs    // 設定ファイル

私が指示したのは「提案どおりプロジェクトを作成してください」という一言のみです。

その後、このWebサイトに欲しい機能（ソリューション、教務DXプロジェクトに関する説明、チーム、ブログ、ニュース）を要望すると、それぞれの機能に対応するフォルダとコンテンツを作成してくれた（ようでした。）

Phase 4: コンテンツ更新方法の理解促進

Phase3が終了した時点では、私はそもそも「このWebサイトをどうやって管理・運営していくのか」が全く分かっていませんでした。特にシステム構成概要にあるそれぞれのサービス、GitHub、CloudflarePages、MicroCMSをどのように設定すれば良いか、皆目見当がついていませんでした。

そこで、Claude Codeに初心者用のガイドラインを作るよう依頼しました。すると瞬く間に図３の初心者ガイドが作成され、これを読み込むことで、少しずつではありますがシステム構成の概略を掴むことができました。サイトのデザイン等はGitHubに置き、サイト内のコンテンツや記事をMicroCMSに掲載した後、CloudflarePagesでこれらを読み込みデプロイすると、インターネット上にサイトが公開される。そして、Webhookという仕組みを使えば、GitHubやMicroCMS内のデータが更新されたタイミングで自動的に再デプロイをさせることができる、と。

【図３　Claude Code が出力した初心者向けガイドライン】

そして、このガイドラインどおり設定を進め、開発を始めて3日目で、デザインはまだまだ、コンテンツは「テスト」という文字が入っているのみですが、CloudflarePagesを経由した教務DXプロジェクトWebサイトを確認することができました。

Phase 5: 対話によるコンテンツ構築

ここから、対話型開発の真価が発揮され、加速的にコンテンツが作られていきます。

私: 「トップページをもっと印象的にしたいです」

Claude Code: 「グラデーションとアニメーションを追加して、

よりダイナミックな印象にしましょう。」

→ 数秒後、美しいアニメーション付きトップページが完成

私: 「チームメンバーのカードを立体的に見せたい」

Claude Code: 「ホバー時に浮き上がるエフェクトと影を追加します。

視覚的な階層感が生まれますよ。」

→ 即座にCSSアニメーションが実装される

私: 「スマートフォンで見ると文字が小さすぎます」

Claude Code: 「レスポンシブデザインを調整します。

モバイルでは1カラムレイアウトに変更し、

フォントサイズを最適化しますね。」

→ 全ページのレスポンシブ対応が完了

私は主にワガママな発注者という体で、デザイナー兼エンジニアのClaude Codeに改善要望を続け、開発開始からおよそ1週間後には、概ね現在のデザインHPが構築されました。途中からは要領も分かってきて、ローカルで稼働させる開発サーバで動作を確認した上、ある程度の修正が溜まると本番サーバにデプロイを行うというサイクルができました。

Phase 6: 停滞

開発開始から2週間ほどは、Claude Codeとの共創は非常に順調でしたが、途中からいくつかのトラブルに見舞われ、それが原因で開発が一部停滞しました。

１．Claude Codeは完全にエラー保護されたコードを作ろうとする

Claude Codeはエラーハンドリングやフォールバック機能を過剰につけたがる傾向にあります。最終的にはそれで良いのですが、まずはファンクションを見たい、という場合に保護が過剰だとプログラムの可読性が著しく落ちます。デザイン変更は最初は大雑把に実施しますが、次第に細かい箇所に手を入れていくにあたりどうしても「プログラム〇〇の○行目の記述を✕✕に直して」という指示が必要となるので、プログラム可読性が落ちると、指示のために人間側が悩む時間が増えます。

// Claude Codeが生成したMicroCMS統合コード
import { createClient } from 'microcms-js-sdk';
const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});
export const getSolutions = async () => {
  try {
    const response = await client.get({ 
      endpoint: 'solutions',
    });
    return response.contents;
  } catch (error) {
    console.error('Failed to fetch solutions:', error);
    return fallbackData; // フォールバック機能付き
  }
};

２．Claude Codeはセッションごとに人格が違う

これは、開発を停滞させた最大の原因となります。Claude Codeとの共創作業も終日行えるわけではないので、1日に複数回VSCodeを起動させ、開発を実施することになりますが、起動の都度、Claude Codeは前回までの作業記憶を引き継ぎません。このため、Claudeが提示したコードをよく見ないままOKを出してしまったが故に、過去に修正した内容が戻ってしまうことが多々ありました。

これを防ぐために、Claude.mdファイルに必要事項を書き込む、セッションの終わりに次回起動時への引継ぎ資料を作らせるなどした上、次に起動するClaude Codeにはそれらの資料を読み込んでから開発を行うよう指示するようになりました。

【図４　Claude Code が出力した引継ぎ資料】

Phase 7: 完成

停滞事案の解決以後は、微調整に時間を取られたものの、最終的には開発開始から2カ月半ほどで、Claude Codeとの協働により、以下の技術を実装できました。

🚀 パフォーマンス最適化

- Lighthouse Score: 95+（Performance, SEO, Accessibility）

- 静的サイト生成による高速なページロード

- 画像の最適化と遅延読み込み

- CDN配信によるグローバル高速アクセス

🔒 セキュリティとスケーラビリティ

- ヘッドレスCMSによるセキュアなコンテンツ管理

- 環境変数の適切な管理

- 型安全性（TypeScript）

- フォールバック機能による安定稼働

📱 ユーザー体験

- 完全レスポンシブデザイン

- アクセシビリティ対応（WCAG準拠）

- 直感的なナビゲーション

- 滑らかなアニメーション

🛠️ 開発者体験

- ホットリロード対応の開発環境

- 型安全なAPI統合

- コンポーネントベースの構造

- 自動デプロイパイプライン

これらすべてが、私が一行もコードを書かずに実現されたのは、本当に驚くべきことでした。

学びと気づき：AIとの協働で変わる開発の未来

1. 技術的な専門知識の民主化

以前は、「Webサイトを作る」ためには、HTML、CSS、JavaScript、フレームワーク、デプロイ設定など、膨大な知識が必要でした。しかし、Claude Codeとの協働により、専門的な実装方法を知らなくても、やりたいことを実現できました。

これは、技術の「民主化」を意味します。事務職員、教員、学生など、誰もがアイデアを形にできる時代が来たと思えます。

2. 対話による開発の効率性

従来の開発プロセス：

要件定義 → 設計 → 実装 → テスト → 修正 → デプロイ

（数週間〜数ヶ月）

Claude Codeとの開発プロセス：

「こうしたい」→ 実装 → 「ここを変更」→ 修正 → 完成

（数日〜1週間）

開発サイクルが劇的に短縮され、アイデアから実装までのスピードが飛躍的に向上しました。

3. 学習機会としてのAI協働

Claude Codeは単なる「作業者」ではありません。優秀な教師でもあります。

- なぜその技術を選んだのか

- どのような仕組みで動いているのか

- ベストプラクティスは何か

- セキュリティ上の考慮点は何か

これらすべてを、実装しながら学ぶことができました。私たちは「コードを書かない開発」を通じて、逆説的にWeb技術への理解を深めることができました。

課題と限界：完璧ではない協働体験

すべてが順調だったわけではありません。いくつかの課題もありました。

🤔 指示の明確化の重要性

曖昧な指示では、意図しない実装になることがありました。

- ❌ 「もっと良くして」→ どう改善すべきか不明確

- ✅ 「文字サイズを大きくして、色をもっと濃くして」→ 明確な改善

🔄 複雑な修正の限界

既存コードへの大規模な変更では、時に人間の確認が必要でした。Claude Codeは賢いですが、プロジェクト全体の意図を完璧に理解しているわけではありません。

📚 学習コストの存在

「コードを書かない」とはいえ、Web技術の基本的な理解は必要でした。「レスポンシブデザイン」「API」「デプロイ」などの概念を知らないと、効果的な対話が難しい場面もありました。

🔍 デバッグの難しさ

エラーが発生した際、原因を特定するには多少の技術知識が必要でした。Claude Codeは多くの場合自動で修正してくれますが、複雑なエラーでは人間の判断が求められました。

Claude Codeのような革新的なツールの登場により、技術の世界はかつてないほど開かれています。事務職員も、教員も、学生も、誰もがデジタル創造の担い手になれる時代が到来しました。

麻布大学DXプロジェクトは、これからも「思考のDX化」を推進し、AIとの協働による新しい価値創造に挑戦し続けます。この開発経験が、他の組織にとっても参考になれば幸いです。

参考情報

🔗 プロジェクトリンク

- 公式サイト: [https://azabu-dx-lab.pages.dev](https://azabu-dx-lab.pages.dev)

- GitHub: リポジトリは学内限定公開

📚 使用技術

- Astro.js v5.13 - 静的サイトジェネレーター

- MicroCMS - ヘッドレスCMS

- Cloudflare Pages - ホスティングとCDN

- TailwindCSS v4 - CSSフレームワーク

- TypeScript - 型安全性

🎓 学習リソース

- [Claude Code 公式サイト](https://claude.com/code)

- [Astro.js ドキュメント](https://docs.astro.build/)

- [MicroCMS ドキュメント](https://document.microcms.io/)

---