SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

AIの出力に“デザインの視点”をプラスする ──エンジニアのためのUX改善入門

AIに「認知負荷の低い画面」を作らせるには? 開発者のための「引き算」の情報設計とプロンプトのコツ

AIの出力に“デザインの視点”をプラスする ──エンジニアのためのUX改善入門 第4回

 最近では、エンジニアがデザインをAIで生成してそのまま実装に落とし込むケースが増えています。しかし、その際に直面するのは、見た目は整っているのにUI/UXが機能せず、サイトが想定通りに使われないという問題です。本連載ではそんなエンジニアのために、UXを改善するヒントを株式会社Faciloのフロントエンドエンジニアであり、ZEN大学客員講師を務める折原レオナルド賢が指南します。第4回のテーマは「情報設計」です。機能や情報を増やせば、ユーザーにとって便利になるとは限りません。すべてを同じ重みで画面に並べると、ユーザーは次に何をすればよいかがわからず、次の操作に進めなくなることがあります。今回は、ユーザーの目的に合わせて情報の優先順位をつけ、あえて「出さないもの」を決める方法を解説します。

全データを画面に出すと「選べないUI」が完成する理由

 あなたは引っ越し先を探すとき、何を基準に物件を選びますか。不動産サイトの物件一覧を想像してみてください。物件名、住所、価格、間取り、築年数、接道状況、周辺施設、災害リスク……。データベースには数多くの情報が格納されています。機能面でも、検索、絞り込み、並び替え、詳細表示など、さまざまな実装が可能です。

 せっかくサイトを構築するなら、すべての条件や機能を搭載したほうがよいと考えるかもしれません。ではここで、取得できる情報をすべて一覧に表示してみましょう。

 実際の画面を見ると、いかがでしょうか。かえって分かりにくいUIになってしまったはずです。

 ユーザーはどこを見ればよいか迷い、自分に必要な物件を選べなくなります。一覧で把握したい基本情報と、検討が進んだ段階で必要な詳細情報が同じ優先順位で並び、一覧画面が「すべて詳細」の状態になってしまうためです。

 開発者が情報を過剰に並べてしまう背景には、「保持しているデータはすべて見せたほうが親切だ」という意図もあるでしょう。しかし、UI設計においては「情報を出すこと」と「ユーザーに伝わること」は別物です。

 この問題は、生成AIを活用した画面開発でも同様に起こり得ます。AIはマンション名や価格といった一般的な重要項目は認識できますが、文脈に応じた優先順位までは明示的に指示しなければ判断できません。そのため、参照するデータベースだけを指定すると、項目を単に並べただけの画面を生成してしまうことがあります。

 情報が過多な画面では、ユーザー自身に必要な情報を探し、比較し、不要な情報を頭の中で除外する負荷が発生します。結果として選択に時間がかかり、途中で離脱したり、十分な比較を行わないまま妥協して購入・契約を決めたりしてしまいます。どれほど便利な機能を実装しても、ユーザーに見つけて使ってもらえなければ、存在しないことと同義なのです。

UI生成に必要な情報設計とは?「見せる・隠す・渡す」の表示制御

 情報設計とは、ユーザーが目的を達成しやすいように、情報の構造、優先順位、導線を整理することです。画面上の配置だけでなく「初期表示で何を見せ、何を非表示にし、どのタイミングで詳細を開示するか」という表示制御まで含みます。

 情報設計を検討するうえで重要な認知心理学の法則に「ヒックの法則」があります。これは「選択肢が増えるほど、意思決定にかかる時間が対数的に増加する」という原則を示したものです。画面のデザインを綺麗に整えても、同じ優先度の選択肢が大量に並んでいれば、ユーザーは選択のために余計な認知コストを支払います。情報設計の主な目的は、この認知負荷を軽減することにあります。

 身近な例として、券売機のUIが挙げられます。温かいそば、冷たいそば、うどん、天ぷら、トッピング、セットメニューがすべて同じサイズのボタンで並んでいると、目当てのボタンを探すだけで時間を要します。最初に「温かいそば」「冷たいそば」といった大分類で分ければ、選択肢を段階的に絞り込めます。

 反対に、AED(自動体外式除細動器)のように緊急時の迅速な操作が求められる機器では、UIが必要最小限まで削ぎ落とされています。次にとるべき行動が即座に理解できるよう、表示や操作手順が限定されているのです。仮に多くの機能やボタンが同列に並んでいれば、操作結果の理解に時間がかかり、ヒューマンエラーのリスクが高まります。

 WebアプリのUI設計も根本的な考え方は同じです。主要情報と補助情報を定義し、初期表示する項目を選定し、詳細情報は要求されたタイミングで開示します。すべての情報を一律に削るのではなく、ユーザーのステータスに合わせて情報を整理して渡すことが情報設計の本質です。

次のページ
「今必要なものがわかる」理想的なUIの作り方

この記事は参考になりましたか?

AIの出力に“デザインの視点”をプラスする ──エンジニアのためのUX改善入門連載記事一覧

もっと読む

この記事の著者

折原レオナルド賢(オリハラ レオナルド ケン)

 株式会社サイバーエージェントに新卒入社し、新人賞を受賞。LINEビジネスコネクトAPIやAIカスタマーサポートプロダクトの開発に携わり、インフラ設計、フロントエンド開発、デザイン、UI/UXなど幅広い領域を経験。その後、LINE株式会社にて、7,500万MAUを超えるLINE NEWSのフロントエ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営する開発者のための情報メディアです。日々の開発に取り組むエンジニアやテクノロジーを学びたい方に向けて、プログラミングやAI活用、開発ツール、エンジニアの学びとキャリアに関する記事をお届けしています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/29509 2026/10/08 08:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー