アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone) header
アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone) profile picture

アオキタカユキ｜UIで思考のズレを言語化

@dorisukeone

UIデザイナー｜プロダクト開発 ボタンを直しても なぜか迷われるUI。 それを 「デザインの問題」で終わらせず、 思考・前提・組織のズレとして言語化します。 PdM / デザイナー / エンジニア向け。

 東京
note.com/dorisukeone
Joined September 2009
  • Tweets4.6K
  • Following2K
  • Followers2.5K
751Media
Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)Photo by アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)
UIレビューで 「分かりにくいですね」 ↓ 「じゃあ説明を足しましょう」 この改善、 だいたい逆効果です。 「分かりにくいUI」は、だいたいUIデザインのせいじゃない｜アオキタカユキ / iCARE UI Designer @dorisukeone note.com/dorisukeone/n/n017f…
ユーザーは、UIデザインを見て使いやすさを判断していない｜アオキタカユキ｜UIで思考のズレを言語化

ユーザーは、UIデザインを見て使いやすさを判断していない｜アオキタカユキ｜UIで思考のズレを言語化

UIレビューをしていると、よくこんなやりとりがあります。 「ここ、分かりにくいですね」 「じゃあ、ボタンを目立たせましょう」 「説明文も足しますか」 この会話、かなり自然に聞こえます。 でも、その修正で本当に“分かりやすく”なったでしょうか。 ユーザーはUIを見て判断しているわけではない、という話です。 UIは、思っているほど「見られて」いません。 ユーザーはUIを鑑賞しているわけでも、レビ...

note.com
28
12
351
46,972
「押したのに反応しなかった」 「保存したはずなのに消えていた」 Figmaに並べた状態のどれを見ても、この問題は見つかりません。 起きているのは、画面と画面のあいだ。カンプには映らない「線路」の話です。 note.com/dorisukeone/n/nb85c…
カンプは「駅」を描く。ユーザーは「線路」で迷う。間のUIデザイン。｜アオキタカユキ｜UIで思考のズレを言語化

カンプは「駅」を描く。ユーザーは「線路」で迷う。間のUIデザイン。｜アオキタカユキ｜UIで思考のズレを言語化

状態と状態の「あいだ」をデザインする話です。 Figmaでデザインを作っているとき、画面の状態（ステート）を並べていく作業は、とても気持ちがいいですよね。 初期表示のすっきりした画面。文字が丁寧に入力された画面。「保存しました」と緑のチェックマークが出る完了画面。万が一のエラー画面。どれも細部まで整えられていて、デザインレビューに出しても「綺麗にまとまっていますね」とすんなり合意が取れます。...

note.com
1
209
カンプが描いているのは、状態という「駅」です。 でも、ユーザーが迷うのは駅と駅のあいだ。二度押しも、データが消えるのも、たいてい「線路」の上で起きています。 状態と状態のあいだをUIデザインする話を書きました。 note.com/dorisukeone/n/nb85c…
Image from アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)
1
8
424
外部の3Dモデルを読み込まず、数式だけで頂点をリアルタイムに変形させ、質感と反発を作る。 three.jsは重いアセットに頼らなくても、パラメータのチューニング次第で驚くほど生々しい「手ざわり」を表現できます。 note.com/dorisukeone/n/n33d9…
Figmaに手ざわりがないから、three.jsでスクイーズを揉むUIデザイン｜アオキタカユキ｜UIで思考のズレを言語化

Figmaに手ざわりがないから、three.jsでスクイーズを揉むUIデザイン｜アオキタカユキ｜UIで思考のズレを言語化

まずこれを、ちょっと触ってみてほしいんですよ。 👉 スクイーズ・シミュレーター https://squeeze-three.vercel.app/ 画面のケーキやバターをマウスでグチャッと押したり、びよーんと引っ張ったりしてみてください。指を離すと、じわ〜っと元に戻ってくるでしょ？ ……そう。スクイーズです。 あの、女子小中学生とかがカバンにぶら下げてる、パンやお菓子の形をしたウレタンのプ...

note.com
1
5
720
スクイーズって、汚れるのイヤじゃないですか。でも触りたい。 なので、ブラウザでさわれるスクイーズを作りました。 押して、つまんで、伸ばせる。形は9種類、トッピングや袋も選べます。 PCならカメラに手をかざして、手でもさわれます🖐 squeeze-three.vercel.app/ #スクイーズ #threejs
1
4
321
下流ほど直すコストは膨らむ。だから上流で食い止めよう。よく聞く話です。 でも要件の穴は、画面にしてはじめて見えることが多い。 UIデザインは、要件の穴にいちばん早く気づく場所なのだと思います。 note.com/dorisukeone/n/n6489…
UIデザインは、要件の穴にいちばん早く気づく場所-要件の不完全性と、中流工程が担う検証機能-｜アオキタカユキ｜UIで思考のズレを言語化

UIデザインは、要件の穴にいちばん早く気づく場所-要件の不完全性と、中流工程が担う検証機能-｜アオキタカユキ｜UIで思考のズレを言語化

「上流で食い止める」は、一回では終わらなかった。 画面を作ったあとで、地図を描いた話。 ソフトウェア開発の現場にいると、「下流に行くほど直すコストは膨らむ」という話を本当によく耳にします。いわゆる1:10:100の法則のような話です。要件定義の段階ならドキュメントの文章を1行直せば済むけれど、デザインに入ると画面を作り直すことになり、実装に入ればコードやテストを書き直さなければならない。リリ...

note.com
10
85
5,050
日本の入力フォームが長いのは、デザインが遅れているからではないかもしれない。 「型を守れば責められない」という江戸時代からの証文文化が、いまの画面にも残っている気がします。 note.com/dorisukeone/n/n8300…
日本の入力フォームが長いのは、江戸時代から続く「証文文化」のせいだった？-UIデザインと日本文化-｜アオキタカユキ｜UIで思考のズレを言語化

日本の入力フォームが長いのは、江戸時代から続く「証文文化」のせいだった？-UIデザインと日本文化-｜アオキタカユキ｜UIで思考のズレを言語化

ネットで買い物をしようとして、会員登録の画面が出た瞬間に「うわっ……」て声が出ちゃうこと、ありませんか。 僕はね、しょっちゅうあるんですよ。 ずっと欲しかった昔の限定怪獣ソフビをやっと見つけて「やった！ 購入するぞ！」ってボタンを押すわけです。 そしたら画面が切り替わって、ずらーーーっと並ぶわけですよ。 氏名。 フリガナ（全角カタカナ）。 生年月日。 性別。 郵便番号（7桁・ハイフンなし）。...

note.com
1
3
7
874
漏えい事故は、6割強が不正アクセス。 でも個人情報保護委員会への報告まで広げると、件数で多いのは誤送付や誤交付といった人の取り違えでした。 ニュースになるのは大きな攻撃。日々起きているのは人の間違い。 だから、UIデザインでできるセキュリティを考えてみました。 note.com/dorisukeone/n/n2268…
セキュリティは、UIデザインでも守れる｜アオキタカユキ｜UIで思考のズレを言語化

セキュリティは、UIデザインでも守れる｜アオキタカユキ｜UIで思考のズレを言語化

人は疲れているし、急いでいるし、だまされる。その前提で画面をつくる。 情報漏えいのニュースを聞くと、ついサーバーやインフラの話だと思いがちです。「脆弱性を突かれた」と聞けば、デザイナーにはどうにもできない領域に見えるからです。 けれど、事故の原因を件数で追うと事情が変わります。 上場企業の漏えい事故の約2割は「誤表示・誤送信」によるものでした（2025年、東京商工リサーチ調べ）。個人情報保護...

note.com
2
24
1,651
これまで、説明を作るのは送り手の仕事でした。 でも受け手がそれぞれAIを持っているなら、 同じ情報から、自分向けの説明を各自で作れます。 説明は、送り手が作るものから、受け手が作るものになっていく。 note.com/dorisukeone/n/n866c…
「わかりやすく説明する人」から損をしていく-AI時代のテキストコミュニケーション｜アオキタカユキ｜UIで思考のズレを言語化

「わかりやすく説明する人」から損をしていく-AI時代のテキストコミュニケーション｜アオキタカユキ｜UIで思考のズレを言語化

説明は、送り手ではなく受け手が作るものになっていく。 UIデザインというと、画面の見た目を作る仕事だと思われがちです。でも実際には、見た目と同じくらい「説明」の仕事があります。 画面が増える。機能が増える。状態が増える。そのたびに、説明も増えていきます。 何が変わったのか。どのボタンが消えたのか。エラーのときはどう見えるのか。どこを重点的に見てほしいのか。画面が10枚、20枚と増えると、どう...

note.com
1
2
399
機能Aもよくできている。機能Bも単体なら使いやすい。 なのに、AからBに移るところで、ユーザーが止まる。 これはUIの細部の問題というより、 プロダクトが「タテに強くて、ヨコに弱い」状態なんだと思います。 note.com/dorisukeone/n/nd6c2…
UIデザインの失敗は、いつも画面と画面の「間」で起きている｜アオキタカユキ｜UIで思考のズレを言語化

UIデザインの失敗は、いつも画面と画面の「間」で起きている｜アオキタカユキ｜UIで思考のズレを言語化

機能単体は使いやすいのに、なんかいまいち理由。 プロダクト開発をしていると、「機能はちゃんと揃っているのに、なぜか使いにくい」という場面によく出会います。 機能Aはよく練られていて、画面の完成度も高い。機能Bも単体で見ればとても使いやすい。それぞれのパーツは申し分ないはずなのに、いざ実際の仕事で使おうとすると、AからBに移るときにユーザーが急に立ち止まり、頭を抱えて頑張らなければならなくなる。...

note.com
320
アオキタカユキ｜UIで思考のズレを言語化 retweeted
note DESIGN (@note__design) profile picture
note DESIGN@note__designSep 23
「なんかここ、気持ち悪い」。直せるのに、次の画面でまた止まる。 強い根拠とは、その画面を離れても持っていける根拠でした。エンジニアと組んで違和感を掘り下げた記録です。 「なんとなく気持ち悪いUIデザイン」を、説明できる練習をはじめます @dorisukeone note.com/dorisukeone/n/n0b09…
「なんとなく気持ち悪いUIデザイン」を、説明できる練習をはじめます｜アオキタカユキ｜UIで思考のズレを言語化

「なんとなく気持ち悪いUIデザイン」を、説明できる練習をはじめます｜アオキタカユキ｜UIで思考のズレを言語化

強い根拠とは、その画面を離れても使える根拠のことでした。 デザインのレビューをしていると、よく出る言葉があります。 「なんかここ、気持ち悪いんですよね」 言われた側も「たしかに」と直します。直すと、実際に良くなる。でも次の週に別の画面を作ると、また同じような場所で「なんか変じゃない？」と手が止まります。 やりたかったのは、一方的に正解を教える講義ではありませんでした。その気持ち悪さを、次の画...

note.com
3
37
3,400
AIのために警鐘を鳴らしたいとおもいます ClaudeCodeを「優秀な新人」と呼ぶのをやめて、ポケモンと呼ぶことにしました｜アオキタカユキ｜UIで思考のズレを言語化 @dorisukeone note.com/dorisukeone/n/nb070…
ClaudeCodeを「優秀な新人」と呼ぶのをやめて、ポケモンと呼ぶことにしました｜アオキタカユキ｜UIで思考のズレを言語化

ClaudeCodeを「優秀な新人」と呼ぶのをやめて、ポケモンと呼ぶことにしました｜アオキタカユキ｜UIで思考のズレを言語化

夜中のパジャマ姿で、僕はちっぽけな独裁者になっていた。 最近、世間じゃ猫も杓子もAIのことを「優秀な新人」って呼ぶじゃないですか。 「指示を具体的に出せばちゃんと動く」とか「背景を共有すると急に打率が上がる」とか。 いや、うまいこと言いますよね。僕もね、最初は「なるほど〜、新人かぁ！」なんて膝を打って、自分でも得意げにそう呼んでたんですよ。 でもね、ある夜、ふと我に返っちゃったんです。...

note.com
3
10
1,164
これは納得、腑に落ちる。 少人数で大きな価値を生む「超増幅型組織」のつくり方｜こぎそ @kgsi note.com/kgsi/n/ne91b9fc46cc…
少人数で大きな価値を生む「超増幅型組織」のつくり方｜こぎそ

少人数で大きな価値を生む「超増幅型組織」のつくり方｜こぎそ

この記事は支援先の社内で書いた、メンバーに向けた記事を大幅加筆修正し、一般公開用に再編集した記事です。 マクロ経済の動向からプロダクト開発の現場、そして採用市場に至るまで、いま極めてリアルで冷徹な連鎖が起きています。 投資家からの黒字化圧力が強まり、各社がコスト削減を進める。その結果としてSaaS間取引が縮小し、多くのプロダクトがエンタープライズ領域へのシフトを余儀なくされる。そしてその波は...

note.com
1
1
5
1,310
アオキタカユキ｜UIで思考のズレを言語化 retweeted
note DESIGN (@note__design) profile picture
note DESIGN@note__designSep 16
デザインシステムのレビュー59項目を、AIと人間でどう配分するか試した記録。 見えてきたのは「一度決めれば終わる仕事」と「決めても残る仕事」の線引き。自動化率100%を目指さない理由が分かります。 UIデザインは、Claude Codeに任せるほど仕事が減らない @dorisukeone note.com/dorisukeone/n/n8f5e…
UIデザインは、Claude Codeに任せるほど仕事が減らない｜アオキタカユキ｜UIで思考のズレを言語化

UIデザインは、Claude Codeに任せるほど仕事が減らない｜アオキタカユキ｜UIで思考のズレを言語化

ご提示いただいた文章も、AIライティング特有の「構造の重複」「口語表現の過剰なアピール」「説明の冗長さ」が見受けられます。 具体的には以下の点がAIっぽさを生んでいます。 同じ話の繰り返し: 後半の「人間は『違和感』を見つけ〜」の直前に、全く同じ「余白が6個中1個だけ16px」という例えが重複して登場している（文章の切り貼り感）。 セクション間の繋ぎ: 「ちょっとだけ前提の話をさせてください...

note.com
1
5
3
78
7,767
昔の叩き台は、粗かったです。 粗いから、見た人が「ここ、どうなってるの」と口を挟めました。 粗さが、疑いの入口になっていた気がしています。 いまの初稿は、最初から整っています。 整っているものに「なんか引っかかる」と言うには、言う側に体力が要ります。 note.com/dorisukeone/n/n4344…
AIが安くしたのは、UIを「作ること」だけでした｜アオキタカユキ｜UIで思考のズレを言語化

AIが安くしたのは、UIを「作ること」だけでした｜アオキタカユキ｜UIで思考のズレを言語化

AIが安くしたのは作ることだけで、迷った跡は安くなっていません。 半年前に自分が関わった画面を、久しぶりに開いたときのことです。少し手を加えるだけならすぐできます。AIを使えばコードもバリエーションも一瞬で出るし、手はずいぶん速くなりました。けれど、「なぜ、この形にしたんだっけ？」と思わぬところで手が止まりました。 当時はチームで議論をして、理由があってこの仕様に着地したはずでした。小さなプ...

note.com
1
17
1,483
見た目の指摘を掘っていくと、根拠には段があると気づきました。 ・好み ・原則 ・優先順位 ・一貫性 ・UXへの影響 好みはその場で消えます。行動まで言えていると、別の機能にも持っていけます。 note.com/dorisukeone/n/n0b09…
「なんとなく気持ち悪いUIデザイン」を、説明できる練習をはじめます｜アオキタカユキ｜UIで思考のズレを言語化

「なんとなく気持ち悪いUIデザイン」を、説明できる練習をはじめます｜アオキタカユキ｜UIで思考のズレを言語化

強い根拠とは、その画面を離れても使える根拠のことでした。 デザインのレビューをしていると、よく出る言葉があります。 「なんかここ、気持ち悪いんですよね」 言われた側も「たしかに」と直します。直すと、実際に良くなる。でも次の週に別の画面を作ると、また同じような場所で「なんか変じゃない？」と手が止まります。 やりたかったのは、一方的に正解を教える講義ではありませんでした。その気持ち悪さを、次の画...

note.com
5
3
123
13,855
たしかになー、Xではあたかも民意かのようにD案があふれてるのは違和感。やっぱAIの責任のないデザインって魅力感じないかなーとおもう。推しがあったので投票しました、発表楽しみ！ 作れるけど、作るべきではない｜サタケシュンスケ（イラストレーター） @satakeshunsuke note.com/shunsukesatake/n/nc…

作れるけど、作るべきではない｜サタケシュンスケ（イラストレーター）

Suicaのイメージキャラクターが新しいものにバトンタッチされることが決まり、その最終候補となる３つのデザインが公開されました。 ／ Suicaの新たなイメージキャラクターの選考投票をスタートします📢 ＼ Suica導入時からイメージキャラクターを担ってきた「Suicaのペンギン」は、2027年3月31日に卒業し、同年4月1日から新たなイメージキャラクターにバトンタッチします🤝…...

note.com
4
513
「ケバブじゃなくて、ハンバーガーにしようか。」が、noteの「今日の注目記事」に選ばれてた🍔 UIの「あの右上の点々」「下から出てくるやつ」には、ちゃんと名前があります。 名前を知ると、AIにも人にも説明しやすくなる。そんな話です。 note.com/dorisukeone/n/n70bd…
Image from アオキタカユキ｜UIで思考のズレを言語化 (@dorisukeone)
2
285
アオキタカユキ｜UIで思考のズレを言語化 retweeted
しょうこ (@shokosaurus) profile picture
しょうこ@shokosaurusSep 10
へー！ 知らない世界の話ってやっぱり最高におもしろい！ 看護師界では、トンボって言葉は採血に使う針の話なのと似てる。 「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化 @dorisukeone note.com/dorisukeone/n/n70bd…
「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化

「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化

ランチの話ではありません。 先日、仕事でこんな指示を見かけました。 「スマホのメニュー、ケバブじゃなくてハンバーガーにして」 UIデザインに馴染みがない人が聞いたら、完全に今日の昼ご飯の相談ですよね。 でもデザイナーや開発者なら、「ああ、あの3本線のアイコンね」とすぐにピンときます。 横に線が3本並んだのが「ハンバーガーメニュー」。 縦に点が3つ並んだのが「ケバブメニュー」。 このとき改めて...

note.com
1
2
4
373
UIの名前を調べるとお腹がすきますよね。 「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化 @dorisukeone note.com/dorisukeone/n/n70bd…
「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化

「ケバブじゃなくて、ハンバーガーにしようか。」UIデザインの話しです。｜アオキタカユキ｜UIで思考のズレを言語化

ランチの話ではありません。 先日、仕事でこんな指示を見かけました。 「スマホのメニュー、ケバブじゃなくてハンバーガーにして」 UIデザインに馴染みがない人が聞いたら、完全に今日の昼ご飯の相談ですよね。 でもデザイナーや開発者なら、「ああ、あの3本線のアイコンね」とすぐにピンときます。 横に線が3本並んだのが「ハンバーガーメニュー」。 縦に点が3つ並んだのが「ケバブメニュー」。 このとき改めて...

note.com
4
32
5,238
Load more