webデザインに配色!カラーアクセシビリティの重要性
1・ ウェブサイトの色の大事さ
ウェブサイトだけではなく、私たちの生活にも色が大事なものになっています。色によって、様々な情報を伝えることができます。そして、表情、性質、注目を表すこともできます。
色がないウェブサイトを想像してみますと、ただのwordページなのでは?
つまり、色はコミュニケーションの強力な手段であるとともに、アクセシビリティを向上する最高なツールとなります。
しかし、色が多ければいいものとは言えません。デザイナーのセンスによって使う色の数が変わっていきますが、トレンドカラーというものが存在します。
それでは、2021年のトレンドをチェックしましょう!
2・ 2021-2022年のデザイン色トレンド
2021年には2色の組み合わせが多くのデザイナーに愛用されました。
毎年12月ごろにPANTONEから発表されているカラーオブザイヤーですが、2021年は、イエローとグレーの2種類がトレンドカラーとして選ばれたそうです。
その2色は
Ultimate Gray(アルティメット)
カラーコード:#939597
RGB値:147, 149, 151
HSV値:209, 2, 59
CMYK:2, 1, 0, 40
Illuminating(イルミネイティン)
カラーコード:#F5DF4D
RGB値:245, 223, 77
HSV値:52, 69, 96
CMYK:0, 9, 68.6, 3.9
私は、グレートピンクの組み合わせが結構好きですが、やはりグレートイエローもよかったですね!
ちなみに、PANTONEから発表された過去のカラーオブザイヤーは
2020年 Classic Blue(クラシックブルー)#0F4C81
2019年 Living Coral (リビングコーラル)#FA7268
2018年 Ultra Violet (ウルトラヴァイオレット)#5F4B8B
2017年 Greenery (グリーナリー)#88B04B
でした。
3・ 色で印象が残るサイトの例
デザインはもちろん、色の使い方がうまいウェブサイトを何個か拾ってきました。
LAUGHREES | フェリシモ
https://www.felissimo.co.jp/laughrees/
2021 NEW COLLECTION 「EMOTIONAL」 | MAISON CACAO
https://maisoncacao.com/valentine21/
マジックインキ×RAGEBLUE
https://www.dot-st.com/cp/rageblue/magicink/
4・ 色が迷っている人への便利なツール
デザインをするとき、デザイナーの好きな色が使われているや、クライアントからのカラーリクエストなどが多いと思いますが、好きな色がウェブサイトの内容に合わず、色を困っているときがありませんか?
実は、苦手な人が配色えらびに使える無料オンラインツールがたくさんあります!
この記事に3つを紹介したいと思います。
1. Adobe Color CC
iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成したり、PhotoshopやIllustratorなど、他のAdobeサービスと同期して利用できるアプリツールです。
2. ColorDrop
美しい4色のカラーパレットを集めたサイトで、ダークモードを適用することで背景を変更したり、ソートやフィルタリングなどの機能が豊富なツールです。
3. Color Supply
補色や類似色、3色配色などウェブやグラフィックに活用できる効果的な配色を作成できるツールになります。グラデーションやアイコンイラストなどで色の確認ができる点もポイントです!