いろんなレイアウトでサイトカラーを試せる「Pandacolors」をつかってみた！

記事公開日：2017/10/23
最終更新日：2023/11/17

新規サイト立ち上げ、WEBサイトのリニューアル、LPの作成など、新しいサービスを紹介するサイトやページの色合いがなかなか決まらず、デザインが難航することはよくあります。

特に、普段デザインに関わることのない意思決定者の確認が必要な場合は、どのように修正指示を出したらイメージに近くなるのかがわからず、あいまいな指示による配色の二転三転、何パターンもの色違いの提出など、デザイナーが頭を抱えてしまうことも多いです。

このような事態をなくすためには、まず最初にデザインの方向性をしっかりヒアリングして、参考サイトでイメージのすり合わせをしておくことが重要です。

しかし、やはり実際に配色を見てみないとイメージがつかないこともありますよね？

そんなときに利用したいツール『Pandacolors』を今回は紹介いたします。

1.「Pandacolors」とは？

「Pandacolors」とは、フラットデザインや、マテリアルデザインに俗称されるデザインや、よく利用されているレイアウト、有名なサイトに似ているWEBデザインのレイアウトパターンを事前に用意し、そのテンプレートに好きな配色を設定することができるサービスです。

色は指定もできますが、ランダムでも設定できるので、配色スランプに陥った方などは試してみると新しいアイデアが思い浮かぶかもしれません。

pandacolor操作画面

Pandacolorsは基本的に会員登録することなく利用できます。

しかし、会員登録すると、設定した配色を保存することができますので、アーカイブを作成されたい方は登録されてもいいと思います。

今回は基本的な操作方法を紹介していきます。

大きく分類すると4種類の設定エリアがあります。

①変化する場所

②変更させたい色

③色のサンプル

④WEBサイト形式の選択

①で表示されているレイアウトに、②～③の操作で配色設定していくイメージです。

②のエリアついて説明します。

②の中には４つの設定ボタンがあり、それぞれテンプレートのなかの1パーツを変更することができます。

また、下記の画面キャプチャのように、各色の中に「水滴」のアイコンと「南京錠」のアイコンがあります。

色の変更を行う箇所の説明

「水滴」のアイコンをクリックすると16進数で色指定ができ、「南京錠」のアイコンをクリックすると色を固定できます。

②で色を細かく指定しなくても、③で色を選択することで全体的なトーンを合わせることも可能です。

上記の画像の通り、ピンクに近い色を選択とするとその色の近似色をテンプレートの各パーツに自動で設定してくれます。

色が決まっている方は③にある、カラフルなボタンで指定することもできます。

④ではWEBサイトの形式を選択できます。

デスクトップ用のレイアウトから、スマホ用レイアウト、管理画面などで使われるようなレイアウトのテンプレートもあります。

一例ですが、下記はスマホ用、ミュージックポータル画面のテンプレートです。

結構ニッチなレイアウトも用意されているので、いろいろ試してみるといいと思います。

WEBサイトの配色はサイト全体に関わるとても重要な部分なので、このようなサービスでイメージを固めるとデザイナーと非デザイナーの意思疎通がスムーズにいくこともあります。

また、遊び感覚でも楽しめますので、ぜひみなさまも体験してみてください。