CSS用語集とは？主要用語を体系的に理解する

CSSは、Webページの見た目を整えるための言語として説明されることが多いですが、実際には単なる装飾のためだけに使うものではありません。CSSは、文字色や背景色を変えるだけでなく、レイアウト、余白、表示順、重なり、アニメーション、レスポンシブ対応、操作状態、テーマ設計、アクセシビリティまで幅広く制御します。HTMLがページの構造を作るものだとすれば、CSSはその構造をユーザーにとって見やすく、分かりやすく、操作しやすい形へ整えるための設計言語です。

ただし、CSSには専門用語が多く、断片的に覚えるだけでは理解が崩れやすいという特徴があります。たとえば、selector、property、box model、specificity、cascade、z-index、media query、custom properties などは、それぞれ別の用語に見えますが、実際のUI制作では互いに強く関係しています。セレクタが分からなければ、どこにスタイルが当たるのか分かりません。詳細度やカスケードが分からなければ、なぜスタイルが上書きされるのかを説明できません。ボックスモデルやレイアウトを理解していなければ、余白のズレや画面崩れを正しく直すことも難しくなります。

そのため、CSS用語はカテゴリごとに整理して理解することが重要です。基本構文、セレクタ、カスケード、ボックスモデル、単位、レイアウト、ポジション、タイポグラフィ、カラー、状態、アニメーション、レスポンシブ、CSS変数、アクセシビリティ、保守設計のように分けて学ぶと、CSS全体の構造が見えやすくなります。ここでは、主要なCSS用語をグロッサリー形式で整理しながら、それぞれの用語が実際のUI設計でどのような意味を持つのかを解説します。

1. 基本構文（Basic Syntax）

CSSの基本構文は、すべてのスタイル指定の土台になります。どれだけ複雑なレイアウトやアニメーションを作る場合でも、CSSは基本的に「どの要素に」「どのスタイル項目を」「どの値で」適用するかを指定する仕組みで成り立っています。この構造を理解しておくと、CSSを読むときに迷いにくくなり、エラーや意図しないスタイル適用の原因も見つけやすくなります。

基本構文では、Selector、Property、Value、Declaration、Rule、Stylesheet といった用語を押さえる必要があります。これらはCSSの最小単位を説明する言葉であり、後から学ぶレイアウト、アニメーション、レスポンシブ、テーマ設計も、この構文の組み合わせとして理解できます。

たとえば、.button { color: white; background-color: blue; } というCSSでは、.button がセレクタ、color や background-color がプロパティ、white や blue が値です。そして、color: white; のような1行が宣言になります。このように分解して見ると、CSSは単なる文字列ではなく、対象と変更内容を明確に指定するルールの集合であることが分かります。

プログラミング言語：CSS

ファイル名：basic-syntax.css

.button {  color: white;  background-color: blue;  padding: 12px 16px; }

この例では、.button というクラスを持つ要素に対して、文字色、背景色、内側余白を指定しています。基本構文を正しく理解しておくと、CSSを読むときに「どの要素に何が適用されているのか」を順番に追えるようになります。これは、CSS学習だけでなく、既存プロジェクトのスタイル修正やデバッグでも非常に重要です。

2. セレクタ（Selectors）

セレクタは、CSSで「どのHTML要素にスタイルを適用するか」を決める部分です。同じプロパティと値を書いていても、セレクタの指定が違えば、適用される対象も変わります。そのため、セレクタの理解が曖昧だと、意図しない場所にスタイルが当たったり、指定したはずのスタイルが反映されなかったりします。

実務ではクラスセレクタを中心に使うことが多いですが、IDセレクタ、要素セレクタ、属性セレクタ、擬似クラス、擬似要素も状況に応じて使われます。セレクタはCSS設計の入口であり、命名規則、コンポーネント設計、詳細度の管理とも深く関係します。

クラスセレクタは再利用しやすく、CSS設計で最も扱いやすい指定方法の一つです。たとえば、.button や .card のようにUI部品単位でクラス名を付けると、HTML構造に強く依存しすぎずにスタイルを管理できます。一方、IDセレクタは詳細度が高く、あとから上書きしにくくなるため、大規模なCSS設計では慎重に使う必要があります。

擬似クラスと擬似要素は、インタラクションや装飾に欠かせない用語です。:hover はマウスが乗った状態、:focus はキーボード操作などで選択されている状態を表します。::before や ::after は、HTMLには存在しない装飾用の要素をCSS側で作るために使われます。セレクタは単に対象を指定するだけでなく、UIの状態や装飾を制御するための重要な仕組みです。

3. カスケード・継承・詳細度（Cascade, Inheritance & Specificity）

CSSを理解するうえで、カスケード、継承、詳細度は非常に重要です。CSSでは、複数のルールが同じ要素に対して同時に適用されることがあります。そのとき、どのスタイルが最終的に有効になるのかを決める仕組みがカスケードです。CSSが「Cascading Style Sheets」と呼ばれる理由も、この仕組みにあります。

スタイルが効かない、なぜか別の色になる、上書きしたはずなのに反映されない、という問題の多くは、このカスケードと詳細度の理解不足から起こります。CSSを感覚で書くのではなく、どのルールが勝つのかを構造的に判断できるようになると、デバッグの精度が大きく上がります。

詳細度は、セレクタの強さを表します。一般的に、要素セレクタよりクラスセレクタの方が強く、クラスセレクタよりIDセレクタの方が強くなります。たとえば、button より .button の方が優先されやすく、.button より #submitButton の方がさらに強くなります。ただし、強いセレクタを多用すると、あとから上書きしにくいCSSになってしまいます。

継承は、親要素のスタイルが子要素に引き継がれる仕組みです。たとえば、color や font-family は継承されやすいプロパティですが、margin や padding は基本的に継承されません。この違いを理解していないと、文字色は子要素にも反映されるのに、余白は反映されないといった挙動に戸惑いやすくなります。CSSでは、何が継承され、何が継承されないのかを意識することが大切です。

4. ボックスモデル（Box Model）

ボックスモデルは、CSSレイアウトを理解するうえで最も重要な概念の一つです。HTML要素は、画面上では基本的に四角いボックスとして扱われます。そのボックスは、内側から順に Content、Padding、Border、Margin という領域で構成されています。これを理解していないと、要素のサイズが思ったより大きくなったり、余白が意図しない場所に発生したりします。

UIのズレやレイアウト崩れの多くは、ボックスモデルの理解不足から起こります。特に、width に指定したサイズがコンテンツ部分だけを指すのか、PaddingやBorderを含むのかは、box-sizing によって変わります。実務では、box-sizing: border-box; を使ってサイズ計算を分かりやすくすることがよくあります。

Contentは要素の中身そのものを表し、Paddingは中身とBorderの間に余裕を作ります。Borderは要素の境界を示し、Marginは他の要素との距離を作ります。たとえば、カードUIを作る場合、カード内の文字と枠の距離はPaddingで調整し、カード同士の距離はMarginで調整します。この違いを理解していないと、内側の余白を増やしたいのに外側の余白を増やしてしまうようなミスが起こります。

box-sizing はサイズ計算に大きく関係します。初期値の content-box では、width はContent部分だけを指し、PaddingやBorderは別で加算されます。一方、border-box では、PaddingとBorderを含めた全体サイズとして width が計算されます。大規模なUIでは、border-box を基本にすると、要素の幅を管理しやすくなり、レイアウトのズレを減らしやすくなります。

5. 単位とサイズ（Units & Sizing）

CSSでは、サイズや余白を指定するためにさまざまな単位を使います。px のような固定単位だけでなく、%、em、rem、vw、vh、fr など、画面サイズや親要素、文字サイズに応じて変化する単位もあります。単位の選び方は、レスポンシブ対応や保守性に大きく影響します。

初心者は px だけで指定しがちですが、すべてを固定値にすると、画面幅が変わったときにレイアウトが崩れやすくなります。逆に、相対単位を理解して使えるようになると、柔軟で拡張しやすいUIを作りやすくなります。

px は分かりやすく、アイコンサイズや細かいBorderの指定に向いています。ただし、文字サイズや余白をすべて px で固定すると、ユーザーの設定や画面サイズに柔軟に対応しにくくなります。本文サイズや全体の余白には rem を使うと、ルートの文字サイズを基準に全体を調整しやすくなります。

clamp() は、近年のレスポンシブなサイズ設計で便利な関数です。たとえば、見出しの文字サイズを「小さすぎず、大きすぎず、画面幅に応じて自然に変化させる」ことができます。レスポンシブ対応では、単にMedia Queryで切り替えるだけでなく、相対単位やCSS関数を組み合わせることで、より自然なサイズ変化を作れます。

6. レイアウト（Layout）

レイアウトは、CSSの中でもUI設計に直結する領域です。要素を縦に並べるのか、横に並べるのか、均等に配置するのか、画面サイズに応じて折り返すのかといった配置ルールを決めます。CSSのレイアウトを理解するには、display、Flexbox、Grid、Overflow、Gap などの用語を整理しておく必要があります。

現在のUI制作では、FlexboxとGridの理解が特に重要です。Flexboxは一次元レイアウト、つまり横方向または縦方向の配置に強く、ナビゲーション、ボタン並び、カードの横並びなどに向いています。Gridは二次元レイアウト、つまり行と列を同時に扱う構造に強く、ダッシュボード、ギャラリー、複雑なページレイアウトに向いています。

display は、要素の表示形式を決める基本プロパティです。block は縦に積まれる要素、inline は文章中に並ぶ要素、flex はFlexboxレイアウト、grid はGridレイアウトを有効にします。レイアウトが思い通りにならない場合、まずその要素がどの display で扱われているかを確認することが重要です。

FlexboxとGridは使い分けが大切です。ナビゲーションのように横一列に要素を並べたい場合はFlexboxが向いています。一方、カード一覧を複数列で並べたり、ページ全体をヘッダー、サイドバー、メイン、フッターに分けたりする場合はGridが向いています。レイアウト用語を理解しておくと、場当たり的に余白や位置を調整するのではなく、構造としてUIを組み立てられるようになります。

7. ポジションと重なり（Positioning & Layer）

ポジションと重なりは、要素を通常の流れからどのように動かすか、どの要素を前面に表示するかを制御する領域です。CSSでは、通常のレイアウトの流れに従って要素が配置されますが、モーダル、ドロップダウン、固定ヘッダー、ツールチップ、フローティングボタンなどでは、通常の流れとは違う配置が必要になります。

このときに使われるのが、position と z-index です。ただし、これらは便利な反面、理解が浅いまま使うとバグの原因になります。特に z-index は、数値を大きくすれば必ず前面に出るという単純な仕組みではなく、スタッキングコンテキストの影響を受けます。

relative は、要素の元の位置を基準に少し動かしたい場合や、子要素の absolute 配置の基準にしたい場合によく使われます。absolute は、親要素を基準に自由な位置へ配置するために使われ、バッジ、アイコン、ドロップダウンなどで使われます。fixed は画面に固定するため、固定ヘッダーやチャットボタンなどに向いています。

z-index は重なり順を決めるために使われますが、親要素が新しいスタッキングコンテキストを作っている場合、単純に数値を上げても期待通りに前面へ出ないことがあります。モーダルがヘッダーの後ろに隠れる、ツールチップがカードの下に潜るといった問題は、この理解不足から起こりやすいです。大規模UIでは、z-indexの値をトークン化して、モーダル、ドロップダウン、ヘッダー、通知などの階層を整理しておくと安全です。

8. タイポグラフィ（Typography）

タイポグラフィは、文字の見た目と読みやすさを設計する領域です。CSSでは、フォントの種類、サイズ、行間、文字間隔、配置、装飾などを指定できます。Web UIでは文字情報が非常に多いため、タイポグラフィの品質はそのままUXに影響します。文字が読みにくいUIは、どれだけレイアウトが整っていても使いにくくなります。

タイポグラフィは単なるデザインの好みではありません。見出しと本文の違い、補足情報の弱め方、ボタンラベルの読みやすさ、長文の行間、モバイルでの可読性など、情報理解を支える設計要素です。特に日本語UIでは、文字が詰まりすぎると読みづらくなるため、行間や余白の設計が重要になります。

font-family は、Webサイト全体の印象を大きく左右します。日本語フォントでは、ゴシック体は読みやすく現代的な印象を与え、明朝体は上品で文章的な印象を与えます。ただし、フォントは環境によって表示が変わることがあるため、フォールバック指定も重要です。指定したフォントが読み込めない場合に、代わりにどのフォントを使うかを考えておく必要があります。

line-height は、長文の読みやすさに特に影響します。行間が狭すぎると文字が詰まって見え、長い文章を読むと疲れやすくなります。逆に広すぎると、文章のまとまりが弱くなります。UIでは、見出し、本文、ラベル、補足文、ボタンテキストなど、用途ごとに適切なタイポグラフィルールを設計することが大切です。

9. カラーと背景（Color & Background）

カラーは、UIの印象と情報伝達の両方に関係する重要な要素です。CSSでは、文字色、背景色、透明度、グラデーション、RGBA、HEXカラーなどを使って色を指定します。色は見た目を美しくするだけでなく、状態、優先度、警告、成功、ブランドイメージを伝える役割も持っています。

色設計で重要なのは、単に好きな色を使うことではなく、意味を持たせることです。たとえば、エラーは赤、成功は緑、主要操作はブランドカラー、補足情報はグレーのように役割を決めると、ユーザーが画面の状態を理解しやすくなります。また、可読性を保つためには、文字色と背景色のコントラストも重要です。

color と background-color は最も基本的な色指定です。文字色と背景色の組み合わせが悪いと、文字が読みにくくなります。特に薄いグレー文字や淡い背景色は、見た目が柔らかくても可読性が下がる場合があります。UIでは、装飾としての色と、情報を伝える色を分けて考えることが大切です。

opacity は透明度を指定しますが、要素全体に影響する点に注意が必要です。文字も背景もまとめて薄くなるため、可読性が下がることがあります。背景だけを透過したい場合は、rgba() や hsla() を使う方が適切です。グラデーションは視覚的な印象を強める表現ですが、使いすぎると情報が読みづらくなるため、背景やアクセントとして控えめに使うのが基本です。

10. 状態とインタラクション（State & Interaction）

状態とインタラクションは、ユーザー操作に応じてUIがどのように変化するかを表す領域です。ボタンにマウスを乗せたとき、押しているとき、入力欄が選択されているとき、チェックボックスがONになっているとき、リンクを訪問済みにしたときなど、UIには多くの状態があります。これらをCSSで表現することで、ユーザーは操作結果を理解しやすくなります。

状態表現が不足しているUIでは、ユーザーは操作できるのか、選択されているのか、無効なのかを判断しにくくなります。特にアクセシビリティでは、focus状態の表現が非常に重要です。キーボード操作を行うユーザーにとって、どの要素が現在選択されているかが見えないUIは使いにくくなります。

:hover は、ユーザーに「この要素は操作できる」と伝えるために役立ちます。ボタンの色が変わったり、リンクに下線が出たりすることで、クリック可能な要素であることが分かりやすくなります。:active は押下中の状態を表し、ボタンが押された感覚を補強できます。こうした小さな変化は、操作性とフィードバックの品質に関係します。

:focus と :focus-visible は特に重要です。マウスではなくキーボードで操作する場合、focus表示がないと現在どこを操作しているのか分からなくなります。デザイン上の理由でfocus outlineを消してしまう実装は避けるべきです。必要であれば、デザインに合わせたfocus styleを別途定義し、アクセシビリティを保つことが重要です。状態とインタラクションは、UIを静的な見た目から、操作できる体験へ変えるためのCSS用語群です。

11. アニメーションとトランジション（Animation & Transition）

アニメーションは、UIの状態変化を分かりやすくし、操作へのフィードバックを強化するために使われます。たとえば、ボタンを押したときに少し変化する、モーダルが滑らかに表示される、メニューが展開される、通知がフェードインするなどの動きは、ユーザーに「何が起きたか」を伝える役割を持っています。

ただし、アニメーションは使い方を間違えると、逆にユーザー体験を悪くします。動きが遅すぎると操作を待たされているように感じ、動きが多すぎると画面が騒がしくなります。CSSアニメーションでは、transition、animation、keyframes、duration、easing、delay といった用語を理解し、目的に応じて使い分けることが大切です。

transition は、hoverやfocusなどの状態変化を滑らかに見せるときによく使います。たとえば、ボタンにマウスを乗せたときに背景色をゆっくり変えるような表現です。一方、animation と keyframes は、より複雑な動きを作るために使います。ローディングスピナーや繰り返し動く装飾などでは、keyframesを使って動きの段階を定義します。

duration と easing は、アニメーションの印象を大きく変えます。同じ移動でも、直線的に動くのか、ゆっくり始まって速くなるのか、速く始まってゆっくり止まるのかで、自然さが変わります。UIアニメーションでは、ユーザーの操作を妨げない短い時間と、自然なeasingを使うことが重要です。アニメーションは装飾ではなく、状態変化を理解しやすくするための設計要素として使うべきです。

12. レスポンシブ（Responsive Design）

レスポンシブは、画面サイズやデバイスに応じてUIを適切に変化させる設計です。PC、タブレット、スマートフォンでは、画面幅だけでなく、操作方法やユーザーの利用状況も異なります。PCではマウスとキーボード、スマートフォンではタップとスクロールが中心になるため、同じデザインをそのまま縮小するだけでは使いやすいUIにはなりません。

CSSでは、Media Query、Breakpoint、Mobile-first、Desktop-first、Fluid Layout、Viewportといった概念がレスポンシブ設計に関係します。これらを理解すると、画面幅に応じてレイアウトを切り替えたり、余白や文字サイズを調整したりできるようになります。

Media Query は、レスポンシブ対応の中心になる仕組みです。たとえば、画面幅が768px以上なら2カラムにし、それ以下なら1カラムにするような指定ができます。Breakpoint は、その切り替え点を意味します。ただし、ブレークポイントはデバイス名だけで決めるのではなく、レイアウトが崩れ始める幅を基準に決める方が実用的です。

Mobile-first は、小さい画面を基準にCSSを書き、大きい画面向けに拡張していく考え方です。現在のWebではスマートフォン利用が多いため、モバイルでの見やすさや操作性を先に考えることが重要です。一方、業務システムや管理画面のようにPC利用が中心の場合は、Desktop-firstの方が設計しやすいこともあります。レスポンシブ設計では、画面幅だけでなく、利用シーンと操作方法も含めて考える必要があります。

13. CSS変数とテーマ設計（CSS Variables & Theme）

CSS変数は、色、余白、フォントサイズ、角丸、影などの値を再利用しやすくするための仕組みです。正式にはCustom Propertiesと呼ばれ、--color-primary や --space-md のような名前で値を定義し、var() を使って呼び出します。これにより、同じ値を何度も直接書く必要がなくなり、テーマ変更やデザイン調整がしやすくなります。

テーマ設計では、CSS変数が非常に役立ちます。たとえば、ライトモードとダークモードで背景色や文字色を切り替えたい場合、各コンポーネントに直接色を書くのではなく、テーマ用の変数を切り替える方が安全です。これにより、UI全体の一貫性を保ちながら、変更にも強いCSSを作ることができます。

CSS変数を使うと、プロジェクト全体の変更に強くなります。たとえば、ブランドカラーを変更する場合、すべてのボタンやリンクを一つずつ修正するのではなく、--color-primary の値だけを変更すれば済みます。これは小さなサイトだけでなく、大規模なアプリケーションやデザインシステムでも非常に重要です。

また、変数名は単なる色名ではなく、役割で付けると管理しやすくなります。たとえば、--blue-500 のような具体的な色名だけでなく、--color-primary、--color-danger、--color-surface のように意味を持たせると、UI上でその色が何のために使われるのかが分かりやすくなります。CSS変数は、見た目の効率化だけでなく、CSS設計そのものを整理するための重要な用語です。

14. アクセシビリティ関連CSS（Accessibility）

アクセシビリティは、できるだけ多くのユーザーがWebサイトやアプリを利用できるようにするための考え方です。CSSは見た目を作るものですが、その指定によって読みやすさ、操作しやすさ、情報の理解しやすさが大きく変わります。文字のコントラスト、focus表示、余白、アニメーションの量、フォームの状態表現などは、アクセシビリティと深く関係しています。

特に注意したいのは、デザイン上の理由で重要な視覚情報を消してしまうことです。たとえば、focus outlineを消す、文字色を薄くしすぎる、アニメーションを過剰に使う、フォームエラーを色だけで表現する、といった実装は、ユーザーによっては大きな使いにくさにつながります。

CSSでは、見た目を整えながら、操作状態を分かりやすく保つ必要があります。たとえば、:focus-visible を使えば、キーボード操作時に適切なfocus表示を出しつつ、マウス操作時の見た目を過度に邪魔しない調整ができます。これはデザイン性とアクセシビリティを両立するために有効です。

また、prefers-reduced-motion を使うと、ユーザーがOS側で「動きを減らす」設定にしている場合に、CSSアニメーションを弱めることができます。アニメーションはUI理解を助ける一方で、人によっては負担になることもあります。CSSでアクセシビリティを考えるということは、単に規則を守ることではなく、さまざまな状況のユーザーにとって使いやすいUIを作ることです。

15. CSS設計と保守性（CSS Architecture & Maintainability）

CSSは小規模なページでは簡単に書けますが、プロジェクトが大きくなるほど管理が難しくなります。似たようなクラスが増える、どこで上書きされているか分からない、同じ色や余白が何度も書かれる、不要なCSSが残る、といった問題は、大規模なWeb制作やアプリ開発でよく起こります。

そのため、CSSには設計と保守性の考え方が必要です。命名規則、ファイル分割、コンポーネント単位の管理、デザイントークン、ユーティリティクラス、リセットCSS、レイヤー設計などを理解しておくと、後から変更しやすいCSSを作りやすくなります。

命名規則は、CSSの読みやすさに直結します。たとえば、.box1 や .red-button のような名前は、その場では分かりやすくても、後から意味が分かりにくくなる場合があります。一方、.product-card、.primary-button、.nav-item のように役割を表す名前を付けると、HTMLを読んだだけでUIの構造を理解しやすくなります。

CSS設計では、役割ごとにスタイルを分けることも重要です。リセット、トークン、レイアウト、コンポーネント、ユーティリティ、ページ固有スタイルのように分けると、どこに何を書くべきかが明確になります。CSSは自由に書ける分、ルールがないと崩れやすい言語です。保守性を考えたCSS設計は、デザインの一貫性だけでなく、開発効率やバグの減少にもつながります。

16. パフォーマンスと描画（Performance & Rendering）

CSSは見た目を決めるだけでなく、ブラウザの描画パフォーマンスにも影響します。重いアニメーション、過剰な影、複雑なセレクタ、大量の未使用CSS、頻繁にレイアウトを再計算させる指定などは、画面のカクつきや読み込みの遅さにつながることがあります。

UIが重く感じられる場合、JavaScriptだけが原因とは限りません。CSSの指定によって、ブラウザがレイアウト、ペイント、合成を何度も行うことがあります。特にアニメーションでは、top や left を頻繁に動かすよりも、transform を使った方が滑らかに動きやすい場面があります。

CSSパフォーマンスでは、何を変化させるかが重要です。たとえば、アニメーションで width や height を頻繁に変えると、周囲のレイアウトにも影響し、リフローが発生しやすくなります。一方、transform や opacity は比較的効率よく処理されやすいため、移動やフェード表現でよく使われます。

また、未使用CSSが多いと、ファイルサイズが大きくなり、初期読み込みが遅くなることがあります。特に長期運用されるサイトでは、過去のコンポーネント用CSSが残り続けることがあります。CSSのパフォーマンス改善は、単に速くするためだけでなく、保守しやすく、ユーザーにストレスを与えないUIを作るための重要な視点です。

おわりに

CSSは、単なる装飾のための言語ではありません。HTMLで作られた構造に対して、見た目、レイアウト、余白、文字、色、重なり、状態、アニメーション、レスポンシブ対応、テーマ、アクセシビリティ、保守性を与えるための設計言語です。基本構文、セレクタ、カスケード、ボックスモデル、レイアウト、ポジション、タイポグラフィ、カラー、状態、アニメーション、レスポンシブ、CSS変数、CSS設計をカテゴリごとに理解すると、CSSを断片的な知識ではなく、UI設計の体系として扱えるようになります。

CSS用語を体系的に理解することは、スタイルの書き方を覚えるだけでなく、問題解決にも役立ちます。レイアウトが崩れたときはボックスモデルやdisplayを確認し、重なりがうまくいかないときはpositionやz-indexを確認し、スタイルが反映されないときはカスケードや詳細度を確認し、操作感が弱いときはhover、focus、activeなどの状態表現を見直します。用語の意味が分かると、CSSのトラブルを感覚ではなく構造で分析できるようになります。

CSSを学ぶときは、個別のプロパティを丸暗記するよりも、どのカテゴリに属する用語なのか、どのようなUI問題を解決するために使うのかを意識することが大切です。CSSを体系的に理解できるようになると、単に見た目を整えるだけでなく、保守しやすく、拡張しやすく、ユーザーにとって分かりやすいUIを設計できるようになります。