[ひとことで言うと、こんな記事]
Atomic Designの思想を学ぼう。そして、現実のアーキテクトに落とし込むのは、共通化リファクタリングのように一歩ずつ無理なく頑張ろう!
[こんなひとにおすすめ]
私もフロントエンドは不得意な分野です。不得意だからこそ、無理せず勉強していこうと思いますの、よろしくお願いいたします。
[目次]
公式ホームページがございますので、こちらを引用させていただきます。
Atomicと名が付いているだけあって、化学方程式のようなものにインスパイアされた考え方だそうです。
Atomic Designはデザインを考える際に、以下の5つのヒエラルキーからなるとしています。それぞれ解説していこうと思います。
日本語で「原子」です。ページを構成する最小粒度の単位を示すそうです。以下のような例があります。
html標準で準備されているようなものの単位が多そうです。それぞれにデザインを当てることもあるので、イメージしやすいかと思います。
日本語で「分子」ですね。「原子」が結びついて1つの「分子」になるように、意味のあるAtomsが複数あり、1つの役割になっているようなものを指すようです。以下のような例があります。
1つの責任しか持たせないようなまとめ方がいいそうです。
複数の Atoms / Molecules / 他のOrganisms で構成される比較的複雑なものだそうです。以下のような例があります。
ページデザインを示すものだそうです。ここで気をつけなければいけないことは、ページ自体の内容の違いではなく、__ページのデザイン構造のみを表現したもの__であるという点だそうです。以下のような例で表現できるでしょう。
ここはみなさんがイメージする「ページ」ってものと同じではないでしょうか?1つ1つのページ自体を指すようです。
Templateとしてデザインのみを分離しているので、内容の違うページでも同じテンプレートを利用することが可能なわけです。
Atomic Design(再掲)
アトミックデザインの基本思想はなんとなくわかりました。各単位でまとめていけば、デザイン関連のリソースの管理は楽になりそうですよね。
「よっしゃ〜!じゃ、利点しかないので速攻導入します!」
って急になりませんよね?(笑)
一気に既存サイト適応させていこうとすると、以下のデメリットがあると思います。
のように、ほぼリニューアルとなるわけです。。。
すごく考え方はシンプルなのですが、Atomic Designの「解説」の順番と全く逆の順番で「開発」していきませんか? という提案です。
デザインが一緒なので、__ブログ一覧Template__を新規作成する。
そして、無理なく1つ共通化したらデプロイ!
例1と同じようにブログ記事テンプレートのようなものを作成したとする
共通している部分として、__ヘッダーOrganism__などを共通化する。
そして、無理なく1つ共通化したらデプロイ!
広さ(ページの種類)と深さ(Atomic Designのヒエラルキー)両軸で少しづつ共通化と横展開をしていくのが良いかと。
そうすれば__1個の共通化や1個の横展開にて、デリバリーが可能。無理なくエンハンスすることが可能__なわけです。
Atomic Designの公式にもあるのですが、結構以下の点は論点になりやすい部分だと思います。
__Molecules__に関して
__Organisms__に関して
上記問題を解決するために、新たなカテゴリ分けをつくるなども解決策としてあるでしょう。
いずれにせよ__チームで話し合ってください__。みんなの共通認識が大事です。
SpeakerDeckはこちら
こんな本を読みながら、デザイン管理を勉強中です。
__一緒に様々なことを学んでいく仲間を募集__しています。
このサイトのお問い合わせなどからご連絡いただけると幸いです。