戻る
メンバーシップになる
トップ
/
UIビジュアル基礎
/
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
コンテンツ一覧
コミュニティ

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

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

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

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

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

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

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

Figmaのファイルはこちら

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

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

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

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

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

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

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

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

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

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

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

Figmaのファイルはこちら

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

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

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

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

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

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

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

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

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

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

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

Figmaのファイルはこちら

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

〜メンバー限定です〜

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

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

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

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

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.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

1-3.解答!プロフィールページUI
NoContents
1-3.解答!プロフィールページUI

1-3.解答!プロフィールページUI

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で見た目のシステムを作る方法

2-4.お題の解答
No
2-4.お題の解答

2-4.お題の解答

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.ボーダーの基本

3-6.レイアウトお題の解答
No
3-6.レイアウトお題の解答

3-6.レイアウトお題の解答

3.配色の基本
0000
3.配色の基本

3.配色の基本

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

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

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

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

4-2.テーマカラーの決め方
NoContent
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つ以上の時の考え方

4-5.配色お題の解答
No
4-5.配色お題の解答

4-5.配色お題の解答

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

5.画面幅で変わるUI

お題:音楽プレイヤーアプリのホームUI
NoContent
お題:音楽プレイヤーアプリのホームUI

お題:音楽プレイヤーアプリのホームUI

5-1.ディスプレイ基本知識
NoContent
5-1.ディスプレイ基本知識

5-1.ディスプレイ基本知識

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

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

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

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

5-4.お題の解答
No
5-4.お題の解答

5-4.お題の解答

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

6.UI構造の理解

お題メッセージアプリ-新規会話作成
NoVideo
お題メッセージアプリ-新規会話作成

お題メッセージアプリ-新規会話作成

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

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

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

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

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

6-3.シャドウの基本

6-4.ナビゲーションの理解
NoContent
6-4.ナビゲーションの理解

6-4.ナビゲーションの理解

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

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

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

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

6-7.お題の解答
No
6-7.お題の解答

6-7.お題の解答