logo
プレミアム記事あり

FigmaではじめるズボラUIデザイン (2)~最低限のカラーの知識~

この記事の文字数は、6,117 文字です。

Figmaの操作方法と合わせて、最小のコンポーネントである「カラー」についてのお話です。 まずはカラーの最低限の知識をご紹介します。 その上でFigmaを用いてカラーを再利用&変更しやすくするためのコンポーネント化について解説します。

検索キーワード
Atomic Design
カラーコード
RGB
ウェブカラー
Figma 色 再利用

こんにちは、ナオツです。

今回も引き続きFigmaを使ってサイトのUIデザインをやっていきましょう。

UIデザインを行う上でAtomic Designをベースにしたコンポーネント設計という思想が大事であるという話をしました。 詳しくはこちら

今回はサイトを作る上でもっとも最小のコンポーネントに注目してみましょう。

カラーもフォントもコンポーネント

コンポーネント設計では、

「再利用すること」

を念頭におきます。

その上でもっとも再利用する要素は何だと思いますか?

結論、

  • カラー(色)
  • テキストフォント(種類・サイズ)

です。

なぜ、これらを再利用する頻度が高いのか。

これは再利用しない場合を考えたほうが早いかもしれません。

再利用されていないということは、一貫性がなくなる ということです。

想像してみてください。

  • 最初のページの背景が赤色なのに、次のページに移動すると背景が微妙に違う薄い赤色になったら…
  • 一覧ページは明朝体なのに、詳細ページはゴシック体だったら…

漫画的な演出をしたいのであれば良いのかもしれませんが、実に読みにくいものになってしまいそうです。

僕だったら内容よりもカラーやテキストフォントが気になって中身が入ってこないです。(笑)

どんなカラー・テキストフォントを使うかを最初に決めておけば、サイト全体に一貫性 をもたらすことができます。

カラーのコンポーネント化

それでは、最初にカラーを再利用しやすくするために、Figmaでカラーコンポーネントを作っていきます。

カラーの利用シーン

Webサイトにおけるカラーの利用どころは多岐にわたりますが、代表的なところでは、

  • 背景の色
  • ボタンの色
  • ラベルの色
  • 線の色
  • 文字の色

などで利用されます。

カラーの指定方法

Webサイトにおけるカラーの指定方法は光の三原色に基づいています。

・光の三原色 光の三原色

上記のカラーを指定する方法が3種類あります。

カラーコード

もっとも一般的で良く使う方法かもしれません。 6桁の英数字で表現する方法です。 「#(ハッシュ)」から始まり0~9の数字とa~fまでのアルファベットで表現します。

0 1 2 3 4 5 6 7 8 9 a b c d e f

これで16文字あるので16進数で6桁のコードということになります。 つまり16の6乗なので、#000000〜#FFFFFF16,777,216種類 の色を表現できます。

  • 1~2桁目:赤(Red)
  • 3~4桁目:緑(Green)
  • 5~6桁目:赤(Red)

RGB値

「赤(Red)、緑(Green)、青(Blue)」を組み合わせて、それぞれ数値(0~255)で色を指定するのが、RGB という指定方法です。 数値の意味は「0」が一番暗く、「255」が一番明るいという意味になります。

  • rgb(0,0,0): 黒
  • rgb(255,255,255): 白

という感じです。 256の3乗なので、カラーコードと同様に16,777,216種類の色を表現できます。

カラーコードと違うところは、RGBの3つの数値に加え、Alpha値という透明度 を表現できるというところです。

透明度は「0~1」の間で指定することができるので、たとえば、

rgb(255, 0, 0, .5)

とすれば、半透明の赤色が指定できます。

色の名前

プロトタイプを作ったり、練習やテストを行う段階で、必ずしも詳細な色を指定するのができなかったり、面倒な場合があります。

そういうときは、色の名前を使う方法が便利です。

使い方は単純です。

  • red: 赤
  • blue: 青
  • yellow: 黄
  • green: 緑

のように指定するだけです。

これ以外にもたくさん定義されていますので興味のある方は下記をご覧ください。 ウェブカラーについてはこちら ウェブカラー例

サイトのテーマカラーを決める

大体3種類くらいあれば良いかと思います。

  • Primary: もっとも主要なテーマカラー
  • Secondary: 2番目に使用するテーマカラー
  • Tertiary: 3番目に使用するテーマカラー

足りなければ増やし、多ければ減らしてください。(個人の裁量でOKです)

たとえば、このサイトでは「緑色」の系統をテーマカラーにしています。

それでは実際にFigmaを使ってテーマカラーをコンポーネント化してみましょう。

続きをお読みいただくには…

プレミアム記事 を購入する
価格:100円(税込)
ホームUIデザインFigmaFigmaではじめるズボラUIデザイン (2)~最低限のカラーの知識~

Ads

すべての記事

  • すべての記事を読む

システム開発関連の記事

  • システム開発関連すべて
  • インフラ

UIデザイン関連の記事

  • UIデザイン関連すべて
  • Figma

フロントエンド関連の記事

  • フロントエンド関連すべて
  • フロント技術全般
  • React

バックエンド関連の記事

  • バックエンド関連すべて

開発環境関連の記事

  • 開発環境関連すべて
  • Windows

生活関連の記事

  • 生活関連すべて
  • フリーランス
  • 学び