Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ
Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。 「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。 商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。 ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー＆ペーストで利用できる、カラ
結婚式の配色はこれだ！参考にしたい美しい色の組み合わせ25個まとめ
結婚式で使われる配色は、お好みの雰囲気を演出することが大切です。またそれだけに限らず、結婚式のフォトフレームのカラーバリエーションや、新郎に似合う背広の色など、細かい配色も考える必要がでてきます。しかし、もっとも重要なのは、選んだ配色が結婚式とうまくマッチしているかどうかです。 配色を選ぶときにもっとも大変なのは、新郎と新婦のように、調和よくバランスを保つことです。今回は、実際にデザインされた結婚式の招待状をモチーフに、美しい配色の組合せ25個をまとめてご紹介します。配色をコピー＆ペーストできる HEX 値もそれぞれ記載しているので、制作の参考にしてみてはいかがでしょう。 詳細は以下から。 結婚式の配色に悩まない！参考にしたい美しい色の組み合わせ25個まとめ 01. Pastel Peach 水彩絵具でペイントした、パステル系のピンク色とみどり色の組合せが美しい配色で、ガーデンスタイルの結
春にオススメ！2016年流行カラー対応の美しい配色パレット20個まとめ
2016年注目の流行カラー「ローズ・クォーツ＆セレニティ（英: Rose Quartz + Serenity）」を利用した、今年の春にオススメの配色カラーパレットをまとめたエントリー「20 Pink & Blue Color Palettes to Try This Month: March 2016」が公開されていたので、今回はご紹介します。 PhotoshopやIllustrator用カラースォッチファイルの他に、HTMLファイル形式でもダウンロード可能で、HEX値やRGB値も手軽に調べることができるので、ウェブデザイン制作やプリント印刷用デザインにも活用してみてはいかがでしょう。 詳細は以下から。 配色パレットのダウンロード方法について 今回紹介する配色カラーパレットは、世界中のデザイナーが色やパターンを作成、保存するサービス Colourlovers よりセレクトされています。 各
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
DESIGN ARCHIVE vol.3｜迷ったときにすぐに役立つ！配色デザインアイデア|haconiwa
色の組み合わせがカンタンにできる！おすすめ配色パターン こんにちは。Keinaです。 デザインの基本といえば、配色デザイン。 学生の頃に色彩論を勉強したことがあるんですが、 色について知れば知るほど、デザインするのが楽しくなりました。 本日は、なんとなく色を選んでしまっている初心者さん、ついつい好きな色にかたよりがちの方のために、 迷ったときにすぐに役立つ！配色デザインアイデア3つをご紹介します。 01. 写真の配色から色を探してみよう 日常や旅で撮る写真には、必ずいい色が隠れていることが多いです。 撮った写真をPhotoshopで開き、ドキュメント内から好きな色を探して「スポイトツール」で直接クリックするだけで色が抽出できます。自分のパレットに思い出の色をプラスするのも楽しいものです。 春色を選びたいとき 春に咲く「花」の写真を使って色を選んでみましょう。 （ 権現堂桜堤の桜 #f0d7
【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
ランダムで簡単にカラーパターンを作成できる「Coolors」
シンプルなサイトの場合には必要ないですが、カラフルなサイトや3色以上の配色が必要なサイトの場合、こういったツールからアイデアが生まれることもあると思います。「Coolors」はスペースキーを押すたびにカラーパターンがランダムでサクサク切り替わるので使い勝手がイイですよ。 http://coolors.co/ 使い方はシンプルでスペースキーを押すごとに5色のカラーパターンが切り替わります。カラーごとにロックを掛けることもできるので、まずベースカラーを決めてロックし、スペースキーを連打する感じがイイかも。
【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」 | LISKUL
Webサイトの見た目を改善するために、これまでたくさんの「配色デザイン」の本や記事が投稿されてきました。これらの情報を使えばあっという間にサイトの配色を決めることができます。 ただその配色、「自分が好きな色」になっていませんか？ それぞれの商品やサービスの配色には「正解」があります。 今回「サイト」「ロゴ」「コンバージョンボタン」に分けて、それぞれに対して有効な色や法則をまとめてみました。 自分のウェブサイトではどんな色が一番理想的なのか、実例を参考にしながら導き出してみましょう！ また、この記事は無料でPDFとしてダウンロードも可能です。配色デザインを考える際にお手元に置いておくのがおすすめです。 【PDF】【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」>>無料ダウンロード そもそもなぜ「色彩」が大切なのか？ 引用元：Why All Sale Sings Are R
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Adobeの配色パターン参考サービス Adobe Kuler | ユージック
Adobeの配色パターン参考サービス Adobe Kuler 2009年1月22日 アドビ システムズが提供しているオンラインサービスであるAdobe KulerがWEBデザインで配色を考える際に便利そうなのでご紹介したいと思います。 Adobe Kulerは、色の組み合わせをブラウザーで作成・保存・公開・共有ができる、デザインをする上で便利なサービスです。 デザイナーによるCGMで作られたカラーチャート集ともいえますね。すでに7000種類以上（2009年1月現在）のテーマが公開されています。利用料は無料ですが、保存などの機能を使うにはAdobe IDが必要です。Adobeの様々なデータをダウンロードしたりするにはAdobe IDが必要になりますので、WEBデザイナーなら作っておいても損はないでしょう。※もちろん無料。 主な機能 カラーテーマを探す Kulerコミュニティで作成された何千も
Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 | バニデザノート
Fireworksで、微妙な色の調整をするときに 毎回パレットをぐりぐりするのが面倒で、なにかいい方法はないかと調べたら 「ブレンダー」というパネルがあるようです。 今回はこの「ブレンダー」を紹介いたします。 Fireworksでは、ツールの色ボタンを選択するとwebカラーのパレットが開いて そこからもう少しくわしい「カラー」パネルにすすむことができます。 だいたいはwebカラーのパレットであたりをつけたあと、 この「カラー」パネルの横のバーで 明度を上げ下げすれば「すこしあかるく」「すこし暗く」みたいな 色調整が可能なのですが オレンジ系統の色など、中間色に関しては、 上記のように明度を上げられず、「もっと明るく」ができない場合があります。 こういった場合は直接真ん中の丸いグラデーションのポインタを 黄色側か、白側に動かすのですが、なかなかうまく色がでない。 赤によりすぎたり、黄色になり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色相環とトーンの表を使って色の意味をデザインに生かそう - Webデザイン - acky.info
配色パターン見本40選：ベストな色の組み合わせ確認ツール
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
高級感のある配色やデザインを作るコツまとめ