
仕様変更に強く再利用しやすい!AbemaTVでも採用されている「Atomic Design」の基本を徹底解説
Atomic Designを使うメリット
前述したものと一部被りますが、Atomic Designを使うことで下記のようなメリットを享受することができます。
1. コンポーネントに名前がついている
Atoms・Molecules・Organisms・Templates・Pagesそれぞれのレイヤーに名前がついており、粒度が定められていることで、開発時におけるコミュニケーションが取りやすくなります。
2. デザインの変更に強い
Atomic Designの考え方でコンポーネントを作成することで、デザイン変更に対応しやすくなり、再利用性も高まります。
特にAtomsやMoleculesなどの粒度の細かいコンポーネントはデザイン変更にも強くなります。
3. デザインルールが徹底できる
Atomic Designでデザインルールを作ると、デザイナーとエンジニアの共通言語が出来上がるので、デザイナーあるいはエンジニアによる一人プレーを防止することができます。
チームメンバーのパワーバランスが平坦になり、あるメンバーにだけ依存するというような状況が大幅に減ります。
まとめ
WebデザインやUIデザインの中にはエディトリアルやグラフィックデザインから生まれたものも多くありますが、Atomic Designはマークアップやコーディング、システムデザインの視点から産まれた手法で、エンジニアにとっても親しみやすい手法です。
昨今、デザイナーもエンジニア視点を持ったほうがいいと言われますが、Atomic Designを習得することはデザイナーがエンジニア視点を持つ一助にもなります。
コンポーネントベースのWeb制作手法を取り入れたいときには、ぜひAtomic Designに挑戦してみてください。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング