見やすい画面構成を設計する

データを「ひと目でわかる画面」にまとめる力を身につけましょう。

レストランのメニューを想像してみてください。前菜・メイン・デザートがバラバラに並んでいたら、何を頼めばいいか迷ってしまいますよね。でも「コース順」にきれいにまとまっていたら、スッと選べます。

データの画面（ダッシュボード＝情報をひとまとめに見せる画面）も同じです。数字が散らばっていると読む人が困ります。このレッスンでは、AIツールを味方につけて、情報を整理した見やすい画面構成を設計する方法を学びます。

このレッスンを始める前に、以下を用意してください。

• 見せたいデータ（売上、アクセス数など）の内容が頭にあること
• ブラウザで ChatGPT や Claude などの AIチャットツール（＝人工知能と対話できるチャット画面）を開けること

プログラミングの経験は一切不要です。

見やすい画面は、大きく3つの領域に分かれています。

1. ヘッダー（＝画面の一番上にあるタイトル部分） — 「この画面は何を見るためのものか」を伝える
2. サマリー（＝重要な数字を大きく見せるエリア） — いちばん伝えたい数字を2〜3個だけ置く
3. 詳細エリア（＝グラフや表で深掘りするエリア） — サマリーの裏付けとなるグラフや表を並べる

良い例と悪い例を見比べる

良い例: 画面上部に「今月の売上レポート」というタイトル → その下に売上合計・前月比・目標達成率の3つの数字を大きく表示 → さらに下に月別の棒グラフが並んでいる。見る人は上から順に読むだけで全体像がつかめます。

悪い例: タイトルがなく、「売上合計」と「日別アクセス数グラフ」と「商品一覧表」が順不同で散らばっている。何を伝えたい画面か分からず、見る人が迷子になります。

AIツールに助けてもらいながら、画面構成の案を作りましょう。以下の3ステップで進めます。

ステップ1: データの中身をAIに伝える

ブラウザで ChatGPT や Claude を開き、次のプロンプト（＝AIへの指示文）を送ってください。[...] の部分はあなたのデータに書き換えます。

私は非エンジニアです。以下のデータを見せるためのダッシュボードの画面構成を考えてください。
テキストのワイヤーフレーム（＝画面のざっくりした設計図）で描いてください。

データ内容: [あなたのデータの内容をここに書く]
対象読者: [この画面を見る人。例: チームリーダー、営業部のメンバー]

条件:
- 画面は「ヘッダー」「サマリー」「詳細」の3つの領域に分ける
- サマリーに置く数字は最大3つまで
- 非エンジニアが見てもひと目でわかる配置にする

良いプロンプトの例

データ内容: 月別の売上（1月〜6月）、商品カテゴリ別の売上比率、目標達成率
対象読者: 営業チームのリーダー（週1回のミーティングで使う）

→ 「誰が」「どんな場面で」見るかまで書くと、AIが読み手に合わせた提案をしてくれます。

悪いプロンプトの例

データ内容: いろいろなデータ
対象読者: みんな

→ あいまいだと、AIも当たり障りのない一般論しか返せません。

ステップ2: AIの回答をチェックする

AIが出してくれたワイヤーフレームを見て、次の4つの観点で○×をつけてください。

ステップ3: AIに修正を依頼する

チェックで「×」がついた項目があれば、AIに修正を頼みましょう。具体的に伝えるのがコツです。

良い修正依頼の例:

サマリーの数字が5つあって多すぎます。いちばん大事な「売上合計」「前月比」「目標達成率」の3つだけに絞ってください。

悪い修正依頼の例:

もっと良くして。

→ 「何を」「どう変えたいか」を具体的に書くと、AIが的確に直してくれます。

あなたが設計した画面構成をテキストでまとめます。メモ帳や Google ドキュメントなどで、次の形式に沿って書いてください。

# [画面のタイトル]

• 表示する内容: [タイトルや対象期間]
• 対象読者: [誰がこの画面を見るか]

• 数字1: [例: 売上合計 ¥1,234,567]
• 数字2: [例: 前月比 +12%]
• 数字3: [例: 目標達成率 87%]

• グラフ1: [グラフの種類と見せるデータ。例: 棒グラフ・月別売上推移]
• グラフ2: [例: 円グラフ・商品カテゴリ別比率]
• 表: [必要なら記入。例: 商品別売上TOP10]

このテキストを保存し、AIが作ったワイヤーフレームのスクリーンショット（＝画面の写真）と一緒に提出してください。

以下の3つがすべて「はい」なら、このレッスンは完了です。

1. テキスト形式の画面構成ドキュメントを保存できた
2. AIが作ったワイヤーフレームのスクリーンショットがある
3. 画面構成に「ヘッダー」「サマリー」「詳細」の3領域が含まれている

• 「どんなグラフを選べばいいかわからない」 — AIに次のように聞いてみてください: 「このデータに合うグラフの種類を3つ、それぞれの特徴と一緒に提案して」
• 「情報が多すぎて画面に収まらない」 — 「この画面でいちばん伝えたいことは何か？」を1つだけ決めてください。それ以外は別の画面に分けるか、詳細エリアの表にまとめましょう
• 「AIの回答がむずかしい」 — 「小学生にもわかるように説明して」「専門用語を使わないで」と追加で伝えると、よりシンプルな回答が得られます
• 「ワイヤーフレームが文字だけで想像しにくい」 — AIに「この画面構成をHTMLで簡単に作って」と頼むと、ブラウザで実際の見た目を確認できます（コードの知識は不要で、ファイルを開くだけでOK）