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

Description

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

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

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

• Atomic Design

• デザインシステム

• CSS設計

  
  

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

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

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

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

What You Will Learn!

• Atomic Design によるコンポーネント設計
• さまざまなCSS設計とその方法
• スタイルガイドとデザインシステムの概要と作成、運用の方法
• UIコンポーネントの実装方法

Who Should Attend!

• HTML、CSSの基礎知識を学習済で、中級レベルの知識を得たいフロントエンジニア
• Atomic Design やコンポーネント設計に興味のあるフロントエンドエンジニアとWebデザイナー
• スタイルガイドやデザインシステムについての知識を得たいフロントエンドエンジニアとWebデザイナー

TAKE THIS COURSE