使いやすいUIの秘密
UIパターン

使いやすいUIの秘密

UIのレイアウト(骨格)の基本構造パターンをマスターできるシリーズです!
完了目安
1日2-3時間を継続して行えた時の目安の計算をしています。自分で目標を立てて取り組みましょう
概要
進め方
概要
進め方
専用チャンネルで質問や交流しよう
同じレベルの人と交流したり、進捗共有しよう
コミュニティへ
PURPOSE OF SERIES
なんで作ったの?🤔

使いやすいUI配置には一定のパターンと理由があるのです...!

ボタン、どこに配置しよ...
ナビゲーションってこれでいいんだっけ...

実はUIの基本パターンとして法則と理由があります。
UI作成時に初心者が悩むレイアウトについて解説するシリーズです。

UIを作る際の基本的な構造パターンをマスターして”ふつう”に使いやすいUIをデザインできるようになりましょう!

PURPOSE OF SERIES

何をデザインできるの?💪

No items found.
1on1
シリーズ完走で面談しよう🔮

学びをアウトプットして
カイクンとデザイン面談しよう

シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。
アウトプットのフィードバックや、理解の相談、今後の学習の進め方など内容はメンバーが自由に決めてOKです💡
シリーズに関係ない内容でも大丈夫です。

詳細と応募フォームはこちら
CONTENTS
さあ始めよう!👌
1 : 『6つの基本』を抑えられてますか?

このシリーズではUI配置の基本パターンに触れ、概念理解を通してUIを見る目をアップデートするのが目的です。まずは全体像を見てみましょう。ラジオ感覚で聞き流すのものもオススメ!

xxxx
無料
メンバー限定

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

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

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

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

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

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

③ 階層関係

  • メニュー

④ ナビゲーション

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

⑤ アクション

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

⑥ モード

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

34:13
無料
メンバー限定

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

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

UIのあらゆる部分の基本である『3構造』について理解しましょう。
ナビゲーション/コンテンツ/アクションというソフトウェアを構成する基本の構造です。

xxx
無料
メンバー限定

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

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

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構造」をマスターしよう

ダメなUI

もくじ

『3構造』とは?

Youtubeで見る3構造

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

ナビゲーション

コンテンツ

アクション

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

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

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

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

38:40
無料
メンバー限定

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

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

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

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

 

お題
無料
メンバー限定

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

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

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

この動画では「3構造」の原則でダメ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
ダメなUIと改善後のUIの比較画像

39:22
無料
メンバー限定

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

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

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

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

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

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

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

『3構造』のポイント

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

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

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

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

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

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

3種類作ってみたので好きなのを使ってみてください!

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

テンプレートの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

Text
無料
メンバー限定

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

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

このシリーズではUI配置の基本パターンに触れ、概念理解を通してUIを見る目をアップデートするのが目的です。まずは全体像を見てみましょう。ラジオ感覚で聞き流すのものもオススメ!

xxxx
無料
メンバー限定

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

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

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

動画の続きはこちら↓

□ お題に挑戦しよう!
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 続:より実践的に学ぶには

29:39
無料
メンバー限定

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

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

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

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改善しよう

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

ダメな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

33:59
無料
メンバー限定

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

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

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

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

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

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

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

『モード』のポイント

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

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

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

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

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

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

3種類作ってみたので好きなのを使ってみてください!

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

テンプレートの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

Text
無料
メンバー限定

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

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

"アクション"をどうUIで配置するのか?きほんの”き”を習得しましょう

xxxx
無料
メンバー限定

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

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

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

34:43
無料
メンバー限定

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

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

改善①:ボタン地獄

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

ダメ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のアクションを改善しよう!

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

ダメな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

32:15
無料
メンバー限定

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

ABOUT
シリーズについて💡
動画数
お題数
This is some text inside of a div block.
カテゴリ
【UIデザイン】インタラクションデザイン
Design
カテゴリ
This is some text inside of a div block.