carwowでは、 Atomic Designの大ファンです。この本が出版された後、私たちはこのテーマに興味のある開発者、デザイナー、製品マネージャーを集めて読書クラブを開き、数か月にわたって毎週各章の感想を共有しました。

デザイン アプローチについて話し合うことは、実際にそれに基づいて行動を起こす場合にのみ有効です。ありがたいことに、Atomic Design を知る前から、私たちはすでに生きたスタイルガイドを作成していました。これは、一貫したビジュアル アイデンティティとユーザー エクスペリエンスを構築するのに役立ち、デザイナーと開発者の連携も強化します。

デザイン システムはまだ非常に新しいため、効率的に使用するのは簡単ではありません。デザイン システムには多くの可能性がありますが、私たちは主に試行錯誤を通じてデザイン システムの使い方を学んでいます。たとえば、一部のコンポーネントが特定のコンテキストやモデルに厳密に結び付けられすぎているという問題に直面することがよくあります。私たちは、内部のパーツが他の状況で再利用できるかどうかに関係なく、デザイン システムをモノリシックに構築してきました。

私たちは、Atomic Design を、最も面倒なコンポーネントの 1 つである「ストックカー カード」をリファクタリングする機会と捉えました。この名前の下にあるのは、ディーラーが Web サイトでリストするストックカーのイメージと仕様のセットを含む組織です。私たちは、これを Web サイト全体で再利用できる小さなパーツに分解できると考えました。

改善点は以下のとおりです。

より良い名前

コンピュータサイエンスにおいて難しいことは 2 つだけです。キャッシュの無効化と命名です。
— Phil Karlton

カードは、Web サイトのあらゆる視覚要素を説明するために使用できる万能の単語です。Web サイト上のすべてがカードになり、誰もそれが何を表しているか分からなくなるまで、常に使用するのは便利で無害に思えます。私たちはこの悪い習慣をとったことを後悔しました。協議の結果、次の 2 つの理由から、「ストック カー カード」を「製品リスト」に改名することにしました。

• Product はより抽象的な名前であり、このコンポーネントを別のコンテキストで使用できるようになります。
• リストとは、このコンポーネントをレイアウト内で繰り返して、物理的なカタログと同様に同じタイプの異なる製品を表示できることを意味します。

柔軟な UI コンポーネントを構築する方法については、すでに実験しました。これにより、他の小さなコンポーネントを統合するコンポーネントを作成できるようになり、原子・分子・有機体のアプローチを実装できるようになります。

製品リストを 5 つの分子と 1 つの原子に分解しました。それぞれに独自の目的があります。

• 製品画像: 画像とラベル付きの分子
• 製品詳細: 主な詳細: ブランド、名前、オプションを含む分子
• 製品価格: 価格と追加の価格情報を含む分子
• 製品の追加詳細: Expander分子を使用して表示される二次オプションを含む分子。
• 製品販売者: 製品を販売する個人またはグループに関する情報を含む分子
• 商品の行動喚起: 関連ページにリンクするボタンの要素

Flexboxが救世主

この生物を分子に分解したので、ページごとに異なる分子を選択し、レイアウトを柔軟に適応させることができたら素晴らしいと思いませんか?

ご覧のとおり、製品リスト コンポーネントは 2 行で構築されています。完全な形式では、上行には 3 つの分子があり、下行には 1 つの分子と 1 つの原子があります。コンポーネントをインスタンス化するときに必須の分子は、製品の名前が含まれる製品の詳細のみです。その他の分子と原子はすべてオプションです。

分子をオプションにすると、たとえばディーラー向けの管理サイトでは、広告している在庫車のリストを見ることができるので便利です。一番下の行にはディーラーに関連する情報が含まれているため、この場合は関係がないため省略できます。

さらに、12 グリッド レイアウトを尊重しながら、行から分子を削除して、他の分子で空きスペースを埋められるようにしたいと考えています。これを CSS で実現するには、通常、列数の幅を計算するために使用する sass ミックスインを と の組み合わせに置き換えますflex-basis。flex-grow計算された同じ幅を設定できますが、行内のさまざまなブロック要素間に空きスペースを分散させることができます。

次の例は、現在のグリッドレイアウトシステムに基づいています: Neat 1.8.0

// instead of @include span-columns(9);
display: flex;
flex-basis: flex-grid(9);
flex-grow: 1;

同様の問題や、優れた UI コンポーネントを作成するための他のアイデアをお持ちの場合は、ぜひお知らせください。スタイルガイドには他にも多くの課題があり、それらに対処するために思いついた解決策を今後も共有していきます。