医療アプリを作る — Hoshizuの開発事例

本書を読んでいるこのサイト「Hoshizu」自体が、Claude Codeで構築された医療アプリケーションだ。その開発過程を公開する。

Hoshizuとは

Hoshizuは、医療AIに関するナレッジポータルである。

• Books: 体系的な学習コンテンツ（本書を含む）
• Learn: 記事形式のナレッジベース
• Knowledge: 疾患・薬剤データベース
• Tools: プロンプトテンプレート集
• Glossary: 用語集

すべてのコンテンツはMDX（Markdown + JSX）で管理され、Next.jsで静的サイトとして生成される。

アーキテクチャ

技術スタック

ディレクトリ構造

hoshizu/
├── app/                 # ページルーティング
│   ├── book/           # Book表示ページ
│   ├── learn/          # 学習記事ページ
│   ├── knowledge/      # ナレッジベース
│   └── tools/          # ツール集
├── content/            # MDXコンテンツ
│   ├── book/          # Book: _index.mdx + 各章.mdx
│   ├── learn/         # 学習記事
│   └── knowledge/     # 疾患・薬剤データ
├── components/         # UIコンポーネント
├── lib/               # ユーティリティ・データ取得
└── public/            # 静的アセット

MDXコンテンツ管理システム

Book/Chapter/Part構造

Hoshizuの書籍機能は3層構造を取る。

1. Book（_index.mdx）: 書籍全体のメタデータとPart/Chapter定義
2. Part: 論理的なセクション分け（Part 1「基礎」、Part 2「応用」等）
3. Chapter（XX-YY-slug.mdx）: 個別の章

# _index.mdx のフロントマター
parts:
  - id: "part01"
    title: "Claude Codeとは"
    chapters:
      - "01-01-what-is-claude-code"
      - "01-02-installation"

各チャプターのMDXファイルには、partId、order、estimatedMinutes 等のメタデータが含まれる。

Claude Codeでの量産

26章の書籍コンテンツを作成する際、Claude Codeの並列エージェント機能を活用した。

1. _index.mdx で全体構成を定義
2. 複数のエージェントを並列起動し、各Partを同時に執筆
3. 各エージェントが独立して章を作成
4. チームリードが全体の整合性を確認

この本自体がまさにそのワークフローで作られている。

検索インデックス

ビルド時インデックス生成

> ビルドスクリプトで全MDXファイルからFlexSearchインデックスを生成して。
> タイトル、説明、本文を対象に日本語対応で。

Claude Codeは scripts/generate-search-index.ts を作成し、ビルド時に全コンテンツをインデックス化するスクリプトを生成した。

OG画像の自動生成

satori によるSVG → PNG変換

各ページに動的なOG画像を生成する仕組みも、Claude Codeが構築した。

> satoriを使って、記事タイトルとカテゴリを含むOG画像を自動生成するAPIを作って。
> フォントはNoto Sans JPで。

PWA対応

> next-pwaでPWA対応して。
> マニフェスト、アイコン、Service Workerの設定を含めて。
> オフラインでも閲覧できるようにキャッシュ戦略を設定。

Service Worker キャッシュ戦略

• 静的アセット: Cache First（フォント、画像）
• HTMLページ: Stale While Revalidate（オフライン閲覧可能）
• API: Network First

Claude Codeで医療アプリを作る際の注意点

1. 医療情報の正確性

AIが生成したコンテンツは必ず医療専門家がレビューする。Claude Codeはコードを書くが、医療情報の正確性は人間が担保する。

2. プライバシー

患者データを扱う場合は特に注意。Claude Codeの対話ログにPHI（Protected Health Information）を含めない。

3. アクセシビリティ

医療情報は誰にでもアクセスできるべき。WCAG準拠を意識したコンポーネント設計を行う。

> このコンポーネントのアクセシビリティを改善して。
> aria-label、キーボードナビゲーション、コントラスト比を確認して。