Adobeのデザインシステム、spectrumから学べるデザインの基礎 ~コンポーネント編~

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay20です！

昨日はデザインツール「Drama」を使って、以前紹介したアニメーションの作り方の応用編のご紹介でした。

【Drama】タイムラインでアニメーションを作ろう!

本記事はAdobeのデザインシステム、spectrumから学べるデザインの基礎の続きの記事です。

前回は、spectrumの基礎 (Foundation) にてデザイントークンという概念や色の使い方、フォントサイズのルールについてご紹介しました。

Adobeのデザインシステム、spectrumから学べるデザインの基礎

今回も記事は私の解釈で書かせていただいていて、元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しています。それぞれのコンポーネントの細かいルールまで確認されたい方はspectrumをご覧ください。

今回の内容としては、デザインシステムの基礎(Foundation)を応用した、それぞれのコンポーネントについてご紹介していきます。フォントサイズや色の話よりも、ボタンやツールチップなど基礎を組み合わせてできる要素のお話になります。

Adobeのspectrumでは、コンポーネントは大きく７つのセクションに分かれており、こちら沿ってインプットまでの４セクションについてご紹介します。

• ・ アクション (Actions)
• ・ データビジュアル化 (Data visualization)
• ・ フィードバック (Feedback)
• ・ インプット (Inputs)
• ・ ナビゲーション (Navigation)
• ・ ステータス (Status)
• ・ タイポグラフィ (Typography)

アクション (Actions)

spectrumのアクションセクションは大きく４つに分かれています。

• ・ Action button
• ・ Button
• ・ Link
• ・ Quick Actions

Action Button

↑コンポーネントの解剖図

spectrumでは、このようにそれぞれのコンポーネントを要素分解した図が載っています。
また、それぞれの要素がどういう時に追加されるべきなのか、定義することでルール作りがされています。

Button

↑コンポーネントの解剖図

ラベルだけのシンプルな構造です。
ラベルの補足のため、オプションでアイコンは入れることができます

また、spectrumでは、ボタングループ内で使用する種類は２種に限定されています。

Link

Spectrumでは、大きく「Standard」と「Quiet」のリンクの種類があります。
Standardにはアンダーラインがついており、Quietにはついていません。
Quietはフッターなど、テキストリンクが並んでいる状態に時などに使用します。

Quick action

↑コンポーネントの解剖図

カードなどにホバーやフォーカスした際に出てくるクイックアクション。

spectrumでは、quick action内では基本的にアイコンを使用することが推奨されていますが、アイコンで意味が伝わらない場合はテキストを使用します。

データビジュアル化 (Data Visualization)

spectrumのデータビジュアル化に関する部分はX軸、Y軸表記、凡例、バーチャート、線グラフと４つのセクションに分かれています。

ここから、一部抜粋してご紹介します。

X軸、Y軸表記

↑コンポーネントの解剖図

ここでのポイントは:
– 1. 数字表記の場合、グリッドラインの間に等間隔に目盛りを入れる (間に入れる目盛りは3-9つが推奨されている)
– 2. 0はグラフにおいて大事な位置づけのため、グリッドラインを太字で目立たせる
– 3. カテゴリが多い場合は、「その他 (Others)」とグループにし、インタラクティブリンクなどで開閉可能にする
– 4. カテゴリは横文字で読みやすいよう、Y軸に入れる

データのビジュアル化もこのようにちょっとしたポイントをおさえるとかなり見やすく、意味のあるビジュアル化をすることができます。

フィードバック (Feedback)

spectrumのフィードバックに関する部分はコーチマーク(チュートリアルに使われるカード)、モーダル (Dialog)、トースト (Toast)、ツールチップと４つのセクションに分かれています。

こちらも一部抜粋してご紹介していきます

トーストとモーダル

↑モーダルコンポーネントの解剖図

↑トーストコンポーネントの解剖図

トースト(Toast)とは、ユーザーに情報を伝えたりアクションを求める一時的な通知です。
トーストとモーダルの使い分けですが、トーストは基本的に優先順位の低い、シンプルな通知をする際にのみ使用します。（ユーザーの体験を区切る必要がない時はトーストを使用するのがベストです。）

逆にユーザーの注意が必要な大事な情報の場合はモーダルを使用します。

また、トーストは１アクションしか表示できないという制限がspectrum内にはあるので、２アクション以上を求める場合はモーダル(Dialog)として表示するのが良いでしょう。

インプット (Input)

フォームの部品に関する、セクションです。

チェックボックス

↑チェックボックスコンポーネントの解剖図

チェックボックスに関するポイントは以下です。

• チェックボックスのラベルはどういう場面で使うものなのか明確でない限りはラベルをつける
• チェックボックスを目立たせたい場合は、背景色に青(informative color)を使用する (フォームで利用規約など、チェックが必須のものの場合は目立つようにするなど)
• チェックボックスが使用できない際は、disable状態で表示することで、現状何らかの理由で使用できない状態であることをユーザーに伝えます
• チェックボックスとラベルを赤くすることで、エラーが状態であることを示す

Combo Box

↑Combo Boxコンポーネントの解剖図

Combo Boxとは、検索窓とドロップダウンメニューが合わさったUIです。

Combo Box、ドロップダウンメニュー、ラジオボタンの使い分け
Combo Box、ドロップダウンメニュー、ラジオボタンの使い分けですが、spectrum内ではこちらが明記されています。

• オプションが６つ以下の時はラジオボタンを使用する
• 6以上の場合で、それぞれの選択が複雑の場合はCombo Boxを使用する、そうじゃない場合はドロップダウンメニューを使用
• 検索やフィルタリングが必要の場合はCombo Boxを使用する、そうじゃない場合はドロップダウンメニューを使用

また、Combo Boxやドロップダウンメニューでの必須、任意表記に関してですが、Adobeとしては数が少ない方を表記する、ということを推奨しています。
(下記の場合は、任意項目の方が少ないので、「optional」のみを表記しています)

テキストフィールド

↑テキストフィールドコンポーネントの解剖図

主にテキストフィールドに関するポイントは:
– テキストフィールドにはラベルは基本的に必須となっています
– テキストフィールドの最小幅はフィールドの高さの1.5倍
– エラー、バリデーションなどの際はアイコンで補足をする

他にも必須／任意表記は数が少ない方のみを表記などフォームの別コンポーネントと近いルール決めがされています。

まとめ

以上、今日はspectrumから学べるデザインの基礎のコンポーネント編についてでした。

それぞれのコンポーネントのルール決めを実際に読んでいくと、統一感とアクセシビリティ、さらに可動性などが意識された作りになっています。

また、場合によって選択肢がある場合は、どの場合にどういったパターンを使用するべきなのかという記載もあり、全てのデザイナーに分かりやすく作られています。