使いやすいUIを作るための基本を身につけよう

こんにちは！カイクンです🙋今回「使いやすいUIの秘密」シリーズをリリースしたのでそのご紹介をします。
このシリーズでは、使いやすいUIデザインの基本となる『6つの重要な概念』について、実例とハンズオン形式で実際にデザインしながら学ぶことができます。

UIはユーザーや目的によって最適な形が変わるため、一概に「こうすればOK」と言えません。しかし、UIデザインにはPCやスマートフォンを媒体にするため一定パターンやルールがあり、それらを押さえることが使いやすいUIを作る上で欠かせません。このシリーズではその避けることのできない基本概念の習得を目指すシリーズになっています。

”使いやすさ”をデジタル上のUIで実現するために避けては通れない基礎を早く掴むことで
価値をデザインするデザイナーをより早く生み出すために作成しました！

‍

‍

どこに何を配置すべきか迷ったことはないですか？

このシリーズはUI初心者から現場1−2年目の方を対象に作成しています。UIを作っている際に「アクションボタンはどの位置に置けばいいんだろう？」「ナビゲーションには何を配置すればいいんだろう？」など考えたことはありませんか。シリーズを通してこの疑問に対する考え方、UIの基礎をマスターすることをゴールにしています。

どこに何を配置するか？は目的によって決まりますが、それが定まっている際の考え方にはUIの基本が不可欠です。自然なUIを選択することで「ふつう」の使いやすいUIをデザインするための6つの基礎概念をこのシリーズでマスターしていきます。

‍

6つの基礎概念を理解しよう

このシリーズでは、以下の6つの基礎概念について学ぶことで使いやすいUIが当たり前に守っている概念の習得を目指します💡

▼ 6つの基礎概念

• UI3構造
• モード
• アクション
• ナビゲーション
• コンテンツ
• 階層

一見すると別々の概念に見えますが、実は使いやすいUIをデザインするために6つの概念はすべて密接に関係しています。この6つの基礎を理解することで、UIの本質を捉えることができるのです。

「使いやすさ」はユーザーが決めることですが、これらの概念を活用することで、正しい方向性でUIを設計できるようになります。例えば「どこにボタンを配置するか」「どんな情報を提示するべきか」といった基本的な問題に対処できるようになるでしょう。

（ちなみにナビゲーションについては、過去に別のシリーズを作っています。より学びたい人はそちらのシリーズも行うこととより深く理解できると思います）

‍

実例とハンズオンで着実に学ぼう

このシリーズでは、実際のUIデザインの事例を参考にしながら、ハンズオンの課題に取り組んでいきます。動画を見ながら考え、自分で実践することで、理解がぐっと深まります。
シリーズで作成したUIはポートフォリオやブログなどにまとめるとスキルアップの過程を他の人にも可視化することができるでしょう。

この「使いやすいUIの秘密」シリーズはBONOの「未経験からUIデザイナーを目指すロードマップ」の情報設計力をより身につけやすくするために新設しました。
情報設計は、「ユーザーの目的はAで、なのでabcd…といったことを可能にする必要がある」などを整理しながらUIのアイデアを出すパートです。定められた方向性をUIで解決するために重要なスキルになります。

つまり、このシリーズの内容はUIデザインのスキルアップを加速するための基礎知識を扱っています。様々なUIを観察すれば、自然とその基礎概念に気づくことはできるでしょう。
デザイン初心者の方がこれらの概念を早期に理解することで、UIからの気づきがより多く得られるようになります。UIデザインの奥深い世界を、効率的に学んでいくことができるのです。

私たちの目標は、皆さんがこの基礎知識を活用して、デジタル分野でいち早く貢献できる人材へと成長することです。
UIデザインの第一歩を確実に踏み出し、スキルを着実に高めていけるよう、このシリーズでサポートしていきます🙋

‍

‍

まずは無料のコンテンツで全体像を掴もう!!

UIのアイデアを生み出す力は、BONOが提供するUI/UXデザイナーロードマップでの情報設計力の土台となります。このシリーズを活用することで、間違ったUIを作ることなく、適切なUIを提案できるようになるでしょう。

まずは以下のコンテンツから、全体像を掴んでみてください💡

使いやすいUIをデザインするための『6つの基本』を知ろう
https://www.bo-no.design/contents/ui-layout-basic01

初心者の方は、UIを正しく見る目を養い、経験者の方は認識を改めて確かなものにすることができます。UIデザインの基礎を身につけ、使いやすいUIを作る一歩を踏み出す手助けをするために知識だけではなくすぐに自分で活用できる内容にしています。

初心者の方はUIを見る目がより鮮明になり、現場に入ったばかりの方は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構造

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

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

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

③ 階層関係

• メニュー

④ ナビゲーション

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

⑤ アクション

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

⑥ モード

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

‍

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改善にトライしてみてください

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

‍

お題トライ用のFigmaデータ

コピペして自分の手元で使ってください。

ダメ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=8%3A38722&mode=design&t=990PQPOHXuGdTkKt-1

‍

‍

1 : 概要

この動画では、UIデザインの改善方法について解説しています。まず、フォルダ作成時のUIフローに2つの問題点があることを指摘しています。1つ目は、「作成する」ボタンを押してもまだ選択作業が必要なこと。2つ目は、「選択しよう」という画面で実際にはまだ選択できないことです。その後、これらの問題を解決するために、モーダルウィンドウの基本的な使い方と、モードの切り替えに関する注意点について説明しています。複数のモードを使うのはややこしくなるため、1つのモードでまとめ上げることがユーザビリティの観点から望ましいことを強調しています。

‍

2 : 動画で得られること

• フォルダ作成時のUIフローを見直し、ユーザーが求めている操作内容を明確にする
• モーダルウィンドウの基本パターンを理解し、適切な場面で活用する
• モードの切り替えは必要最小限に留め、1つのモードで処理をまとめることを心がける

‍

3 : コンテンツ内容

フォルダ作成時のUIフローの問題点

フォルダ作成のUIフローには2つの問題がある。1つ目は「作成する」ボタンを押してもまだ選択作業が必要なこと。2つ目は「選択しよう」という画面で実際にはまだ選択できないこと。

モーダルウィンドウの使い方

モーダルウィンドウは、質問に対してYES/NOなどを選択するためのUI。タイトルと選択肢から構成されるのが基本形。

モードの切り替えに関する注意点

モード中に別のモードを開始するのはややこしくなる可能性がある。1つのモードで処理をまとめ上げる方が望ましい。

改善した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=637-82978&t=FvgCa3vjKDod5did-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=637%3A82978&show-proto-sidebar=1&mode=design

‍

パターン2：改善後の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=637-85349&t=FvgCa3vjKDod5did-1&scaling=min-zoom&page-id=179%3A1790&starting-point-node-id=637%3A85349&show-proto-sidebar=1&mode=design

‍

‍

‍

‍

‍

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

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

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

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

‍

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

‍

‍

‍

‍

‍

1 : 概要

figmaを使用してUI設計の改善パターンを考えていく内容です。まずフォルダ作成機能において、モードの切り替えがうまくいってないことを指摘し、ステップごとの画面遷移を明確にすることで改善できると提案しています。その後、フォルダ作成後の画面遷移のパターンとして、作成モードに留まるパターンと、フォルダ詳細画面に遷移するパターンの2通りを例示しています。最後に、何が問題だったのかを再確認しながら、モードの切り替え方のポイントを伝えています。

‍

2 : 動画で得られること

• フォルダ作成機能の改善点を確認する
• ステップごとの画面遷移を導入してみる
• フォルダ作成後の遷移パターンを2通り検討する
• ユーザーの操作目的に合わせて遷移先を選択する
• モードの切り替え方のポイントを理解する

‍

3 : 動画の目次

‍

‍

‍

4 : コンテンツ内容

figmaでUIの改善パターンを考える

はじめに、figmaでUIの改善パターンを作っていく予定であることを説明しています。まずは問題点をラフで描いていき、改善のアイデアを形にしていくと述べています。

フォルダ作成機能の問題点

フォルダ作成機能では、モードが終わっているのに終わっていないように交錯しているなど、モードの切り替えがうまくできていないことを問題点として指摘しています。

ステップごとの画面遷移で改善

フォルダ名入力と契約書選択を別々のステップとして画面遷移を明確にすることで、改善できると提案しています。ステップ1がフォルダ名入力、ステップ2が契約書選択となり、1つのモードで完結するようにしています。

フォルダ作成後の遷移パターン

フォルダ作成後の遷移先として、作成モードに留まるパターンと、フォルダ詳細画面に遷移するパターンの2通りを例示しています。遷移先はユーザーの操作目的によって変える必要があるとしています。

問題点の再確認

最後に、初めのUIがなぜ駄目だったのかを再確認し、モードの切り替え方のポイントを伝えています。

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

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

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

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

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

‍

『モード』のポイント

• そもそも「モード」はなぜ必要なのか？
• 「モード」状態になった場合、ナビゲーション周りで何を注意しないといけないか？
• 「モード」状態と、通常の状態では、何が変わるのか？
• ダメ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のベースの理解
• 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デザイン×アクションの基本

ダメな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を改善せよ〜！

アクションにまつわる解説動画の観点で、
アクション導線を自分で改善してみよう！

下のURLから元データをコピペできます。
自分の手元でUIを作成してみよう

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

ダメUIのFigmaデータ
https://www.figma.com/file/2E4c39iMHdkT2f7xpFz5zP/%E3%80%90%E7%84%A1%E6%96%99%E3%80%91%3A-%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=2%3A49609&mode=design&t=rC4PQzALZnZ58Kh4-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を改善していきます。

お題をデザインしていない人も、アクションの基本の観点で「何を変更しているか」「それはなぜか」を理解してみてください。

‍

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

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=771-42118&t=daoTMqt6akI7eY6j-1&scaling=contain&page-id=316%3A39738&starting-point-node-id=771%3A42118&show-proto-sidebar=1&mode=design

‍

‍

1 : 概要

UIデザイナーの初心者が抑えるべきUIの概念の1つにナビゲーションがある。ナビゲーションはサイトやサービスの使いやすさに大きく影響する。ナビゲーションをどう構築していくかはUI設計の根幹をなす。複雑だが、ここではナビゲーションの基本的な部分を解説する。理論だけでは分かりづらいので、改善が必要な例を示しながら、正しいナビゲーションのあり方を学んでいく。改善案の詳細は有料コンテンツで後に解説する。まずナビゲーションの構造設計、グローバルナビゲーションの内容、モードとの関係の3点を確認する必要がある。例として契約書管理サービスのUIを示す。ナビゲーションがバラバラであることが分かる。2つのナビゲーションブロックが必要か、グローバルナビゲーションに何を配置するべきかを考える必要がある。さらに、詳細ページでグローバルナビゲーションの内容が変わったり、モード移行時のナビゲーションが不適切だったりする点も改善が必要である。ナビゲーション作成の基本を押さえることで、UIデザイン力が向上すると期待できる。

‍

2 : 動画で得られること

• UI設計する際は、コンテンツのグループ化と構造化を考える
• グローバルナビゲーションでは、サービスの主要な機能が分かる内容を配置する
• モード移行時はナビゲーションも適切に切り替える

‍

3 : コンテンツ内容

ナビゲーションの構造設計

ナビゲーションはサイト内のコンテンツ構造を反映する必要がある。契約書管理サービスの例では、契約書が中心のコンテンツ。これに関連するお気に入りや担当契約書などがある。アカウントや設定、通知などは別のコンテンツグループ。このようにコンテンツのグループ化と構造化が必要。

グローバルナビゲーションの内容

グローバルナビゲーションはサービスの出発点となる部分。サービスでできることが一般的に分かる内容が必要。契約書管理サービスなら契約書と取引先が主要なコンテンツとなる。通知などは優先度が下がる。

モードとの関係

モード移行時はナビゲーションも切り替わる必要がある。契約書作成モード中は通常のグローバルナビゲーションは不要。モードとナビゲーションは密接に関係するため注意が必要。

‍

‍

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

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

‍

‍

ナビゲーションの基本をより学ぼうに興味を持ったら改善お題にチャレンジ！

動画の続きはこちら↓
‍

□ ナビゲーションで抑えてほしい3つの基本
https://www.bo-no.design/contents/ui-layout-basic05-2

‍

□ ナビゲーションの改善お題
https://www.bo-no.design/contents/ui-layout-basic05-3

‍

‍

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

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

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

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

‍

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

‍

‍

‍

ナビゲーションのきほんでダメUIを改善しよう！

前回までの動画でも紹介した、ダメなUIを改善しましょう

ナビゲーションの基本とポイントを把握して
改善をしていきましょう！

‍

ダメUIのプロトタイプ
※操作しながらダメポイントを出そう

https://www.figma.com/proto/2E4c39iMHdkT2f7xpFz5zP/%E3%80%90%E7%84%A1%E6%96%99%E3%80%91%3A-%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=53-39673&t=EU7NlsjDRMxDX0sF-1&scaling=min-zoom&page-id=26%3A13343&starting-point-node-id=49%3A36057&show-proto-sidebar=1&mode=design

‍

ダメUIのFigmaデータ
※コピペして作業できます

https://www.figma.com/file/2E4c39iMHdkT2f7xpFz5zP/%E3%80%90%E7%84%A1%E6%96%99%E3%80%91%3A-%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=26%3A13533&mode=design&t=tO4GPh0SymOhhU2N-1

‍

‍

‍

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

この動画では、ナビゲーションデザインの基本的な3つの考え方について解説しています。1つ目は、ナビゲーションの構造はグローバルナビゲーション、コンテンツ内ナビゲーション、サブナビゲーションの3段階が基本であること。2つ目は、グローバルナビゲーションにはユーザーの目的となるコンテンツが配置されるべきこと。3つ目は、ページ遷移とモード切替えの2種類しかないこと。基本的なこの3つの考え方を理解することで、UIデザインの解像度が上がると述べられています。

‍

2 : 動画で得られること

• 次回は扱いにくいUIの改善例を示す
• 自分の利用しているサービスのUIをこの3つの考え方で確認する
• 他の方にこの考え方をシェアする

‍

3 : 動画の目次

• 00:09 覚えて帰って欲しい!3つの基本        
• 03:33 ナビゲーションは3層構造
• 07:17 グローバルナビに何を置くか？原則
• 09:47 ページ移動は2種類のみ
• 17:04 次の動画

‍

4 : コンテンツ内容

ナビゲーションの構造は3段階

ナビゲーションの構造は、グローバルナビゲーション、コンテンツ内ナビゲーション、サブナビゲーションの3段階が基本である。グローバルナビゲーションが最上位に位置し、コンテンツ内ナビゲーションは表示中のコンテンツの中での移動、サブナビゲーションはその中のさらに細かい移動となる。図や実例で説明している。

グローバルナビゲーションには目的となるコンテンツを配置

グローバルナビゲーションには、ユーザーの目的となるコンテンツが配置されるべきである。サービスの提供するコンテンツがユーザーの出発点となるべきだ。YouTubeの例では、動画やマイページなどのコンテンツが配置されている。

ページ遷移とモード切替えの2種類しかない

ナビゲーションの移動には、ページ遷移とモード切替えの2種類しかない。YouTubeの例では、編集モードへの切替えがモード切替えの例として紹介されている。移動がおかしい場合はこの2つの種類を確認する必要がある。

‍

‍

つづき：ナビゲーションの改善お題にチャレンジ！

動画の続きはこちら↓
‍

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

‍

‍

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

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

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

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

‍

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

‍

‍

ダメなUIナビゲーションの３つのポイント

‍この動画ではダメUIのナビゲーションを、ナビゲーションの３つの基本を使って改善する実例動画です。

ダメなポイントは大きく３つ

• グロナビの目的がバラバラ
• ナビゲーションの情報の構造化がバラバラ
• 遷移のパターンがバラバラ

UIデザイン初心者は意識的にUIを見る目をまずは養うために、自分で改善してみたり、動画の観点を見てみましょう〜！

そのあと普段見ているUIを自分で見てみて、『なぜそうなっているのか？』を考察するとより良い視点を持つことができます。

‍

‍

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

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

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

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

‍

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

‍

‍

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

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

https://www.figma.com/proto/k4HVxEnPdth8k46vu6mtnj/"使いやすいUIの秘密-『3つの基本構造』%2F-わかりやすいUIには6つの指標があるよ-%2F?type=design&node-id=845-79499&t=UqfK8iBOQQqImIHS-1&scaling=min-zoom&page-id=693%3A32026&starting-point-node-id=845%3A79499&show-proto-sidebar=1&mode=design

‍

‍

コンテンツがUIの中心

ビジュアルコースの音声SNSを題材にして、「コンテンツがUIの中心である」という基本概念を解説します！
自分が作ったUIとも比較してみると良いと思います💡

OOUIの考え方でもあります。

‍

‍

つづき：コンテンツのUI検討をします！

動画の続きはこちら↓
‍

□ ユーザー心をつかむUIの作り方：15パターン検討で、コンテンツUI表現の模索を全部見せ
https://www.bo-no.design/contents/ui-layout-basic06-2

‍

‍

15パターン作ったUI検討全部見せ！

この動画ではコンテンツがUIの中心である！（OOUI）の考えのもと、最適なUIをどう作るのか？その過程を15パターンの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=693%3A55715&mode=design&t=0oAuC7OyZsbNzRg9-1

‍

コンテンツ中心のUI設計をやっていこう

情報設計コースの別シリーズ「コンテンツ中心のUI設計（OOUI）」で詳しい概念解説をしています。
概念から知りたい方はぜひどうぞ。

https://www.bo-no.design/series/ooui

‍

動画の内容

1. UI設計のコンテンツ中心性: UI設計では、ユーザーが主に触れるコンテンツを中心に考える必要がある。
2. コンテンツの重要性とUIへの統合: 効果的なUIは、コンテンツの価値を最大限に引き出し、統合することがカギ。
3. 複数のUIパターン検討の重要性: 様々なUIパターンを検討することで、最適なユーザー体験を見つける。
4. 実際のサービスUIの詳細分析: 具体的なサービスのUIを深く分析し、問題点を特定する。
5. 改善策の提案と比較: 適切な改善策を提案し、ビフォーアフターで効果を比較する。
6. ビフォーアフターでの効果検証: 改善前後のUIを比較し、デザインの変更がもたらす影響を検証。
7. 実践的なUI変更の効果: 実際にUIを変更し、その効果を実践的に検証する。
8. 視聴者への自己試行の促進: 視聴者にもUI改善を試すことを推奨し、学習と成長を促す。
9. UI改善のポートフォリオへの活用: 自身のUI改善作業をポートフォリオに記録し、スキルを示す。
10. UI設計の考察と共有: UI設計に関する考察を共有し、知識と経験を広める。

‍

‍

‍

‍