プロダクトデザインの「守破離」の「破」について

プロダクトデザイナーはいつルールを破るのか

Transcript

1. 守破離の“破”へ プロダクトデザイナーはいつルールを破るのか 2024.11.29 @Designer’s HYGGE Lightning Talk @HAYASHIRINE / SOMPO Digital Lab
2. 誰やねん HAYASHIRINE HAYASHIRINE 01 プロダクトデザイナー だいたい3年目 台湾・中国料理 / 旅行 / 競馬 / 丸亀製麺 /ラジオ etc... Sprintチーム所属 @HAYASHIRINE my favorite
3. HAYASHIRINE 02 守破離 修行における三つの段階を分かりやすく言い表した言葉 決められた通りの動きを守り 繰り返す段階 守 型に自分なりの要素を加え 応用する段階 破 型にとらわれず 独自の創造性を発揮する段階 離
4. HAYASHIRINE 03 守破離 修行における三つの段階を分かりやすく言い表した言葉 決められた通りの動きを守り 繰り返す段階 守 型に自分なりの要素を加え 応用する段階 破 型にとらわれず 独自の創造性を発揮する段階 離
5. HAYASHIRINE 04 プロダクトデザインの「守」 守 決められた通りの動きを守り 繰り返す段階 ガイドライン HIG(Apple） Material Design Guideline （Google） などに記載 された内容に沿ってデザインする アクセシビリティ WCAGの達成基準やなどに記載された内容に沿ってカ ラーコントラストやナビゲーションをデザインする メンタルモデル ユーザーの頭の中の一般的な行動イメージ （こういう挙動になるはず、 という期待値） に沿ってデザインする デザイン4原則 「近接」 「整列」 「反復」 「対比」 という基本四原則に基づいて レイアウトをデザインする
6. HAYASHIRINE 05 プロダクトデザインの「守」 タップ領域 （ターゲットサイズ） は 最小で44pxくらいないとダメなんだよな....... 守 決められた通りの動きを守り 繰り返す段階 例えば Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls. 意訳 ： とりまインタラクティブな要素は最低44px×44pxのタップ領域確保しよ HIG （https://developer.apple.com/design/human-interface-guidelines/layout） For most platforms, consider making touch targets at least 48 x 48 dp. 意訳 ： タッチターゲットには最低でも48px＊48pxは欲しいよな〜 MD2（https://m2.material.io/design/usability/accessibility.html#layout-and-typography）
7. HAYASHIRINE 06 3年目の課題 とりあえずそれっぽいもの は作れるようになるが 「プロダクトの価値を引き出すデザイン」が 作れているとは限らない my problem...
8. HAYASHIRINE 07 プロダクトデザインの「破」 タップ領域 （ターゲットサイズ） は 最小で44pxくらいないとダメなんだよな....... 例えば Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls. 意訳 ： とりまインタラクティブな要素は最低44px×44pxのタップ領域確保しよ HIG （https://developer.apple.com/design/human-interface-guidelines/layout） For most platforms, consider making touch targets at least 48 x 48 dp. 意訳 ： タッチターゲットには最低でも48px＊48pxは欲しいよな〜 MD2（https://m2.material.io/design/usability/accessibility.html#layout-and-typography） 守 決められた通りの動きを守り 繰り返す段階
9. HAYASHIRINE 08 プロダクトデザインの「破」 タップ領域 （ターゲットサイズ） は 最小で44pxくらいないとダメなんだよな....... 例えば Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls. 意訳 ： とりまインタラクティブな要素は最低44px×44pxのタップ領域確保しよ HIG （https://developer.apple.com/design/human-interface-guidelines/layout） For most platforms, consider making touch targets at least 48 x 48 dp. 意訳 ： タッチターゲットには最低でも48px＊48pxは欲しいよな〜 MD2（https://m2.material.io/design/usability/accessibility.html#layout-and-typography） 守 決められた通りの動きを守り 繰り返す段階 実際 のU Iをよく見てみ たら 別 に ア ップル もグ ーグルも 守って なかっ たりするが、 ユ ーザーに受け入 れられて いる ほかのいろいろなサービスも然り...
10. HAYASHIRINE 09 プロダクトデザインの「破」 破 型に自分なりの要素を加え 応用する段階 タップ領域 30px以下 しかない Google Meet ZOZOTOWN Apple Music
11. HAYASHIRINE 10 プロダクトデザインの「破」 「すべてのユーザー」 に通用することを目的にした デザインではなく、
 『特定のプロダクト （もしくはユースケース） 』 に 最もフィットするデザインを考えられるようになることかも ユーザーの期待は各プロダクト ・ 各ユースケースごとに必ず異なる 「型」 に沿ったデザインだけでは その期待にプロダクトをフィットさせることができない 「型」 を自分のプロダクトの文脈でとらえなおす必要がある 破 型に自分なりの要素を加え 応用する段階
12. HAYASHIRINE 11 プロダクトデザインの「破」 定番パターンに対する疑問を持つこと 定番パターンから外れた場合に 「本当に困るユーザー」が いるのかを考えること my challenge!
13. HAYASHIRINE 12 プロダクトデザインの「破」 破 型に自分なりの要素を加え 応用する段階 9:41 キャンセル 測定 物件情報入力 測定 実施 レポート作成 測定を実施する 地盤面を含む2箇所以上を測定しレポートを作成しましょう。測 定した場所の数が多いほどレポートの精度は高くなります。 スマホカバーは測定前に外してください 地盤面 必須 測定ガイド エントランス・建物入口前 測定する 建物内 少なくとも1箇所以上を測定 測定ガイド 5階 推奨 ? 測定する 4階 測定する 3階 測定する 物件登録 測定設定 測定実施 診断結果確認 9:41 キャンセル 測定実施 建物外の測定とは 地盤の強度を測るために、エントランスや建物入口前な ど建物外で測定を行う必要があります。 エントランス ホールではなく、入口 玄関部分を測定し てください。 建物 入口前 診断したい建物の入口前の 道路や 敷地を 測定してください。 閉じる ユーザーメリットを重視して許容してみたところ ほぼ迷うユーザーはいなかった モーダ ル on モーダ ル 一般的に は.... モーダルは元々ユーザーの操作を中断させ 1つのタスクに集中させるものなので、 モーダル上にさらにモーダルを重ねると、 どうタスクを完了させたらよいか ユーザーの混乱を招いてしまう
14. 「破」の経験を積み続けることで「離」が見えてくる まとめ プロダクトデザインの 「破」 とは： 「すべてのユーザー」 に通用することを目的にせず、 『特定のプロダクト （もしくはユースケース） 』 に 最もフィットするデザインを考えられるようになること 3年目の課題： 「守 （定番パターンの踏襲） 」 によってそれっぽいデザインはできるようになるが、 「プロダクトの価値を引き出すデザイン」 が作れているとは限らない 「破」 に向けた自分のチャレンジ¼ » 定番パターンに対する疑問を持つこ° » 外れた場合に 「本当に困るユーザー」 がいるのかを考えること 1 2 3 HAYASHIRINE 13