Atomic DesignとSketchをウェブサービスのフルリニューアル時に採用した理由

デザイナーのよーた(@yotaszk)です。本記事は、「UUUM Advent Calendar 2018」の3日目の記事になります。

本日は、UUUMが提供する動画クリエイターさん向けのウェブサービスをフルリニューアルしている話から、なぜ私が「Atomic Design」と「Sketch」を採用したのか、そこで得た知見について紹介します。

「Atomic Design」とは

最近、デザインやフロントエンド界隈では耳にすることが増えた「Atomic Design」ですが、デザインフレームワークの一つで、一言で言うならば、UIコンポーネントの粒度(階層)を整理するフレームワークです。

出典:http://bradfrost.com/blog/post/atomic-web-design/

この図を見たことがある方も多いのではないでしょうか。最小の粒度である「Atoms」から「Molecules」「Organisms」「Templates」、最終的にはこれらが結合し「Pages」を構成します。

詳しくはこのnoteで説明しないので、興味のある方は「Atomic Design | Brad Frost」を参照してくださいね!

なぜ、「Atomic Design」を採用したのか

そして、なぜ私が「Atomic Design」を採用したのか…。

1、デザインファイルの作成者への属人化を防ぐ

手段は何でもよかったのですが、システムを導入することで、作成者に依存しない状態を作れると考えました。

2、途中から入った人でも理解しやすい状態をつくる

(1つ目と被るかもしれませんが…)以前、途中からジョインしたプロジェクトで、デザインファイルがごちゃごちゃで困った経験があります。このような悲劇をこれ以上繰り返したくないという想いがありました。

3、メンテナビリティを考え、変更に強い状態を維持する

市場の変化により、サービスに求めるものが変わる可能性が高高かったので、素早く対応できる環境整備と変更される前提で考えました。

4、デザイナーとエンジニア間の共通言語をつくる

「Atomic Design」を浸透させ共通言語ができることで、コミュニケーションの一助になることを期待しました。デザインファイル領域だけに留まらず、エンジニアリングの領域まで「Atomic Design」を適用すると開発効率の向上が期待できます。

なぜ、「Sketch」を採用したのか

Sketchには「Symbols」と「Override」という機能があり、これが「Atomic Design」と相性がいいことで知られています。

プロトタイプ時は、ホワイトボードや「Figma」を使っていたのですが、UIの精度を上げていく段階で徐々に上記の機能を使うために「Sketch」にシフトしました。

実際に導入してみて得た知見たち

1. Atomsから作ろうとすると辛くなる

デザインファイルを作成する段階に直面したのが、粒度が一番小さい「Atoms」からコンポーネントを作り出そうとすると辛くなってきます。

全体が見えず、具体化していないコンポーネントの構成を見抜くのが難しく、それを考えてばかりいると、作業効率が落ちてきます。

そこで「Molecules」と「Organisms」の粒度レベルでコンポーネントの全体像を捉え、次のステップで「Atoms」に切り出していく手法に変えました。本来とは違いますが、その方が個人的にやりやすかったです。

2. 中途半端にコンポーネントを分けない

急いでデザインを作成していると、ついつい私は中途半端な分け方(一部で最小単位のAtomsまで分割してない状態)をしている箇所がいくつかありました。

しかし、積み重なると当たり前ですが「負債」になります(なりかけました)。「Atomic Design」を取り入れるなら、システムを守る覚悟が必要です。

3. Atomsなの?Moleculesなの?Organismsなの?、結構迷う

このパーツは、Atomsなの?Moleculesなの?Organismsなの?と迷うことがあります。「Atomic Design」の発案者であるBrad Frost氏は分割基準については述べていないからです。

つまり「これが正解」という明確な基準がない、ということです。困った時は、事例を調べたり、本や実際のコンテキストを考えながら粒度を考えました。

4. プロダクトへの導入は、エンジニアさんとの連携が欠かせない

プロジェクトに「Atomic Design」を採用する場合は、デザイナーとエンジニアさんの連携が欠かせません。なぜなら「Atomic Design」をエンジニアリングの世界までも適用させることで、開発効率を上げられるためです。

私のプロジェクトの場合、フルリニューアルというタイミングとモダンなフロントエンド開発の経験があるエンジニアさんもいたため、導入がスムーズにできました。導入は、タイミングや仲間の支持が大切です。

まとめ

「Atomic Design」の導入はタイミングを間違えると敷居が高そうです。しかし、適切なタイミングで提案することで仲間に浸透させることができ、開発効率の向上が期待できます。

動画クリエイターさんにとって使いやすいサービスにどうやったらなるか、そんなことを考えながら今日もデザインに取り組んでいます!

>>> 明日のアドベントカレンダーもデザイナーさんの担当です。2日連続のnote更新をお楽しみ下さい🙌 <<<

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

最後までご覧いただきありがとうございます!この記事が面白かったらチャンネル登録ではなく「フォロー」や「すき」をお願いします!また、次回の記事でお会いしましょう!

やった〜!ありがとうございます🙌
5

UUUM DESIGN

UUUMで書いたnoteたち

UUUM株式会社システムユニットのデザイナーによる「UUUM DESIGN」で自分が書いたnoteまとめです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。