「3構造」ではじめるUIデザイン入門
使いやすいUIデザインの基本
「3構造」ではじめるUIデザイン入門
UI設計がラクになる3つの役割を知ろう
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

UI設計がラクになる3つの役割を知ろう

はじめてでもセンスに頼らず「使いやすいUI」がつくれる

このレッスンは、UIデザインをゼロから学ぶ人のために「3構造」でUIデザインを解説するものです。

「なんとなく配置してしまう」「どこに何を置けばいいかわからない」──
初心者がなんとなく見てしまうUIデザイン、“構造”という視点からスッキリ解説していきます。

最初の一歩となるこのレッスンでは、UIをつくる上で最も大切な3つの要素、**「コンテンツ・ナビゲーション・アクション」**を学びます。
この3つを意識するだけで、画面のレイアウトも、見せ方も、操作のしやすさも体系的にデザインを考えやすくなります。

「UIってこうやって考えるのか!」を早い段階から知ることでUIデザインの成長速度を高めましょう。

このレッスンが含まれるコース

https://www.bo-no.design/rdm/uivisual-course

コースの詳細へ

コース内容
デザインをはじめよう
UI設計がラクになる3つの役割を知ろう
SECTION
1.レッスン概要

3構造レッスンの進め方と学習内容をチェック

xxx
カテゴリ
1.レッスン概要
無料
メンバー限定
SECTION
「3構造」レッスンで得られるもの・進め方

このレッスンで学ぶこと

まずは1画面のUIをデザインをはじめるために「3つの構造」でUIが成り立っていることを理解してUIトレースからデザインをはじめましょう。

ゴール

  • ゴール1:見た目と使いやすさをデザインするために”3つの要素”でUIを考える目を持つこと
  • ゴール2 : 3構造を使ってUIトレースを行うこと

ゴールために身につけること

  • 3構造の理解:UIには3つの要素が必須であること
    • 1. コンテンツはUIの中心
    • 2. ナビゲーションは道案内
    • 3. アクションは機能が始める場所
  • UIレイアウト理解を3構造ではじめる
    • 既存のサービスを3構造の目で見れるようになろう

UIデザイン初心者が3構造を習得する理由

1. UIは見た目と機能の掛け算だから

2. 3つの操作のために必要な要素を知ることでUIが考えやすい

UIは見た目と機能の掛け算

UIでは見た目も大事、それと同じかそれ以上に”つかえるか”が大切になります
たとえばパッと見たときに「何ができるか」が無意識に伝わるデザインかどうかが大切です。そのためにUIに必ずと言っていいほど存在している基本の要素があります
それが3つの要素、UIデザインの3構造です。

UIに必須な3つの構造

コンテンツ

  • UIの中心となる情報です
  • SNSであれば人の投稿や、プロフィールなどです。それをユーザーは見に来る

ナビゲーション

  • 適切な情報やアクションに導いてあげる要素です
  • たとえば「このサービスには他にどんな情報にアクセスできるのか」「どんなアクションができるのか」などを無意識に伝え、ユーザーを導く要素です

アクション

  • サービスを”使う”ための要素です
  • 新しく投稿を作成したり、編集したり、主にコンテンツに対する行動を始めるための要素になります
  • これがあることで見るだけではなく、直接操作して、価値を得る、Webサービスとしての役目を始める要素です。

3つの操作のために必要な要素を知ることでUIが考えやすい

  • UIでは必ずと言っていいほどこの3つの要素が、構造として存在しています。なのでこの3つに着目する目を持つことでUIの理解が速くなります
  • また自分でUIを作るときにもこの3つの構造が存在しているか?わかりやすい機能配置になっているか、要素が欠けてないか?を意識しながらデザインできるようになり、”つかいやすい”UI設計を始めやすいです。
  • つまり「UIを論理的に組み立てる目」を持つための項目を知ることができます

UIデザインを3構造ではじめよう

それではまず「1画面」のUIをデザインできることをゴールイメージにして「3構造」を学んでいきましょう。

text
カテゴリ
「3構造」レッスンで得られるもの・進め方
無料
メンバー限定
SECTION
2.UIデザインの基本:3構造

UIデザインに必須な3つの構造を理解しよう

xxx
カテゴリ
2.UIデザインの基本:3構造
無料
メンバー限定
SECTION
【初心者】UIデザインはこの3つで決まる!『3構造』を徹底解説

UIデザインで考えるべき3つの視点

この動画では「コンテンツ」「ナビゲーション」「アクション」のUIを構成する上で必須の3要素について解説します。
この3つを知っているとUIを分析する目が身につき、自分でデザインするときも”何を今考えるべきか?”を要素ごとに整理して考えることができます。

使いやすさと見た目の掛け算が大切なUIの分野を攻略するためにこの3つをまずは知り、実践できるようになりましょう

目次

  • 0:00 イントロ
  • 0:29 UIデザイン理解が上がる”3構造"
  • ”2:19 UIデザインの理解が高速に
  • 3:51 この動画のポイント5:15 3構造とは?
  • 7:21 具体的なUIで見る「3構造」
  • 13:56 3構造が重要な理由
  • 16:34 例で見る3構造
  • 19:19 ①: コンテンツ2
  • 0:58 コンテンツUIの例: YouTubeの管理画面
  • 23:15 実例: コンテンツUIのパターン
  • 25:28 ②: ナビゲーション29:41 役割1: 道案内
  • 32:00 役割2: 現在地を伝える
  • 33:16 役割3: ページの関係性を伝える
  • 34:19 ③: アクション
  • 37:15 アクションの基本と役割
  • 38:49 アクションの例
  • 1:05 3構造でデザインする流れ
  • 43:23 もっと学びたい人はBONO (ボノ) をチェック
  • 44:54 BONOの「UIデザイン基礎コース」
  • 47:19 おわりに
48:55
カテゴリ
【初心者】UIデザインはこの3つで決まる!『3構造』を徹底解説
無料
メンバー限定
SECTION
InstagramのUIデザインを「3構造」で分析してみた

実際に画面に触れてポイント確認して進めよう

サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です

Instagram
https://instagram.com/

動画の目次

00:00 イントロ
01:46 ゴールと目次03:18 見ていくUI
03:58 Instagramアプリの『ホームUI』の3構造
07:40 コンテンツについて
10:44 ナビゲーションについて12:52 アクションについて
15:25 Instagramアプリの『投稿フロー』の3構造
16:25 3構造は?
17:03 ナビゲーションについて
19:24 アクションについて
24:18 Instagramアプリの『デスクトップUI』の3構造
24:44 コンテンツについて
25:14 ナビゲーションについて
27:15 アクション
29:21 Notion Mailの3構造
31:28 コンテンツについて
32:43 続きはBONOで!

スライドのURL

手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。

FigmaのURL
https://www.figma.com/deck/9sXEWzI21qES3CocWVfBBc/%E4%BA%8B%E4%BE%8B%E3%81%A7%E5%AD%A6%E3%81%B63%E6%A7%8B%E9%80%A0?node-id=4-252&t=L6iMDfudW3zZfLjr-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

36:21
カテゴリ
InstagramのUIデザインを「3構造」で分析してみた
無料
メンバー限定
SECTION
事例で理解!UIデザイン3構造:Notion Mailのデザインを分析しよう

実際に画面に触れてポイント確認して進めよう

サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です

Notion Mail
https://mail.notion.so/

動画の目次

スライドのURL

手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。

FigmaのURL
https://www.figma.com/deck/9sXEWzI21qES3CocWVfBBc/%E4%BA%8B%E4%BE%8B%E3%81%A7%E5%AD%A6%E3%81%B63%E6%A7%8B%E9%80%A0?node-id=4-283&t=L6iMDfudW3zZfLjr-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

12:53
カテゴリ
事例で理解!UIデザイン3構造:Notion Mailのデザインを分析しよう
無料
メンバー限定
SECTION
3. UIトレースで3構造を実践しよう!

手を動かさないと身につけない!実践しよう3構造

xxx
カテゴリ
3. UIトレースで3構造を実践しよう!
無料
メンバー限定
SECTION
実践理解!3構造でYouTubeをUIトレース

3構造を使ってUIトレースしよう

動画で解説しているポイントを意識してYouTubeのデスクトップUIのUIトレースをしましょう

  • 各構造のUIの特徴を意識してUI作成する
  • Figmaの使い方を意識してUI作成する
  • ダミーではなく可能な限りリアルに近い画像やテキストを使う

スライドのURL

FigmaのURL
https://www.figma.com/deck/diZ2mkkbK4mFbGuGSFuKcm/%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B9%E3%81%A7%E5%AE%9F%E8%B7%B5%E3%81%99%E3%82%8B%EF%BC%93%E6%A7%8B%E9%80%A0?node-id=1-122&t=MH1D9sDDn6EVm9W8-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

17:25
カテゴリ
実践理解!3構造でYouTubeをUIトレース
無料
メンバー限定
SECTION
実践理解② 解説したUIをトレースしてみよう

3構造解説したUI画面もトレースしてみよう

Figmaの使い方に慣れたい、UI作成にも慣れたい、時間を取れるという方は3構造の解説をした他の画面もUIトレースにチャレンジしてみましょう。

デスクトップのUIが多いですが、スマホアプリがあるサービスはそちらに変更してトレースしてみてもOKです。

デザイン初心者は頭で理解するより手を動かして理解する量が土台を作り、デザインを考える余裕を持てるようになってくるのでどんどん手を動かす、習ったことを実践することを強くお勧めしています。

解説したサービス

手を動かしてデザインを理解する癖をつけましょう!

  • Instagram
  • Notion Mail
  • Health Care
  • Stores.jp
text
カテゴリ
実践理解② 解説したUIをトレースしてみよう
無料
メンバー限定
SECTION
まとめと次のステップ

次のステップに移ろう

  • 3 構造で UI に必要な要素がわかったら次はUIの見た目の詳細を作る基礎に移りましょう
  • 次は「UI ビジュアルの基礎」です。余白の考え方サイズの考え方、色の考え方を UI デザインをベースに学んでいきます。→見た目と使いやすさの両立のデザインのために考えるべき”要素”を習得することができます
  • UI デザイン入門コースで、見た目と使いやすさの表現の基本を学び、1画面をデザインするために必要なことを習得していきましょう!

次のレッスン

UIビジュアルの基礎
https://www.bo-no.design/series/uivisual

3構造レッスンが含まれるコース

UIデザインの基礎を身につけるコースです
https://www.bo-no.design/rdm/uivisual-course

text
カテゴリ
まとめと次のステップ
無料
メンバー限定
ABOUT
コース詳細

はじめてでも、センスに頼らず「使いやすいUI」がつくれる

このレッスンは、UIデザインをゼロから学ぶ人のために「3構造」でUIデザインを解説するものです。

「なんとなく配置してしまう」「どこに何を置けばいいかわからない」──
初心者がなんとなく見てしまうUIデザイン、“構造”という視点からスッキリ解説していきます。


最初の一歩となるこのレッスンでは、UIをつくる上で最も大切な3つの要素、**「コンテンツ・ナビゲーション・アクション」**を学びます。

この3つを意識するだけで、画面のレイアウトも、見せ方も、操作のしやすさも体系的にデザインを考えやすくなります。


「UIってこうやって考えるのか!」を早い段階から知ることでUIデザインの成長速度を高めましょう。