タグ: 色彩

Webで使えるカラーネームと、そのカラーコード・RGB値一覧

Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色の名前からカラーコードやRGB値を知りたいということが時々あったので、一覧にまとめました。新たに加わった「rebeccapurple」も一覧に入れていますよ。
続きを読む

配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ

配色って奥が深いです。「この色いいな!」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました!
続きを読む

Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ

Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください!Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」に書いています ;)
続きを読む

PANTONEが選ぶ2017年の色「Greenery」を使った配色例

PANTONEはアメリカ、ニュージャージー州に本社がある色見本帳の販売や色に関わるさまざまなサービスを提供している会社。Webデザイン、プロダクトデザイン、ファッションデザインなど、多くの業界に影響を与え続けています。PANTONEはこの時期になると毎年「来年の色」を発表しており、2017年の色は爽やかな緑色の「Greenery」に決まりました。今回はその「Greenery」に注目してみたいと思います。
続きを読む

デザインは第一印象が大切!5秒でできる3つのデザインチェック方法

人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう!
続きを読む

印象的なビビッドカラーのWebサイトまとめ

パッと見ただけで印象に残りやすいビビッドカラー。扱い方を間違えると、ただうるさく、ゴチャゴチャして見えるだけになってしまいます。今回はそんなビビッドカラーをうまく使っているWebサイトをいくつかまとめてみました。ビビッドカラーとのうまい付き合い方も合わせて読んでみてください!
続きを読む

Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ

以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。
続きを読む