~コンポーネント編~AdobeSpectrumデザインシステム目次はじめにアクションデータビジュアル化フィードバックインプットまとめはじめに新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay20です!昨日はデザインツール「Drama」を使って、以前紹介したアニメーションの作り方の応用編のご紹介でした。【Drama】タイムラインでアニメーションを作ろう!本記事はAdobeのデザインシステム、spectrumから学べるデザインの基礎の続きの記事です。デザイントークンという概念や色の使い方、フォントサイズのルールについてご紹介しました。今回も記事は私の解釈で書かせていただいていて、元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しています。それぞれのコンポーネントの細かいルールまで確認されたい方はspectrumをご覧ください。今回の内容としては、デザインシステムの基礎(Foundation)を応用した、それぞれのコンポーネントについてご紹介していきます。フォントサイズや色の話よりも、ボタンやツールチップなど基礎を組み合わせてできる要素のお話になります。Adobeのspectrumでは、コンポーネントは大きく7つのセクションに分かれており、こちら沿ってインプットまでの4セクションについてご紹介します。(Actions)spectrumのアクションセクションは大きく4つに分かれています。Button↑コンポーネントの解剖図spectrumでは、このようにそれぞれのコンポーネントを要素分解した図が載っています。それぞれの要素がどういう時に追加されるべきなのか、定義することでルール作りがされています。Button↑コンポーネントの解剖図ラベルだけのシンプルな構造です。ラベルの補足のため、オプションでアイコンは入れることができますまた、spectrumでは、ボタングループ内で使用する種類は2種に限定されています。ポイントボタングループは状況に応じて、左寄せ、右寄せを使い分けているようです。通常のテキストコンテンツに付随するボタンであれば、左寄せになっていますが、モーダルやカードの中では右寄せになっています。合わせて、ボタングループ内のボタンの順番もボタングループが左寄せになっている場合は、プライマリボタンを左におきますが、ボタングループが中央寄せ、もしくは右寄せになっている場合は、プライマリボタンを右におきます。LinkSpectrumでは、大きく「Standard」と「Quiet」のリンクの種類があります。Standardにはアンダーラインがついており、Quietにはついていません。Quietはフッターなど、テキストリンクが並んでいる状態に時などに使用します。action↑コンポーネントの解剖図カードなどにホバーやフォーカスした際に出てくるクイックアクション。action内では基本的にアイコンを使用することが推奨されていますが、アイコンで意味が伝わらない場合はテキストを使用します。Visualization)spectrumのデータビジュアル化に関する部分はX軸、Y軸表記、凡例、バーチャート、線グラフと4つのセクションに分かれています。ここから、一部抜粋してご紹介します。カテゴリは横文字で読みやすいよう、Y軸に入れるデータのビジュアル化もこのようにちょっとしたポイントをおさえるとかなり見やすく、意味のあるビジュアル化をすることができます。(Toast)、ツールチップと4つのセクションに分かれています。↑トーストコンポーネントの解剖図トースト(Toast)とは、ユーザーに情報を伝えたりアクションを求める一時的な通知です。トーストとモーダルの使い分けですが、トーストは基本的に優先順位の低い、シンプルな通知をする際にのみ使用します。(ユーザーの体験を区切る必要がない時はトーストを使用するのがベストです。)逆にユーザーの注意が必要な大事な情報の場合はモーダルを使用します。トーストは1アクションしか表示できないという制限がspectrum内にはあるので、2アクション以上を求める場合はモーダル(Dialog)として表示するのが良いでしょう。(Input)フォームの部品に関する、セクションです。チェックボックス↑チェックボックスコンポーネントの解剖図チェックボックスに関するポイントは以下です。Boxとは、検索窓とドロップダウンメニューが合わさったUIです。Box、ドロップダウンメニュー、ラジオボタンの使い分けですが、spectrum内ではこちらが明記されています。Boxやドロップダウンメニューでの必須、任意表記に関してですが、Adobeとしては数が少ない方を表記する、ということを推奨しています。エラー、バリデーションなどの際はアイコンで補足をする他にも必須/任意表記は数が少ない方のみを表記などフォームの別コンポーネントと近いルール決めがされています。まとめ以上、今日はspectrumから学べるデザインの基礎のコンポーネント編についてでした。それぞれのコンポーネントのルール決めを実際に読んでいくと、統一感とアクセシビリティ、さらに可動性などが意識された作りになっています。場合によって選択肢がある場合は、どの場合にどういったパターンを使用するべきなのかという記載もあり、全てのデザイナーに分かりやすく作られています。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。~Citymapper編~アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。