コースの目的
このレッスンは、UIデザインをゼロから学ぶ人のために「3構造」でUIデザインを解説するものです。
「なんとなく配置してしまう」「どこに何を置けばいいかわからない」──
初心者がなんとなく見てしまうUIデザイン、“構造”という視点からスッキリ解説していきます。
最初の一歩となるこのレッスンでは、UIをつくる上で最も大切な3つの要素、**「コンテンツ・ナビゲーション・アクション」**を学びます。
この3つを意識するだけで、画面のレイアウトも、見せ方も、操作のしやすさも体系的にデザインを考えやすくなります。
「UIってこうやって考えるのか！」を早い段階から知ることでUIデザインの成長速度を高めましょう。
このレッスンが含まれるコース
https://www.bo-no.design/rdm/uivisual-course
3構造レッスンの進め方と学習内容をチェック
まずは1画面のUIをデザインをはじめるために「3つの構造」でUIが成り立っていることを理解してUIトレースからデザインをはじめましょう。
1. UIは見た目と機能の掛け算だから
2. 3つの操作のために必要な要素を知ることでUIが考えやすい
UIでは見た目も大事、それと同じかそれ以上に”つかえるか”が大切になります
たとえばパッと見たときに「何ができるか」が無意識に伝わるデザインかどうかが大切です。そのためにUIに必ずと言っていいほど存在している基本の要素があります
それが3つの要素、UIデザインの3構造です。
コンテンツ
ナビゲーション
アクション
それではまず「1画面」のUIをデザインできることをゴールイメージにして「3構造」を学んでいきましょう。
UIデザインに必須な3つの構造を理解しよう
この動画では「コンテンツ」「ナビゲーション」「アクション」のUIを構成する上で必須の３要素について解説します。
この3つを知っているとUIを分析する目が身につき、自分でデザインするときも”何を今考えるべきか？”を要素ごとに整理して考えることができます。
使いやすさと見た目の掛け算が大切なUIの分野を攻略するためにこの3つをまずは知り、実践できるようになりましょう
サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です
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で！
手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。
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
サービスのURLから登録して自分でもUIを触りましょう。
UIUXデザイナーとしてUIに詳しくなるために、さまざまなサービスに率先して触る習慣はとても大切です
Notion Mail
https://mail.notion.so/
手元で見たい、編集したい時は、コピーして自分のファイルにペーストしてください。
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
手を動かさないと身につけない！実践しよう3構造
動画で解説しているポイントを意識してYouTubeのデスクトップUIのUIトレースをしましょう
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
Figmaの使い方に慣れたい、UI作成にも慣れたい、時間を取れるという方は3構造の解説をした他の画面もUIトレースにチャレンジしてみましょう。
デスクトップのUIが多いですが、スマホアプリがあるサービスはそちらに変更してトレースしてみてもOKです。
デザイン初心者は頭で理解するより手を動かして理解する量が土台を作り、デザインを考える余裕を持てるようになってくるのでどんどん手を動かす、習ったことを実践することを強くお勧めしています。
手を動かしてデザインを理解する癖をつけましょう！
UIビジュアルの基礎
https://www.bo-no.design/series/uivisual
UIデザインの基礎を身につけるコースです
https://www.bo-no.design/rdm/uivisual-course
