配色を考えるときに便利なオンラインツール10個集めてみました | WP-E (仮)
最終更新: 2018年4月14日 皆様こんにちは！最近WP-Eメンバーに本名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。 さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。 Adobe Kuler まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります) 「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。 Color Hexa Colo
デザインやファッションに取り入れたい2014年のトレンドカラー、春のトレンドカラー12色も魅力的！
Pantoneが2014年セレクションしたカラーは、鮮やかに咲き誇るランをイメージさせる淡くピンクがかったパープル「Radiant Orchid」。 今回はダウンロード素材として、Radiant Orchidを含む2014年 春のトレンドカラー12色をPhotoshop用のスウォッチを用意しました。 Pantone Color of the Year 2014 PANTONE 18-3224 Radiant Orchid Radiant Orchid（レイジアント オーキッド）とは「光り輝くラン」のことで、表情が非常に豊かなカラーです。その鮮やかな色味は信頼と暖かさにあふれ、人々の興味をそそります。 パープルとピンクが織りなす魅力的なハーモニーは、ランの花のように大きな喜び、愛、健康を象徴します。 Radiant Orchidのイメージボード PANTONE Color Systems:
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
Webサービスのイメージカラーを無作為に調べてみた｜インターネット界隈の事を調べるお
昨日、LINEのカンファレンスに行ってきたのですが、ぼんやりと「緑色を見るとLINEって感じだよなぁ」と思いました。これまで緑といえばあの渋谷の会社を連想してたのですが・・・。 他にも、色の組み合わせだけで特定のWebサービスを連想することができるものはあります。クリムゾンレッドだったら楽天とか。そんなわけで、Webサービスのイメージカラー（使用されている色）を調べてみました。なんだかオーラソーマ・カラーみたいです。 サービスはジャンル別に思いついたものを次々と取り上げた感じですので、脈絡がない箇所もあるかもしれません。色はスクリーンショットからのスポイトという地味な作業により調べております。 1、2行目はEC関連ですが、比較的暖色系も使われており、女性を意識したものも多いのかなって。逆に3行目はお堅いサービスなので青系が多い。以外なのがSNSも青系が多いんですね。3行目と4行目は配色が似
[O]フラットデザインカラーリングのコツを探すための７つの検証 – Olein 〜オレのインタレスティングなこと〜
検証１ http://dribbble.com/shots/1059591-Home-Automation-Flat-App-Design まずはこちらを検証してみました。 色のバランスを見てみるとペンタードと呼ばれるバランスに近いような気がします。色数が増える場合には、このようなバランスを保って配色を心がけるといいでしょう。（フラットデザインに限らず） ※ペンタード配色とは？ 色相環を５等分した色相同士の配色のこと 背景がブラックということもあってか、彩度は押さえ気味な印象でトーンも高くありません。こう、見た感じパンチのある色はほとんどありませんよね。落ち着いた印象です。 そうすることによって背景色とのバランスも取れるように考えてあります。 検証２ http://dribbble.com/shots/1052090-AirportChatter-V2-Concept/attachment
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
【配色・色見本 Webサイト紹介】 - 10個のweb配色ツール【色の見本】
ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する
配色パターンを決める際にお世話になっているサイトをご紹介
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
カラーデザインの基本。トーンを理解する！
前回の[カラーデザインの基本。色の三属性とは？]に引き続き、カラーデザインの基礎を紹介したいと思います。今回は、色のトーンについて解説させていただきますが、まず『そもそもトーンとは何なのか』というところから話を進めさせていただきます。 クライアントに「トーンって何？」と聞かれて的確に答えられるデザイナーって結構少ないんです。あなたは答えられますか？ なんとなく雰囲気はわかっていても、しっかり説明するのはなかなか難しいんです。私も昔は説明できないデザイナーの1人でした。では、早速トーンについて説明させていただきます。 トーン(色調)って何？ まず、前回の[カラーデザインの基本。色の三属性とは？]で触れましたが、色には、色相・明度・彩度の、３属性があります。 トーンとは、このうちの明度と彩度をあわせた考え方で、【明度と彩度が似ている色を集めてグループ化したもの】をトーンと呼びます。 このトーン
カラーデザインの基本。色の三属性とは？
色の三属性とは、色相・明度・彩度の3つの事を言います。この3つの属性を正しく理解することがカラーデザインを極める第一歩となります。 色の三属性は本当に基本中の基本となる知識です。デザインに関わる人であれば、最低限知っていなければなりません。 色の三属性を理解しておかないと、色を使ったコミュニケーションを円滑に図ることが出来なくなります。例えば上司に「もっと暗いブルーで全体を落ち着いた印象にしてくれ」と頼まれても、あなたは上司のイメージしている色を再現出来ない可能性が高くなってしまいます。こうならないためにも基本をしっかり学習することは大切です。 色相、それは色味のことです！ 色相とは、赤・黄・緑・青・紫といった色味のことを言います。色相はイメージの違い表現するのに最も優れた属性です。また色相を円上に配置したものを色相環と言います。 色相環 この色相環を見ていただければわかると思いますが、同
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
The Psychology of Colors in Web Design
Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark red room or in the room in the sky colors). Today we’ll be talking about color psychology in website design, the way different brands use colors and what’s their message. Your Web Des
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
この秋、デザインやファッションに使いたい10色 -2013年秋のトレンドカラー
複数のカラーでカラースキームを作成する際に調和のとれたいい感じにするアイデア
//// COLOURlovers :: loving colours since 1981