12周年記念パーティ開催! 2024/5/10(金) 19:00

色の決め方、配色の考え方

全4回

WebサイトやWebアプリケーションにおいて色というのは、さまざまな役割を持ちます。このシリーズでは、「色」をさまざまな視点から観察し、実例を通してその役割を考えます。

第4回 HSLカラーピッカーを使う

CSSでの色指定というと、HEX値や色名による指定が思い浮かびますが、より直感的に値の入力ができるHSL値の指定もあります。HSL値による色指定は、描画される色のイメージがつきやすいのが特徴です。

第3回 薄い色の使いこなし

UIデザインをより良くするという視点から、薄い色の使い方ついて解説します。薄い色を上手に使いこなすことができるようになると、閲覧者の認知コストを軽減することが可能になります。

第2回 グラデーションの作り方

CSSでのグラデーション指定は最低2色を指定すれば、自動的に補完してくれますが、色の選び方で濁ったようなグラデーションになることがあります。このような状態を避けるための色選びのコツを伝授します。

第1回 情報伝達を助ける配色

WebサイトやWebアプリケーションで頻出する部品を取り上げて、情報をよりスムーズに伝達するという視点から観察します。今回は、その配色を改善していきましょう。