#4 : アクションエリアをデザイン

動画のゴール:アクション設置の考え方を知ろう

「アクション」をどこに配置するのか？考えながらUIをデザインしていきます。

アクションの配置の考え方には正解があるわけではないですがベストプラクティスがあります。
基本的に右にある、操作するオブジェクトの近くに存在する。というものです。これはどちらも”アクション”と”アクション対象”の関係性が見えやすいことからから来ています。大体は全体にアクションが作用したり、近くのものに作用したりすることをイメージできる位置として、この考え方で配置されているものが多いです。

嘘だと思って他サービスUIなどを見てみるとのさらに理解が深まると思います！

‍

目次

• 00:11 今日でUI土台が完成！
• 01:28 デザインするものを確認
• 06:42 追加をナビゲーションに
• 09:53 追加をコンテンツエリアに
• 13:44 アクションと配色の関係
• 15:44 アクションに色を付ける
• 16:52 なぜナビには色をつけないのか？
• 18:30 編集と削除
• 22:47 ホバーしたらメニューを表示
• 28:18 プロトタイプ機能でメニューを表示
• 34:50 次はスタイル調整です！

‍

参考動画

階層について : 「6-1.平面の”階層”表現について」
‍https://www.bo-no.design/contents/uivisual-6-2

‍

配色について：「4-1.ここからはじめる配色設計」
https://www.bo-no.design/contents/uivisual-3-2

‍

アクション配置：「6-2.UIを構成する3ブロックを知ろう」
https://www.bo-no.design/contents/uivisual-6-3

‍

Figmaのデータ

こちら‍

https://www.figma.com/file/zpUBNsTFPdJakAHROnPGib/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9?node-id=103%3A15929&t=okMMbwdeA4RaK6NJ-1

動画のゴール:アクション設置の考え方を知ろう

「アクション」をどこに配置するのか？考えながらUIをデザインしていきます。

アクションの配置の考え方には正解があるわけではないですがベストプラクティスがあります。
基本的に右にある、操作するオブジェクトの近くに存在する。というものです。これはどちらも”アクション”と”アクション対象”の関係性が見えやすいことからから来ています。大体は全体にアクションが作用したり、近くのものに作用したりすることをイメージできる位置として、この考え方で配置されているものが多いです。

嘘だと思って他サービスUIなどを見てみるとのさらに理解が深まると思います！

‍

目次

• 00:11 今日でUI土台が完成！
• 01:28 デザインするものを確認
• 06:42 追加をナビゲーションに
• 09:53 追加をコンテンツエリアに
• 13:44 アクションと配色の関係
• 15:44 アクションに色を付ける
• 16:52 なぜナビには色をつけないのか？
• 18:30 編集と削除
• 22:47 ホバーしたらメニューを表示
• 28:18 プロトタイプ機能でメニューを表示
• 34:50 次はスタイル調整です！

‍

参考動画

階層について : 「6-1.平面の”階層”表現について」
‍https://www.bo-no.design/contents/uivisual-6-2

‍

配色について：「4-1.ここからはじめる配色設計」
https://www.bo-no.design/contents/uivisual-3-2

‍

アクション配置：「6-2.UIを構成する3ブロックを知ろう」
https://www.bo-no.design/contents/uivisual-6-3

‍

‍

Figmaのデータ

メンバー限定になります。