前回は、Claude Codeで作り始める前に、目的や利用者、入力、出力などの要件を整理する方法を紹介しました。
要件メモができたら、次はいよいよ実装です。
ここで、
うっかり戌「画面も、データ保存も、集計も、全部まとめて作ってください」
と、頼みたくなります。
しかし、完成した画面を見てから「入力項目が多い」「ボタンの位置が分かりにくい」「そもそも一覧で見たい情報が違う」と気づくことは珍しくありません。
画面と裏側の仕組みを一度に作っていると、小さな見直しがデータ保存や集計処理の修正にまで広がります。
第4回は、仮データで画面のたたき台を先に作り、実際に触ってから中身へ進む考え方を、いざな丑と一緒に整理します。
冒頭漫画
「見た目」と「中身」は分けて考える
いざな丑ここでいう「見た目」は、色や装飾だけではありません。利用者が目にして操作する部分全体を指します。
- どの項目を入力するか
- 情報をどの順番で並べるか
- どこを押すと何が起きるか
- 一覧、検索、絞り込みをどう見せるか
- エラーや完了をどう伝えるか
一方の「中身」は、入力したデータの保存、集計、権限管理、外部サービスとの連携など、画面の裏側で動く仕組みです。
まず確認用の画面を作ることで、利用者は文章だけでは気づきにくかった違和感を具体的に伝えられます。
なぜ画面を先に作ると手戻りが減るのか
利用者が具体的に意見を言える
要件メモを読んだだけでは、「だいたい良さそうです」で終わることがあります。
ところが画面を触ると、「担当者は最初から表示してほしい」「電話番号は一覧には不要」「検索は画面上部にほしい」といった意見が出ます。
これは要件整理の失敗ではありません。実物に近いものを見ることで、利用者自身も必要なものを理解できるからです。
不要な機能を作る前に止められる
画面に置いた項目やボタンには、通常、その裏側の保存・処理・権限が必要になります。
画面を確認する前に中身まで作ると、後から不要と分かった項目のために、保存先や集計処理まで作り直すことになります。
仮データの画面で不要なものを外せば、作らなくてよい中身も早い段階で分かります。
「完成」の認識をそろえやすい
「使いやすく」「見やすく」という言葉は、人によって意味が違います。
画面を見ながら、必要な情報、操作の流れ、見やすさを合意しておけば、Claude Codeへ次の指示を出すときも具体的になります。
最初の画面試作で確認したい5つのこと
| 確認項目 | 見るポイント | 問い合わせ記録ツールの例 |
|---|---|---|
| 項目 | 必要・不要、入力の負担 | 電話番号は詳細画面だけにする |
| 並び順 | よく見る情報が先か | 対応状況を一覧の左側に置く |
| 操作 | 迷わず次へ進めるか | 新規登録ボタンを上部に置く |
| 見やすさ | 優先度や異常が分かるか | 未対応だけ色で目立たせる |
| 利用場面 | 実際の端末で使えるか | 小さなノートPCでも確認する |
見た目の好みだけで判断せず、実際の仕事が迷わず進むかを基準にします。
いざな丑できれば、作成を依頼した人だけでなく、実際に使う担当者にも触ってもらいましょう。現場で頻繁に使う項目や、入力しにくい操作は、利用者のほうが早く気づけます。
Claude Codeへの依頼例
要件メモを渡したうえで、次のように依頼します。
添付の要件メモをもとに、まず画面のたたき台を作りたいです。
この段階では本番データの保存、外部サービスとの連携、
顧客への通知は実装しないでください。
架空のサンプルデータを使い、利用者が次の内容を確認できる
画面と操作だけを試作してください。
・表示する項目と並び順
・登録から一覧確認までの操作
・検索と絞り込みの位置
・対応状況の見分けやすさ
・PC画面での使いやすさ
実装前に、作る画面、操作の流れ、今回作らない範囲を整理し、
私の確認を待ってください。「サンプルデータを使う」「本番データは保存しない」「今回作らない範囲」を明記するのがポイントです。
いざな丑また、Claude Codeの公式ベストプラクティスでは、調査・計画・実装・確認を分ける進め方が紹介されています。いきなりファイルを変更させず、まず計画を確認したい場合はPlan modeを利用できます。
画面ができたら、言葉ではなく操作で確認する
画面が表示されたら、眺めるだけで終わらせず、実際の仕事を想定して操作します。
- 新しい問い合わせを登録する
- 一覧から未対応のものを探す
- 担当者や状況で絞り込む
- 内容を修正する
- 完了した記録を確認する
この流れで詰まった場所を記録し、Claude Codeへ一つずつ修正を依頼します。
画面が固まったら、必要な入力、保存するデータ、処理、権限を整理し、裏側の実装計画へ進みます。
画面先行でも、後回しにしてはいけないこと
画面を先に作る方法は、すべての設計を後回しにする方法ではありません。
- 個人情報や機密情報を扱うか
- 誰が閲覧・登録・修正・削除できるか
- 既存システムや外部サービスと連携するか
- データをどこへ保存し、どのくらい保持するか
- 誤操作や障害が業務へ与える影響
- 法令、社内規程、契約上の制約があるか
いざな丑仮画面が使いやすくても、権限やデータ管理に問題があれば業務では使えません。顧客情報、決済、外部公開、重要な判断が関わる場合は、情報システム部門や専門家の確認を入れましょう。
よくある3つの誤解
最初からきれいなデザインを完成させる
最初の目的は、装飾を完成させることではありません。項目、並び順、操作の流れを確認できる程度から始めます。
仮画面が動いたので、そのまま本番利用する
サンプルデータで動く画面と、安全にデータを保存できる業務システムは別物です。試作を本番へ移す前に、テスト、権限、バックアップ、運用方法を確認します。
作った人だけで確認する
作成者には自然な操作でも、初めて使う人には分かりにくいことがあります。実際の利用者に、説明なしで触ってもらうことが大切です。
いざな丑のひとこと
いざな丑Claude Codeは、指示したものを短時間で形にできます。だからこそ、最初から全部を作らせると、違う方向へ進む速度も速くなります。
いざな丑画面で認識をそろえてから中身へ進めば、Claude Codeへの指示も明確になり、手戻りを小さくできます。
次回は、「プランモードと実装モードの使い分け」をテーマに、Claude Codeへ考えてもらう段階と、実際にファイルを変更してもらう段階をどう分けるか紹介します。
生成AI・Claude Codeの業務活用を検討している企業様へ
Claude Codeを使えば、非エンジニアでも業務ツールの試作に取り組みやすくなります。一方で、作る順番や確認方法を決めずに進めると、試作だけが増え、現場で使える状態へ進まないことがあります。
株式会社いざなうでは、生成AI・Claude Codeの活用テーマ整理、画面試作、要件検討、社内研修、運用ルールづくりをご支援しています。
「作りたいものはあるが、どの順番で進めればよいか分からない」「試作品を業務利用へつなげたい」という段階から、お気軽にご相談ください。
「自社では何から始めるべきか分からない」という段階から、お気軽にご相談ください。
▼お問い合わせ▼
参考情報
- Claude Code公式ドキュメント：Best practices for Claude Code
- Claude Code公式ドキュメント：Choose a permission mode
- Claude Code公式ドキュメント：How Claude Code works
記事の企画・監修
DXコンサルタント 蓼沼 康之（たでぬま やすゆき）
株式会社いざなう 代表取締役社長
＜経歴＞
不動産デベロッパーにて、DX推進部門の立ち上げと業務改革に従事。その後、不動産テック企業の経営陣として、大手不動産会社や地方銀行を担当し、不動産情報や不動産ビッグデータの有効活用支援、DX推進コンサルティングを手がける。
営業DXの観点から、見積もり、発注、不動産データの納品までを自動化するDXサービスを企画・ローンチするなど、事業開発にも携わる。
生成AIの活用支援や導入コンサルティングの実績も豊富で、大手不動産会社から中小企業まで、企業規模を問わず幅広く支援している。業務効率化や営業支援、社内活用の定着まで、各社の課題に応じた実践的な導入をサポートしている。
