【第ニ回】コンポーネントの考え方

Atomic Designの調査レポート第ニ回です。
コンポーネント＝部品と考え、サイトをデザインしていくという事は第一回でお話しました。

【第一回】Atomic Designとは
http://note.favorite-color.net/2019/201902141493/

今回は、「実際コンポーネントってなんなの？」の解説を行います。

【コンポーネントの種類】
Atomic Designはコンポーネントの単位を5つの粒度に分けています。

◯Molecules（分子）
　Atomsを組み合わせたもの。ユーザーが何かアクション、実行できる意味のあるもの。
　例）
　・検索フォーム
　・削除ボタン
—–
◯Organisms（組織／有機体）※翻訳により日本語表記が複数あります
　Atoms、Molecules、他のOrganismsを組み合わせたもの。
　複雑なまとまりになっている、再利用率の高い要素。
　例）
　・ヘッダー（例：ロゴ＋ナビゲーション＋検索）
　・フッター
　・パンくずリスト
　・一覧パーツ
※セクションごとに分けるイメージ
—–
◯Templates（テンプレート）
　画面のテンプレート。
　Organismsを組み合わせたもので。実際にデータは入っていない仮ページやワイヤーフレームの状態。
　例）
　・トップテンプレート
—–
◯Pages（ページ）
　Templatesに実際のデータが入ったページ。
　画像やメディアが流し込まれているユーザーが目にするのと変わらないページ。
　例）
　・トップページ

【私がコンポーネントの分解で躓いたところ】
実際にコンポーネントの分解を行ってみようと思った時に、躓いた箇所があります。

それは「どこまで分解するのが正しいのか」です。

本当にこれで正しいのかな、使いやすくなるのかが全くの手探りでした。
参考リンクを見て書かれていたのですが、すでに複数のプロジェクトでAtomic Designを導入されている企業でも「粒度のすり合わせ」は難しいらしいです。

日々認識のすり合わせと、デザインの調整、コンポーネント化することで「しんどい、頭をつかう時間が増えた」という意見もありました。
コンポーネントすることにより、開発中のやりとりは減りますが、それまでのコミュニケーションにおいて構造の相互理解などが一層必要になります。

既存の括りに縛られず、『プロジェクトに関わるメンバーにとって建設的なルールを構築する事が大事』ということですね。

Atomic Designを用いる場合の、「パーツ考え方」は以上になります。
第三回は、『コンポーネントを用いた構築と運用方法』をお伝えします。

参考サイト

エトセトラ忘備録

【第一回】Atomic Designとは

http://note.favorite-color.net/2019/201902141493/

エトセトラ忘備録

【第三回】コンポーネントを用いた構築と運用方法

http://note.favorite-color.net/2019/201903011500/

エトセトラ忘備録

【第四回】コンポーネントカタログの利用

http://note.favorite-color.net/2019/201903091509/

エトセトラ忘備録

【参考資料】Atomic Design参考資料／参考書籍

http://note.favorite-color.net/category/another/atomicdesign/