今回の課題

Qwen3.5に、6ページの歯科クリニックサイトを作る課題を渡しました。HTML、Tailwind CSS、Alpine.jsだけを使い、ビルドステップとSPA化は禁止しました。複数ページの構成を保ち、共通UIと各ページの操作を実装できるかを見るためです。

全体の所要時間は約18分2秒でした。モデルは必要なファイルを生成したと報告しています。

多言語対応はUIを中心とし、保守性とSEOも要件に含めました。

評価したかったこと

  1. 静的な複数ページサイトの設計
  2. ARIA属性、フォーカス管理、コントラストへの対応
  3. Alpine.jsによる軽量な操作の実装
  4. ツールのエラー復旧と環境への対応

課題の条件

使用できる技術

  • Plain HTML files only（ビルドステップなし）
  • Tailwind CSS via CDN
  • Alpine.js via CDN（軽量インタラクションのみ）
  • 外部UIコンポーネントライブラリ禁止
  • 参照サイトからの画像・テキスト流用禁止

必要な6ページ

ファイル内容主要インタラクション
index.htmlHero、サービスカード、医師プレビュー、ニュース、CTAなし（静的）
services.html12+治療カード、カテゴリフィルタAlpine.jsフィルタ、FAQアコーディオン
doctors.html6+プロフィール詳細展開UI
info.html料金表、保険、支払い方法Estimateモーダル
visit.html来院フロー、予約導線バリデーション状態
access.html住所、交通、マップ経路切替タブ（車/電車/徒歩）

共通レイアウト

  • ヘッダー: クリニック名、主要ナビ、言語切替UI
  • モバイルナビ: Alpine.jsハンバーガーメニュー、フォーカス管理、ESC-to-close
  • Book Appointment: デスクトップはヘッダー、モバイルは画面下部固定
  • フッター: クリニック情報、プライバシー/利用規約リンク、著作権

ページ数と必要な操作を固定し、同じ課題でモデルを比較できるようにしました。

実行の記録

ディレクトリ作成の失敗と復旧

最初のCreate directory siteは、Path to create was outside the projectで失敗しました。その後、モデルは次の手順で再試行しました。

  1. list_allowed_directoriesを呼び出す
  2. 許可ディレクトリに/があることを確認する
  3. /Users/ksh3/Development/sandbox7/siteとsite/assetsを絶対パスで作り直す

失敗後に許可範囲を確認し、パスを変えて処理を続けています。

ファイルの生成順序

HTMLを1ページずつ書き、README.mdを追加しました。ディレクトリ一覧を確認した後、assets/placeholder.svgも追加しています。

  1. ディレクトリ構造の作成
  2. 各ページの生成（index -> services -> doctors -> info -> visit -> access）
  3. README作成
  4. 一覧でファイル存在確認
  5. 補助アセット追加

モデルが報告した内容

ページ報告内容
index.htmlHero、8件サービスカード、6件Why Choose Us、4人医師プレビュー、3件ニュース、診療時間/保険要約、CTAバンド
services.html16件治療カード、カテゴリフィルタ、6件FAQアコーディオン
doctors.html6人プロフィール、展開可能な詳細
info.html8項目料金表、コスト内訳モーダル、保険・支払い方法
visit.html6段階来院フロー、予約方法、バリデーション状態
access.html連絡先、診療時間、経路切替タブ

ページ別の記録

元の記録には、ページごとの機能をまとめた次の表もあります。

ページ名実装された主な要素・機能Alpine.js によるインタラクション
Home (index.html)ヒーロー、8つのサービスカード、4つの強み、医師プレビュー、ニュース、診療時間モバイルナビゲーション、言語切替UI
Services (services.html)14種類の治療カード、4つのカテゴリ、FAQセクションクライアントサイドのカテゴリフィルタリング、FAQアコーディオン
Doctors (doctors.html)6名の医師プロフィール、専門分野、言語、資格情報プロフィールの「詳細を見る」展開・収納機能
Info (info.html)8項目の料金表、保険対応リスト、支払い方法費用内訳を表示する動的な見積もりモーダル
Visit (visit.html)6ステップの初診フロー、予約方法の案内バリデーション機能付きの予約リクエストフォーム
Access (access.html)連絡先、地図プレビュー、近隣駅、駐車場情報移動手段（車/電車/徒歩）別のルート案内切り替え

上の自己報告では治療カードが16件、こちらの表では14種類です。Homeの強みも6件と4つで異なります。HTMLが残っていないため、どちらの数が実装に対応するかは確認できません。

レイアウトとアクセシビリティの報告

予約ボタンは、モバイルでは画面下部に固定し、デスクトップではヘッダーに置く構成です。ハンバーガーメニューはAlpine.jsを使い、フォーカス管理とESCキーで閉じる操作に対応したと記録されています。

HTMLについては、header、nav、main、footerを使い、見出しをh1からh3まで整理したとの報告があります。外部UIライブラリを使わず、読み込みを軽くし、レイアウトシフトを抑える方針でした。

所要時間と診断の報告

全プロセスは約18分2秒でした。

  • 6ページ分のHTML、CSSクラス、JSロジックを生成
  • すべてのHTMLファイルでDiagnostics上のエラー・警告なし
  • ローカルSVGとインラインアイコンを使用

次の比較で確かめたいこと

生成されたHTMLが残っていないため、今回の自己報告だけでは品質を判断できません。実ファイルでは、次を確認する必要があります。

  • ARIA属性の有無
  • フォーカス管理の実装
  • Tailwindのクラス構成
  • Alpine.jsの状態管理

次回は同じプロンプトを別モデルにも渡し、生成ファイル、スクリーンショット、レビュー結果を残して比較したいと思います。アクセシビリティ、操作、クラス構成を定量評価します。

複数ページの構成崩れ、アクセシビリティの欠落、Alpine.jsの実装不足、共通レイアウトの不整合、READMEの不足も整理します。コンテンツ翻訳まで広げる場合は、UIの多言語対応とは別に、翻訳する範囲と更新方法を決める必要があります。