11/1 ふりかえり

今日やったこと

• 言語化ワーク(30分)

• 教材（40分）

  • 1-5 UIデザインで使うFigmaの機能

  • 2-1ヒューマンインターフェースガイドラインとマテリアルデザインを知ろう

  • 2-2 デザインシステムとデザインの一貫性の重要さを知ろう

言語化ワーク #029

2-2 デザインシステムとデザインの一貫性の重要さを知ろう

アトミックデザイン５つの階層とBEMの違い

• アトミックデザイン (Atomic Design) は、UIをどう構築し、管理していくかという「設計思想」でありメンタルモデル。

• BEM (Block, Element, Modifier) は、CSSのクラス名をどう記述するかという「命名規則」であり実装テクニック。

BEM (Block, Element, Modifier) とは？

BEMは、「どのCSSがどのUIに影響するか」をクラス名から一目でわかるようにし、CSSの詳細度（優先順位）の競合を防ぎ、コンポーネントの再利用性を高めるための「実装上のルール」。

アトミックデザインは「UIコンポーネントの設計図（思想）」であり、 BEMは「その設計図に書かれた部品につける、分かりやすい型番（命名規則）」になる。

所感

今更ながら、チェンソーマンの映画見た。エンディングからの「JANE DOE」が最高だった。一気にロスになる。