Atomic Designで考えるコンポーネント設計とCSS設計

HTML、CSS、JavaScript、Reactの基礎を学んで、次のレベルへのステップアップとして「設計」に興味を持っている学習者の方向けのコースです。

「設計」と一口に言ってもさまざまなレイヤーがあります。
ビジネスレベルの設計から、アプリケーション設計、フロントエンド、バックエンド、データベース、インフラ……
この講座ではその中でも、フロントエンド実装の分野における設計を学んでいきます。

この講座で取り上げるトピックは大きく以下の3つです。

• Atomic Design

• デザインシステム

• CSS設計

  
  

現在のWeb開発の現場においては、「コンポーネント」という単位にUIを分割し、それを組み合わせて開発を行う「コンポーネント・ベースのUI開発」が主流となっており、その「コンポーネント」をどのように設計するかという知識が必須になっています。
その「コンポーネント設計」の基本的な考え方のフレームワークが「Atomic Design」です。

コンポーネント設計とあわせて重要なのが「CSS設計」です。
行き当たりばったりのCSS実装では、保守性や汎用性のないCSSになりがちです。
コンポーネントの考え方を学んだら、CSSの設計手法も学んで、保守性と汎用性の高いコンポーネントの実装方法を身につけましょう。

このようにして作成したコンポーネントとデザインのルールをまとめて管理するのが、「デザインシステム」です。
作成したコンポーネントの活用のために、デザインシステムの考え方と作り方、運用などについて学びましょう。

HTML、CSS、JavaScriptの基礎を学んだだけでは、実務で使える技術とは言えません。
これらの言語の文法を知っているのは当たり前のことで、実務レベルでは設計の知識も必須になってきます。
コンポーネント設計の知識と技術を身につけて、実務で活躍できるエンジニアになりましょう！