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

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

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

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

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

Atomic Design

デザインシステム

CSS設計

現在のWeb開発の現場においては、「コンポーネント」という単位にUIを分割し、それを組み合わせて開発を行う「コンポーネント・ベースのUI開発」が主流となっており、その「コンポーネント」をどのように設計するかという知識が必須になっています。その「コンポーネント設計」の基本的な考え方のフレームワークが「Atomic Design」です。コンポーネント設計とあわせて重要なのが「CSS設計」です。行き当たりばったりのCSS実装では、保守性や汎用性のないCSSになりがちです。コンポーネントの考え方を学んだら、CSSの設計手法も学んで、保守性と汎用性の高いコンポーネントの実装方法を身につけましょう。このようにして作成したコンポーネントとデザインのルールをまとめて管理するのが、「デザインシステム」です。作成したコンポーネントの活用のために、デザインシステムの考え方と作り方、運用などについて学びましょう。HTML、CSS、JavaScriptの基礎を学んだだけでは、実務で使える技術とは言えません。これらの言語の文法を知っているのは当たり前のことで、実務レベルでは設計の知識も必須になってきます。コンポーネント設計の知識と技術を身につけて、実務で活躍できるエンジニアになりましょう！