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

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

作成：2016/10/11 更新：2016/10/11 Webデザイン > デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 セパレーション（分離配色） 赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。 メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。 色彩の調和/セパレーション カマイユ わずかな明度差を利用した配色方法をカマイユといいます。曖

2016 - 04 - 29 【図解で分かる】色彩センスのいらない配色入門 Webデザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。 背景色や文字色をいじるのだけれど、 どうもパッとしない 。 これだ！と思う色を選択して使っているはずなのに、 なかなか思ったようなイメージにならない 。 そもそも センスがない 。 本題に入る前に、最初にひとつ、 伝えておきたいこと がある。「自分にはセンスがないからブログのデザインを考えるなんておこがましい」なんて思っているひとには、特に聞いてほしい。 実はここだけの話だが、Web制作で飯を食っているぼくでさえ、ほんの少し前まではデザインのキホンの「キ」さえ知らなかった。おかげさま

作成：2016/04/11 更新：2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス

ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バランスの整った見た目に美しい仕上がりにする方法論がウェブデザイナーによって解説されています。 A Simple Web Developer's Guide To Color – Smashing Magazine https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ Design Academyを主催するウェブデザイナーのローラ・エリザベスさんは、シンプルなカラーデザインで失敗しないデザイン論「simple color workflow」を提唱しています。エリザベスさんは多くの色を複雑に使いこなすよりも、サイトのカ

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

studio-oahu.net Under Construction

はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し

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

第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい　動的な⇔静的な　情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）

ウェブサイトの作成やパワーポイントのスライドなど、デザイナーでなくても配色を決めなければいけないシーンは多くあります。 配色を自分で決めようとすると、なんだかしっくりこない、これが正しい配色なのか分からないと感じている方も多いのではないでしょうか？ しかし、3つの原則をおさえて、無料ツールを使えば、ノンデザイナーでも簡単に調和のとれた配色ができるのです。 今回は、下のモノクロのコーポレートサイトの構成に、実際に配色を決めていく事例を紹介いたします。 ▼配色前の企業サイトのレイアウト 【原則1】 メインとなるカラーを1色選ぶ！はじめに、全体の印象を決めることになる、メインカラーを決めましょう。 メインカラーを決める色が持つ印象をおさえた上で、メインカラーを決めましょう。 色の持つイメージをうまく利用することで、伝えたいメッセージが伝わりやすくなります。 今回の事例では、知的で誠実な印象を与え

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

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