「Atomic Design」で再利用しやすいUIパーツを設計する

はじめに

これまで「更新ボタン」を題材にコンポーネントとバリアント、デザイントークンのためのスタイルとバリアブルなどを学習してきました。今回からは「Atomic Design」の手法をベースに、UI要素(部品)を増やしながら、部品を組み合わせたモジュールを作っていきます。

Atomic Designとは

標準の積み上げ構造

標準化が進んでいる自動車産業では、ボルトやギアなどのパーツ(最小構造単位)と完成品(車)の間にいろいろなユニットやモジュールが作られています。複数の部品で形成されたサブユニット(燃料ポンプなど)、それらを組み合わせた大規模な構造単位のユニット(エンジン、ブレーキなど)、それらをシステム化したもの(パワートレイン、安全システム)など、標準を組み合わせてより大きな標準を作成するという構造ができ上がっているのです。

この「標準積み上げ構造」はUIデザインでも取り入れられており、2013年にBrad Frost氏がこれを体系化したAtomic Designという手法を提唱しています。これはUIデザインを構成する要素を原子、分子、有機体、テンプレート、ページという階層構造で捉え、大規模なデザインシステムを効率的に構築するためのものです。

Atomic Designの具体例

表1は、Atomic Designを「検索＆一覧表示」画面のデザインに当てはめた例です。図2上の受注一覧画面のような、ヘッダー、検索条件パネル、検索ボタン、検索結果表示グリッド、検索件数とページネーション、フッターなどで構成される画面レイアウトを想定し、ヘッダーにはロゴ、ログインユーザー、ヘルプが含まれ、フッターには「閉じる」ボタンが含まれるイメージとしています。

本連載における階層構造

この連載でも、このような「標準の階層化」という構想に則ってデザインを進めます。ただし、Atomic Designは5階層ですが、少しコンパクトにまとめて次の4階層でデザインを整理していきます。

　　　・アイコン
　　・コンポーネント(部品)
　・モジュール(部品を組合せたフレーム)
・デザイン(最終的なデザイン)

図1：Atomic Designと連載の階層

アイコンの追加

これまでに作成した「更新ボタン」などの部品は「コンポーネント」というキャンバス用フレームの上に作成しています。この連載の最終的なデザインは図2のような画面ですが、このようなデザインを作るためにはもう少し部品を用意する必要があります。

図2：本連載でデザインする画面(受注一覧と受注更新)

「アイコン」フレームの追加

最初に、アイコンという原子部品を置くためのフレーム(キャンバス)を追加しましょう。これまでに「BizPoundファイル」というファイルの中に「ローカルコンポーネント」と「BizPoundデザイン」という2つのページを作成し、「ローカルコンポーネント」ページ内に「コンポーネント」というフレームをキャンバス用として作成済みです。

図3：Figmaのファイル構成

今回は、同じ「ローカルコンポーネント」ページに、さらに「アイコン」というフレームを追加します。

1. フレームを追加
   Figmaにログインして下側のツールパネルの左から2つ目のフレームアイコンをクリックし、「コンポーネント」フレームの隣にある程度の大きさ(300px ☓ 300px)のフレームをドラッグで作成してください。
2. フレーム名をアイコンに変更
   左側のレイヤーパネルを見ると「Frame 1」という名前でフレームが作成されているので、これを右クリックしてフレーム名を「アイコン」に変更します。
3. 塗りを設定
   フレーム「アイコン」のプロパティパネルで「塗り」を#F8BBD0(ウォームピンク)にしてください。これで図4のような少し濃いめのキャンバスが用意されるので、この上にアイコンを配置していきましょう。
   
   
   

   図4：アイコンフレームを追加

アイコンの追加

追加で作成するボタンは「閉じる」「キャンセル」「削除」の3つです。それぞれに合うアイコンを入手しましょう。第3回でコミュニティが提供する「Material Design icons」から更新アイコンと検索アイコンを使わせてもらいました。今回も図5のような手順で、この中からボタンの用途に合いそうなアイコンを探します。

図5：「Material Design icons(Community)」でアイコンを検索・取得

1. 「Material Design icons(Community)」を開いて実行
   フレーム「アイコン」を選択した状態で、ツールパネルの右から2つ目のアイコンをクリックして「プラグインとウィジェット」タブを開き、「Material Design icons(Community)」を検索して「実行」します。
2. closeアイコンを取得
   検索欄に“close"というキーワードを入れて検索し、表示された中から図5のアイコンをクリックするとキャンバスの中央にアイコンがセットされます。
3. 3つのアイコンを取得
   同じ要領で“delete"と“turn"というキーワードで検索＆クリックして、図5の3つのアイコンをゲットしてください。
4. レイヤーパネルのアイコン
   左のレイヤーパネルを見ると、3つのアイコンが追加されていることを確認できます。

アイコン名の変更と配置

1. アイコン名の変更
   現在、アイコンはそれぞれ提供元が付けた名前になっているので、これを自分たちが分かりやすい名前に統一しましょう。レイヤーパネルで右クリックして「名前を変更」で表2のような名前に変更してください。

   表2：アイコン名の変更

   オリジナルの名前	変更後の名前
   arrow-u-down-left-bold	キャンセルアイコン
   delete	削除アイコン
   close-box-multiple-outline	閉じるアイコン

2. フレーム「アイコン」に配置
   3つのアイコンを図6のように並べてください。
   

   図6：3つのアイコンをフレーム「アイコン」上にドラッグ配置

既存のアイコンを配置

せっかくアイコンフレームを用意したので、これまでに使用した「更新アイコン」と「検索アイコン」もその上に配置しましょう。図7のように既にボタンの中に組み込まれているアイコンをコピーしてアイコンフレーム上に置く作業になります。

図7：5つのアイコンをフレーム「アイコン」に配置

1. 更新アイコンの配置
   コンポーネントフレーム(キャンバス)上にあるコンポーネント「ボタン」のアイコンを[ctrl]キー＋右クリックして、候補の中から「更新アイコン」を選択してください。この選択状態で[alt]キー＋ドラッグ(Chromebookは[検索]キー＋ドラッグ)して更新アイコンをフレームアイコン上にコピーしてください。
2. 検索アイコン
   同じ要領で検索ボタンのアイコンを選択して、検索アイコンもフレーム「アイコン」上に配置します。レイヤーパネルで図7のように配置されていれば成功です。ここでお気づきになったと思いますが、アイコンはinverse(反転色)で白を使うことが多いので、フレーム「アイコン」の背景色を白でも視認性の高いウォームピンクにしているわけです。

アイコンの色の設定

第3回でアイコンの色を黒から青、または白に変えたことを思い出してください。ボタンの背景色がprimary color(青)の場合はアイコンを白に、ボタンが白の場合はアイコンを青にしました。今回は、削除ボタンの背景色を赤にして表3のような配色にします。赤は初登場なのでデザイントークンから作成していきましょう。以下、図8を使って追加手順を説明します。

1. バリアブルでプリミアムトークンを作成
   第7回で、デザイントークンとしてカラーのプリミアムトークンとエイリアストークンをバリアブルで作成しました。ここに赤を追加します。
   
   a. バリアブルダイアログの表示
   キャンバスの何もない部分をクリックしてキャンバスのプロパティを表示してください。ローカルバリアブルのアイコンをクリックするとバリアブル作成ダイアログが表示されます。
   
   b. プリミティブコレクションにredを追加
   コレクションをプリミティブにして「＋バリアブル作成」ボタンでカラーのバリアブルを選び、バリアブル名は「red」、値は「#D32F2F」とします。
   

   図8：プリミティブトークン「red」を追加

   c. バリアブルのスコープをオフ
   バリアブルの右のアイコンをクリックして編集画面を表示し、スコープタブに切り替えてください。プリミティブトークンはデザインで直接指定しないので、間違えないように適用する場所をすべてオフにします。
   
   d. 既存のプリミティブトークンのスコープもオフ
   作成済みの「blue」と「white」のスコープも同じ要領ですべてオフにしておいてください。これでUIの塗りの指定の際に、これらのプリミティブトークンが候補として表示されなくなります。
2. バリアブルでエイリアストークンを作成
   プリミティブトークンの次はエイリアストークンを設定しましょう。図9のようにコレクションをボタンに切り替えてください。
   
   

   図9：エイリアストークン「back/danger」を作成

   a. エイリアストークン「back/danger」を追加
   バリアブルグループのbackを選択した状態で「＋ バリアブルを作成」で「danger」という名前のカラーバリアブルを追加してください。値のカラーアイコンをクリックし、ライブラリタブから先ほど作成したプリミティブ「red」を選びます。
   
   b. スコープを設定
   バリアブルのアイコンをクリックし、スコープを「フレーム」だけオンにしてください。この設定により「back/danger」はフレームの塗り(背景色)設定にしか候補として現れません。
3. 「閉じるアイコン」と「削除アイコン」を白色に設定
   これでデザイントークンの準備は完了です。次はエイリアストークンを使ってアイコンの色を設定します。アイコンの色は、フレームではなくVectorに対して指定します。
   
   a.「閉じるアイコン」と「キャンセルアイコン」を同時選択
   Figmaでは複数のUI要素を選択して一緒にプロパティ設定できます。図10のように、レイヤーパネルで[ctrl]キー＋クリック操作で「閉じるアイコン」と「削除アイコン」のVectorを一緒に選択してください。よく見ると、レイヤーパネルのVectorのアイコンは同じでなく、シェイプごとのデザイン(形状)が適用されています。ちょっと心憎い気遣いですね。
   
   

   図10：「閉じる」と「キャンセル」を青色に設定

   b. 塗りをprimaryに設定
   プロパティパネルの「塗り」をクリックし、ライブラリタブに切り替えると色の候補としてprimary(白)とsecondary(青)が表示されます。この2つは第7回でバリアブルとして用意し、スコープの設定で“シェイプ”で使うとしたものです。シェイプはVecterの「塗り」に適用されることが確認できましたね。ここにicon/secondaryを適用すると、キャンバス上で2つのアイコンが青に変わります。
4. 「削除アイコン」を白色に設定
   同じ要領でレイヤーから「削除アイコン」のVectorを選び、プロパティの塗りでprimary(白)を指定してください。

ボタンの追加とアイコンの適用

さて、アイコンのが準備できたので、ボタンを追加してアイコンを組み込みましょう。第4回で作成した「登録」「更新」「検索」というバリアントがフレーム「コンポーネント」上にあります。これを拡張して「閉じる」「削除」「キャンセル」というバリアントを追加作成します。

1. バリアントを3つ追加
   邪魔になるのでインスタンス「ボタン」を右側にずらしてください。バリアントグループ(紫の枠線)を選ぶと下側に「3バリアント」という表示が出るので、「＋」を3回クリックして「6バリアント」にしてください(図11左の状態になる)。
2. 閉じるボタンの作成
   これから行う作業は、a.アイコンの入れ替え、b.ボタン背景色の設定、c.ボタン名の変更、d.文字の色の設定、e.プロパティ値の変更の5つです。以下の手順で設定してください。
   a. アイコンの入れ替え
   図11右にあるアイコンフレームの「閉じるアイコン」を選択して[ctrl]キー＋[C]キーでコピーします。続いて図11左の4つ目のボタンのアイコンを[ctrl]キー＋右クリックで選択し、選択したアイコンを右クリックして図11右のようなメニューを表示して「貼り付けて置換」を選んでください。
   
   これにより、クリップボードに記憶された「閉じるアイコン」に置換されます。この作業はアイコン図形であるVectorではなく、アイコンフレーム同士の入れ替え作業となるので、選択対象レイヤーを間違えないように注意してください。
   
   

   図11：アイコンを貼り付けて置換

   b. ボタンの背景色の設定
   上記ボタンをマウスでクリック連打して「ボタン」を選択してください。プロパティの「塗り」はback/primary(青)に設定されていますね。カラーアイコンをクリックして、これをback/secondaryに切り替えると背景色が白になります(テキスト色も白なので真っ白になりますが、この後テキスト色を変えるので大丈夫です)。
   
   c. ボタン名の変更
   続いてボタン名を変更します。上記のボタンのテキスト部分を[ctrl]キー＋右クリックしてテキスト「登録」を選択してください。プロパティパネルの上部の種類が「テキスト」になっていればちゃんと選択できています。現在、テキストには第8回で設定した文字列のバリアブル「label/register」が設定されており、これは“登録”という文字列を標準化したものです。
   
   

   第8回で述べたように、私は文字列バリアブルは使わない派なので、これ以降はダイレクト入力で行きます。文字列設定欄の右のバリアブル切り離しアイコンをクリックし、文字列欄に直接「閉じる」と入力してください(図12左)。
   

   バリアブルの切り離し

   バリアブルを切り離すと、バリアブルの適用が解けて直接デザインを行えるようになります。その場に応じて自由にデザインできて非常に便利な機能ですが、せっかく標準化のためにバリアブルを作成したので、あまり多用しないように注意しましょう。特にデザインの初期段階では標準化を拡充することが大切なので、あくまでも「必要が生じたらバリアブルを追加する」という方針でデザインしていきましょう。

   d. 文字の色の設定
   テキストを選択したままプロパティ下側の「塗り」を見ると「text/primary(白)」になっていますね。カラーアイコンをクリックして、これを「text/secondary」にするとキャンバス上のボタンの文字も青になります。
   
   e. プロパティ値の設定
   さて、このボタンは図11左で追加したバリアントグループの一員です。バリアントは「ジキルとハイド」の代わり身の術でしたね。ボタンを選択してプロパティパネルの上部を見ると、以前設定したプロパティ「用途」があるので、図12右のように値を「閉じる」に設定してください。
   
   

   図12：ボタンの塗りと文字列の設定

3. 削除ボタンとキャンセルボタン
   同じ要領で、表3を元に「削除ボタン」と「キャンセルボタン」にも5つの変更作業を行ってください。
   • a. アイコンの入れ替え
   • b. ボタン背景色の設定
   • c. ボタン名の変更
   • d. 文字の色の設定
   • e. プロパティ値の変更の5つ
4. キャンセルボタンの幅を調整
   第第3回でボタンのテキスト幅をW60拡大で設定しています。この設定だと「更新」という文字列は入りますが、図13左のように「キャンセル」という文字列は折り返しになっています。このボタンの幅をもう少し広くしましょう。固定の幅の値を直接設定しても良いのですが、オートレイアウトの機能「コンテンツを内包」を使ってみます。
   
   a. キャンセルボタンのテキストを選択
   [ctrl]キー＋クリックで「キャンセル」という文字を選択してください。
   
   b. サイズ変更
   プロパティパネルを見るとサイズがW60拡大になっていますね。クリックして「コンテンツを内包」に変更してください。この場合のコンテンツはテキストなので、テキストを内包するように幅が自動で調整されます。
   
   c. ボタン幅を固定
   ボタン(フレーム)の方も「コンテンツを内包」に設定されています。この場合のコンテンツはアイコンとテキストなので、テキストが拡大することで自動的にボタン幅も142pxに広がります。
   
   このように「コンテンツを内包」はボタン名の長さによって自動的にボタン幅が大小します。便利なのですが、これだといろいろな幅のボタンができてしまいます。そこで今回は文字列数に応じて次の2つの固定幅パターンに統一します。キャンセルボタンの幅はパターン2になるので、サイズを140としてください。
   
   • パターン1：120W…登録や削除など2文字パターン
   • パターン2：140W…キャンセルなど4、5文字パターン
   

   図13：キャンセルボタンの幅を調整

まとめ

今回は、以下のような内容について学びました。

• Atomic Designはデザインの標準部品を組み合わせて標準を作ってゆく標準化の積み上げ手法
• アイコンやコンポーネントなど、UI要素の標準ごとにフレーム(キャンバス)を用意すると分類しやすい
• アイコン用のキャンバスはinverse(白色)アイコンを考慮して白でも目立つ色にすると便利
• プラグインなどから取得したアイコンはオリジナル名のまま使用しても良いが、チームで分かりやすい名前を付けると便利
• 複数のUI要素を同時に選択してプロパティを設定できる
• アイコンの色はフレームではなくVectorに指定する
• 既存のデザインの一部を置き換える際は「貼り付けて置換」を使うと便利
• ボタンなどのUI要素の幅は自動ではなくパターン化することが多い

今回は、Atomic Designにおける原子(アイコン)や分子(コンポーネント)を追加で作成しました。次回はそれらを組み合わせた有機体(モジュール)としてフッターやヘッダーを作成しながら、オートレイアウトの使い方を掘り下げて解説します。