エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/10/23

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

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

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

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

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

「Pandacolors」とは?

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

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

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

pandacolor操作画面

使い方

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

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

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

全体の説明

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

①変化する場所

②変更させたい色

③色のサンプル

④WEBサイト形式の選択

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

変更させたい色

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

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

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

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

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

色のサンプル

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

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

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

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

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

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

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

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

最後に

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

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

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

メールマーケティング

最新記事