質問もらってたやつ

• UIのベースの理解
• 3パターン出して使い分けを質問する形式
• 基本的な考え方をまとめて1枚で説明できるようにしたい

‍

‍

‍

ちなみに書くと

• ボタン＝アクションエリアの基本パターン
• これは「３構造」の基本で、基本的にヘッダーかフッターに来ることがパターンとして多い
• アクションは対象に対しての行動がわかる場所に置く
• 『キャンセル』がアクションかどうか考える
• ナビなのか
• 行動なのか
• DialogのUIパターンの場合は、パターン的に行動っぽい扱いになる
• それ以外は基本的に”モードをやめる”という意味になることが大半

‍

‍

結論

UIの３構造

BONO的にいうUI「3構造」で整理するのがまず大事です

１：ナビゲーション

２：コンテンツ

３：アクション

主な役割は2つ。ナビゲーションとしての閉じると、アクションとしてのキャンセル

まず閉じるがあるのはナビゲーションとしての役割をしています。モーダルにおける、開いたものはここから閉じることができますよ。という役割ですね。モーダルに必ずタイトルを入れるというのと同じで、これがなんなのか？を伝える大事なナビとしての役割です。

もう1つが、モーダルで求められるアクションとしての「キャンセル」になります。〜〜を作成しましょう！と言われたことに対して、やっぱやーめた。ってやつですね。

この2つは別々の役割だということがわかると思います。そうです。別の役割なんですね。なので、一緒にしてもいいし使い分けてもいいよ。というのがすごく大雑把な結論です。とはいえどうしたらいいの？と思う人もいるので、実物で見ていきましょう。

‍

‍

基本UIに興味を持ったら比較と定義を調べる

今は便利なので、デザインシステムまとめサービスなんていろいろあるわけですなので、それを使って複数社はどういうふうに定義しているのか？をみると良いと思います。

▼ 海外のデザインシステムまとめページ

Dialog Component

ちなみに英語のサイトに毛嫌いしている人は、自分で自分を縛っている人なのでよほど信念がない限りはお勧めしないです。抵抗感を普段からなくす努力をしましょう。

デザインシステムでの定義を調べる

Action bar Component

Github

https://primer.style/components/dialog

• ３つのエリア（Region)に分けている
• ナビゲーションとしての閉じるの役割
• アクションとしてのキャンセル

GoogleMaterial Design

Microsoft

https://fluent2.microsoft.design/components/web/react/dialog/usage

UBER

https://base.uber.com/6d2425e9f/p/775209-dialog/b/46994b

‍

質問もらってたやつ

• UIのベースの理解
• 3パターン出して使い分けを質問する形式
• 基本的な考え方をまとめて1枚で説明できるようにしたい

‍

‍

‍

ちなみに書くと

• ボタン＝アクションエリアの基本パターン
• これは「３構造」の基本で、基本的にヘッダーかフッターに来ることがパターンとして多い
• アクションは対象に対しての行動がわかる場所に置く
• 『キャンセル』がアクションかどうか考える
• ナビなのか
• 行動なのか
• DialogのUIパターンの場合は、パターン的に行動っぽい扱いになる
• それ以外は基本的に”モードをやめる”という意味になることが大半

‍

‍

結論

※メンバーになってUIデザインを学ぼう！

‍

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript