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

2023

年

月

日

スキルを上げて、創造のための武器を手に入れよう

すべての動画閲覧には、メンバーシップ加入が必要です

メンバー登録について

動画のゴール

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

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

‍

▼ この動画の項目

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.実装者とコミュニケーションをとろう

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

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

‍

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

動画のゴール

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

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

‍

▼ この動画の項目

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.実装者とコミュニケーションをとろう

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

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

‍

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

動画のゴール

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

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

‍

▼ この動画の項目

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

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

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

‍

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

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

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

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

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

‍

3.画像の扱い

2倍〜サイズを用意

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

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

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

‍

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

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

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

‍

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

‍

Load Previous

No Name

Set

2 years ago

Moderator

(Edited)

Delete Forever

This is the actual comment. It's can be long or short. And must contain only text information.

Your reply will appear once approved by a moderator.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

UIビジュアル基礎

シリーズの説明

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

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

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

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

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

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

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

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

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

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

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

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

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

【解説】TRY2解答

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

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

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

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

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

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

3-5.ボーダーの基本

TRY3:レイアウト解答

4.配色の基本

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

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

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

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

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

TRY4の解答

5.画面幅で変わるUI

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

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

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