ナビゲーションUIの基本
UIパターン

ナビゲーションUIの基本

悪いUIを改善しながら学ぶ情報設計。ナビゲーションの基本をリデザインして、動画を観て習得できます
完了目安
2週間
1日2-3時間を継続して行えた時の目安の計算をしています。自分で目標を立てて取り組みましょう
概要
進め方
概要
進め方
専用チャンネルで質問や交流しよう
同じレベルの人と交流したり、進捗共有しよう
コミュニティへ
PURPOSE OF SERIES
なんで作ったの?🤔

スイーツのメルマガアプリをデザイン

悪いUIを改善しながら学ぶ情報設計。ナビゲーションの基本をリデザインして、動画を観て習得できます

PURPOSE OF SERIES

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

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

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

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

詳細と応募フォームはこちら
CONTENTS
さあ始めよう!👌
使いやすいUIをデザインしたいなら『ナビゲーション』を理解しよう

使いやすいUIをデザインしよう

このシリーズでは「ナビゲーション」について学んでいきます。 「ナビゲーション」とは主にUIが設計するデジタル空間の道案内の役割を果たします。

ページ構造と読んだり、UIフローと呼ぶものなどと関わりがあります。シリーズでは”よくやってしまう間違いUI”を題材にして、ナビゲーションを学んでいきます。

ダメなUIを元に基本を理解していこう

解説だけでなく、実際によくないUIを題材にして進んでいきます。 成功事例の解説を聞いてわかった気になるのを防ぐのが目的です。なので、動画を観ながら”なぜこのUIがダメなのか?”を考えて視聴しましょう。

動画の中では『リデザインチャレンジ』もできます。ぜひ余裕がある方はダメなUIデータを元に、何がダメなのか?を言語化しながらUIのリデザインにチャレンジしてみてください。知るだけでなく具体化してみて初めて習得できます。

スライドのデータはこちら

https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?node-id=48%3A1522

08:06
無料
メンバー限定

使いやすいUIをデザインしたいなら『ナビゲーション』を理解しよう

グローバルナビゲーションの基本

グローバルナビゲーションの基本を習得

この動画では「グローバルナビゲーション」の基本を習得します。 「グローバルナビゲーション」とはアプリでもデスクトップのサービスでも、その全体像を把握する要になる概念です。サービスであれば、提供したい価値を体験するために必要な情報などへ導くための導線になります。

ダメなUIをリデザインしよう

今回は以下のUIをリデザインしていきましょう。 ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう!

▽リデザインして欲しい素材
※Figma以外の方はスクショなどで対応していただけたらと思います🙏

https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/%F0%9F%8D%A3-%E6%82%AA%E3%81%84UI%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1%3A114


▽ ダメUIのプロトタイプ

https://www.figma.com/proto/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?page-id=0%3A1&node-id=1%3A114&viewport=750%2C328%2C0.06&scaling=min-zoom&starting-point-node-id=1%3A114&show-proto-sidebar=1

スライドのデータはこちら

https://www.figma.com/proto/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?page-id=0%3A1&node-id=48%3A4861&viewport=750%2C328%2C0.06&scaling=min-zoom&starting-point-node-id=48%3A5967&show-proto-sidebar=1

13:21
無料
メンバー限定

グローバルナビゲーションの基本

お題解答 : ゴールがグロナビの在り方を決めます

ゴールで在り方が変わります

動画でお題の解答をチェックしましょう。

お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。

目次

  • 00:00 解答
  • 01:09 POINT1:何を配置するか?
  • 05:47 POINT2:サービスを開いた時の表示
  • 09:00 POINT3:機能が違うなら見た目も変えよう

解答のURL

今回のお題解答のFigma URLは以下になります〜!

▽解答Figma

https://www.figma.com/proto/v73JZxaNmnnWsXOTlOHH5D/%E8%A7%A3%E7%AD%94-%3A-%E3%83%8A%E3%83%93%E3%81%AE%E5%9F%BA%E6%9C%AC---%E3%82%B0%E3%83%AD%E3%83%8A%E3%83%93?page-id=0%3A1&node-id=2%3A416&viewport=190%2C455%2C0.13&scaling=min-zoom&starting-point-node-id=2%3A416&show-proto-sidebar=1

12:27
無料
メンバー限定

お題解答 : ゴールがグロナビの在り方を決めます

階層ナビゲーションの基本

グローバルナビゲーションの基本を習得

この動画では「階層」の基本を習得します。 「階層」は全てのページ構造の基本です。今回は階層の理解を深めるとともに、普段無意識に操作している階層に関わるUIにフォーカスを当てていきます。

なぜこの位置にこのUIがよくあるのか?どういう意味があるのか?をしっかり動画を観て理解してください。

ダメなUIをリデザインしよう

今回は以下のUIをリデザインしていきましょう。 ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう!

▽改善して欲しいデザインの素材

https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/%F0%9F%8D%A3-%E6%82%AA%E3%81%84UI%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=5%3A1190

▽ ダメUIのプロトタイプを見る

https://www.figma.com/proto/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?page-id=4%3A688&node-id=5%3A1190&viewport=720%2C610%2C0.25&scaling=min-zoom&starting-point-node-id=5%3A1190&show-proto-sidebar=1

スライドのデータはこちら

https://www.figma.com/proto/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?page-id=4%3A688&node-id=55%3A3862&viewport=397%2C111%2C0.05&scaling=scale-down-width&starting-point-node-id=55%3A3153&show-proto-sidebar=1

14:51
無料
メンバー限定

階層ナビゲーションの基本

お題解答:ユーザーに”位置”を伝えるUIは使いやすい

UIで位置を伝えましょう

動画でお題の解答をチェックしましょう。

お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。

目次

  • 00:00 解答
  • 01:20 1:現在地を示そう
  • 02:37 2:同じ情報は何回でも表示OK
  • 04:36 3:前後関係を示して道案内
  • 05:35 デスクトップUIでも考え方は同じです

解答のURL

今回のお題解答のFigma URLは以下になります〜!

▽解答Figma

https://www.figma.com/proto/ZUUGpMCUqfKweOd70eYAK2/%E8%A7%A3%E7%AD%94-%3A-%E3%83%8A%E3%83%93%E3%81%AE%E5%9F%BA%E6%9C%AC---%E9%9A%8E%E5%B1%A4?page-id=0%3A1&node-id=101%3A1708&viewport=-535%2C437%2C0.31&scaling=min-zoom&starting-point-node-id=101%3A1708&show-proto-sidebar=1

08:43
無料
メンバー限定

お題解答:ユーザーに”位置”を伝えるUIは使いやすい

モーダルナビゲーションの基本

モーダルナビゲーションの基本を習得

この動画では「モーダル」の移動に関する基本を習得します!「モーダル」はめちゃくちゃわかりづらいです。笑 ただ、階層の移動との違いを含めて解説していきます。基本的にはアクションで用いることが多く、”複雑なタスクを集中してやってもらう”ためのものになります。

ダメなUIをリデザインしよう

今回は以下のUIをリデザインしていきましょう。ダメな点は動画で解説しています。改善ポイントを把握してリデザインしてみましょう!

https://www.figma.com/file/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?node-id=5%3A2230

スライドのデータはこちら

https://www.figma.com/proto/BlZSubEgojxbcdf63T5Mxp/🍣-悪いUIから学ぶ-ナビゲーションの基本?page-id=5%3A2020&node-id=319%3A4164&viewport=722%2C-107%2C0.13&scaling=scale-down-width&starting-point-node-id=319%3A4222

16:30
無料
メンバー限定

モーダルナビゲーションの基本

お題解答:アクションのデザインはコンテンツとの関係が鍵

最適なアクションと遷移設計

アクション=モーダルというわけではないです!実例を踏まえつつ、アクションの設計を学んでいきましょう。

動画でお題の解答をチェックしましょう。
お題をやった人も、やってない人も見ることで”どう考えるのか”のヒントになると思います。

目次

  • 00:00 解答
  • 02:12 1:現在地を示そう
  • 05:59 2:モード終了後は元の位置に
  • 07:32 3:モードじゃないアクション例

解答のURL

今回のお題解答のFigma URLは以下になります〜!

▽解答Figma

https://www.figma.com/proto/SnEp9vll5qjbWA3Riwx8Yi/%E8%A7%A3%E7%AD%94-%3A-%E3%83%8A%E3%83%93%E3%81%AE%E5%9F%BA%E6%9C%AC---%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB?page-id=0%3A1&node-id=101%3A1774&viewport=-143%2C444%2C0.13&scaling=min-zoom&starting-point-node-id=101%3A1708&show-proto-sidebar=1

12:11
無料
メンバー限定

お題解答:アクションのデザインはコンテンツとの関係が鍵

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