Dropboxを題材に6つの基本をババっと解説

この動画ではこれから深めていく6つの基本について触れていきます。
深く解説はしてなく、ざっくりこういうのがあるのよ〜という話をしています💡

この次の動画から1つずつ詳しく説明していきます。自分が気になる部分でも良いですし、基礎固めをしたい方は全て触れてみてください。

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

もくじ

• 00:00 使いやすいUIに必須な情報設計について
• 02:36 情報設計って何よ？3種類ある
• 08:41 ①UIは3つのブロックで構成されてる
• 15:05 ②コンテンツ-UIの中心になる概念
• 16:43 ③階層関係
• 20:10 ④ナビゲーション
• 22:12 ⑤アクション
• 25:43 ⑥モード
• 31:03 情報設計につよつよにする動画作りたい

‍

‍

”情報設計”を理解する理由

‍

💡 使いやすいと言われるUIを作るための必須事項

パスタでいう麺、塩、ラーメンでいうスープみたいなもんです

‍

💡 使いやすい＝ユーザーが想像しやすい”概念”を形にするのが大事

すべての軸はユーザーから組み立てる。それを形に情報の並びを取り決めていくこと。

‍

💡 UIの基本パターンを理解する必要がある

浅い歴史の中で定番と言われるUIが出てきた＝使い手にとって色々検討した結果1番効率的な形として定着してきたということです。

‍

そもそも情報設計って？

3種類あるかなと思ってます！まずは1番わかりやすいUIの部分を解説していきます。

1. ユーザーのメンタルモデル
2. 概念
3. UI

UI作成における情報設計の種類 『6選』

ほぼイコールUIの「レイアウト」や「骨格」というのに該当しそうです。

‍

① 3つの基本UI構造

• ナビ/コンテンツ/アクション

② コンテンツ：構造とブロックの階層表現

• フォントサイズなどのバランスがおかしい
• ブロックの構成がおかしい

③ 階層関係

• メニュー

④ ナビゲーション

• ヘッダーの役割
• グロナビの役割
• ページ構造

⑤ アクション

• コンテンツとアクションの関係性
• 使うボタンの種類

⑥ モード

• ページの遷移がおかしい問題
• モード中のナビゲーションがおかしい問題

‍

3構造に興味を持ったら改善アイデアを考えてみよう

動画の続きはこちら↓
‍

□ お題に挑戦しよう！
https://www.bo-no.design/contents/ui-layout-basic02-2

‍

□ お題の回答を見て3構造の実践的な考え方を身につけよう
https://www.bo-no.design/contents/ui-layout-basic02-3

‍

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

ダメなUIを元に「３構造」をマスターしよう

‍

もくじ

• ‍

‍

『3構造』とは?

Youtubeで見る３構造

ダメUIがダメな理由を3構造で

‍

ナビゲーション

‍

コンテンツ

‍

アクション

ダメUIを自分で改善して3構造を使ってみよう

解説を見るだけではなかなかデザイン力は身につきません。
実践してみることが大事です。次の動画ではダメなUIを改善する様子をFigmaを操作しながらお見せします。

自身のない方はそれを見ながら自分でも手を動かしても良いでしょう。
ただ余裕のある人はぜひ、このダメUIのダメなポイントを考えてみて自分でリデザインしてから次の解説動画を見ることをおすすめします！

自分の頭で考えてみてください！

‍

３構造を使った改善お題にトライしよう！

3構造の概念説明の動画を見て、ダメポイントを意識して自分で改善してみましょう！

次の動画で解説をしていきます💡

ダメUIのFigmaデータ
https://www.figma.com/file/o5klJSwjCijT73Yx6hphJQ/3%E6%A7%8B%E9%80%A0-%E3%81%8A%E9%A1%8C?type=design&node-id=0%3A1&mode=design&t=U1j76tUOPKSFeiPI-1

ダメなUIを３構造で改善して、理解しよう！

この動画では「３構造」の原則でダメUIを解説していきます。
何を変更するのか？それがなぜなのか？を理解することで3構造の理解と、UIを見る視点が備わるはず...です！

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

ダメUIと改善後の比較

Figmaのリンク
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=134%3A17457&mode=design&t=U1j76tUOPKSFeiPI-1

‍

‍

『3構造』の学びを残そう

能動的なアウトプットが明日を作る〜！🔥
作ったものと学んだことが自分を伝えてくれる〜！

ということで時間をかけすぎず、自分のペースで、
未来の自分のために学びを残しましょう🙆
まとめる理由は例えば

• 記憶の定着
• 振り返り
• ブログ用

などなど。シェア用テンプレートを作っておいたので活用してください👌

‍

『3構造』のポイント

• ３構造とは何だったか
• ダメUIは、何が、ダメだったのか？
• 改善したUIは、なぜ、その形になったのか？

‍

有名なサービスUIの3構造を考察してみよう

もし時間があれば、
普段自分が使っているサービスの
3構造を考察して見るのもオススメです💡

実際のUIを分解/考察して、何かにまとめてみましょう〜！

‍

テンプレートを使ってシェアしよう

学習の記録を助けるフレーム画像を作ってみました。
何種類か試しに作っているので、BONOメンバーは改変自由なので使ってやってください🙋

‍

テンプレートのリンクはこちら

テンプレートのURLは以下から。Figmaでコピペして自由に使ってみてください
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=322%3A66034&mode=design&t=3x6dTkLzZyVlIZXn-1‍

‍

‍

‍

モードに興味を持ったら改善お題にチャレンジ！

動画の続きはこちら↓
‍

□ お題に挑戦しよう！
https://www.bo-no.design/contents/ui-layout-basic03-2

‍

□ お題解答
作成したら自分のアウトプットと見比べて理解を深め、
時間がない人は見て、要点を理解しよう。
https://www.bo-no.design/contents/ui-layout-basic03-3

‍

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

ダメなUIデザインを「モード」で改善しよう

ダメなUIを題材に、”なぜダメなのか？”を考えながら
「モード」を理解する動画でうs。

モードはアクションなどサービスのUIデザインには必ず登場する概念です。
かつソフトウェア特有のもので、なんとなくで真似して使ってしまうと
使いづらいUI構造に知らず知らずなってしまいます。

• 何がダメなのか？
• それはなぜなのか？

を理解して、実物のUI改善アイデアを考えながら理解していきましょう〜！

‍

目次

• 00:25 このUI何がダメ...？
• 03:04 モードの基本について
• 12:39 NG例を3ポイントで解説
• 24:04 続：より実践的に学ぶには

‍

モードがダメな、お題にトライ！

3構造の概念説明の動画を見て、ダメポイントを意識して自分で改善してみましょう！

次の動画で解説をしていきます💡

ダメUIのFigmaデータ
https://www.figma.com/file/09Kols8UvJIMUyVUv2hcBc/%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86---%E3%81%8A%E9%A1%8C?type=design&node-id=1%3A709&mode=design&t=LE95qssRDkZ4j4rX-1

ダメなUIをモードを意識して改善

前の動画のお題に沿って自分でデザインしたものと比較して、モードについて学びを深めましょう。
自分のと違う考え方で理由にもやる場合は、フォームから教えてください！
‍

お題をデザインしていない人も、モードを理解する意味で、「何を変更しているか」「それはなぜか」を理解してみてください。

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

改善後のUIをプロトタイプでチェックする

改善後のUIのプロトタイプ

https://www.figma.com/proto/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=301-42698&t=mE3UFf10R9BUNQ5g-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=301%3A42698&show-proto-sidebar=1&mode=design

‍

‍

『モード』の学びを残そう

能動的なアウトプットが明日を作る〜！🔥
作ったものと学んだことが自分を伝えてくれる〜！

ということで時間をかけすぎず、自分のペースで、
未来の自分のために学びを残しましょう🙆
まとめる理由は例えば

• 記憶の定着
• 振り返り
• ブログ用

などなど。シェア用テンプレートを作っておいたので活用してください👌

‍

『モード』のポイント

• そもそも「モード」はなぜ必要なのか？
• 「モード」状態になった場合、ナビゲーション周りで何を注意しないといけないか？
• 「モード」状態と、通常の状態では、何が変わるのか？
• ダメUIは、何が、ダメだったのか？

‍

有名なサービスUIの『モード』を考察してみよう

もし時間があれば、
普段自分が使っているサービスの
モードを考察して見るのもオススメです💡

実際のUIを分解/考察して、何かにまとめてみましょう〜！

‍

テンプレートを使ってシェアしよう

学習の記録を助けるフレーム画像を作ってみました。
何種類か試しに作っているので、BONOメンバーは改変自由なので使ってやってください🙋

‍

テンプレートのリンクはこちら

テンプレートのURLは以下から。Figmaでコピペして自由に使ってみてください
https://www.figma.com/file/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=322%3A66034&mode=design&t=3x6dTkLzZyVlIZXn-1‍

‍

‍

‍

UIデザイン×アクションの基本

ダメなUIを題材に、なぜこれが使いづらいのか？を考え、
それを通して”UIデザインにおけるアクションの設計”の基本を理解しましょう

‍

アクションに興味を持ったら改善お題にチャレンジ！

動画の続きはこちら↓
‍

□ お題に挑戦しよう！
https://www.bo-no.design/contents/ui-layout-basic04-2

‍

□ お題解答
作成したら自分のアウトプットと見比べて理解を深め、
時間がない人は見て、要点を理解しよう。
https://www.bo-no.design/contents/ui-layout-basic04-3

‍

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

‍

改善①：ボタン地獄

ダメなポイントを把握して
改善をしていきましょう！

ダメUIのFigmaデータ
https://www.figma.com/file/2E4c39iMHdkT2f7xpFz5zP/%E7%84%A1%E6%96%99%2F%2F%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=1%3A40911&mode=design&t=1AuO16hrKi6K86f6-1

‍

改善②:ずっと表示されてるボタン

‍

‍

ダメなUIをモードを意識して改善

前の動画のお題に沿って自分でデザインしたものと比較して、モードについて学びを深めましょう。
自分のと違う考え方で理由にもやる場合は、フォームから教えてください！
‍

お題をデザインしていない人も、モードを理解する意味で、「何を変更しているか」「それはなぜか」を理解してみてください。

‍

メンバー限定でご意見お待ちしてます〜！

2023年内限定で、ご意見お待ちしてます〜！
情報設計の中の「UIの書くパーツをどこになぜ配置するのか〜」の基本的な部分をやっていこうとしています。

・こういうの悩む
・こういうの知りたい

などありましたら教えてください

‍

フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdLk0jXuMxKgxOzI4xbWTSD_MY4ephm7kmw1HMYHlJ37Ds3MA/viewform

‍

‍

改善後のUIをプロトタイプでチェックする

改善後のUIのプロトタイプ

https://www.figma.com/proto/k4HVxEnPdth8k46vu6mtnj/%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=301-42698&t=mE3UFf10R9BUNQ5g-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=301%3A42698&show-proto-sidebar=1&mode=design

‍

‍