Figmaのカラーパレットプラグインの使い方と、70:25:5の配色法則。デザイナー、コーチ、ディレクター / いがわ

.

Memo

Figmaのカラーパレットプラグインの使い方。

カラーパレットと色相環。

色相環ベースのカラーパレット。

Color Wheel

デザイナーは色彩を適切に選択し、調和のあるカラーパレットを作成することが求められる。

そんなときに便利なのが、Web上で色相環を基にカラーパレットを作れるジェネレーター。

Color Wheel。カラーパレットジェネレーター。

参照:Color Wheel – Color Palette Generator by Figma

Launch in Figmaでカラーパレットが作成。

画面左下の「Launch in Figma」のボタンをクリックすると、自動的にFigmaへプラグインとカラーパレットを作ってくれる。

FigmaにColor Wheelが表示された画面。

Figma上のカラーパレット。

自分で選択したカラーを基準に、カラーパレットが作成される。

Figmaにカラーパレットが表示された画面。


70:25:5の法則は、色の配色比率。

色の効果は大きい。

70:25:5の法則。

デザインの世界では、色は非常に重要な要素。

色は視覚的な印象を大きく左右し、ユーザーの感情や行動に影響を与える。

配色に迷ったときは良い結果を生まないので、原理・原則に立ち返るのが大事。

配色比率。70:25:5の法則の図。

Color wheel palette generatorとは?

色相環ベースのカラーパレットプラグイン。

Color wheel palette generator

Color wheel palette generatorは、カラーパレットを生成するプラグイン。

その名の通り、色相環(color wheel / カラーホイール)をベースに生成してくれる。

上記のサイトからだけでなく、プラグインサイトからの追加も可能。

色相環はcolor circleやhue circleと呼ばれることもある。)

Color wheel palette generatorのプラグインサイトの画面。

作者:Rohit Chouhan
プラグインサイト:Color wheel palette generator


Color wheel palette generatorの使い方。

基本的な使い方の例。

ベースカラー(基準となる色相と彩度、明度)を指定する。

カラーホイールとスライダーで、ベースとなる色を指定する。

または、参考となるデザインやWebサイトなどから色を拾い、「Pick a color」の入力欄に16進数(HEXカラー)の値を入力する。

例では「#1D667C」と入力。

Pick a colorにベースの色を指定する。

Pick a colorで指定した色に対して、生成するパレットタイプを選択。

「Pick a color」で指定した色を基に生成されたパレットタイプから、カラースキームを生成する。

例では「Complementary(補色)」を選択。

Pick a colorの色に対して、パレットタイプを選択する。


パレットタイプ。

パレットタイプとして、あらかじめ下記が用意されている。

  • Complementary(補色)
  • Split(分割補色)
  • Square(スクエア配色)
  • Analogous(類似色)
  • Monochromatic(単色)
  • Triadic(トライアディック)
Complementary(補色)

補色とは色相環の反対側の色。青の補色は黄色となる。

Color wheel palette generatorの、Complementary(補色)の画像。

Split(分割補色)

補色を分割した色。黄色が赤寄りと緑寄りへ。

Color wheel palette generatorの、Split(分割補色)の画像。

Square(スクエア配色)

補色と結んだ対角線を基にできる正方形のそれぞれの頂点の色。

Color wheel palette generatorの、Square(スクエア配色)の画像。

Analogous(類似色)

基準となる色(今回の場合は青)の近くにある色。

Color wheel palette generatorの、Analogous(類似色)の画像。

Monochromatic(単色)

同じ色相(今回の場合は青)の明度の度合いによる色。

Color wheel palette generatorの、Monochromatic(単色)の画像。

Triadic(トライアディック)

基準となる色(今回の場合は青)と等間隔にできる三角形のそれぞれの頂点の色。

Color wheel palette generatorの、Triadic(トライアディック)の画像。


Color wheel palette generatorの入れ方。

プラグインの入れ方。

Color wheel palette generatorを検索。

プラグインは上部メニューの「リソース / Resources」から、「プラグイン / Plugins」のパネルを開き、「Color wheel palette generator」で検索する。

「Color wheel palette generator」が表示されたら、クリックすると画面が切り替わる。

Color wheel palette generatorの入れ方。

保存は、Color wheel palette generatorの「保存 / Save」から。

右横にあるブックマークのアイコンから、「保存 / Save」ができる。

Color wheel palette generatorの入れ方。

右クリックメニュー、または、プラグインの配布サイトColor wheel palette generatorからでも保存可能。

Figmaで使えるカラーパレットを見つめる猫たち。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。
使い方 & プラグインなど。

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。