テキストやボーダーや背景に使うグレーを効果的に、ニュートラルなカラーを使いこなすためのテクニック
Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。 明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。 Light & Dark Color Systems 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 明るいカラーと暗いカラーを使用する準備 明るいカラーと暗いカラーを理解する 明るいカラーと暗いカラーをカラーパレットで使う時の注意点 明るいカラーと暗いカラーを使用する準備 コンポーネントで使用するニュートラルカラー カラーを選ぶ前に大切なのは、すでに使用しているニュートラルなカラーを調べることです。実際に一部のライブラリでは、すでに
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
Webデザインの配色に役立つ！色彩について学べるサービス・ツール12選まとめ｜SUKIMANO
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
カラーのセンスが磨ける！色彩感覚や色覚異常のチェックができるオンラインサイトのまとめ
ゲーム感覚で気楽に、色彩感覚や色覚異常のチェックができる無料オンラインサイトを紹介します。カラーのセンスが磨け、カラーを見極めるスキルがきっとアップします！
色弱のユーザーにもやさしいランディングページのデザイン | POSTD
私がバックエンドでいくつかの新機能を開発している間に、Fannyが我々のホームページの再デザインで非常にいい仕事をしてくれました。それ自体についてはまた別の記事で書くことにするのですが、それまでの合間に、我々のホームページの最初のバージョンに関するひとつの 逸話 をシェアしたいと思います。 Elokenzのホームページ(Ver.1) 私が最初にホームページをデザインしたとき、こういった仕事をどのように行うかという経験が本当に全くありませんでした。私は腕まくりをして、 Bootstrap を使って一からその制作を始めました。そのとき気に留めていたことは、 Oli Gardner が コンバージョンにフォーカスしたデザイン について述べた Unbounceの電子書籍 からのTipsだけでした。 そのため、ホームには気を散らしてしまうような要素を配置しないようにし、コントラストの高い2つのCal
色見本「PANTONE(パントン)」はどのように「色」の世界標準となったのか？ - GIGAZINE
by Tom Page プロのデザイナーは、東洋インキのCOLOR FINDERや、ドイツ・HKSのColour Guideなどの「色見本帳」の色名や色番号をもとにデザインに使う色を指定していますが、色見本帳の中でも世界で広く使われているのが「PANTONE(パントン)」です。ニュースサイトのThe Atlanticがパントンの誕生秘話や、世界標準の色見本となるまでの経緯などを明かしています。 How Pantone Became a Global Authority on Color - The Atlantic http://www.theatlantic.com/entertainment/archive/2015/11/how-pantone-became-a-pop-culture-icon/414043/ パントンの色見本帳「パントン・マッチング・システム」は、長方形の台紙に色
デザインやファッションに取り入れたい2015年のトレンドカラー、春のトレンドカラー16色は落ち着いたパステル！
Pantoneが2015年セレクションしたカラーは、紫みの赤と茶を合わせた「Marsala（マルサラ）」。好みがはっきり分かれそうなカラーですね。 今回はダウンロード素材として、Marsalaを含む2015年 春のトレンドカラー16色をPhotoshop用のスウォッチにして用意しました。 Pantone Color of the Year PANTONE 18-1438 Marsala Marsala（マルサラ）はイタリアのシチリア島西海岸に位置する港湾都市で、有名なのがマルサラワインです。その美しいワインレッドを表現したのが「18-1438 Marsala」だと思われます。ワインは長い時間をかけてじっくり熟成され、深い味わいが生まれます。重厚感があり、表情が非常に豊かなカラーで、その色味は成熟した深みのある雰囲気を演出します。 光沢を加えると艶やかになり、マットにするとオブジェクトの本質
ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
「K=100は濃い灰色！」「リッチブラックはC90% M90% Y30% K100%」で印刷関係者が騒然
概要 ▶ PhotoshopVIPのK=100は黒ではありません？ K=100は濃いグレー？ リッチブラックはC=90, M=90, Y=30, K=100？…疑問に思ったので調べてみました。 K=100は黒ではありません。 Photoshopでやってしまいがちな10個の間違い - PhotoshopVIP 「Photoshopでやってしまいがちな10個の間違い」（PhotoshopVIP）で「K=100は黒ではありません」「K=100は濃い灰色」とあったので印刷関係者が騒然となった（一部）。 名指しはしていないけど、こちらのブログでも K100%は「濃いグレー」か？ 日本に限って言うならはっきりと、「いいえ。違います」 K100%はグレー？？？いいえ、「黒」です。それでもリッチブラックを使うなら… | やもめも とある。（違ったらすみません） 日本と欧米ではブラックのインキの濃度が違う
流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった – オレインブログ
フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。 そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。 ドロップシャドーデザインとは？ ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、 斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン とこのような感じになりますかね。的確な表現かと思います。 ざっくりとどんなものかを検証してみました ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。 ハイ
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
デザイナーだから考える。青色が与える27の効果と7つの活用例
今年のお盆休みは友人と旅行に行ったり、ボルダリングの体験をさせてもらったりしていて、ブログの更新が疎かになっていました。申し訳ありません。今週は月曜日から時差ボケのような感じで、あまりシャッキっとできていないんですが、頑張ってブログを更新して行こうと思います！ 今日は、前回の「デザイナーだから考える。赤色が与える27の効果と6つの活用例」に引き続き「デザイナーだから考える。青色が与える27の効果と7つの活用例」について紹介させていただきます。青を基調としたデザインを考えるときにこの記事が役立てば幸いです。 青色を利用した7つの活用例 まずここでは、青色を取り入れたデザインや製品などを例に、青色が持つ効果やイメージについて紹介させていただきます。 聖母マリアのマントの青は「神秘的な印象与える」 地球上に存在する「物」としての青は、手にとって触れることの難しい色です。例えば世界中で見ることので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://handywebdesign.net/2013/12/slide-share-about-color/
ウェブ・印刷デザイン向け、テーマ別・カラー別の色の組み合わせやカラースキームのまとめ