フロントエンドエンジニアなら知らないと損！アトミックデザインのすゝめ

Summary

この動画はフロントエンドエンジニア向けにアトミックデザインと呼ばれるUIデザイン手法について解説しています。アトミックデザインはコンポーネント単位でUIを定義し、原子からページまでの5つのレベルで構成されます。再利用性や拡張性が高く、コンポーネントの汎用性を意識しながら使うことが大切です。実際のWebアプリのコードや画面を例に、各パーツが原子や分子、生体、テンプレートとしてどう捉えられるか説明しています。

Takeaways

• 😀 アトミックデザインはコンポーネント単位でUIを定義するデザイン手法
• 👍 原子からページまで5つのレベルに分類される
• 🔨 再利用性が高く、変更や拡張がしやすい
• 📐 汎用性の高いコンポーネントを意識して作る
• 🧱 原子(最小単位)から組み立てる
• 💡 必要なパーツから考える
• 🎨 自由度の高いデザインができる
• 📦 プロジェクト間でもコンポーネントを再利用可能
• 🔧 プロジェクトに合わせた変更・拡張が容易
• 🎯 コンポーネントのレベルアップにつながる

Q & A

アトミックデザインとはどのようなデザイン手法ですか?

アトミックデザインはコンポーネント単位でUIを定義するデザイン手法です。最小単位のパーツ(原子)から始めて、それを組み合わせて機能的な部品(分子)、部品を組み合わせた機能ブロック(正体)、ブロックを組み合わせたテンプレート、テンプレートを組み合わせたページ、という5つのレベルでUIを構成していきます。

アトミックデザインを使うメリットは何ですか?

アトミックデザインを使うメリットは、再利用性が高いことと変更・拡張がしやすいことです。最小単位のパーツを使うことで、同じプロジェクト内や別プロジェクトでもコンポーネントを使い回せます。また、プロジェクトの要件に応じてコンポーネントの変更や拡張も容易です。

リアクトでアトミックデザインを使うにはどうすればいいですか?

リアクトでアトミックデザインを使うには、コンポーネントの汎用性を意識して作成します。最小限の機能単位である「原子」のコンポーネントから始めて、それを組み合わせながらテンプレートやページを構築していきます。再利用性の高いコンポーネントづくりがポイントです。

ビデオで紹介されているECサイトはどのような構成になっていますか?

ビデオで紹介されているECサイトは、ページ全体がレベル5に相当します。ヘッダーが生体、商品リストがテンプレートです。商品アイテムは整体で、画像と商品情報の分子で構成されています。フッターも整体です。

検索ボックスはどのレベルに該当しますか?

検索ボックスは、検索フィールドと検索ボタンの2つの原子コンポーネントで構成される分子に相当します。2つを組み合わせたものが検索機能を提供する部品です。

コンポーネントの再利用性を高めるにはどうすればいいですか?

コンポーネントの再利用性を高めるには、単一の機能/目的に特化し、汎用性の高いものを作ることが大切です。例えば検索ボックスでは検索フィールドとボタンを切り離し、それぞれ単独のコンポーネントとすることで再利用できる場面が増えます。

アトミックデザインではどのようにデザインを構築していけばいいですか?

まず必要なコンポーネントの原子からつくっていきます。それらを組み合わせた分子、さらに組み合わせた整体を作っていき、最終的なテンプレートやページを作り上げていきます。下位から上位へ、合成しながら構築していくイメージです。

プロダクトリストはどの部分に該当しますか?

プロダクトリストは、商品アイテムのコンポーネントである整体を複数並べた全体なので、テンプレートに相当します。テンプレートの中で整体を使い回しているイメージです。

フッターの扱いはどうすればいいですか?

フッターもサイト共通のコンポーネントなので、整体として作成しておき、それを各テンプレートやページで再利用するといいでしょう。運営会社情報等はプロパティで切り替え可能にするなど拡張性にも配慮しましょう。

コンポーネント設計のTIPSを教えてください。

単一機能、汎用性を高め、拡張しやすいようにインタフェースを揃えること。データと表示を分離すること。スタイルと機能も分離すること。これらを意識すると再利用性と保守性の高いコンポーネントが作れます。