守破離の“破”へ プロダクトデザイナーはいつルールを破るのか 2024.11.29 @Designer’s HYGGE Lightning Talk @HAYASHIRINE / SOMPO Digital Lab

誰やねん HAYASHIRINE HAYASHIRINE 01 プロダクトデザイナー だいたい3年目 台湾・中国料理 / 旅行 / 競馬 / 丸亀製麺 /ラジオ etc... Sprintチーム所属 @HAYASHIRINE my favorite

HAYASHIRINE 02 守破離 修行における三つの段階を分かりやすく言い表した言葉 決められた通りの動きを守り 繰り返す段階 守 型に自分なりの要素を加え 応用する段階 破 型にとらわれず 独自の創造性を発揮する段階 離

HAYASHIRINE 03 守破離 修行における三つの段階を分かりやすく言い表した言葉 決められた通りの動きを守り 繰り返す段階 守 型に自分なりの要素を加え 応用する段階 破 型にとらわれず 独自の創造性を発揮する段階 離

HAYASHIRINE 04 プロダクトデザインの「守」 守 決められた通りの動きを守り 繰り返す段階 ガイドライン HIG(Apple） Material Design Guideline （Google） などに記載 された内容に沿ってデザインする アクセシビリティ WCAGの達成基準やなどに記載された内容に沿ってカ ラーコントラストやナビゲーションをデザインする メンタルモデル ユーザーの頭の中の一般的な行動イメージ （こういう挙動になるはず、 という期待値） に沿ってデザインする デザイン4原則 「近接」 「整列」 「反復」 「対比」 という基本四原則に基づいて レイアウトをデザインする

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）

HAYASHIRINE 06 3年目の課題 とりあえずそれっぽいもの は作れるようになるが 「プロダクトの価値を引き出すデザイン」が 作れているとは限らない my problem...

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） 守 決められた通りの動きを守り 繰り返す段階

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をよく見てみ たら 別 に ア ップル もグ ーグルも 守って なかっ たりするが、 ユ ーザーに受け入 れられて いる ほかのいろいろなサービスも然り...

HAYASHIRINE 09 プロダクトデザインの「破」 破 型に自分なりの要素を加え 応用する段階 タップ領域 30px以下 しかない Google Meet ZOZOTOWN Apple Music

HAYASHIRINE 10 プロダクトデザインの「破」 「すべてのユーザー」 に通用することを目的にした デザインではなく、
 『特定のプロダクト （もしくはユースケース） 』 に 最もフィットするデザインを考えられるようになることかも ユーザーの期待は各プロダクト ・ 各ユースケースごとに必ず異なる 「型」 に沿ったデザインだけでは その期待にプロダクトをフィットさせることができない 「型」 を自分のプロダクトの文脈でとらえなおす必要がある 破 型に自分なりの要素を加え 応用する段階

HAYASHIRINE 11 プロダクトデザインの「破」 定番パターンに対する疑問を持つこと 定番パターンから外れた場合に 「本当に困るユーザー」が いるのかを考えること my challenge!

HAYASHIRINE 12 プロダクトデザインの「破」 破 型に自分なりの要素を加え 応用する段階 9:41 キャンセル 測定 物件情報入力 測定 実施 レポート作成 測定を実施する 地盤面を含む2箇所以上を測定しレポートを作成しましょう。測 定した場所の数が多いほどレポートの精度は高くなります。 スマホカバーは測定前に外してください 地盤面 必須 測定ガイド エントランス・建物入口前 測定する 建物内 少なくとも1箇所以上を測定 測定ガイド 5階 推奨 ? 測定する 4階 測定する 3階 測定する 物件登録 測定設定 測定実施 診断結果確認 9:41 キャンセル 測定実施 建物外の測定とは 地盤の強度を測るために、エントランスや建物入口前な ど建物外で測定を行う必要があります。 エントランス ホールではなく、入口 玄関部分を測定し てください。 建物 入口前 診断したい建物の入口前の 道路や 敷地を 測定してください。 閉じる ユーザーメリットを重視して許容してみたところ ほぼ迷うユーザーはいなかった モーダ ル on モーダ ル 一般的に は.... モーダルは元々ユーザーの操作を中断させ 1つのタスクに集中させるものなので、 モーダル上にさらにモーダルを重ねると、 どうタスクを完了させたらよいか ユーザーの混乱を招いてしまう

「破」の経験を積み続けることで「離」が見えてくる まとめ プロダクトデザインの 「破」 とは： 「すべてのユーザー」 に通用することを目的にせず、 『特定のプロダクト （もしくはユースケース） 』 に 最もフィットするデザインを考えられるようになること 3年目の課題： 「守 （定番パターンの踏襲） 」 によってそれっぽいデザインはできるようになるが、 「プロダクトの価値を引き出すデザイン」 が作れているとは限らない 「破」 に向けた自分のチャレンジ¼ » 定番パターンに対する疑問を持つこ° » 外れた場合に 「本当に困るユーザー」 がいるのかを考えること 1 2 3 HAYASHIRINE 13