説明が必要なUIはもう負けている

Transcript

1. 説明が必要なUIは、 もう負けている 髙津 汰耀 (TAIYO TAKATSU) FE & PHP Conference Hokkaido2026
2. 髙津 汰耀 （Taiyo） 株式会社タイミー (26卒エンジニア) 佐賀⼤学院 博⼠課程 1年 sunapp LLC 代表 ⾃⼰紹介 佐賀から来ました〜 FE & PHP Conference Hokkaido2026
3. アマチュアエンジニアだった僕が， エンジニアのスタートラインに⽴った話 今⽇のトーク FE & PHP Conference Hokkaido2026
4. プログラミング歴3年⽬。 私は、初めて⾃分でWebサービスを作りました。 FE & PHP Conference Hokkaido2026
5. 事例1: 時間割作成サービス 「学校向けの、時間割を構築/管理できるアプリ」 ⾃分が考え抜いた⾃信作。たくさんの機能を実装し、役⽴つこと間 違いなしと確信していました。 FE & PHP Conference Hokkaido2026
6. 「直接動かし⽅、教えてくれる？」 FE & PHP Conference Hokkaido2026
7. 「(…⾒たらわかるでしょ！)」 ※⼼の中では全⼒で叫んだ FE & PHP Conference Hokkaido2026
8. 事例2: アルバイト時間管理 「⼤学⽣向け、カレンダー型シフト管理」 シンプルなカレンダー表⽰を実装。 タップ⼀発で予定を追加できる設計で、操作は簡単だと確信してい ました。 FE & PHP Conference Hokkaido2026
9. 「どこから⼊⼒するの？」 FE & PHP Conference Hokkaido2026
10. FE & PHP Conference Hokkaido2026
11. また、同じことが起きた。 FE & PHP Conference Hokkaido2026
12. 限界の認識 「毎回説明していては、体⼒が尽きる」 ⼀⼈ひとりに使い⽅をレクチャーしていたら、ス ケールしない。開発者の⼈的リソースは⼀瞬で枯 渇する。 あるべき姿 「UIを⾒ただけで、使い⽅がわかる」 プロダクトそのものが⾃⼰説明的であること。そ れが、開発者とユーザー双⽅を守る唯⼀の解決策 だった。 私の辿り着いた「気づき」 FE & PHP Conference Hokkaido2026
13. 説明が必要なUIは、 もう負けている。 FE & PHP Conference Hokkaido2026
14. 作り⼿の⾃明 「2回とも、私（開発者）にとっては完全に⾃明 なUIだった。」 ユーザーの⽂脈 「しかし、使うユーザーにとっては、私の開発⽂ 脈や前提知識は1ミリも存在しなかった。」 2つの事例の共通点 FE & PHP Conference Hokkaido2026
15. KEYWORD 01 認知負荷 ユーザーの脳が受けるストレスの正体 KEYWORD 02 アフォーダンス 「こう動かせる」を形から誘発する⼿がかり 解決を紐解く2つのキーワード FE & PHP Conference Hokkaido2026
16. 「ユーザーは、『考えること』を極限まで避ける」 ⼈間は本能的に、脳のエネルギー消費を最⼩限に抑えようとします。 UIを⾒て「どう使うんだろう？」と考えたその1秒、ユーザーの脳には強⼒な負荷（ストレス）がかかっています。 1. 認知負荷 (Cognitive Load) FE & PHP Conference Hokkaido2026
17. ホバー カーソルを合わせたときの微⼩な変化 が、「クリックできる感」を指先に教 える。 明確な境界線 カードや⼊⼒フォームの輪郭がしっか り存在することで、情報の範囲がひと ⽬で伝わる。 ビジュアルシグナル ⽮印、シャドウ、⽴体感。実世界の物 理法則を模した表現が、操作を直感的 にアフォードする。 2. アフォーダンス (Affordance) FE & PHP Conference Hokkaido2026
18. 2. アフォーダンス (Affordance) Before After FE & PHP Conference Hokkaido2026
19. 作り⼿とユーザーのギャップ 作り⼿の前提： 「設計図が頭にあるから、当然わかるはず」 ユーザーの現実： 「説明書なしで⽬の前に放り出された」 THE HUGE GAP 「なぜ、伝わらないのか？」 FE & PHP Conference Hokkaido2026
20. 「わかるでしょ」は、 ただの「呪い」だった。 FE & PHP Conference Hokkaido2026
21. チュートリアルは「保険」であり、主役ではない ⻑いチュートリアルを読まないと動かせないUIは、設計段階で失敗している。触れば理解できる流れを作る。 ⽬指すべきアクション ファーストタッチから「最初の成功体験」まで⼀切の説明ポップアップを挟まないUI。 原則①: 初⾒で動けるのが最低ライン FE & PHP Conference Hokkaido2026
22. 機能の説明ではなく「⾏動の設計」をせよ ボタンが「何をする機能か」を説明するのではなく、ユーザーが「次に何をすべきか」を配置から⾃然に⽰す。 ⽬指すべきアクション 視線の動き（Fの法則‧Zの法則）に沿って、最も重要な決定ボタンだけが輝きを放ち、次に迷わない設計。 原則②: ユーザーのゴールから逆算 FE & PHP Conference Hokkaido2026
23. 原則②: ユーザーのゴールから逆算 FE & PHP Conference Hokkaido2026
24. 「どっちだろう？」が1回でも起きたら負け 複数の似たようなアクションボタン、不明瞭なラベル。迷いはユーザーを完全にフリーズさせ、離脱へと導く。 ⽬指すべきアクション 無駄なボタンを⾮表⽰、あるいは統合する。迷わせるくらいなら選択肢は極⼒1つに絞り込む。 原則③: 迷いを0にする徹底的な排除 FE & PHP Conference Hokkaido2026
25. 登壇者 髙津 汰耀 (Taiyo) X @taiyoNoLatte おわりに 説明が必要なUIは、 もう負けている。 FE & PHP Conference Hokkaido2026