このレッスンで学ぶこと

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

ゴール

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

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

• 3構造の理解：UIには3つの要素が必須であること1. コンテンツはUIの中心2. ナビゲーションは道案内3. アクションは機能が始める場所
• 1. コンテンツはUIの中心
• 2. ナビゲーションは道案内
• 3. アクションは機能が始める場所
• UIレイアウト理解を3構造ではじめる既存のサービスを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構造」を学んでいきましょう。

‍

‍

‍

‍