東京上野のWeb制作会社LIG仕事も遊びもいいオフィス。デザインシェア先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。リニューアル増量版まとめ※この記事は、2014年12月15日に公開された記事を再編集したものです。ビビットカラー」などがあり、大変役立ちます。色を選択してから明度と彩度を上げたり下げたり細かい調整も可能です。「カラーピッカー」ではHEX・RGB・HSBに数値を入力し、ほしい色を探すこともできます。配色の見本帳|キーカラーで選ぶ配色パターンhttp://ironodata.info/色相の中から色をクリックすると、カラーコードや色に関する詳細な情報が確認できます。HEX・RGB・CMYKだけではなく、すごい量の組み合わせをアドバイスしてくれるので、見ているだけでも楽しいサイトです。こちらのサイトにも「色検索」というカラーピッカーがついています。COLORShttp://nipponcolors.com/日本の伝統色をHEX・CMYK・RGBで表示してくれます。和風の表現にしたいときは大変重宝します。palettonhttp://paletton.com/パレット上でWebサイトを作ったときの色サンプルを確認できます。指定した色の仮想ページの表示や、HTML・CSS・LESS・XML・TEXTなどでの出力だけでなく、色覚障害の見え方、汚れたLEDディスプレイの見え方などを知ることもできます。カラーホイールの真ん中にある円を動かすとで、明度や彩度が調整が可能です。詳細は以下の記事をご参照ください。255http://www.0to255.com/指定した色の彩度を確認できます。「この色のもうちょっと薄いのが欲しい」という場面で活躍します。uiGradientshttp://uigradients.com/通常の配色サイトでは、カラーコードの情報だけを得られることが多いですが、こちらはCSSなどの情報も表示してくれるので便利です。HUE/360http://hue360.herokuapp.com/色相環から、選択した色と相性のいい色を教えてくれるサイトです。配色で悩むことが多い方は、最初にこのサイトでチェックするといいかもしれません。詳しい使い方については過去の記事「Webデザインの配色で迷ったときに役立つツールとその使用方法まとめ」で紹介しているので参考にしてください。Ver2.0http://www.color-fortuna.com/color_scheme_genelator2/Webサイトの配色の参考にとっても使えるサイトです。サイトの右側にあるカラーピッカーで色を選ぶと、その色に合った色を仮想のサイトページに自動で表示します。サイドバーや見出しもセットで反映されるので、完成したイメージを掴むのにもってこいですね。Bookhttp://colorchart.jp/本や雑誌の配色が確認できるサイトです。Amazonで取り扱ってる書籍からの検索も可能です。Mehttp://stylifyme.com/URLを打ち込むと「そのサイトの配色+タイポグラフィの情報」を表示してくれます。表示された内容はPDFでダウンロードすることもできます。Datahttp://webcolourdata.com/URLを打ち込むと「そのサイトの配色+類似の配色がされたサイト」を表示してくれます。カラーガイドiOSのDLはこちら。AndroidのDLはこちら。カラーガイド」のアプリ版です。イメージに近い色を探すだけでなく、撮影した写真やライブラリのなかに入っている写真から色のコードを探せます。SaturationiOSのDLはこちら。最初から、様々な色を組み合わせたパターンが登録されています。登録された色のカラーコードなどの情報を閲覧してお気に入りに入れることも可能です。LoversiOSのDLはこちら。配色のアプリと少し違いますが、気になる色の情報を調べられるカラーピッカー系アプリです。他に、自分で作った色の情報を知ることのできる機能があります。+α(すごく分かりやすい配色講座)最後に+αとして、配色について学びたいときに参考になるスライドを3つ紹介させていただきます。SKET(配色についての説明はP.48からです)まとめ私は一度悩んでしまうとなかなか抜け出せないタイプの人間なので、こういうサイトの存在に助けられています。開発者の皆さま、本当にありがとうございます。以下の記事も参考になるかと思われますので、ぜひご覧ください。WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップではでは、失礼します。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。2019.12.31281年末年始のイマこそ!マーケティングを学びたい人必見・Udemyおすすめ動画講座5選【1/9まで新春セール実施中!】2019.12.2525130歳独身彼女なし。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。