(原文) Atomic Design Systems: A Checklist for Each Individual Design Component

成功につながるすべてのステップに従っていますか？このチェックリストを使って、あなたのAtomicに、素晴らしい UI を構築するために必要な個々のデザインコンポーネントがすべて含まれていることを確認してください。

アトミックデザインとは何ですか？

アトミックデザインとは、2016年にBrad Frost氏によって作られたデザインシステムです。フロストは、色、タイポグラフィ、テクスチャなどの本質的な要素に集中しやすいデザインシステムを作りたいと考えていました。アイデアを模索する中で、フロストはデザインプロセスと化学の間に見つけたつながりに戻り続けた。当然のことながら、彼は自分のアプローチを「アトミック・デザイン」と呼ぶことにしました。

フロストのオリジナルのアプローチには、5つのカテゴリーが含まれていました。

原子
分子
有機体
テンプレート
ページ

チェーンを上に行くほど、デザインは複雑になります。原子レベルでは、カラーパレットやフォントなど、デザインの基本的な構成要素を使って作業します。分子レベルでは、複数の原子が一緒に動作します。たとえば、特定の色と特定のフォントを組み合わせることができます。

ページレベルに到達する頃には、デザインが完全に進化しています。このデザインには将来的に進化する機会があります。しかし、今のところは、目標を満たすデザインができています。

フロストは、このアプローチを「原子設計」と呼んでいます。

化学では、原子は作業をする上で最小のものです。デザインでは、最小の要素には色やボタンなどがあるかもしれません。また、化学と同じように、原子を組み合わせれば組み合わせるほど、プロジェクトは複雑になっていきます。

最終的には、可能な限り小さな要素の上に機能的な有機体ができあがるわけです。

このような視点でデザインすると、より一貫性があり、シンプルで効果的な、ユーザーに喜ばれる製品を作ることができるはずです。

アトミックデザインシステムチェックリスト

デザイン言語
デザイントークン
コアコンポーネント
金型
プロジェクトマネジメント

デザイン言語

デザイン言語は、共通の目標に向かってチームを導くプロジェクト全体のスタイルを定義します。デザイン言語がうまく機能すると、製品が競合他社から際立つようになります。開発者の中には、製品ラインをガイドするデザイン言語を作成する人もいます。このような場合、今日リリースされたアプリが、2ヶ月後にリリースされたウェブサイトと共通点を持つようになります。

ブランドを開発する

デザイナーがブランドを成功させるには、消費者が製品を横断して認識できるデザイン言語を作ることが必要です。一般の人が製品Aと製品Bが同じ会社のものであることを知ったとき、ブランドは確立されます。

ブランドの確立には、デザインのスキルだけでなく、時間も必要です。企業がより多くの製品をリリースすればするほど、ブランドを固める機会が増えます。

コピーとコンテンツの要件

デザイン言語には、コピー要件とコンテンツ要件も含まれます。コピーの要件では、ライターは各ページでスローガンを使用することを余儀なくされることがあります。また、ユーザーに一貫した体験を提供するために、同じスタイルガイドに従わなければならない場合もあります。

コンテンツ要件は、あらゆる視覚的要素を指すことができます。例えば、デザイン言語では、会社のロゴをすべてのウェブページの同じ場所に表示することが要求される場合があります。

業界をリードする例

デザイン言語をマスターした業界をリードする例としては、AppleやVolkswagenが挙げられます。

Appleは、ハードウェア、ウェブサイト、アプリケーションを含むすべての製品において、洗練された美学を維持しています。

技術に精通した消費者であれば、Appleの製品はすぐにわかるでしょう。

Source

フォルクスワーゲンは、VWビートルとバグの復活で魅力的なデザイン言語を構築した。これらの車は、ドライバーを歓迎し、ポジティブな感情を促進する親しみやすいデザインを持っています。

Source

デザイントークン

デザイントークンを使用することで、チームが共同作業中にまとまりのある美学を簡単に維持することができます。デザイントークンには、色、フォント、アイコンを含めることができます。Frost氏は、実際にはデザイントークンを原子以下の粒子と考えています。原子というよりもクォークのようなものです。いくつかのデザイントークンを組み合わせると、原子になります。ここでデザインを始めると、プロジェクト全体で一貫性を保つことができます。

カラーパレット

カラーパレットには、デザインチームがプロジェクトで使用するすべての色が含まれています。パレットには何十色もの色を含めることができます。ただし、パレットに色を追加しすぎてはいけません。そうすると、デザイナーが意図した美学を理解するのが難しくなります。

タイポグラフィ

タイポグラフィとフォントは同じものだと思っている人が多いです。小さな違いはありますが、自分でタイプをデザインしない限りは気にする必要はありません。

レイアウトについて

レイアウトとは、ページ上のアイテムの位置を定義するものです。例えば、ウェブサイトでは、画面の左側にメニューが表示されたり、使用しないときには表示されない折りたたみ式の検索バーが表示されたりすることがあります。

アイコノグラフィー

アイコンには、デジタルデザイナーが使用する小さな画像が含まれます。ページのナビゲーションや機能選択のガイドとしてアイコンを使用することができます。

業界をリードする例

多くの企業が成功しているのは、デザイナーがデザイントークンの使い方を非常によく知っているからです。

Netflixは、デザイントークンを使いこなしている企業のごく最近の例として際立っています。Netflixのウェブサイトは、ユーザーが選択肢をナビゲートするのに役立つシンプルなグリッドレイアウトを採用しています。

各ページにはNetflixのロゴが入っています。同社は、可能な限り白と赤の文字を使用することで、デザイントークンの理解をさらに強調しています。

Source

コアコンポーネント

コアコンポーネントは、Frost のアトミックデザインスキーマのアトミックレベルを占めています。Web ページやアプリには、ユーザーが相互作用するいくつかのコアコンポーネントが必要です。コアコンポーネントには、ボタン、検索フォーム、タブなどがあります。

効果的な UI コンポーネントの特徴は何ですか？

効果的な UI コンポーネントは、ユーザーに直感的な体験を与えるために、調和のとれた形で機能する必要があります。理想的なのは、新規ユーザーが自分の画面を見て、機能を起動するためにどのコンポーネントをタッチすべきかを知ることができることです。

各コンポーネントのデザインは、UIの全体的な成功に貢献することができます。Go」と書かれた緑色のサインは、ほとんどの人が理解できる非常にシンプルなコンポーネントになります。

UIにコンポーネントを追加する際には、それらがどのように連携するかを考える必要があります。ハンバーガーメニューを開くと、検索バーが邪魔になりませんか？それをイライラするユーザーもいるでしょう。アイコンが小さすぎて、他の機能を起動しないとタップできないようになっていませんか？UI が失敗していることに気づくと、すぐにユーザーを失うことになります。

業界をリードする事例

スマホ写真アプリ「Halide」は、UIコンポーネントを効果的に使うことに秀でています。ユーザーがアプリを開くと、画面の中にカメラを操作する小さなセクションが表示されます。大きな円は、要素を押すと写真がスナップされることを明確に示しています。

このアプリは、前の写真の小さなバージョンを表示することで、ユーザーエクスペリエンスをさらに向上させています。ユーザーは、撮影したばかりの画像を見るためにカメラから離れて移動する必要はありません。

ツールとプラットフォーム

UXPinのプラットフォームは、デザイナーがアトミックデザインの原則に従うのに役立ついくつかの機能を提供しています。最も便利な機能のいくつかをご紹介します。

デザインシステム
ライブラリー
インタラクティブ要素
データ入力

プロジェクトマネジメント

プロジェクト管理には、すべてのステップが時間通りに行われるようにすることが含まれています。デザインコラボレーションは、誰かがプロジェクトを管理して初めて効果を発揮します。強力な管理がなければ、チームのメンバーは、自分が貢献できるようになる前に誰かが仕事を終わらせるのを待っていることに気づくかもしれません。

プロジェクト管理ツール

最も人気のあるプロジェクト管理ツールには、以下のようなものがあります。

これらのプロジェクト管理ツールは、管理者がタスクを割り当て、期限を設定し、スケジュールの変更に対応できるようにしているため、うまく機能しています。

コラボレーションとコミュニケーション

最高のプロジェクト管理ツールの中には、チームの共同作業やコミュニケーションに役立つものもあります。例えばAsanaでは、ユーザーはプロジェクトのマイルストーンをお互いに更新することができます。

リアルタイムのコラボレーション機能を提供するUIデザインプラットフォームを選べば、独立したコラボレーションやコミュニケーションツールは必要ありません。UXPinにはGoogle Docsのようなシームレスなコラボレーション機能があります。同僚が画面上で要素を移動する様子を見ることができます。

UXPinは非公式なユーザーにフィードバックを提供することもできます。信頼できる同僚や関係者にリンクを送ることで、プロジェクトの成功に貢献する有意義なフィードバックを得ることができます。

独自のデザインシステムを作成する

UIデザインは、ブランドの個性をアピールできるような直感的な環境を作り、ユーザーが必要なサービスを受けられるようにしたいと考えています。そのような目標の多くは、独自のデザインシステムを作成することから始まります。デザインの基準を設定すれば、チームの全員がガイドラインの範囲内に収まる方法を知ることができます。

UXPinを使えば、独自のデザインシステムを簡単に作成することができます。デザインシステムを作成する際には、以下のことができます。

受け入れられるパターン、色、アイコン、コピーのリストを含むUIのインベントリを作成する。
他のチームメンバーの指示となるデザイン原則を確立する。
他のデザイナーの迷走を防ぐカラーパレットを構築する。
タイプフォント、ウェイト、ラインハイトなどを含むタイポグラフィの尺度を構築する。
他のチームメンバーがまとまりのあるUIエクスペリエンスを作成できるように、他のチームメンバーに真似してもらいたいデザインの例を提示する。

成功へと導くデザインコンポーネントのチェックリストができました。UXPinにはアトミックデザインに必要な全ての機能が備わっています。すべてのことができるプラットフォームがあれば、デザインとプロトタイピングがいかにシンプルになるかを体験してみてください。

UXPin は、世界中の製品チームがアイデアをより早く製品に変えるのを支援するデザインプロセスツールです。

UXPin の革新的なテクノロジーである Merge を使用すると、PayPal のような企業は DesignOps の課題を簡単に解決することができます。UXPin Merge は、最終製品との完全な整合性を達成するために React コンポーネントを使用してデザインすることを可能にします。

本記事は2020/8/20投稿、2021/1/20更新を翻訳したものです