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

グリッドは”バランスが良い”を紐解く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などでグリッドにこだわりすぎると、目的に叶わない印象を作ってしまうこともあります。

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

‍

‍