誰でも作れてしまう時代に知っておきたいデザインの話

Wantedlyでプロダクトデザイナーをしているkanon(@prgbunbun)です！Wantedlyで行われている夏のアドベントカレンダー12日目の記事として、誰でも作れてしまう時代だからこそ、非デザイナーの方にも知っておいてほしいデザインの話をしていこうと思います。

生成AIの発達によって、誰でもソフトウェア開発ができるようになりました。知識や経験がない状態でも、生成AIと共にプロダクトを作り上げ、稼ぎを出す人も出てきましたね。

しかし、ソフトウェア開発でまだまだ欠かせないのが、UIデザインです。UIはただの画面上の装飾のことではありません。対象となるユーザーが、どういった流れで画面内の情報を認知していくのか、ボタンを押したらどうなるのか、全体の体験をあらかじめ設計しておく必要があります。この分野は、「インタラクションデザイン」と呼ばれることもあります。

インタラクションデザイン
人々がどうテクノロジーとインタラクションするかに注目する。目標は、何ができるか、何が起こっているのか、何が今起こったのか、についての人々の理解を向上させることにある。インタラクションデザインは、前向きで楽しい経験を増すために、心理学、デザイン、アート、情動の原則を利用する。
（D.A.ノーマン,『誰のためのデザイン？ 増補・改訂版』（2015）新曜社）

生成AIと共に開発する場合、デザイナーに依頼せずとも、わざわざデザインというフローを挟まなくても、良い感じのUIを作れるようになったかもしれません。しかし、自分の中にデザインの知識を持っていると、フィードバックループを回せるようになり、もっと早く、良いものを作ることができます。自身が携わっているプロダクトをもっと磨き込みたい方にぜひ知っておいてほしいデザインの考え方を今回は紹介します。

メンタルモデルへのチューニング

「メンタルモデル」とは、個々人が持っている、ある対象の動作や仕組みに対する“心の中の理解・期待”のことです。デザインの文脈では、メンタルモデルに対比するものとして「実装モデル（システムがどう動くか）」があります。

例えば、ユーザーが画像をアップロードするUIを操作するとき、「ボタンを押せば画像がアップロードされて、画面に表示されるだろう」と直感的に期待します。これがメンタルモデルです。

一方、エンジニア側の実装では、裏で画像のバリデーションを行い、CDNに非同期でアップロードし、URLを取得してキャッシュに登録し、遅延表示に備えてプレースホルダーを出して…といった複雑な処理が走っているかもしれません。

しかし、こうした内部構造をユーザーが知る必要はありません。必要なのは「画像がすぐに見える」「アップロードできたとわかる」という体験です。つまり、ユーザーのメンタルモデルに合わせて、実装の複雑さを、ユーザーが持つメンタルモデルに近づくよう、UIで“チューニング”することが求められます。

UIデザインでは、ユーザーが持つ「メンタルモデル」とのズレをできるだけ埋めることが重要です。裏でどれだけ難しい処理をしていても、ユーザーが直感的に理解でき、迷わず行動できるUIであれば、それは良いデザインだと言えるでしょう。

欠かせない、ユーザー理解

前章のメンタルモデルへのチューニングは「とにかく簡単にすればいい」という話ではありません。

たとえば、医療や法律といった高度な専門知識を必要とする領域では、開発者よりユーザーの方が高度な知識や独自の業務フローを持っていることがあります。このような領域では、「一般ユーザーにもわかりやすいUI」にしようとして情報を省略しすぎると、かえって混乱を招く恐れがあります。

医療現場で使われるカルテ入力システムを例に考えてみます。「患者を検索→診療科を選択→症状の詳細入力」という一見シンプルなフローでも、現場の医師にとっては「カルテコードを直接打ち込める」「過去の診療情報から自動補完される」など、よりスピーディで専門的な操作が期待されるかもしれません。ここで「誰でもわかりやすいように、親切設計にしよう」と逐一入力を求めるUIにしてしまうと、かえってユーザーにストレスを与えてしまうことがあります

つまり、UIをユーザーに寄せて設計するというのは、単に簡略化することではなく、「そのユーザーがどんな知識を持ち、どんな状況で使うのか」を深く理解したうえで、それにふさわしい形にチューニングすることなのです。

そして今、この「ユーザー理解」の方法にもAIによって変化が起きています。プロトタイプやMVP（Minimum Viable Product）をすぐに形にできるようになったので、実際に動くUIを通じてユーザーの行動を見る機会を増やすことができるようになりました。

「まず作って、反応を見る」というサイクルを高速に回すことができるようになったので、アンケートやインタビューだけでは見えにくかった“無意識の行動”を観察できるようになり、ユーザーの本質的なニーズにもより早く、正確にたどりつけるようになってきているとも言えます。

これからのUIデザインにおいて、ユーザー理解はますます重要になります。AIが作ってくれる“それっぽいUI”に頼りきるのではなく、「誰が」「どんな文脈で」使うのかを常に意識できると、より良いプロダクトになるでしょう。

適切なフィードバックで、迷いをなくす

フィードバックとは、行為の結果を伝えることです。ソフトウェアのUIにおいても、フィードバックはいかなる時でも欠かせません。

• ボタンを押したときに色が変わり、ボタンを押せたことがわかる
• ローディング中にプログレスバーで進捗がわかる
• 入力ミスにエラー文が表示され、何が理由でミスと判断されたかがわかる
• 検索が完了したこと、かつ結果が存在しないことが、検索結果画面ではっきりと伝わる
• フォームを送信した後に「送信が完了しました」というメッセージが表示される

こうしたフィードバックがあることで、ユーザーは安心して操作を続けられます。フィードバックがない場合、システムの状態がどうなっているのか──操作が完了したのか、読み込み中なのか、エラーなのか、エラーの原因は何なのか──をユーザー自身が判断することは難しいです。

その迷いのあいだに、ユーザーのタスク効率は下がり、場合によっては操作を諦めて離脱してしまう場合もあります。「このプロダクトはなんだか使いづらい」「自分には向いていない」といったネガティブな印象を残してしまわないよう、フィードバック設計は丁寧に行いましょう。

しかし、フィードバックが過剰すぎる場合も注意が必要です。たとえば、ボタンを押すたびに毎回確認ダイアログが表示されると、ユーザーは自分の行為が正しいか不安になったり、操作が増えることでストレスを与えてしまうことがあります。ユーザーが特に意識しなくても自然に受け取れる程度の「ちょうどよい量とタイミング」のフィードバックが、快適な体験を生み出します。

ユーザーが迷わず、ストレスなく進められるインターフェースの裏には、「今どんな状態なのか？」が常にわかる、丁寧で適切なフィードバック設計が重要になります。

認知的負荷に配慮する

人間は、本質的にマルチタスクができないと言われています。一度に処理できる情報量に限界があるということです。 一見、スマホを見ながら会話しているようなシーンでも、実際には脳が注意を高速で切り替えているだけで、同時に複数のことを処理しているわけではありません。

この「人間の脳は一度に多くのことを処理できない」という性質は、UIを考える上でもとても大事な視点になります。

デザインにおいて認知的負荷を低減するためには、情報の整理と提示方法に工夫が必要です。例えば、以下のようなアプローチが考えられます。

一度に見せる情報は絞る

一画面に表示する要素が多すぎると、一目見た時の威圧感や、読解の負荷、選択の負荷を同時に与えてしまいます。例えば新規会員登録やアンケートなどによく利用されるフォームは、「一問一答」に分けたり、ステップごとに区切ったりするだけでも、認知的負荷を下げることができます。ミラーの法則に従い、7±2のチャンク（情報のまとまり）になるよう、情報整理をすることも有効です。

Wantedlyの募集作成プロセスは、ステップごとに区切るインタラクションを採用しています。これにより、一つ一つの項目に集中して募集を作成できる体験になっています。

文字数はなるべく少なく

文章を「読む」「理解する」という行為は、プロダクトの操作の中でも、特に認知的な負荷が高い作業です。だからこそ、UIに表示する文字はなるべく少なくするのが基本です。

ただし、いきなり文章を短くしようとする前に立ち返りたいのが、「そもそもこの情報は今、ユーザーにとって必要なのか？」という視点です。ユーザーがその場で知るべき情報なのかどうか、要件の段階から見直してみましょう。

その上で、文字数を抑えるための手段としては、以下のような工夫があります。

• コンテクスト上、分かりきった主語・目的語は省く
• 詳細はヘルプページに書いて、導線だけ設置する
• ホバーやクリックをして表示されるツールチップを活用する
• 色やアイコンなどの非言語要素に置き換える

ただし、文字数を減らすこと自体が目的になってしまってはいけません。

無機質な表現や、説明不足によって不安や誤解を生み、ユーザー体験を損なうことになります。重要なのは、「その言葉がどんな状況で、どんな人に向けて使われるのか」を見極めることです。初回体験など、ユーザーの迷いが予想される場面では、あえて丁寧に説明したり、言葉で寄り添うことも必要です。

一貫性のあるUIにする

類似する機能や意味を持つUIには同じスタイルを当てることで、ユーザーは、過去のプロダクト経験から操作方法を学習し、推測することができるようになります。スタイルを共通化し、UIパターンにすることで、学習しなければならない項目を減らすことができます。

Wantedlyでは、デザインシステムを活用し、UIの一貫性を保っています。例えば、タイポグラフィは用途ごとにフォント・サイズ・ウェイトを定義しており、すべての画面で共通のルールに基づいて使用されています。ボタンの形状も、両端がラウンドしたスタイルに統一されており、形状の違いによって不必要な意味の差異が生まれないよう配慮しています。

個人開発や小規模なチームでは、デザインシステムほど大がかりな仕組みを整える必要はありません。それでも、フォントや色を多用するのは避けて、似た機能にはなるべく同じスタイルを当てるようにすると、それだけで一貫性のあるUIになります。

おわりに

AIやノーコードツールの進化により、「何かを作る」ことのハードルは劇的に下がりました。しかし、「良いプロダクト体験を作る」には、やはり作る人の知恵と意図が必要です。

ソフトウェア開発におけるデザインは、画面を美しく整えることに限らず、ユーザーがどう動くかを先回りして設計する営みです。

ものづくりに関わるすべての人が「デザインの視点」を持てるようになり、世の中により良いプロダクトが生まれることを楽しみにしています。

おまけ：書籍紹介

今回紹介したデザインの考え方は、ごく一部です。もっと魅力的なプロダクトデザインをしてみたい！という方は以下の書籍を一読されることをお勧めします。

『誰のためのデザイン？』

「ドアの押す・引くがわからない」など、私たちの日常に潜む“使いづらさ”を例に、人がモノをどう認知し、どう操作するかをわかりやすく解説してくれる名著です。「ヒューマンエラーという用語は使わない。代わりにコミュニケーションやインタラクションについて論じる。」という言葉が印象的です。プロダクトに関わるすべての人に読んでほしい一冊です。

『ABOUT FACE』

インタラクションデザインの実践書。「ゴールダイレクテッド・デザイン」や「ペルソナ設計」など、ユーザーのゴールやニーズを軸にしたインターフェース設計の手法が丁寧に解説されています。少しボリュームはありますが、プロダクトのあるべき姿を体系的に捉え直したい方におすすめです。著者の独特で痛烈な言い回しも面白いので必見です。