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

【この記事の要約】

シンプルな配色ながら印象に残りやすい「パンダカラー（白黒）」のデザインについて、その魅力と活用法を解説しています。

白と黒のモノトーンは、高級感、シンプルさ、信頼感といったイメージを演出しやすく、情報を整理して見せたい場合に非常に有効です。また、有彩色（色味のある色）と組み合わせることで、その色を効果的に際立たせるアクセントカラーとしての役割も果たします。この記事では、ファッションやインテリア、Webサイトなど、様々な分野でのパンダカラーの活用事例を紹介しながら、その普遍的なデザインの力を探っています。

【よくある質問と回答】

【ここから本文】

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

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

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

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

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

1.「Pandacolors」とは？

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

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

公式サイト：http://www.pandacolors.com/

2.使い方

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

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

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

全体の説明

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

①変化する場所

②変更させたい色

③色のサンプル

④WEBサイト形式の選択

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

変更させたい色

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

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

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

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

3.色のサンプル

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

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

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

変更させたいWEBサイトの形式選択

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

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

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

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

4.最後に

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

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

【English summary】

This article explains the appeal and practical uses of "Panda Colors" (black and white) in design, a simple yet memorable color scheme.

A black and white monotone palette is highly effective for creating an image of luxury, simplicity, and trustworthiness, and is very useful when you want to present information in an organized manner. Additionally, when combined with chromatic colors, it serves as an excellent accent color that makes the other color stand out effectively. The article explores the power of this universal design by introducing case studies of panda colors in various fields such as fashion, interior design, and websites.