分かりやすい一覧とダッシュボードを作る

レストランのメニューを想像してみてください。料理名だけがずらっと並んでいるメニューと、「肉料理」「魚料理」「デザート」と分類されて写真や価格も見やすいメニュー——どちらが注文しやすいでしょうか？

ダッシュボード（＝データを一目で把握できるまとめ画面）も同じです。情報をただ並べるだけでは読む人が迷います。この Atom では、AIツールを使って「誰でもパッと読める一覧画面」を15分で作れるようになります。

まず「この画面は誰が・何を知るために見るのか」を1〜2文で書き出します。目的がないまま作り始めると、情報を詰め込みすぎて読めなくなります。

良い例:

• 「チーム全員が、今月の売上目標の達成率を一目で確認する画面」
• 「店長が、顧客からの問い合わせ対応が済んだかどうかをすぐに判別できる一覧」

悪い例:

• 「とりあえず全部のデータを出す」（目的がない → 何を見ればいいか分からない画面になる）
• 「自分だけが分かればいい」（見る人が曖昧 → 他の人に共有できない）

やること: メモアプリに「誰が」「何を知りたいか」を1〜2文で書いてください。これが以降のすべての判断基準になります。

目的に合った項目だけを厳選します。料理のコースメニューのように、メインとなる情報を3〜5個に絞るのがコツです。

良い例:

• 顧客一覧なら →「名前」「最終連絡日」「対応ステータス」の3項目
• 売上ダッシュボードなら →「今月の合計」「目標との差」「前月比」の3項目

悪い例:

• 20列もある表（情報過多で見る人が疲れる）
• 項目名が「fld_01」のような機械的な名前（何のデータか伝わらない）

選ぶときの3つの基準

1. その項目を見て「次にやること」が決まるか？ → 決まらないなら不要
2. 最初は3〜5項目に絞る → 少なく始めて後から足すのは簡単
3. 項目名は「日本語で意味が伝わる名前」にする → 「売上合計」「対応状況」など

ここからAIツールの出番です。目的と項目をAIに伝えて、画面のレイアウト（＝配置の仕方）を提案してもらいます。

使えるAIツール

どれを使っても大丈夫です。以下のプロンプト（＝AIへの指示文）をコピーして、角カッコの部分を自分の内容に書き換えてください。

私はプログラミング経験のない非エンジニアです。
次の目的で、分かりやすい一覧画面を作りたいです。

■ 目的：[ここに先ほど書いた目的を貼る]
■ 表示したい項目：[ここに3〜5個の項目を書く]
■ 見る人：[チーム全員 / 店長 / 自分とマネージャー など]
■ データの例（2〜3行）：
  - [例: 田中太郎, 2026-04-10, 対応済み]
  - [例: 鈴木花子, 2026-04-12, 未対応]

この一覧画面のレイアウト案を、表形式で2パターン提案してください。
それぞれのパターンで「どんな場面に向いているか」も教えてください。

ポイント: 「2パターン提案してください」と書くと、AIが比較しやすい選択肢を出してくれます。1つだけだと良し悪しが判断しにくいので、必ず複数案をもらいましょう。

設計案が決まったら、AIに実際の画面を作ってもらいます。

方法A: AIにHTMLファイルを生成してもらう（おすすめ）

次のプロンプトをAIに送ります。

先ほどのレイアウト案のパターン[A or B]で、見やすい一覧画面のHTMLファイルを作ってください。

条件：
- 白を基調としたシンプルなデザイン
- 日本語の見出し
- スマートフォンでも見られるように横幅を自動調整
- 色は3色以内
- 重要な数字は大きく太字で表示

AIが生成したコードを、次の手順で画面にします。

1. テキストエディタ（メモ帳でもOK）に生成されたコードを貼り付ける
2. ファイル名を dashboard.html にして保存する（.html はファイルの種類を表す拡張子です）
3. 保存したファイルをダブルクリックしてブラウザで開く

方法B: ノーコードツールで作る

Glide・AppSheet・Notionなどのノーコードツール（＝プログラミングなしでアプリを作れるサービス）をすでに使っている場合は、AIに「このツールでの設定手順」を聞くこともできます。

[ツール名]で、以下の項目を持つ一覧画面を作りたいです。
項目：[項目を書く]
設定手順をステップバイステップで教えてください。

作った画面を、次の「5秒チェック」で確認しましょう。これは料理で言えば「お皿を見た瞬間に何の料理か分かるか」と同じ考え方です。

5秒チェックリスト

• 画面を開いて5秒以内に「一番大事な情報」が見つかるか
• 見出しが日本語で分かりやすいか（英語や略語だけになっていないか）
• 数字が揃って表示されているか（桁がバラバラになっていないか）
• 色使いが3色以内に収まっているか
• 「次に何をすればいいか」が画面を見て判断できるか

チェックが通らない項目があったら、AIに修正を頼みます。

作ってもらった画面について、以下を修正してください。
- [修正したい内容を書く]
例：「見出しを日本語に変えてください」「数字を右揃えにしてください」

完成した画面のスクリーンショット（＝画面の写真）を撮りましょう。

• Windowsの場合: Win + Shift + S を同時に押して範囲を選択
• Macの場合: Cmd + Shift + 4 を同時に押して範囲を選択

このスクリーンショットが、この Atom の成果物（＝あなたが学習した証拠）になります。

この Atom で身につけたことを確認しましょう。

1. 目的を決めた —— 「誰が・何を知るための画面か」を言語化できる
2. 項目を絞った —— 3〜5項目に厳選して、情報過多を防げる
3. AIに設計と作成を頼んだ —— 具体的なプロンプトで指示を出せる
4. 見やすさを確認した —— 5秒チェックで品質を判断できる

これで「データを一目で読める画面」を自分で作れるようになりました。次は、この画面を他の人にも使ってもらう（ユーザーテスト）ステップに進みましょう。