配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ

直感的で美しい！インフォグラフィックのデザイン見本を45つまとめました 公開日： 2017/02/26 インフォグラフィック（Infographics）とは、図表や情報を 視覚的に 表現する手法のことです。 華やかで直感的に理解できるため、最近ではインターネットの記事や本、プレゼンスライドなど至るところでよく使われます。 今回はそんなインフォグラフィックの見本を45つまとめて紹介します。ご参考になれば幸いです。 ※ 全て掲載許可を得ています。 この記事の目次 図表を華やかに見せる例 イラストをうまく使う例 手順を表す例 時系列を表す例 1. 図表を華やかに見せるインフォグラフィック 単調な図表でも色づかいを工夫すると美しく見えます。また、人形のアイコンを使って、割合を表現するのは定番ですね。 同系統の淡い色が使われたインフォグラフィックです。 エコを表現したフラットなインフォグラフィックで

「かわいい」デザインとは1種類ではなく、いろんなカテゴリーに分けることができ、人それぞれ「かわいい」と思うものは違います。 今回は、20代女子に刺さりそうな「かわいい」デザインをつくるための要素をまとめてみました。 原宿的「かわいい」原宿的「かわいい」をファッションで表すと？ 左：https://www.iqon.jp/sets/3342749/ 右：https://www.iqon.jp/sets/2867248/ストリートポップなファッション。ビビッドカラーやコミカルな柄などをファッションに取り入れている。 原宿的「かわいい」デザインの要素

海外デザインブログ Medium で公開された「Desining in Color」の著者より許可をもらい、日本語抄訳しています。 配色は、デザイナーにとって強力なツールです。注目を集めたり、感情をゆさぶったり、メッセージを伝えることもできます。配色がどれほど重要なのか分かりやすく伝えるために、よく引用されるThe Impact of Color on Marketing では、いくつかの商品において、90%以上のユーザーが配色によって購入を決めているということも、研究によって分かってきています。 効果的に配色を活用することが、デザインにおいて重要になりますが、新しい色の組み合わせを考えるのも大変です。それぞれの色には意味があり、組み合わせは無限と言えるでしょう。 この記事は、デザインに合った配色カラーパレットのつくり方の紹介ガイドです。より多くの色をつかって、直感的に素敵な色の組み合わせ

ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

studio-oahu.net Under Construction

ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ

「どうすればこの商材の魅力を最大限に伝えるバナーができるの？」 このような悩みを持つデザイナーさんはたくさんいらっしゃると思います。 よくある「バナーデザインまとめ」のようなサイトを閲覧してもイメージ別のデザイン（配色やフォント）の特徴が見えず、毎回まとめサイトを参考にしていると作業がなかなか進まず、イライラすることもあるでしょう。 そんな方のために今回は訴求したいイメージ別のバナーデザインの特徴をお教えます。 「安心感や信頼感」「誠実さ」「かわいい」「お得感」「先進性」など訴求したいイメージごとに最適なフォントや配色、その他の特徴をまとめて紹介していますので、ご自身が制作したいバナーのイメージに合わせてご覧下さい。 コンバージョンする！高品質なバナー作成方法 【はじめに】デザインイメージ図今回は日本カラーデザイン研究所の配色イメージスケール図をベースとしてイメージ別のバナーデザインをまと

Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ

レンタルビデオ店で映画を探しているときに、ふと「この映画って見たことあったような……？」と思ったことはないでしょうか。もしかしたらそれは、ハリウッド映画のパッケージやポスターがあまりにも似通っているからなのかもしれません。 Le Sibère Carnet de Christophe Courtois: affiche 背中合わせの二人。 空に浮かぶ大きな人物の顔、手前には海辺にいる人物。 動物系の映画は青と白がベース。 白×黒×炎、たまに拳銃。 全体的に青×黒が目立つ中を誰かが斜めになりながら走っています。 美女の脚の間からこっちを覗いている男性。 ベッドイン中。 顔を隠した謎の美女。 こちらは別パターンです。 ベンチに座っています。 サングラスをかけた人物のアップ。 とにかく真っ黄色で目立たせる。 赤いドレスを着た美女。 逆光の中、背中で語る人物。 片目の超アップ。ちょっと怖いですね。

Webサイトなどの制作を進める上でできればセンスの良いサイトと思われたい！ ブランドイメージや、伝えたいメッセージが伝わりやすいレイアウトにしたい。 そうは思うものの、自分のセンスでは大丈夫かどうかが不安だし・・・。 配色はどうしたらセンスが良く、分かりやすいものになるのかしら？ そんなお悩みをお持ちの方も多いのではないでしょうか。 魅力的な配色は、実はセンスではなく、ある程度法則や基本的な考え方を知る事で作ることができます。 今回は基本的な配色テクニックをご紹介します。 是非制作の際の参考にしてみて下さい！ 専門家にWEB販促の相談をする（無料）／WEB販促の窓口 ※本記事はニフティ株式会社提供によるスポンサード・コンテンツです。 ※本記事は2014年6月5日に公開された記事をLISKUL編集部にて再編集したものです。 配色の大原則まずは、配色の大原則を知りましょう。制作をする上で使う色