WEBマーケティングにおける色彩心理学―使って便利なサイト４選大公開 - Build up｜コンテンツマーケティング担当者向けメディア
ヒトは、何かを見分けるとき、「色」を基準に識別することが多い。 読者の方も経験済みだろうが、店構えがコンビニエンスストアと理解できた時、その店が何かはぱっと見た時の看板の色合いで判断できる。 青ならローソンだし、グリーン＋オレンジ・赤ならばセブンイレブン、グリーン＋ブルーであればファミリーマートなど、一瞬で見分けがつく。 それだけ、色から得られる情報は多いのだ。 これは「与えられた情報」についての記述になるが、以後は「与える印象」について記してみたい。 ご存知の通り、サイトデザインには色彩面でも配慮が必要だ。 色の与えるイメージは、そのサイト（ひいては会社）の伝えたいメッセージと合致している必要があるからだ。 余談ではあるが、「青いライトが夜間の駅での飛び込み自殺を大幅に抑えた」事例というのをニュースで読んだ方もおられるだろう。 この例のように、色の与える心理的作用（色彩心理学）を知ってお
初心者でも「45分」で作れる！ 高品質バナーの作り方！ | LISKUL
広告バナーって「ひとつや2つくらいすぐできるだろう」と思っていても案外時間がかかってしまいますよね。 Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。 実は私も最近までバナーを制作するのに2時間以上かかっていました。しかし「どうすれば速く簡単にバナーを作るのか」を繰り返し試行錯誤する中でやっと見つけたのがこの方法です。この方法を身につければ誰でも1時間足らずで効果の高いバナーを量産することができると思います。 各制作ステップの見出しの横に実際にその作業にかかった時間も記載していますので、これをひとつの制作時間の目安として参考にしてください。 またこれまでに公開しているバナーの基本ルールやレイアウトの記事も紹介しておりますので、そちらも合わせてご覧いただけるとバナーに関する理解も深まると思います。 コンバージョンする！高品質なバナー作成方法 そも
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
デザインで絶対に「黒」を使ってはいけない理由とは？
by webtreats 黒はうまく使うと他の色を際立たせたり全体を神秘的に見せたりすることができる色ですが、私たちが普段「黒」だと思っている色は本当は黒ではなく、「黒に近いダークな色」であることが多々あります。自然界にほとんどない「純粋な黒」は他の色を圧倒してしまい扱いが難しいため、黒を使いたい時にすべきことをSegment.ioのCEOであるIan Storm Taylorさんがまとめています。 Design Tip: Never Use Black by Ian Storm Taylor http://ianstormtaylor.com/design-tip-never-use-black/ Taylorさんが子ども時代は美術の先生から、大学時代はロードアイランドスクールオブデザインの授業で何度も聞いたことの1つに「作品に黒を使うな」というコツがあります。 真に黒い物は見つけるのが
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進数カラーコ
『色を色で見ないで』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
地味だけど便利！Photoshopでカラーの明度のバリエーションを簡単に展開できる機能拡張 -Lighten / Darken Color
Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloaded here」からファイルをダウンロードします。 Lighten / Darken Color 「[KAM] Color Lighten-Darken Scripts.zip」を解凍します。 解凍した「Color Darken.jsx」と「Color Lighten.jsx」を下記のフォルダ内に移動します。 ファイルの格納先：Photoshop/Presets/Scripts/ Photoshop
【スウォッチ】 綺麗だなと思った写真からカラーパレット化してストックしておく
エイプリル・フールですね。でもこの記事はネタじゃないので普通に読んでいただければと思います（笑）あ、そういえば今日はヒゲを剃りましたよ。ちょっと剃り残しちゃったけど、すぐ戻ります。 さて、Dribbbleとかってそれぞれの作品にカラーパレットが登録されていますよね。 それから検索できたり、便利。 Dribbbleのカラーパレット。.acoファイル(Color Swatches)もダウンロード出来る なんかキレイなカラーパレットって、見てると嬉しくなりませんか？ なりませんかそうですか 好きな写真からカラーパレットを作る 普段、綺麗だなーと思った写真から、メインの色を抽出してカラーパレットとして並べておくんです。 並んだカラーパレットには名前なんてつけてあげちゃって。 根暗でしょう？ でもけっこうデザインする時に役に立つんです。 色の組み合わせ、感情というかストーリーが出
配色に悩んだときに使える最近の便利なWebサービス
Colllor任意の色を指定すると、トーン表や同... / 配色の見本帳色をクリックすると、どんどん新しい色... / iWantHue簡単操作のカラーパレットジェネレ...他...全8件
色彩学入門
3. 彩度ってなに？ 色の鮮やかさのこと。 上に行くほど彩度が上がる 彩度をゼロに近づけるほど、色がグレーに なります。 Q：何で彩度ゼロにしても、黒にならない の？ A：彩度が有るものには、全て明度がある から。（次で説明します。） 下に行くほど彩度が下がる
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
【長文注意】kulerを使った誰にでもできそうなWeb配色 | フォルトゥナ ブログ
色ってそんなにセンスは関係ないですよ 「色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ」という記事があったので、思うところとかを含めて配色の方法についてまとめてみました。私の方ではもう少し具体的な配色の方法についてもまとめたいと思います。 いつもWebカラーセミナーで話すのは、配色に関する問題の8割は知識で解決するということです。「色彩のセンスがない」という人はそもそもその勉強をしたことがないという人が多く、勉強したことのある人は「色は難しい」と仰います。逆に数十年グラフィックデザインをやっていても、Webの配色としてはまったくできていないということも多々あります。これはセンスではなくWebでのセオリーがわかっていないということになります。 センスと知識や学習していないことを同列に扱うのはおかしいですね。 デザイナーで色の勉強をまったくしたことがないという人はやや問題がある
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
売れるサイトやLP構築のために絶対抑えておくべき色彩心理学の基礎
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページのデザインにおいて、サイトの色彩は非常に大きな要素だ。 例えば、見込み客の嗜好やブランドイメージと合わない色をメインカラーにすると、それだけでコンバージョンは大幅に下がる。 少し想像してみて欲しい。例えば、このブログの背景が黒一色で、あなたが今読んでいるこの文字がまっ黄色だったらどう思うだろうか？どれだけ役に立つことが書いてあっても、何となく嫌悪感を感じるはずだ。 また、例えば、Amazonのサイト内の購入ボタンが真っ黒だとしたらどうだろうか？購入意欲が下がることは間違いないだろう。 ここまで極端ではないにしろ、ランディングページやサイトの色彩の選択を間違えると、コンバージョンが下がるということは実感して頂けたと思う。
配色で見るWEBデザイン-イエロー編 | Qrious Lab.
WEBサイトの印象は、キーカラーによって大きく変わる。世界のWEBサイトをカラー別に集めてみたいと思う。その第四回目は「イエロー：黄色」。黄色は知性を意味する色で人に喜びを与える色。心を弾ませ、楽しい気分にさせてくれるカラー。集中力や判断力、記憶力を高めるたり、一般的には注意喚起をうながす色としても利用されている。視認性があまり良くないレモンのような明るいものから、オレンジに近いものまで幅広く、背景色としてもよく使われているイメージがある。
同色系でまとまりのある配色、WebデザインにするためのTips
いろいろな色相を使わずに、ひとつの色相の彩度違い、明度違いなどでデザインしていく同系色デザイン。 多くの色相を使わない同色系デザインは、たくさんの Webサイトでも使われている人気の配色です。 同色系でデザインしていくと、ページの統一感がでて色の持つ力を印象付け易いというメリットがあるだけでなく、初心者でも比較的まとめやすい ... という作り手側のメリットもありますね！ 同色系でまとめられたデザインは、ページに統一感があって、よくまとまって見えますよね。そして色の持つメッセージを、強く印象付けるのにとっても効果的だと思います。いろいろな色相を使ったデザインに比べて、比較的まとめ易いし、色的な効果を発揮しやすい同色系デザイン。同色系は簡単 … というか、カラフルデザインに比べれば簡単かもですけど、配色における基本的なポイントは、他の配色方法にも通じています。今日は基本的なところを押さえなが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ノンデザイナーのための配色理論