
仕様変更に強く再利用しやすい!AbemaTVでも採用されている「Atomic Design」の基本を徹底解説
Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。
通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。
ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。
その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。
Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。
今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。
コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。
Atomic Designとは?
Atomic Designは、UIに関するデザインシステムに関する考え方で、ペンシルヴァニア州のWebデザイナーBrad Frost氏によって命名されました。
Atomic DesignのAtomとは*「原子」のことで、実際に最小の単位である「原子」(Atoms)からデザインし、最終的に最も大きな単位である「ページ」(Pages)*に仕上げていくという手法です。
実際に、パーツの単位は小さい順に下記のようになります。
- Level1:原子 (Atoms)
- Level2:分子 (Molecules)
- Level3:有機体 (Organisms)
- Level4:テンプレート (Templates)
- Level5:ページ (Pages)
※ Atomic Designには化学的な用語が多いので、ここでは「Atomic Designを分かったつもりになる」を参考にLevel表現を併記して進めていきます。
Atomic Designを使うことで、デザイン仕様の変更が効きやすく、再利用性が高くなります。
当然ながら、粒度が小さく特定のコンテクストに依存しないAtomsやMoleculesなどのコンポーネントであれば、多少UIデザインに変更が加わったとしても、そのまま再利用することができます。
Atomic Designはデザイナーとエンジニアの架け橋
以上のように書くと、コンポーネントベースの開発はフロントエンドエンジニアにとってメリットが大きいように見えますが、Atomic Designはもともと名前の通りデザインに関する手法です。
初期段階では、AtomsやMoleculesをデザイナーが増やしていき、コンポーネント単位でデザインカンプをつくります。
デザイナーにとっては、ページ単位でデザインすることに慣れているので、コンポーネント単位でデザインすることに抵抗があるかもしれませんが、デザイナーが慣れてくればエンジニアにうまく橋渡しをすることができます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
ツール紹介記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
その他のカテゴリ
