戻る
メンバーシップになる
トップ
/
UIビジュアル基礎
/
5-3.異なるディスプレイサイズのUI作成
コンテンツ一覧
コミュニティ

5-3.異なるディスプレイサイズのUI作成

May 29, 2022
UIビジュアル
保存
保存中
すべてを閲覧するにはBONOメンバーシップに登録しよう
BONO - プロと学ぶUIとUXのコミュニティ
詳細

動画のゴール

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

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

▼ この動画の項目

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 の横幅

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

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

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

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

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

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

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

3.画像の扱い

2倍〜サイズを用意

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

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

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

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

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

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

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

動画のゴール

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

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

▼ この動画の項目

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 の横幅

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

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

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

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

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

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

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

3.画像の扱い

2倍〜サイズを用意

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

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

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

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

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

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

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

動画のゴール

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

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

▼ この動画の項目

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

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

3 : 画像の扱い

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

□ 例題の質問に答えていきましょう

質問:どういうデザインデータを作りますか?

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

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

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

と言われたら。

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

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

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

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

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

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

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

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

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

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

3.画像の扱い

2倍〜サイズを用意

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

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

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

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

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

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

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

UIビジュアル基礎

20
シリーズの説明
s
シリーズの説明

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター!
08:02
【進め方】デザイナーはやってる見た目の”キホン”をマスター!

【進め方】デザイナーはやってる見た目の”キホン”をマスター!

TRY1 : コンセプトを考えてリデザインしよう!
NoContent
TRY1 : コンセプトを考えてリデザインしよう!

TRY1 : コンセプトを考えてリデザインしよう!

TRY1:プロフィールUIをリデザイン!
NoVideo
TRY1:プロフィールUIをリデザイン!

TRY1:プロフィールUIをリデザイン!

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法
15:00
1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
21:53
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答!見た目だけ考えるのはNGなんです
07:16
【7分】TRY1解答!見た目だけ考えるのはNGなんです

【7分】TRY1解答!見た目だけ考えるのはNGなんです

TRY1解答!ユースケースから見た目のアイデアを作る流れ
20:20
TRY1解答!ユースケースから見た目のアイデアを作る流れ

TRY1解答!ユースケースから見た目のアイデアを作る流れ

TRY2 ビジュアルシステムでリデザインしよう!
s
TRY2 ビジュアルシステムでリデザインしよう!

TRY2 ビジュアルシステムでリデザインしよう!

TRY2 : ホームUIをリデザイン!
05:02
TRY2 : ホームUIをリデザイン!

TRY2 : ホームUIをリデザイン!

2-1.良いUIを作るコツは見た目の"システム化"
16:23
2-1.良いUIを作るコツは見た目の"システム化"

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは
26:07
2-2.システム化でUI作成が楽になる5要素とは

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法
17:35
2-3.Figmaで見た目のシステムを作る方法

2-3.Figmaで見た目のシステムを作る方法

【5分】TRY2解答 システムを適応して見た目を整える
05:30
【5分】TRY2解答 システムを適応して見た目を整える

【5分】TRY2解答 システムを適応して見た目を整える

【解説】TRY2解答
11:10
【解説】TRY2解答

【解説】TRY2解答

TRY3 レイアウトのきほんでリデザイン!
n
TRY3 レイアウトのきほんでリデザイン!

TRY3 レイアウトのきほんでリデザイン!

TRY3:動画詳細UIをリデザイン!
05:01
TRY3:動画詳細UIをリデザイン!

TRY3:動画詳細UIをリデザイン!

3-1.サイズの決め方:倍数で管理しよう
11:14
3-1.サイズの決め方:倍数で管理しよう

3-1.サイズの決め方:倍数で管理しよう

3-2.情報を優先度とグループで整理する
37:31
3-2.情報を優先度とグループで整理する

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう
07:51
3-3.余白は論理でサイズと種類を決めよう

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
17:55
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本
05:03
3-5.ボーダーの基本

3-5.ボーダーの基本

TRY3:レイアウト解答
08:24
TRY3:レイアウト解答

TRY3:レイアウト解答

4.配色の基本
0000
4.配色の基本

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン!
05:11
TRY4 : スマホの動画詳細UIをリデザイン!

TRY4 : スマホの動画詳細UIをリデザイン!

4-1.ここからはじめる配色設計
18:39
4-1.ここからはじめる配色設計

4-1.ここからはじめる配色設計

4-2.テーマカラーの決め方
08:32
4-2.テーマカラーの決め方

4-2.テーマカラーの決め方

4-3.配色はメインUIを引き立てよう
12:12
4-3.配色はメインUIを引き立てよう

4-3.配色はメインUIを引き立てよう

4-4テーマカラー2つ以上の時の考え方
12:24
4-4テーマカラー2つ以上の時の考え方

4-4テーマカラー2つ以上の時の考え方

TRY4の解答
08:32
TRY4の解答

TRY4の解答

5.画面幅で変わるUI
s
5.画面幅で変わるUI

5.画面幅で変わるUI

お題:レスポンシブなホームUIをデザイン
03:13
お題:レスポンシブなホームUIをデザイン

お題:レスポンシブなホームUIをデザイン

5-1.知らないと怖い”高解像度"ディスプレイについて
09:59
5-1.知らないと怖い”高解像度"ディスプレイについて

5-1.知らないと怖い”高解像度"ディスプレイについて

5-2.レスポンシブ5つのポイント
13:33
5-2.レスポンシブ5つのポイント

5-2.レスポンシブ5つのポイント

5-3.異なるディスプレイサイズのUI作成
17:24
5-3.異なるディスプレイサイズのUI作成

5-3.異なるディスプレイサイズのUI作成

TRY5レスポンシブ解答
09:45
TRY5レスポンシブ解答

TRY5レスポンシブ解答

6.UI構造の理解
NoContent
6.UI構造の理解

6.UI構造の理解

UI構造を意識してリデザインしよう!
05:35
UI構造を意識してリデザインしよう!

UI構造を意識してリデザインしよう!

6-1.平面の”階層”表現について
09:28
6-1.平面の”階層”表現について

6-1.平面の”階層”表現について

6-2.UIを構成する3ブロックを知ろう
13:04
6-2.UIを構成する3ブロックを知ろう

6-2.UIを構成する3ブロックを知ろう

6-3.シャドウの基本
23:50
6-3.シャドウの基本

6-3.シャドウの基本

6-5.モードと遷移 "←"と"×"の違い
11:02
6-5.モードと遷移 "←"と"×"の違い

6-5.モードと遷移 "←"と"×"の違い

6-6.モーダルとモードについて
17:17
6-6.モーダルとモードについて

6-6.モーダルとモードについて

TOP6:UI構造 - お題の解答
08:49
TOP6:UI構造 - お題の解答

TOP6:UI構造 - お題の解答