読み込み中...
design-process
ビジュアル力を高めるデザインの進め方
「情報設計はできたけど、なんだかパッとしない」「プロのような洗練された雰囲気が出ない」 そんな悩みを解決するための、ビジュアルデザインの具体的な進め方を紹介します。
いきなりFigmaで作り始めるのはNGです。まずは「目指すべきゴール」を視覚化しましょう。 PinterestやDribbbleで参考になる画像を集め、プロジェクトのトンマナ（トーン＆マナー）を定義します。
色を使うと情報の優先順位が分かりにくくなります。 まずはグレースケールでレイアウトを作成し、配置と大きさだけで情報構造が伝わるかを確認します。
フォント選びはデザインの印象を大きく左右します。 見出し、本文、キャプションなどのサイズルール（Type Scale）を決め、ジャンプ率（文字サイズの差）を調整してメリハリをつけます。
ベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%）の黄金比を意識して色を乗せていきます。 色数が多すぎると散らかった印象になるため、最初は色数を絞るのが鉄則です。
「神は細部に宿る」と言われるように、1pxのこだわりが全体のクオリティを決定づけます。 自分の感覚だけに頼らず、ガイドラインや優れたデザインを参考にしながら調整を重ねましょう。
design-process
ビジュアル力を高めるデザインの進め方
「情報設計はできたけど、なんだかパッとしない」「プロのような洗練された雰囲気が出ない」 そんな悩みを解決するための、ビジュアルデザインの具体的な進め方を紹介します。
いきなりFigmaで作り始めるのはNGです。まずは「目指すべきゴール」を視覚化しましょう。 PinterestやDribbbleで参考になる画像を集め、プロジェクトのトンマナ（トーン＆マナー）を定義します。
色を使うと情報の優先順位が分かりにくくなります。 まずはグレースケールでレイアウトを作成し、配置と大きさだけで情報構造が伝わるかを確認します。
フォント選びはデザインの印象を大きく左右します。 見出し、本文、キャプションなどのサイズルール（Type Scale）を決め、ジャンプ率（文字サイズの差）を調整してメリハリをつけます。
ベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%）の黄金比を意識して色を乗せていきます。 色数が多すぎると散らかった印象になるため、最初は色数を絞るのが鉄則です。
「神は細部に宿る」と言われるように、1pxのこだわりが全体のクオリティを決定づけます。 自分の感覚だけに頼らず、ガイドラインや優れたデザインを参考にしながら調整を重ねましょう。