● プロダクトを少人数でスケールさせてきた僕ら Rebase Tech #0 "使いづらい " をリバースエンジニアリング する UI の読み解き方 株式会社 Rebase 髙橋 海斗（ @t-chito ） 

自己紹介 株式会社Rebase エンジニアリング 髙橋 海斗（たかはし かいと） プロフィール ● 2019/04 に前職 (データ分析系) に新卒で入社 ● 2024/07 に Rebase に入社 主な仕事 ● instabase をやっています ● Rails (と React) を書いていることが多いです ● UX やユーザビリティの話は好きです (UI はそこそこ) 

自己紹介 株式会社Rebase エンジニアリング 髙橋 海斗（たかはし かいと） プロフィール ● 2019/04 に前職 (データ分析系) に新卒で入社 ● 2024/07 に Rebase に入社 主な仕事 ● instabase をやっています ● Rails (と React) を書いていることが多いです ● UX やユーザビリティの話は好きです (UI はそこそこ) と言いつつ、 ここの話をします 

エンジニアが UI を考えるときのつらみ 

エンジニアが UI を考えるときのつらみ ● デザインに関する知識がない ● コーディングと思考様式が真逆 ● “ユーザーの気持ち” がわからない 

エンジニアが UI を考えるときのつらみ ● デザインに関する知識がない ● コーディングと思考様式が真逆 ● “ユーザーの気持ち” がわからない なぜエンジニアが作る画面はダサいのか…? (Qiita 記事) より ● 問題と解決手段のマッピングは専門知識 ● 「こう工夫しよう」自体ハードルが高い 

● デザインに関する知識がない ● コーディングと思考様式が真逆 ● “ユーザーの気持ち” がわからない エンジニアが UI を考えるときのつらみ 同 Qiita 記事 より UI: 重要なところを目立たせる vs Code: エッジケース (①) を目立たせる 1 1 2 

● デザインに関する知識がない ● コーディングと思考様式が真逆 ● “ユーザーの気持ち” がわからない エンジニアが UI を考えるときのつらみ 顧客が本当に必要だったもの - ニコニコ大百科 より ● “気持ち” を知るのもまた高等テク ● エンジニアは実装を知りすぎていて、 “上手く躓く” ことも難しい 

我々に何ができるのか “なんとなく違和感は あるんだけど...” って なったとき 

“使いづらさ” を言語化しよう！ 

“使いづらさ” を言語化しよう！ https://techplay.jp/event/822636 より 「行為の7段階モデル」で！ 

https://techplay.jp/event/822636 より ~ ユーザーには目的があり、達成のために 7 つの段階を踏む ~ by ユーザビリティ分野のつよつよな人 (ドナルド・ノーマン) “使いづらさ” を言語化しよう！ 「行為の7段階モデル」で！ 

今回はオレオレ簡易版の 4 分類でいきます “使いづらさ” を言語化しよう！ 「行為の7段階モデル」で！ https://techplay.jp/event/822636 より どこから できる？ どうなった？ 何をすればいい？ 触ってみよう 

実際にやってみます！ 

青いコンビニ さん、ごめんなさい 

どこから できる？ どうなった？ 何をすればいい？ 触ってみよう ● 題材としてセルフレジをお借りします ● オフィスの下にあるんです、他意はないですよ https://www.youtube.com/watch?v=I_9vaRjxkkk より 青いコンビニ さん、ごめんなさい 

どこから できる？ どうなった？ 何をすればいい？ 触ってみよう ● なぜか通常のレジと順番が違くて混乱する ... ● 買い物をしたいのであって、支払い方法はなんでもいいんだけど ... セルフレジにたどり着くと 

どこから できる？ どうなった？ 何をすればいい？ 触ってみよう ● (私の場合 iD で払いたいんですが) どれか分からない ... 支払い方法を選択する 

どこから できる？ どうなった？ 何をすればいい？ 触ってみよう ● “購入する” を押したのに “購入する” ことができない ... 商品のスキャンが終わって 

どこから できる？ どうなった？ 何をすればいい？ 触ってみよう ● 何の支払い方法選んだっけ ...？ ● とくに電子マネーだと全然手がかりが無い ... https://www.youtube.com/watch?v=MVOn5rNhmKM より 支払い 

まとめ ❏ ユーザーのやりたい事と画面は一致するか？ ❏ 「これを触ってみよう」を見つけられるか？ ❏ 触ったら何が起こるか分かるか？ ❏ 反応を見て次の行動を決められるか？ 言語化が難しい違和感も、(無理やり) 分類してやることで プロダクトの改善のきっかけになるかもしれません。 

22 ご清聴ありがとうございました 

街中ですれ違う名前も知らない「あの人」も、「あなた」も誰もが無限の可能性を 持っている。そして、「あなた」がどんな場所に暮らしていても、どんなに他人から 無理だと言われても、諦めて欲しくない。 そんな想いから、 Rebaseは生まれました。挑戦の一歩を軽くすることで、人生に 大きな変化を生み出すサポートをしたい。 誰かの人生に彩を与える「ことのはじまり」を、一緒に作りませんか。 Let's work together! https://jobs.rebase.co.jp/