再利用できるデザインを作成

CSSモジュール設計講座

デザインパーツを効率よくするアトミックデザインの実装

CSSモジュール講座

Webサイト全体で同じデザインが何度も登場することがあります。これら共通するデザインをパーツで組むことで再利用がしやすくなります。

最小のパーツをモジュール化することでサイトのどのページでも利用することができ効率的です。

CSSのメリットである継承も利用できる考え方で無理のない設計方法を学びます。

CSSモジュール設計の3つのポイント

Point 1

制作時間を短縮することができる

制作時間を短縮することができる

Webサイトには共有のパーツが存在します。共有パーツの部分をモジュール化されたCSSで実装するため制作時間を短縮することができます。

タイトルなどはそのサイトのデザインの特色を出すことができ、CSSの継承を効果的に使います。このようにサイトごとに共通パーツを組むモジュールと最も最小のアトミックでモジュール化させることでさらに時間を短縮することができます。

Point 2

共通パーツを作成するので効率的

共通パーツを作成するので効果的

最小部分のパーツをモジュール化するため再利用がしやすくなります。

モジュール化の進んだサイト制作は、ミクロなデザインパーツを利用して制作するため、膨大なページ数のサイトでも効率よく作成することができます。

Point 3

品質を一定に保つことができる

品質を一定に保つことができる

CSSはたくさんの制作者が関わるほど冗長してしまう傾向があります。それは人それぞれに記述の仕方に違いがでてきてしまうからです。

品質を確保するためにガイドラインを作成しますが、ガイドラインの内容をよりも細分化させることで利用しなくなり、品質を保つことができるようになります。

特徴

  • 日本初、アトミックデザインのカリキュラムを正式導入
  • スマホやタブレットのデザインも作成するレスポンシブでも使えるテクニックが満載
  • レスポンシブWebデザイン関係書籍で一番売れている著者の講座
  • 海外トレンドや、現場ですぐに利用できるノウハウを提供

カリキュラム

デザインパーツを最小にしてモジュール化するアトミックデザイン手法を学びます。

Webサイトで何度も利用されるパーツのモジュールを組み合わせだけでサイトができてしまう技術です。

どの部分をモジュール化するのかなど、迷いやすいポイントを踏まえて解説いたします。

  1. アトミックデザインとは?
  2. モジュールの考え方
  3. モジュールで利用する際のfloatとposition
  4. デザインとUI
  5. ブラウザ表示相違の理解と対策
  6. 実習:CSSモジュールでのページ制作

受講前提と目標

受講前提

  • HTML5での正しいマークアップが可能レベル
  • CSSでサイトをコーディングできるレベル

到達目標

  • モジュール設計の考え方を取得できる
  • CSSの継承と設計方法が取得できる
  • パーツからCSSの構成ができるようになる