「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構造」を学んでいきましょう。

‍

‍

‍

‍

このレッスンで学ぶこと

まずは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構造」を学んでいきましょう。

‍

‍

‍

‍

‍