シリーズ目次

使いやすいUIの秘密

1 : 『6つの基本』を抑えられてますか?
xxxx
1 : 『6つの基本』を抑えられてますか?

1 : 『6つの基本』を抑えられてますか?

【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう
Text
【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう

【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう

使いやすいUIをデザインするための『6つの基本』を知ろう
34:13
使いやすいUIをデザインするための『6つの基本』を知ろう

使いやすいUIをデザインするための『6つの基本』を知ろう

2 : 『3構造』UI構造の超基本
xxx
2 : 『3構造』UI構造の超基本

2 : 『3構造』UI構造の超基本

【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』
38:40
【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』

【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』

お題にチャレンジ!-3構造を使ってUI改善してみよう
お題
お題にチャレンジ!-3構造を使ってUI改善してみよう

お題にチャレンジ!-3構造を使ってUI改善してみよう

「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう
39:22
「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう

「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう

「3構造」の学びをまとめよう【テンプレ付き】
Text
「3構造」の学びをまとめよう【テンプレ付き】

「3構造」の学びをまとめよう【テンプレ付き】

3 : 『モード』の基本を習得しよう
xxxx
3 : 『モード』の基本を習得しよう

3 : 『モード』の基本を習得しよう

【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう
29:39
【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう

【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう

お題にチャレンジ!-モードを使ってUI改善しよう
お題
お題にチャレンジ!-モードを使ってUI改善しよう

お題にチャレンジ!-モードを使ってUI改善しよう

お題解答 NG UIを改善して、モードの基本を身につける
33:59
お題解答 NG UIを改善して、モードの基本を身につける

お題解答 NG UIを改善して、モードの基本を身につける

【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!
09:52
【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!

【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!

【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる
35:47
【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる

【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる

「モード」の学びをまとめよう【テンプレ付き】
Text
「モード」の学びをまとめよう【テンプレ付き】

「モード」の学びをまとめよう【テンプレ付き】

3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法
18:59
3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法

3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法

4 : 『アクション』の基本を習得しよう
xxxx
4 : 『アクション』の基本を習得しよう

4 : 『アクション』の基本を習得しよう

【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている
34:43
【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている

【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている

【お題】ボタン地獄UIのアクションを改善しよう!
お題
【お題】ボタン地獄UIのアクションを改善しよう!

【お題】ボタン地獄UIのアクションを改善しよう!

詳細ページのアクションを考えよう
09:08
詳細ページのアクションを考えよう

詳細ページのアクションを考えよう

アクション×情報設計 : ボタン地獄UIをどう改善する?
32:15
アクション×情報設計 : ボタン地獄UIをどう改善する?

アクション×情報設計 : ボタン地獄UIをどう改善する?

【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?
22:49
【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?

【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?

4 : 『ナビゲーション』の基本を習得しよう
xxxx
4 : 『ナビゲーション』の基本を習得しよう

4 : 『ナビゲーション』の基本を習得しよう

【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?
26:22
【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?

【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?

【お題】ナビゲーションの基本を使って改善してみよう
お題
【お題】ナビゲーションの基本を使って改善してみよう

【お題】ナビゲーションの基本を使って改善してみよう

【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本
18:34
【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本

【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本

アクション×情報設計 : ボタン地獄UIをどう改善する?
15:53
アクション×情報設計 : ボタン地獄UIをどう改善する?

アクション×情報設計 : ボタン地獄UIをどう改善する?

5 : 『コンテンツ』がUIの中心
xxxx
5 : 『コンテンツ』がUIの中心

5 : 『コンテンツ』がUIの中心

UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう
22:13
UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう

UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう

ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツUI表現の模索を全部見せ
17:18
ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツUI表現の模索を全部見せ

ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツUI表現の模索を全部見せ

トップ
/
使いやすいUIの秘密
/
使いやすいUIをデザインするための『6つの基本』を知ろう
基本UIパターン

使いやすいUIをデザインするための『6つの基本』を知ろう

2024
3
12
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

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つずつ詳しく説明していきます。自分が気になる部分でも良いですし、基礎固めをしたい方は全て触れてみてください。

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

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

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

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

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

③ 階層関係

  • メニュー

④ ナビゲーション

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

⑤ アクション

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

⑥ モード

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

使いやすいUIの秘密

1 : 『6つの基本』を抑えられてますか?
xxxx
1 : 『6つの基本』を抑えられてますか?

1 : 『6つの基本』を抑えられてますか?

【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう
Text
【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう

【シリーズ紹介】UIのどこに何を配置するか迷う?UIの基本概念で解決しよう

使いやすいUIをデザインするための『6つの基本』を知ろう
34:13
使いやすいUIをデザインするための『6つの基本』を知ろう

使いやすいUIをデザインするための『6つの基本』を知ろう

2 : 『3構造』UI構造の超基本
xxx
2 : 『3構造』UI構造の超基本

2 : 『3構造』UI構造の超基本

【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』
38:40
【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』

【使いやすいUIの秘密】何がダメかわかる?NGなUIで理解する、劇的にUIデザインの理解が進む『UI3構造』

お題にチャレンジ!-3構造を使ってUI改善してみよう
お題
お題にチャレンジ!-3構造を使ってUI改善してみよう

お題にチャレンジ!-3構造を使ってUI改善してみよう

「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう
39:22
「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう

「3構造」を使ってUI改善解説!NGなUIをふつうにする理由を知ろう

「3構造」の学びをまとめよう【テンプレ付き】
Text
「3構造」の学びをまとめよう【テンプレ付き】

「3構造」の学びをまとめよう【テンプレ付き】

3 : 『モード』の基本を習得しよう
xxxx
3 : 『モード』の基本を習得しよう

3 : 『モード』の基本を習得しよう

【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう
29:39
【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう

【使いやすいUIの秘密】"モード"の基本 : NG UIを題材に知らないと陥るモードの罠を避け、UIデザインの基礎を身につけよう

お題にチャレンジ!-モードを使ってUI改善しよう
お題
お題にチャレンジ!-モードを使ってUI改善しよう

お題にチャレンジ!-モードを使ってUI改善しよう

お題解答 NG UIを改善して、モードの基本を身につける
33:59
お題解答 NG UIを改善して、モードの基本を身につける

お題解答 NG UIを改善して、モードの基本を身につける

【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!
09:52
【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!

【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう!

【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる
35:47
【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる

【お題解答】モードの切り替えを自然にする2つのパターンを紹介/アクションの意味とUIを一致させる

「モード」の学びをまとめよう【テンプレ付き】
Text
「モード」の学びをまとめよう【テンプレ付き】

「モード」の学びをまとめよう【テンプレ付き】

3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法
18:59
3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法

3種のモーダルの違い分かる?新米UIデザイナー必見!モーダルUIの基本とUIリサーチ方法

4 : 『アクション』の基本を習得しよう
xxxx
4 : 『アクション』の基本を習得しよう

4 : 『アクション』の基本を習得しよう

【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている
34:43
【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている

【使いやすいUIの秘密】"アクション"の基本 : ダメなUIデザインは、アクションと〇〇が離れすぎている

【お題】ボタン地獄UIのアクションを改善しよう!
お題
【お題】ボタン地獄UIのアクションを改善しよう!

【お題】ボタン地獄UIのアクションを改善しよう!

詳細ページのアクションを考えよう
09:08
詳細ページのアクションを考えよう

詳細ページのアクションを考えよう

アクション×情報設計 : ボタン地獄UIをどう改善する?
32:15
アクション×情報設計 : ボタン地獄UIをどう改善する?

アクション×情報設計 : ボタン地獄UIをどう改善する?

【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?
22:49
【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?

【改善】なぜリストUIに常にボタンを表示するのは微妙なUIデザインなのか?

4 : 『ナビゲーション』の基本を習得しよう
xxxx
4 : 『ナビゲーション』の基本を習得しよう

4 : 『ナビゲーション』の基本を習得しよう

【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?
26:22
【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?

【使いやすいUIの秘密】UIで道案内!ナビゲーションの基本 / ユーザーの起点になる情報を配置する / 構造を整理する方法 / グロナビとは?

【お題】ナビゲーションの基本を使って改善してみよう
お題
【お題】ナビゲーションの基本を使って改善してみよう

【お題】ナビゲーションの基本を使って改善してみよう

【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本
18:34
【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本

【使いやすいUIの秘密】グロナビには〇〇を配置する。抑えるべきUIナビゲーションの3つの基本

アクション×情報設計 : ボタン地獄UIをどう改善する?
15:53
アクション×情報設計 : ボタン地獄UIをどう改善する?

アクション×情報設計 : ボタン地獄UIをどう改善する?

5 : 『コンテンツ』がUIの中心
xxxx
5 : 『コンテンツ』がUIの中心

5 : 『コンテンツ』がUIの中心

UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう
22:13
UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう

UIデザインって〇〇が中心なのよ〜。基本を知って、見た目じゃ使いづらくなる理由を知ろう

ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツUI表現の模索を全部見せ
17:18
ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツUI表現の模索を全部見せ

ユーザー心をつかむUIの作り方:15パターン検討で、コンテンツ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

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More