UIビジュアルシリーズの進め方

このシリーズでは、デザイナーは知ってるビジュアルを作る”キホン”を実践して身に着けます。各TRYごとに1つの”キホン”をマスターします！

1.お題を確認
2.解説を観る
3.お題で解説されキホンを使う

という順番でTRYを1日ずつ進めていける内容になってます。

‍

お題をやるために１日ずつ進めよう

解説だけ見てもやらないと忘れるし自分のものになりません。なので、お題を各TRYごとに用意しています。お題はダメなUIをリデザインしていくことで「動画共有サービス（PCブラウザ）」の主要UIをデザインできる内容です。ゼロからじゃないから優しめ＆”キホン”を使うことに集中できる構成にしております

コンセプトで見た目が変わる。UIをリデザインしよう！

‍

動画で話しているお題の内容です！以下の手順で取り組んでいきましょう〜！

1. まずは「意識して欲しいこと」を元にデザインしましょう。

2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。

3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう

4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう

‍

リデザインするUI

「キホン」を使ってリデザイン。実践して見た目のキホンを習得しよう。

‍

▼ データはこちら！（Figma）▽

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=525%3A8437

‍

‍

お題スライドのURL

手元でも見れます

https://www.figma.com/proto/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?page-id=58%3A1393&node-id=393%3A4541&viewport=241%2C48%2C0.24&scaling=min-zoom&starting-point-node-id=393%3A4541

‍

‍

どちらも「カフェを探せるアプリ」

両方のUIとも、同じ目的のアプリです。が、使う人の想定が違います。もっというと大事にしたいユーザーさんと、その人が1番サービスを使いたい時が違います。
このUIの違いをテーマに”コンセプトで見た目が変わる、デザインする方法”を解説していきます。その解説を受けて、お題にチャレンジしてみてください！

‍

‍

‍

動画で使っているFigmaのデータはこちら

メンバー限定だぞ！

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=561%3A6108

‍

誰がなぜ使うのか？から見た目のアイデアを出します

‍

UIは見た目を作る前に、「どういう形が適切か」が実は決まっています。
これを整理する（要件定義とかって呼ばれたりします）ことで良いUIも作れます。し、優先度もはっきりするので良い見た目も作れます。

‍

‍

誰がなぜどんな感情で利用するのか？

まず「誰」をしっかりイメージすることが大事です。そこからしかUIの見た目のアイデアを出すことが難しいです。
なので、作る前はしっかりとこの表のように「誰」をまとめてみましょう。

カフェを探せる。は一緒ですが、こう見ると全く違う使い道になりそうですよね・・・？これが「誰」で作るものが変わる、優先するものが変わることにつながります！

‍

‍

‍

‍

定義した使い手に沿って、UIのアイデアを出します！

この続きは動画で...!

‍

方向性を決めると見た目が変わります！

今回は「3つのテーマ」に沿って、見た目のコンセプトを作る方法を解説していきます。
やり方を真似して、お題デザインに生かしてみましょう！

‍

‍

‍

動画で使っているFigmaのデータはこちら

メンバー限定だぞ！

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=561%3A6141

‍

カフェを探すアプリだけどテイストが違う理由

‍

使って欲しい方向性が違うので、それぞれの「場」として適切なコンセプトが違います。
今回はこれを反映した結果、使っている色や、角丸などのテイストが違う結果になりました。

‍

‍

場のコンセプトをどう定義するの？

いろんな方法があります。アイデアを出すのに決まった方法なんてないです。
が、今回は「ユーザーを起点」に”ふさわしい場所/人格"を模索した一例を解説してみました。

付箋の数はかなり少ないです。動画ように絞ってます。
実際に考えるときは様々なアイデアを多く出して、そこから収束していくようにしましょう。

詳しくは動画で！

まずは流れから真似してみてください！

今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。

‍

□ プロセスを辿るのが今回は大事！です

1. ユーザーのユースケースを整理ができているか？
2. ユースケースを元に : 機能や情報のアイデアが出せているか？
3. ユースケースを元に : 見た目のアイデアが出せているか？

‍

‍

フルバージョンはこちらから

さらに詳しく知りたい方はこちらから全フローの考え方が見れます。

https://www.bo-no.design/contents/uibiziyu-1-6

‍

Figmaのファイルはこちら

‍
https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1630%3A14832

‍

まずは流れから真似してみてください！

今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。

‍

□ プロセスを辿るのが今回は大事！です

1. ユーザーのユースケースを整理ができているか？
2. ユースケースを元に : 機能や情報のアイデアが出せているか？
3. ユースケースを元に : 見た目のアイデアが出せているか？

‍

□ ショートバージョンはこちらから

まずは簡単に見たい方はこちらから

https://www.bo-no.design/contents/uibiziyu-1-5

‍

‍

Figmaのファイルはこちら

‍
https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1630%3A14832

‍

‍

1 : ユーザーのユースケースを整理

□ POINT

• いつどこでどんなふうに使ってもらえるとユーザーが喜ぶかを考える
• 今回は、「プロフィールを見せたい」人をユーザーと置く

□ 手順

1 : お題の情報をまずは軽く考えてみる
2 : いつ使われそうか - ユースケースをアイデア出し
3 : ユースケースから求められる情報や使用感をアイデア出し

‍

‍

2 : コンテンツを中心に”情報情報”の見せ方を考える

□ POINT

• 見た目ではない。表示する”構造 - 骨格”で考える。切り分ける。
• ユーザーが『見せたい情報』を『どう表示する』かの2つで考える

□ 手順

1 : 具体的な”情報”を考えて見る

2 : 構造-プロトタイプを作成、パターン出し

3 : パターンから検討 / ブラッシュアップ / 決定する

‍

‍

3 : ユースケースから相応しい見た目にする

□ POINT

• コンセプトを考える
• 自分の頭ではなく、まずは参考を集める

□ 手順

1. ユーザーの目的から”コンセプト”を考える
2. コンセプトに合致する参考イメージを集める
3. UIのグラフィックテイストにする

‍

見た目の構造をシステム化してUI作成しよう

‍

動画で話しているお題の内容です！以下の手順で取り組んでいきましょう〜！

1. まずは「キホン」の解説をチェック

2.「キホン」を使ってリデザインしましょう

3.お題の解答動画もアップします。自分が作成したデザインと比較してみましょう。

4.コミュニティでの質問やフィードバックも募集してます！

‍

リデザインするUI

「キホン」を使ってリデザイン。実践して見た目のキホンを習得しよう。

Figmaのデザインデータはこちらに〜！
https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=353%3A4421

‍

‍

‍

お題スライドのURL

手元でも見れます。

https://www.figma.com/proto/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?page-id=53%3A389&node-id=351%3A4274&viewport=241%2C48%2C0.09&scaling=scale-down&starting-point-node-id=351%3A4274

‍

‍

‍

‍

こんなこと喋ってます

00:15 見た目のシステム化とは？
03:13 システム使ったUI作成の実例
06:40 これだけ設定すると良い要素全容
10:49 論理的にUI作るとは？

‍

‍

□ こんなこと喋ってます

01:34 設定すると楽になる要素を紹介
05:03 テキストの要素
16:21 配色の要素
19:49 ボタンの要素
22:47 サイズの要素

‍

□ 参考に自分でもシステムを作ってみよう

▼ 動画で載せているFigmaのURLはこちらです

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=143%3A4037

コピーしてOKなので、自分でゼロから設定してみましょう。
Figmaでの設定方法は次の動画で解説しています。

1.設定する
2.Figmaで使えるようにする
3.お題を解くときにシステムで、UI構造を考えながら使ってみる

これをやってみてください！

‍

‍

こんなこと喋ってます

00:53 コンポーネント機能の使い方
07:53 UIパーツの登録方法
12:41 登録したシステムの使い方

‍

□ 参考に自分でもシステムを作ってみよう

▼ 動画で載せているFigmaのURLはこちらです

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=143%3A4037

コピーしてOKなので、自分でゼロから設定してみましょう。
Figmaでの設定方法は次の動画で解説しています。

1.設定する
2.Figmaで使えるようにする
3.お題を解くときにシステムで、UI構造を考えながら使ってみる

これをやってみてください！

‍

‍

ポイント

1 : システムをベースに考える

• 強さや役割でサイズや色をコントロールできるベースを持つ

2 : 見た目の構造理解

• 役割でサイズや色を使い分けよう

1. レイアウト
2. 文字サイズ/コントラスト
3. 色

3 : 登録した値を使おう

• フォントや色など登録したものを使おう

‍

‍

フル解説はこちら

www.bo-no.design/contents/uibiziyu-try2-oti-jie-da

‍

‍

‍

Figmaのデータ

こちらから閲覧できます！

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1680%3A18845

‍

ポイント

1 : システムをベースに考える

• 強さや役割でサイズや色をコントロールできるベースを持つ

2 : 見た目の構造理解

• 役割でサイズや色を使い分けよう

1. レイアウト
2. 文字サイズ/コントラスト
3. 色

3 : 登録した値を使おう

• フォントや色など登録したものを使おう

‍

Figmaのデータ

こちらから閲覧できます！

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1680%3A18845

‍

‍

レイアウトの基本を実践するお題

UIにおける「レイアウト」の理解を実践するお題内容です！
まずはただUI作成にトライしてみてください。その後レイアウトの解説動画を見て、UIデザインの過程での変化を感じながらレイアウトの理解を深めてみてください。

以下のやり方を推奨しております！

‍

1. まずは「意識して欲しいこと」を元にデザインしましょう。

2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。

3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう

4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう

‍

‍

‍

Figmaのリデザインファイルはこちら

リデザインしよう〜！

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=698%3A9951

‍

‍

‍

‍

‍

□ 続き：実践編はこちら

『倍数スタイリング後編 - サイズを試行錯誤→決めて行く流れ』
https://www.bo-no.design/contents/visualsecret02

□ もくじ

00:28 結論 - フォント、余白、オブジェクトそれぞれを倍数で揃えよう
00:41 倍数で作ったデザインイメージ
00:54 倍数で管理するメリット
02:29 倍数管理の方法
03:15 フォントの決め方
05:40 余白の決め方
07:51 オブジェクトのサイズ
09:09 8の倍数の理由
‍

目的と意味構造で変わるレイアウト

BONOで毎週やっている勉強会の動画です。バナーデザインですがUIでもそのまま使えるので載せております！
ビジュアルをどうこうする部分ではなく、既存のバナーからどういう風に情報の優先度と仲間分けを整理しているか見てみてください💡

‍
既にあるバナーの良くない部分は？それは構造が整理できてない＝表示要素の優先度とグループが整理できてないことです。
何となくやりすぎて”メリハリ”を効かせられない＝目立たせる要素を決められなかったり。配置も適当になってしまっています。作る前に”どの情報が仲間か””何を伝えるのが1番重要か”を整理していくのがバナーでもWebデザインでもUIデザインでも重要になります。

‍

❐ 動画で使っているデザインファイルはこちら
-------------------------------------------
https://figma.fun/4YzOHe

‍

❐ 目次
-------------------------------------------
00:00 改善点を出そう！
04:04 バナーデザインをする流れ
13:13 情報の構造を考える
18:46 パターン作成は盗む
24:42 パターンの決定方法
28:06 モチーフの作り方
30:57 サイズの決め方
33:42 カーニングした方が良い？
35:13 グラフィックTIPS

‍

余白は役割を考えて、サイズを決めよう！というのを解説した動画です！

見た目のシステムで決めた余白から、”どのサイズを選ぶか？”を考えるときの参考にしてみてください。

‍

‍

グリッドは”バランスが良い”を紐解く1歩に

等倍でデザインをする、は別の動画で紹介しました。その関連として”グリッド”を使ってレイアウトをデザインするテクニックを紹介します。

後半の事例パートを見てもらうと分かると思いますが、グリッドを使うと整った見た目を作るヒントに気づき易くなります。し、自分でもそれを実現しやすくなります。

特にレスポンシブとの相性がとても良いので実践的に取り入れていくと良いですよ〜。詳しいやり方は動画を見てみてください！

1. ダメな例をグリッドを使って直す例
2. グリッドを使うメリット
3. 使い方/デザイン方法
4. グリッドを使ったデザインの事例紹介

‍

‍

Figmaのファイルはこちら

こちらから動画で使っているファイルにアクセスできます〜。メンバー限定ですよ〜。

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UIビジュアルの基本?node-id=737%3A11119

‍

‍

いつでもグリッドが正しいわけではない

動画では詳しく喋ってませんが、グリッドがいつも正しいわけではないです。グリッドで見た目を作ると、かなり機械的な印象になりやすいです。言葉を選ばないと”つまらない”デザインになります。

なのでダッシュボードなどをデザインするときはそれでも良いですが、LPなどでグリッドにこだわりすぎると、目的に叶わない印象を作ってしまうこともあります。

あくまで目安として使ったり、たまにあえてずらしてアクセントにしたり。遊んでみてください。

‍

ボーダーの基本的な使い方・考え方

あえて目立たせるビジュアルデザインもありますが、基本的にはメインコンテンツを引き立てるために使います。

1.グループの区切りを意識させる
2.タイトルetcを強調させる

など

まずはポイントを理解しよう

TRY、お疲れ様でした！
今回も全て完璧にできる、というよりかは「そういう視点でレイアウトを組むのか〜！」を体感するのが大事です。

今後自分でデザインするときに気をつけて行ってみてください！

‍

Figmaのファイルはこちら

https://www.figma.com/file/1g6kAtmwMGik21j9UvONLn/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%80%9CTRY3%E8%A7%A3%E7%AD%94-%3A-%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88?node-id=2%3A271

‍

‍

‍

配色を実践するお題です！

‍

▼ お題やスライドのURLは▽

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=932%3A10319

‍

‍

UIにおける「配色」の理解を実践するお題内容です！
まずは自分で作ってみる。配色に関する解説動画を見て、実践してみる。という順番でやるのをお勧めしてます！

1. まずは「意識して欲しいこと」を元にデザインしましょう。

2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。

3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう

4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう

‍

‍

‍

これだけ決めればバッチリ-配色チートシート

UIを作る上での配色についてです。
Webデザインにもソフトウェアのデザインにも両方使えると思います。

□ スライドのリンクはこちら
https://www.figma.com/file/ZZSuU9uBtPpXNltFYGCsHs/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E6%A5%B5%E6%84%8F?node-id=101%3A515

動画のゴール

▼ UIで使う”メインカラー”の決め方を知ろう

• すべてはコンセプトが出発点
• アイデアの出し方は「参考イメージ」「明度彩度」「コントラスト」から
• 色決めは

‍

やり方

1.コンセプト - どんなサービスで人の感情はどう動く？

2.参考イメージを集める

3.試してみる

4.決める

‍

‍

1.コンセプト - どんなサービスで人の感情はどう動く？

1.ロゴやモチーフを作るかの如く方向性が必要

2.サービスのコンセプトを表現する

• 人の感情が動く
• ロゴのモチーフ
• 機械的に選ぶ
• など

□ コンセプトに関しては別の動画を参考にしてください

• グラフィック入門PROCESS
• UIビジュアル入門 - コンセプトで変わるUI

‍

‍

2.参考イメージを集める

コンセプトから想起される実際のイメージを集めてみる

• ①まずは定番イメージを探してみる
• ②類似の定番イメージを探してみる
• ③競合も見てみる

‍

‍

3.パターンを出す

• 参考で探したのから発想してみる。いろんなものを出す
• 画像やイメージから引っ張って、調整する
• コントラストに注意する : AAを目指そう

‍

○ コントラストはFigmaのプラグインや便利ツールを使って調べると良いです！

動画で使っていたFigmaプラグインはこちらです
https://www.figma.com/community/plugin/748533339900865323/Contrast

‍

4.決める

• 最後は決め
• 1:コンセプトとの合致
• 2:競合との差別化
• 3:ユーザーに正しく伝えたい印象を与えられるか

‍

‍

何に色を振るべきか？

配色の目的は”必要なものをしっかりと視認してもらう”ことがまず最低限あります。
雰囲気作りも必要ですが、UIにおいて機能性はグラフィックデザインより重要性が高いため、まずはそこを担保する必要があります。

□ スライドのURL
https://www.figma.com/proto/pV89k1DFkWyDeGJ56d6fs8/DAY2-りょうた[スライド付]?page-id=0%3A1&node-id=33%3A3055&viewport=241%2C48%2C0.15&scaling=min-zoom&starting-point-node-id=33%3A3055&show-proto-sidebar=1

セカンダリーカラーとは

・サービスの表現上、2つ以上の色もサービスカラーとして用いたい場合
・サービスの機能上、2つ以上の色もサービスカラーとして用いたい場合

基本的には役割を決めることが良いと思います。
かつ、「優先度を設定」することで使い分けをすることでボタンにしても使い分けやすくなるのかなと思います’（メルカリの例を参照）

‍

動画で使っているデザインのデータはこちら
https://www.figma.com/file/QmdtMrKp2O1XJY8hVRxukS/10%2F22FB%3A%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B%E3%81%AE%E7%94%B3%E8%AB%8B%E3%83%95%E3%83%AD%E3%83%BC?node-id=23%3A2842

‍

‍

配色の考え方を実践で知ろう

動画を見るとわかる通り、「何が強調されるべきか」の考え方で配色も変わります。

ただ基本的には、強調するものを絞る、テーマカラーはページ内の最上位の強調アクションに基本的には使用する、が基本です。

動画で話しているような「優先度１」「２」の概念も考えながら配色をデザインしていきましょう。

‍

Figmaのファイルはこちら

‍

https://www.figma.com/file/fgbgkJ0EGS89ogTlua7xr0/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%80%9CTRY4%E8%A7%A3%E7%AD%94-%3A-%E9%85%8D%E8%89%B2?node-id=2%3A221

‍

‍

レスポンシブを実践するお題

‍

UIにおける「レスポンシブデザイン」の理解を実践するお題内容です！
まずはただ作ってみても良いですが、ビジュアルシステムの解説を見た後にシステムを作りながらUIに取り組んでみましょう。

‍

□ お題のリデザインデータ

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1120%3A10180

‍

‍

1. まずは「意識して欲しいこと」を元にデザインしましょう。

2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。

3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう

4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう

‍

‍

‍

動画のゴール

▼ UI制作でマストなディスプレイ概念を知ろう

1.高解像ディスプレイ

2.レスポンシブとは

3.デザインデータ作成

‍

▼ メリット

○ ディスプレイ考慮がないと不完全なデザインを組んでしまう。
・デスクトップ⇄スマホ：異なる画面幅に対応する
・高解像ディスプレイへの対応・画像の扱い

‍

○知識があるとUIデザインからヒントを得やすい

・実装しやすいデザインの作り方
・どのデバイスでも綺麗に見えるデザインの作り方

‍

‍

問い

▼ 質問：どういうデザインデータを作りますか？

<条件1> “MacBook Air”のディスプレイがメインディスプレイ

2018 年以降に発売されたモデルの MacBook Air。標準解像度は 2560 x 1600、1 インチ当たりのピクセル数 (ppi) は 227 です。数百万色に対応しています。

<条件2>PCで見るし、スマホで見るしって画面を作って

と言われたら。

‍

これを理解するために

1.高解像ディスプレイ

2.レスポンシブ

3.デザインデータ作成

について知りましょう。

‍

‍

レティナ/高解像度ディスプレイについて

‍

なんですかそれは

• ディスプレを綺麗に映し出す技術です
• 1ドットの中に2倍や3倍のピクセルを凝縮している。結果色が鮮明に映る仕組み
• スマホやPCのディスプレイに標準対応

なにが重要なのよ

• 画像がボケる
• 実寸とは別
• コードで書かれたテキストや線などは見た目の影響はない

仕組み

• こちらのリンクで詳しく書いております〜！（動画の内容と同じです）
• https://takumikai.notion.site/80c84bdbab0d4c92958b8aa5d2b9ff88

‍

‍

画面幅に対応するUIの基本

レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！
実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。

・この考え方でいろんなサイトの横幅を変えてみる
・アプリをデザインするときも同じ考え方で大丈夫です

‍

目次

00:00 レスポンシブデザインとは
01:18 考え方:"ブロック"で考えよう
03:04 横幅のサイズを決める方法
08:22 超大事!サイズは%でデザインする
12:35 ブレイクポイントで切り分けよう！
13:18 質問あればコミュニティで！

‍

動画で使ったスライドのデータはこちら
https://www.figma.com/file/rT6sKci6xW3qkNjLUbVwZ9/6.%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%8C%E5%A4%89%E3%82%8F%E3%81%A3%E3%81%A6%E3%82%82%E9%A0%86%E5%BF%9C%E3%81%A7%E3%81%8D%E3%82%8BUI%E3%82%92%E8%80%83%E3%81%88%E3%82%88%E3%81%86?node-id=13%3A3936

動画のゴール

□ レスポンシブに作る際のデータのポイントを学びましょう

以下のことを実際のやり方を見せていきます。参考にしてまずははじめてみましょう。

‍

▼ この動画の項目

1 : デザインデータの作り方

2 : 可変/不可変の決め方

3 : 画像の扱い

4 : 実装者とコミュニケーションをとろう

‍

□ 動画で使っているFigmaのデータはこちら

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1438%3A12250

‍

‍

1.デザインデータの作り方

画面幅ごとにデザインデータを作ろう

• 最小はPCとSPだけでOK
• キャンバスごとにデータを作る
• 基本はプリセットのサイズを使うでOK
• PC : 1440pxぐらい / SP : 375px の横幅

まずはメインになる幅から作り込む

• いきなり複数を同時に進行しない。
• １番見られる/使われる画面から作成する
• その後に別の画面幅を考えて、調整していく

‍

‍

2.可変/不可変を考えよう

1.固定 / 可変 のUIパーツを考えよう

• 自分で考えずに、まずは世界的に使われているサービスがどう実装しているか調べて、参考にしよう
• PCアプリを出しているサービスは参考になりやすいです。例：Spotify / Apple系
• Google系もブラウザで観て参考になりそうです。

2.Figmaが好きなら可変に組もう

• 初心者はここまでやらなくてオッケーです。
• 会社に入ってデザインシステムやりたい人はやると良いかも
• 僕もここまでやらないです。（やらなくても伝わるため）

‍

‍

3.画像の扱い

2倍〜サイズを用意

• 2倍のものを用意して使いましょう。
• お手元のPCでもボケないと思います。

アイコン類はsvg形式のものを

• 可変で行えます
• 色も変えられます。
• svgとは？：コードで出力する形式の画像ファイルなのです。

‍

‍

4.実装者とコミュニケーションをとろう

データは完璧じゃない。コメント/コミュニケーションを取って共有

• エンジニアさんには口頭でカバー
• メモでも良いです
• データだけ見て全てがわかる人は、それまでにコミュニケーションを築き上げた人です

‍

※ 動画で見せているドキュメントのイメージはこちら

レスポンシブはパターンとUI構造

レスポンシブは基本的に知識でカバーできる内容だったりします。今回あまりわからなくても心配ありません。これからいろんなサイトやサービスのレスポンシブを見るようにしていけばどうなっているのか？のパターンを増やしていけます。

レスポンシブの考え方はこの動画でも解説している通り”ブロック”で考えていくと良いと思います〜！

‍

Figmaのファイルはこちら

https://www.figma.com/file/RgYvyek9ccI9jEerUOXqRK/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%80%9CTRY5%E8%A7%A3%E7%AD%94-%3A-%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96?node-id=1%3A820

‍

‍

UI構造の理解を深めるお題

‍

UIにおける「基本構造」の理解を実践するお題内容です！
まずはそのままUI作成にトライする。その後解説動画を見て、再度同じお題にトライしてUI構造の理解でデザインの作り方が変化するのを体験してみてください。

‍

1. まずは「意識して欲しいこと」を元にデザインしましょう。

2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。

3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう

4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう

‍

リデザインしてほしいデザインデータ

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1306%3A22248

‍

意識してほしいポイント！

‍

詳しくは動画の解説を見て知識をつけましょう。実践してみましょう。

‍

‍

‍

1.か、階層とはっ！！？

🚩 クイズGoogleMeet : ユーザーのカードとコメント欄、どっちが高い階層？

• みなさんが普段何気なく使っているUIには階層表現が使われています
• それがあるため、ボタンを見失わなかったり、情報認知をやりやすかったり
• 時には目立たせたいものを目立たせて表現したりができます

その階層表現について知りましょう。

‍

2.なんのために使えるのか？

• 情報の構造をわかりやすく相手に伝えたり
• ボタンを押しやすくしたり
• 強弱をコントロールしたり

平面で表現する僕らにとっては欠かせない技術なんですね。

‍

3.例を見てみよう

□ 単純表現

○ スキューモーフィズム

• iOSでいうと「６」までに採用されたビジュアル原則の1つ
• 実世界の何かに似せるための表現
• デジタルを触る操作するという、馴染みのない操作をやりやすくするために採用されていた
• デメリットは作るのが大変、描画が重いなどの点
• 実世界の表現を採用して、階層や凹凸を表現。

ViewFromPottingShit

○ 今 - フラット(寄り）のデザイン

• より最小の表現で「触れる」「固定されている」などを表現するのが今のUIの傾向
• 無駄な装飾を省き、最小限に”抽象度”を上げて表現する

‍

‍

□ 構造

https://material.io/design/environment/elevation.html

• UIの各パーツは階層の関係になっている
• 押せるものは出っぱっている（現実的に）し、固定されたものはスクロールするものより上にある

‍

‍

‍

4.表現 - 暗いものは沈み、明るいものは浮いて見える

‍

‍

1. 色の表現
2. 影の表現
3. 強弱の表現

などを使って、目の動きや、触れる感などを工夫する。

‍

□ UIは「Navi」「Action」「Body」で構成される

• UIとシステムを構築する大きな3つの概念
• 画面の基本的な構成要素として存在します
• 逆にいうとこの3つをみなさんは考えて1つ1つの画面を作らないといけません💡

○ Navi : ページ内外の移動や表示をコントロールするもの

○ Action : 『名詞』に対してアクションするもの

○ Body : ページのメイン情報 - ユーザーが主にページに来る目的

‍

‍

□ 結論

• Navi : 基本的に上か下にある。上のパターンが多い。
• Action : Naviの中に入っているか、Actionの対象近くに配置するが基本
• Body : その画面を構成する重要な要素。基本的にはコンテンツで構成されるし、ユーザーはコンテンツを見に来ている。

※下にあるYoutubeプロフィールで示しながら見ていく

‍

‍

□ 例を見ていく

馴染みのあるUIで「Navi」「Action」「Body」を見ていこう！

‍

画面全体 : Youtube-プロフィール

https://www.youtube.com/

‍

パーツ単位でも : Material Design Card Sample

https://material.io/components/cards#behavior

‍

シャドウの質問に答えつつ、基本をお答えしました。

→Figmaのリンク

→マテリアルデザイン「階層」

Q.個人的にボタンは、シャドウが入っていた方が、ボタンっぽくてわかりやすいのかなと思っていたのですが
フラットのものもあると思うのでどういう時に使い分けてるとかありますか？！

Q.このボタンは、（日）のところを指しているのですが他のところも、週、月、年のところも影がついてるのはおかしいですか？
押せますよというイメージにしたいけど、日より目立っているような気もします。

Q.ヘッダーの影つけすぎでしょうか？影のバランスがいまいち分かっていないのかなと思います。
何かアドバイスあればお願いします

‍

‍

遷移とモードの違いを知りましょう

ポップインの遷移で、今表示している画面に別の画面を重ねて表示する動きの時は「× 閉じる(キャンセル)」が妥当です。
階層が下のページなどに移動するときは「＜,←戻る」などで１個上の階層に戻るのが通常です。

基本的に”バックナビゲーション”は１つ前の画面に戻る動作であることを覚えておきましょう💡

‍

画面を覆ったり、スマホでシュッと出てくるアレを解説

「モード」と「モーダル」についてかなり基礎的な部分の解説をしています。
この分野、さまざまな専門家が愛を込めた意見を書き溜めていたりするので僕もあまり自信を持って言えません。が、大枠UI作っていく上では理解できる内容に仕上げてみました。

これを起点に、世の中やUIに存在する「モード」と「モーダル」の概念の発見をしながら知見深めて行ってみてください！

‍

▽ 解説に使ったFigjamはこちら

https://www.figma.com/file/i0xWhaCw0MD85vCrUiiShv/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E6%A6%82%E5%BF%B5?node-id=0%3A1

‍

‍

参考

○ BONO : ←と×の違いを具体例を見ながら考えよう

https://www.bo-no.design/contents/uivisual-toxnowei-iwoju-ti-li-wojian-nagarakao-eyou

‍

○ モードレス・ユーザーインターフェース
ーむずいんで、何となくの理解で大丈夫です！
https://www.sociomedia.co.jp/3950

‍

○ モードレスとは
ーモードの逆。
https://www.sociomedia.co.jp/9094

‍

UIビジュアル基礎、やってくださった皆さん、ありがとうございましたー！＆お疲れ様でしたー！

とりあえず美味しいもの食べてくださいね。

‍

階層と構造がキモ！

今回の修正箇所は、UIの「階層」と「構造」にまつわる部分をあえて指定しています。

まずはなんとなくそういうもんか、で大丈夫なので、こういう概念があることを体験しておきましょう〜！

‍

完全理解はさまざまなサービス見ながらパターンを蓄積しながら、自分でも手を動かす量を増やしていくと良いです💡

‍

Figmaのデータ

データとスライドはこちらから閲覧できます！

https://www.figma.com/file/0GrqBfFAXsMNwq7EjDvevd/UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%80%9CTRY6%E8%A7%A3%E7%AD%94-%3A-UI%E6%A7%8B%E9%80%A0?node-id=2%3A1288

‍

‍

#OOUI