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構造

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

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

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

③ 階層関係

• メニュー

④ ナビゲーション

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

⑤ アクション

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

⑥ モード

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

‍

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

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

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

‍

‍

もくじ

• 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構造

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

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

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

③ 階層関係

• メニュー

④ ナビゲーション

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

⑤ アクション

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

⑥ モード

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

‍

‍