<p class="thumb"><img src="http://cdn.zako.org/images/2016/07/colordrop-io.jpg" alt="colordrop-io" width="592" height="310" class="alignnone size-full wp-image-30447" /></p>
<p>WEBサイトの制作をおこなうにあたって、サイトの配色を決めるのは手間がかかるものですよね。</p>
<p>その配色を決める際の手間を、極力省いてくれそうなのが、今回ご紹介する配色パターンのサンプルを見られるサービスです。</p>
<!--more-->

<h3 class="header-label">さまざまな配色パターンを、背景色に合わせながら選べる「ColorDrop.io」</h3>
<p>「<a target="_blank" href="https://colordrop.io/">ColorDrop</a>」は、トレンドを押さえた配色パターンを一覧し、それぞれのカラーコードを取得することができるサービス。</p>
<p>配色一覧の背景色を変えることで、理想とするものをより判断しやすくしてくれるものにもなっています。</p>

<h4 class="tips">配色のカラーコードを取得可能</h4>
[caption id="attachment_30448" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/colordrop-io-pick.jpg" alt="パターンを選択すると、画面右側にカラーコードが表示される。" width="592" height="310" class="size-full wp-image-30448" /> パターンを選択すると、画面右側にカラーコードが表示される。[/caption]
<p>気に入った配色パターンをクリックすると、右側に4色のカラーコードが表示されます。コピーできるカラーコードはHEX値とRGB値です。</p>

[caption id="attachment_30446" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/colordrop-io-bg.jpg" alt="背景色を変えて配色パターンを選ぶことも可能。" width="592" height="310" class="size-full wp-image-30446" /> 背景色を変えて配色パターンを選ぶことも可能。[/caption]
<p>背景色も変更可能、サイトのメインカラーに合わせて、配色がどのように作用するかをこれである程度予測することができます。</p>

<h4 class="tips">配色をお気に入りに保存できる</h4>
[caption id="attachment_30445" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/07/colordrop-io-fav.jpg" alt="お気に入りの配色パターンを一覧。" width="592" height="307" class="size-full wp-image-30445" /> お気に入りの配色パターンを一覧。[/caption]
<p>配色のカラーコードを表示する右側の欄の一番上に「★FAVOURITE」というリンクがあります。これをクリックすることで、その配色をお気に入りに保存することができます。</p>

<p>お気に入りに保存をすると、左メニューにある「Favourites」から、お気に入りの配色パターン一覧を表示させることができます。気になる配色をいくつか保存しておいて、ここで一覧して最終的に選択することができますね。</p>

<p>興味があるかたは「<a target="_blank" href="https://colordrop.io/">ColorDrop</a>」へどうぞ。</p>
