アンケート結果ダッシュボード（円・棒グラフ＋自由記述）
この画面パターンについて
単一選択・複数選択・自由記述が混在するアンケートの結果を、質問ごとに切り替えて確認するダッシュボード画面です。3枚の概要カードで各設問の結果タイプと要点を見渡し、選んだカードの詳細パネルで円グラフ・横棒グラフ・回答一覧を表示します。選択中の設問IDだけをstateで持ち、カードと詳細を同じデータから再描画することが実装の核心です。
こんな場面で使えます
- 利用者アンケートの結果確認 — 満足度・利用状況・改善要望をまとめて把握する
- イベント後の振り返り — 選択式の集計と参加者コメントを同じ画面で確認する
- 社内調査のレポート画面 — 質問ごとの傾向を関係者に共有する
この画面で使っているUIコンポーネント
| # | パーツ | この画面での役割 |
|---|---|---|
| 1 | 画面ヘッダー | アンケート名・実施期間・回答数を表示 |
| 2 | 回答サマリー | 回答数と回答率を数値で把握する |
| 3 | 設問概要カード ×3 | 設問種別・主要な結果・選択状態を一覧表示 |
| 4 | ボタン型設問切り替え | カード操作でstate.selectedQuestionIdを更新 |
| 5 | 円グラフ | 単一選択の回答構成比を表示 |
| 6 | 横棒グラフ | 複数選択の選択数を比較表示 |
| 7 | 自由記述回答一覧＋ページング | 48件を10件ずつ全件表示 |
| 8 | 詳細データリスト | グラフの値・割合をテキストでも併記 |
実装のポイント・注意点
画面の状態は選択中の設問IDと自由記述のページ番号だけで管理します。概要カードを押すと設問IDとページ番号を初期化し、render()がカードの選択状態と詳細パネルをまとめて更新します。自由記述は48件を10件ずつページングし、重要な回答が一部表示の外に残らないよう全件に到達可能にします。Chart.jsは描画前に既存インスタンスをdestroy()してから生成し、設問切り替えごとのキャンバス重複を防ぎます。
8個のUIコンポーネントをHTML・CSS・バニラJavaScriptのみで組み合わせており、フレームワーク不要で画面ごとコピペして使えます。
動作サンプル
動作サンプルを別ウィンドウで確認 ↗
試してみる：
- 3枚の概要カードを選び、詳細パネルが円グラフ・横棒グラフ・自由記述一覧へ切り替わることを確認
- 「利用した機能」を選び、複数選択の合計が回答数を上回る理由を注記で確認
- 「改善したい点」を選び、ページ番号と「次へ」で48件の自由記述を全件確認できることを試す
そのほかの操作も自由に試してみてください。
サンプルソース
4つのファイルを同じフォルダに保存し、ローカルサーバー（VS Code Live Server等）経由でindex.htmlを開くと動作確認できます。
ファイル名：index.html / style.css / script.js + data/フォルダにdata.json
— fetchを使用しているためfile://での直接表示は動作しません（CORSエラー）。保存時の文字コードはUTF-8を指定してください。
サンプルソースを読み込んでいます...サンプルソースを読み込んでいます...サンプルソースを読み込んでいます...サンプルソースを読み込んでいます...AI用プロンプト
以下のプロンプトをコピーしてAIに渡すと、同様の画面パターンを生成できます。
※ このプロンプトを使ってもデモとまったく同じ動作にならない場合があります。AIの解釈や生成タイミングによって差が出ることをご了承ください。
💡 jQuery・Vue・React など特定のライブラリで実装したい場合は、プロンプトの末尾に「〇〇を使って実装してください」と追記してください。
# アンケート結果ダッシュボード 作成依頼
## 概要
単一選択・複数選択・自由記述が混在するアンケートの結果を、質問ごとに切り替えて確認できるダッシュボード画面を作成してください。概要カードで全設問を見渡し、選択した設問だけを詳細表示する構成にしてください。
## 要件
- ヘッダーにアンケート名、実施期間、最終更新日時を表示する
- 回答数と回答率を表示するサマリーを置く
- 単一選択・複数選択・自由記述の3問を、概要カード3枚で横並びに表示する
- カードはbutton要素にし、選択中は視覚的なハイライトと aria-pressed="true" を付ける
- 単一選択はChart.jsのドーナツグラフ、複数選択は横棒グラフ、自由記述は48件を10件ずつのページングで詳細表示する
- 自由記述には「48件中 1〜10件」の範囲、前へ／次へ、ページ番号を表示して全件に到達できるようにする
- グラフには選択肢・回答数・割合のテキストリストを併記する
- 複数選択には、合計が回答者数を上回る旨を注記する
## 技術仕様
- HTML / CSS / バニラJavaScriptで実装
- 外部ライブラリ：Chart.js v4（https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js）
- JSONをfetchで取得し、state = { selectedQuestionId: 'satisfaction', commentPage: 1 } の2値で画面全体を管理する
- 設問の切り替え前に既存のChart.jsインスタンスを destroy() する
- DOM生成はcreateElement + textContentを使い、innerHTMLに変数を結合しない
- レスポンシブ対応：768px以下では概要カードと詳細のグラフ・リストを1列にする
## 出力形式
HTML・CSS・JavaScript・JSONを分けて出力してください。
各ファイルは単独でコピー&ペーストして使えるよう記述してください。