カレーのカレーによるカレーのためのAtomic Design

Last updated at 2019-11-30Posted at 2019-11-30

始まりましたカレーアドベントカレンダーーーーーーーーー！

カレーが！！！好きかーーーーーーーーー！！！！！！！！！！！
今日から！25日かけて！！！！カレーを！！作るぞーーーーーーーーー！！！！！！
ちなみに一人暮らし9年目になりそうだけど、今まで1人でカレーを一度も作ったことないぞーーーーー！いけるんかこれーーーーーー！

ということで、お楽しみいただけたらいいなと思うんですけれども。

そんなこんなで、今日はカレーをAtomic Designに絡めて
記事にできたらなと思います🍛

Webページを作るときのUI設計の考え方で、コンポーネント同士の組み合わせでページを作る考え方。
コンポーネントは以下の5つから構成されます。

とりあえずここでは「カレーは5つに分解できるぞ」と構えてください。

これ以上分けられないような単位のUIのことを指します。
カレーで例えるなら、原材料のことです。

にんじんもこれ以上細分化できないですもんね。はい、そいつはAtomsです。

atomsを2つ以上組み合わせたもの。つまり、カレーで言うと、具材「達」です。

カレーで例えた場合
- 炒めた野菜と肉（にんじん + じゃがいも + 肉）
- カレースパイス（クミン + ターメリック + パプリカ + レッドチリ + コリアンダー）
- 米粒の集合体（米 + 米 + 米）

ん〜〜〜〜美味しい匂いがしてきた。

複数のMoleculesを組み合わせたもの。上記の炒めた具材と米をヴウウウンってがっちゃんこしたもんです。

Organismを組み合わせ、ページの枠組みを構成します。

......おっと。カレーに例えると、有機体（カレールーと米）を組み合わせて...？無理じゃない...？
じゃあここではカレーの枠組みを構成するもの（=どこに何を入れるかの定義されたもの）と捉えましょう。
つまりダムカレーの盛り付け方ですね！！！そうですよね！！！！！！！！！

Templateに具体的なコンテンツを入れ込んだのが、最終的なアウトプットとなるPagesです。
つまり、ダムカレーの皿に入ったカレーライス！これがまさに！Pages！

いただきまーーーーーーーーーす！！！！！！！！！！！！！

結論、カレーで例えてみたけど
カレーは実体だし、Atomic DesignはUI設計での考え方なので、
Atomic Designはカレーで完全には例えられない！！！！！！！