デザイン・UI関連

色をどの方式で表現するかを示す考え方です。

WebではRGB、印刷ではCMYKがよく使われます。

媒体ごとの色の見え方を考えるときに確認します。

赤、緑、青の光を組み合わせて色を表す方式です。

Webサイトやディスプレイ表示で使われます。

CSSの色指定でも基本になるカラーモードです。

シアン、マゼンタ、イエロー、ブラックで色を表す方式です。

主に印刷物で使われます。

Webサイトの色とは見え方が変わることがあります。

#1e2024のように16進数で色を指定する方法です。

CSSやデザインツールでよく使われます。

Webサイトの配色を固定して管理しやすくなります。

Webサイト上の色を指定するための値です。

HEX、rgb()、rgba()などがあります。

感覚ではなく、同じ色を再現するために使います。

背景と文字、要素同士の明るさや濃さの差です。

差が不足すると文字が読みにくくなります。

可読性やアクセシビリティに関係します。

画面全体で色の面積、濃さ、強さをどう配分するかという考え方です。

背景、本文、リンク、罫線、カード、表などの関係で判断します。

単体では良い色でも、サイト全体から浮く場合があります。

色味や明るさを調整して、全体の雰囲気をそろえる作業です。

写真や映像で使われることが多い言葉です。

Webサイトでも、画像やUI部品の温度感をそろえる考え方として使えます。

画面で最も広い面積を占める色です。

背景色やサイト全体の基調色として使われます。

サイトの第一印象を左右します。

ブランドや画面の中心になる色です。

見出し、重要なUI、カテゴリ色などに使われます。

ベースカラーとの相性が重要です。

一部を目立たせるために使う色です。

ボタン、リンク、注意表示、強調線などに使われます。

使いすぎると画面全体が散らかります。

赤、青、黄などの色味の種類です。

配色の方向性を決めるときに使います。

色相がずれると、画面の印象も大きく変わります。

色の明るさです。

白に近いほど明度が高く、黒に近いほど低くなります。

文字の読みやすさや画面の軽さに影響します。

色の鮮やかさです。

彩度が高いほど強く目立ち、低いほど落ち着いて見えます。

コラムサイトでは彩度を抑えた方が読みやすい場合があります。

色の明度と彩度を合わせた調子です。

明るい、落ち着いた、重い、柔らかいなどの印象に関係します。

サイト全体の雰囲気をそろえるときに使います。

User Interfaceの略です。

ボタン、リンク、ナビゲーション、入力欄など、ユーザーが触れる画面要素を指します。

見た目だけでなく、操作しやすさにも関係します。

User Experienceの略です。

ユーザーがサイトを使う中で感じる体験全体を指します。

読みやすさ、探しやすさ、迷いにくさも含まれます。

要素と要素の間にある空きスペースです。

情報のまとまりや読みやすさを作ります。

広すぎても狭すぎても見づらくなります。

見出し、本文、補足、リンクなどの重要度を見た目で分けることです。

文字サイズ、太さ、色、余白で作ります。

読む順番を自然に伝えるために使います。

文章や画面の読みやすさです。

文字サイズ、行間、コントラスト、余白が関係します。

記事ページや用語集では特に重要です。

できるだけ多くの人が利用しやすいようにする考え方です。

文字の読みやすさ、色のコントラスト、キーボード操作などが関係します。

Webサイトの品質確認でも重要になります。

マウスカーソルを要素に重ねた状態です。

リンクやボタンの反応を見せるために使われます。

スマホではhoverが前提にならない点に注意が必要です。

ユーザーがクリックまたはタップできる範囲です。

文字だけでなくカード全体を押せるようにする設計もあります。

小さすぎると操作しにくくなります。

情報をカード状のまとまりとして表示するUIです。

記事一覧、関連記事、商品一覧などで使われます。

角丸、影、余白、クリック範囲の設計が関係します。

画面サイズに合わせてレイアウトを調整する設計です。

スマホ、タブレット、PCで見やすくするために使います。

Webサイトでは実機やブラウザ幅での確認が重要です。