2019年12月20日

デザイン

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

目次

  1. はじめに
  2. アクション
  3. データビジュアル化
  4. フィードバック
  5. インプット
  6. まとめ

はじめに

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

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

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

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

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

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

0.png (60.4 kB)

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

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

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

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

アクション (Actions)

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

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

Action Button

1.png (6.8 kB)

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

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

Button

2.png (3.4 kB)

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

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

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

3.png (18.4 kB)

ポイント

ボタングループは状況に応じて、左寄せ、右寄せを使い分けているようです。例えば、通常のテキストコンテンツに付随するボタンであれば、左寄せになっていますが、モーダルやカードの中では右寄せになっています。

合わせて、ボタングループ内のボタンの順番もボタングループが左寄せになっている場合は、プライマリボタンを左におきますが、ボタングループが中央寄せ、もしくは右寄せになっている場合は、プライマリボタンを右におきます。
4.png (90.5 kB)

Link

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

5.png (29.6 kB)

Quick action

6.png (68.8 kB)

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

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

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

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

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

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

X軸、Y軸表記

7.png (70.2 kB)

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

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

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

フィードバック (Feedback)

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

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

トーストとモーダル

8.png (23.5 kB)

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

9.png (19.1 kB)

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

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

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

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

インプット (Input)

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

チェックボックス

10.png (14.9 kB)

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

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

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

Combo Box

11.png (29.1 kB)

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

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

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

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

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

12.png (16.7 kB)

テキストフィールド

13.png (17.1 kB)

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

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

14.png (2.0 kB)

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

まとめ

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

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

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

3

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP