AbemaTVのデザイナーによるAtomic Designの実践を、導入編、運用編に分けて紹介します。 導入編では、スタイルガイドの作成や、エンジニアさんとのやりとりでどのように粒度を決めたか。運用編ではSketchのシンボル機能を使って、実装のコンポーネント指向に近いSketchファイルの作成方法を紹介します。
![デザイナーによるAtomic Designの実践〜導入編・運用編〜](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a8646dc2da624d2ce35588cc47565d60c88fbcf/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F320cc5997bac465ea3846a84c640101b%2Fslide_0.jpg%3F6797345)
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV(アベマ TV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより) Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)です。 各コンポーネントの詳細は次のとおりです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く