2018.02.26SketchUI/UXアトミックデザインパソコン、タブレット、スマートフォンなどのデジタル家電を複数台所有するのが当たり前になりつつある今日この頃。あなたはまだページ・スクリーンごとにイチからデザインをしていますか?アトミックデザインなら、デザイン要素をさまざまなページ、画面サイズ、デバイスに対応させることができ、開発が効率化されます。design)とはアトミックデザインはモジュラーデザインの考え方を元にブラッド・フロストさんが考案したUIデザイン手法。design)とは、製品の各モジュールを作成した後、それらを繋げて完成品を作る手法。アトミックデザインにおけるコンポーネントがいくつも組み合わさったような製品のパーツをモジュールといいます。組み合わせであるべき”を基本理念に、原子が分子を作り、分子が有機体を作りと小さなパーツが積み重なって大きなプロダクトになっていくのがアトミックデザインのイメージです。できるため、プロダクトの拡充が容易に行えます。ここでのコンポーネントは、最小の素材=Atomの組み合わせで作られたパーツのことを指します。従って、個人や少人数で行う小さなプロジェクトから、大規模のウェブプロジェクトまでさまざまな規模・レベルのプロジェクトで用いることができます。大規模プロジェクトにおいては、共通のコンポーネント用いることにより、開発におけるビジョンをプロジェクトメンバーに共有し、プロダクトに一貫性をもたせることができます。デザインの効率と自由度が上がるアトミックデザインのなにが革新的かと問われれば、それはひとえにデザインシステムの自由度の向上や、作業の効率化ができるところでしょう。従来のデザイン手法では、各スクリーンをデザインした後にそれらをコンポーネントに分解して仕様書やUIキット等を作っていました。この手法の問題点は、分解された各コンポーネントがそれぞれ独自の役割や性格をもっていて、相互性が無いことです。そのため、各コンポーネントの再利用が難しくデザインシステムが制限的にならざるを得ず、必然的に作業量も増えていました。反対に、アトミックデザインはプロジェクトにおけて共有できる最小の素材を最初にデザインし、それらのパーツを用いてプロジェクトを作り上げます。これにより、各スクリーンや機能に一貫性をもたせつつ、デザインシステムを簡易化することができます。Sketchとの相性がいいSkechとアトミックデザインは相性が良い考え方です。詳しく後述しますが、各コンポーネント・全体のシステムを相互化することができるソフトにおいて、分子ないの特定の原子を固定して要素を量産できるoverlap(オーバーラップ)機能が便利です。アトミックデザインが具体的にはどのような手法なのか見ていきましょう。アトミックデザインの活用法:コンセプト・スタイルを確立させようアトミックデザインをするにあたって、最も大切なものはAtom(=デザイン時に用いる素材)ですが、Atomを作るために必要なものはなんでしょうか?それはコンセプトやスタイルを確立することです。そのためには、プロダクト特有のビジュアル・ランゲージのデザインが欠かせません。ビジュアル・ランゲージは視覚を通して情報伝達をする要素です。それらはAtomのデザインに必要であると同時にブランドのアイデンティティをも形成し、代表的なものとして会社のロゴやテーマカラーがあります。ビジュアル・ランゲージはシンプルかつユニークであるべきです。異なる情報端末において同じように表示され、用いられることを想定して、特定の画面サイズや形に頼ったデザインは避けた方が無難です。Agencyが手がけたNetflixのプロジェクトが挙げられます。一目でNetflixだとわかる汎用性のあるデザイン。リズム、アニメーション等を用いた強力なビジュアル・ランゲージがあって初めてAtomのデザインをすることができます。そのため、しっかりと時間を割いてどのように自分の商品を差別化するかを考え、ブランドアイデンティティを確立することが大切です。アトミックデザインをする際に心がけるべきこと製品を構築するための素材ができたところで、各コンポーネントを作成していきましょう。製品のキーとなるコンポーネントから作成するデザイナーが最も恐れるべきは、商品と関連性のないコンポーネントを作ってしまうことです。”購入・支払い”機能が無い製品に、”買い物かご”機能はつけませんよね?よって、最初にデザインするコンポーネントは製品、もしくはブランドに深く関わるものであるべきです。アトミックデザインでは、ページごとにデザインをするという概念を払拭するために、スクリーンごとのデザインではなく、プロダクトの機能やユーザーフローに焦点を当てていきます。製作者が製品を通して利用者にして欲しいこと、またそれを達成するために必要なコンポーネントに注力しましょう。そのために、デバイスごとに必要なスクリーン数が変わってくる可能性があります。デスクトップPCでは画面の半分で動作する機能かもしれませんが、スマートフォンでは3つの連続したスクリーンが必要かもしれません。コンポーネントの汎用性を重視するアトミックデザインでは各コンポーネントが他の機能や場面で再利用される可能性があります。それを可能にするためには、各要素の構造とそのコンテンツ(内容)をはっきりと区別しなければなりません。”連絡先リスト”というコンポーネントを作成したい場合、より汎用性のある”リスト”というコンポーネントのデザインを先に考えるべきです。作成されたコンポーネントの応用で、各機能やコンポーネントを作成します。画像の挿入や文章の追加などの要素を追加したり、元々3行の文章が入っていたものの文章を2行にするなど要素の削減をしたりすると、どのような変化がコンポーネントに与えられるでしょうか?このように、汎用性のあるコンポーネントを基に他のコンポーネントを作成することができます。コンポーネントの汎用性を重視することにより、作成するシステムを充実させると共に、各コンポーネントが再利用をしやすくなります。システム内の各コンポーネントを相互化するコンポーネントの汎用性を重視した結果、システム内のすべてのコンポーネントは共通の素材から作られ、連動(相互化)します。そのため、ひとつの素材(もしくはコンポーネント)を編集した時に、その他のコンポーネントにどのような影響を与えるのかを簡単に確認できるようになります。現在、少数ですがSketchやFigma等の素材と各コンポーネント・全体のシステムを相互化することができるプログラムがあり、これからますます増えていくことでしょう。これらのプログラムを利用することにより、デザイナーはデベロッパーのように自分だけのスタイルガイドをもち、すべてのシステムをそのガイドに沿って開発することができるようになります。ひとつの素材に対する変更は即座にその素材を使うコンポーネントすべてに反映されるようになるのです。これにより、各コンポーネントに対する修正と、システム全体に対する影響の確認が容易になります。各コンポーネントを共通の素材を使って連結させることにより、新しくコンポーネントを追加する際に影響を受けるのが、単独のスクリーンではなくシステム全体であることを再確認することができます。流動的に考える我々は、未だにレンスポンシブ・デザインを、特定のブレイクポイントを指定してそれらに対応するように各ブロックをデザインすることだと考えてしまう傾向にあります。実際には各コンポーネントがそれぞれブレイクポイントをもって流動的に動作し、各画面サイズに対応するべきなのです。ありがたいことに、Sketchなどのソフトフェアを使えば各コンポーネントの動作に対するさまざまなレスポンスをテストし、どのコンポーネントを固定してどのコンポーネントをレスポンシブにするかを定義できるようになりました。各コンポーネントがデバイスごとに異なるコンテクストをもつ可能性があること想定しなければなりません。watchではシンプルな丸いアイコンとして表示されるほうが適切な可能性があります。Atom・コンポーネント間の往復でシステムを拡充していくアトミックデザインではシステムを充実させていく際に既存のコンテンツや素材となるAtomを何度も顧みることになります。最初に作られたコンポーネントは最初のスクリーンを作るのを手助けし、そのスクリーンは新しいコンポーネントの構築や、既存のコンポーネントの改善に役立ちます。この新機能とAtom・既存のコンポーネント間の往復が、プロダクトを洗練していくのです。前述したようにアトミックデザインでは、デザイナーが意識的に汎用性、互換性のある素材を作成し、各コンポーネトをデザインしています。これにより、全体像の修正をする際には、それを構成する各要素を編集する必要が出てきます。よって、製作者は絶えず各要素と全体像を見比べることになり、各コンポーネントがシステム全体において正しく作動するかを確認するプロセスにもなります。システムとビジョンを共有するプロダクトに一貫性をもたせるために、デザインシステムを共有することは極めて重要です。ひとりで作業をしていても、プロダクトのビジョンは容易に脱線します。近年増えつつあるケースとして、他のデザイナーと共同で仕事をする際には、情報共有や意思疎通時のわずかな認識の違いなどにビジョンの維持がより一層困難になります。技術の進歩と新しいツールの出現により、チームメンバー全員が共通のシステムの元で作業し、ビジョンを共有することが可能になりました。SketchのCraftやAdobeの類似システムのような共有ライブラリがそうです。これらは常時アップデートされ、すべてのグループメンバーがアクセス可能な指標となる”信頼できる唯一の情報源”となります。共有ライブラリの利用は仕事の効率化にもつながります。デザイナーたちは同じ素材を用いて作業をすることになるからです。共有ライブラリ内のコンポーネントがアップデートされたら、その変更がそのコンポーネントを利用しているすべてのデザイナーのすべてのファイルに即座に反映されます。アトミックデザインに完全に対応した共有ライブラリはありません。コンポーネントと素材の関連性からなる、各要素と全体の相互依存が欠如しているものが大半です。ひとつ問題点として、未だにデザイナーのライブラリと開発者のライブラリが別々になっていることが挙げられます。これにより、デザイナーと開発者は情報交換と作業を並行せねばならず、ミスコミュニケーションとそれに伴う仕事量の増加を誘発しかねません。“デザイナーとデベロッパーが共同で使えるひとつのライブラリ”です。Appが現状では最も理想に近いのではないでしょうか。遠くない未来にデザイナーとデベロッパー間の意思疎通はより容易になることでしょう。まとめアトミックデザインは、最小のパーツ=Atomの組み合わせで各機能、ひいてはプロダクトをデザインする手法である。アトミックデザインでは、各コンポーネントとプロダクト全体が連動しており、ひとつの要素に対する変更が即座に全体に反映されて、プロダクトの一貫性が保たれる。複数のデザイナーが絡むプロジェクトにおいて、共通の素材を用いてデザインするアトミックデザインは意思疎通の齟齬をなくし、仕事を能率化する。wayからの翻訳転載です。配信元または著者とコンテンツ契約を結び配信しています。連載2020.02.19FREELANCEフリーランス、遊びの予定が立たない問題。コラム無理にフリーじゃなくてもいいじゃん連載2020.02.18SHAREPICKUPFREELANCEフリーランス、遊びの予定が立たない問題。コラム無理にフリーじゃなくてもいいじゃん連載2020.02.18FREELANCE“窓際族”を変えた上司の言葉。連載2020.02.12MARKETERSEO記事を”リライト”して検索上位にあげよう。MAGAZINE(ワークシップマガジン)は「デジタル×フリーランスを知るマガジン」として、エンジニアやデザイナー、マーケター、編集者など専門職のフリーランス、クリエイター向けに、最新トレンドやスキルアップ記事を提供するメディアです。他にもセミナーや交流会など、メディアとしてさまざまな情報を発信しています。