Salesforce Lightning Design Systemから学ぶデザインシステムの必要性。

2020年11月13日 2020年11月18日

たぐと申します。
web制作会社でプロデューサーをしています。

今回は「デザインシステム」というワードがちweb制作業界界隈で流行ってる気がするので、今回はこのデザインシステムについてガイドライン的なものを公開しているSalesforce Lightning Design Systemを見ながら紹介します。

webサイトを構成する要素をコンポーネントとして汎用的に使えるように定義をしようとしている会社さん、フリーランスの方には参考になると思います。

デザインシステムという言葉の定義とその歴史

そもそもデザインシステムとは？
それは、デザインの基準を達成するために必要なもの、と定義することができそうです。

例えば、スタイルガイド、コンポーネント定義、ドキュメント、ツール、UIパターンなど。

この概念は、2017年にNathan Curtisという個人が提唱したワードのようです。

UXPin

結論：定義出来れば協力なツールに。

結論としては、汎用的に利用できるものが定義出来れば、それは

制作スピード
品質
企業ブランディング

等の観点において強力なツールになると思います。
では具体的に見ていきます。

Salesforceのデザインシステム「Salesforce Lightning」を見てみよう。

Salesforceが定義しているデザインシステム
「Salesforce Lightning Design System」。
です。

Lightning Design System

Salesforceは何を定義しているのか？
そこを見つつ、デザインシステムそのものについて理解を深めたい。

結構「アプリ」の「UI」に特化したものにも見えるが、概念はwebサイトの制作にも参考になると思います。

Salesforce Lightningでは大きく4つの項目に分けて、その紹介をされているようです。

デザイン指針
コンポーネント定義
デザイン要素
ツール・プラグイン

この４つです。

1. デザイン指針

デザインシステムにおいて大事する考えです。
4つあります。

Clarity：明確であること
Efficiency：効率的であること
Consisitency：一貫していること
Beauty：美しいこと

ここを押さえましょう、と言っています。
webサイトやアプリの設計をする際、とても大事な考え方だと思います。
制作しながら「これらは守られているか」とプロジェクトメンバーで意識を統一するだけでも違うアウトプットになりそうな気がします。

2. コンポーネント定義

次にコンポーネント定義です。
コンポーネントとは、ボタン、カード、フォーム要素、表、アイコン、メニュー
といった汎用的な「画面を構成する要素や機能」を整理したものです。
ここは結構数がありますね。
Salesforceのサービス、webアプリケーションではここに定義されている項目をベースにされているようです。

「機能」を提供するものが多いので、コンテンツ訴求よりは、機能を提供すること前提のwebアプリや、webサイト管理者向けの管理画面などで特に参考になるものかもしれませんね。

Accordion：アコーデオンメニュー、プルダウンメニュー
Activity Timeline：タイムライン
Alert：警告
App Launcher：アプリランチャー
Avatar：アバターアイコン
Avatar Group：アバターアイコン（複数人）
Badges：タグ
Brand Band：ブランドイメージ背景
Breadcrumbs：パンくずメニュー
Builder Header：編集メニュー
Button Groups：ボタングループ
Button Icons：ボタンに付随するアイコン（設定アイコン、いいねアイコン等）
Buttons：ボタン
Cards：カード
Carousel：カルーセルイメージスライダー
Chat：チャット会話
Checkbox：チェックボックス
Checkbox Button：チェックボックス（ボタン）
Checkbox Button Group：チェックボックス（ボタングループ）
Checkbox Toggle：チェックボックス（トグルボタン）
Color Picker：カラーピッカー
Combobox：コンボボックス（プルダウンメニュー）
Counter：数値カウンター（+-ボタン）
Data Tables：表
Datepickers：カレンダー（デートピッカー）
Datetime Picker：カレンダー（デートタイムピッカー）
Docked Composer：通話記録
Docked Form Footer：フォームの入力完了ボタン
Docked Utility Bar
Drop Zone
Dueling Picklist：左右選択メニュー
Dynamic Icons：動くアイコン（イコライザー表示等）
Dynamic Menu；開閉メニュー
Expandable Section：開閉コンテンツ
Expression
Feeds：コメント欄
File Selector：ファイル選択ボタン
Files：ファイルプレビュー（PDFファイル等）
Form Element：テキストボックス
Global Header：共通ヘッダー
Global Navigation：グローバルナビゲーション
Icons：アイコン
Illustration：イラストグラフィック
Input：テキストボックス
List Builder：リスト（カート、購入リスト的なもの）
Lookups：検索ボックス（サジェストあり）
Map：Googlemap
Menus：動的メニュー
Modals：モーダル
Notifications：通知
Page Headers：ページタイトル（操作パネルあり）
Panels：左右から引出されるパネル
Path：パス
Picklist：選択メニュー（選択したものがアクティブ）
Pills：タグ（削除あり）
Popovers：フキダシ
Progress Bar：進捗表示バー（%表示）
Progress Indicator：進行ステップ表示バー
Progress Ring：進行ステップ表示リング
Prompt：モーダル（注意喚起）
Publishers：コメント入力
Radio Button Group：ラジオボタン（ボタン）
Radio Group：ラジオボタン
Rich Text Editor：リッチテキストエディター
Scoped Notifications：注意表示（ラベル）
Scoped Tabs：タブ
Select：選択ボックス
Setup Assistant：手順案内（チェック付き）
Slider：数値スライダー
Spinners：ローディング、処理中表示
Split View：左右分割階層メニュー
Summary Detail：概要ボックス
Tabs：タブ
Textarea：テキストエリア
Tiles：関連情報パネル
Timepicker：時間選択ナビ
Toast：フィードバックポップアラート
Tooltips：フキダシ説明
Tree Grid：トグルダウンの表
Trees：トグルダウンのリンク一覧
Trial Bar：トライアル表示バー
Vertical Navigation：縦並びのローカルナビゲーション
Vertical Tabs：縦並びのタブ
Visual Picker：視覚的要素を含むボタン
Welcome Mat：トピック表示の導入メニュー

3. デザイン要素

デザインを構成する各種パラメータについて定義しています。

色
フォント
透明度
行間
サイズ
影
時間体系

などについてですね。

4. ツール・プラグイン

デザイン定義するにあたり、汎用的に活用できるものを整理したもの。

デザインアプリのプラグイン
コンポーネント集

などですね。

課題とまとめ

私もweb制作会社でこのような活動に関わっているのですが、別のレベルで課題として感じることがあります。

それは誰がそれを定義し、どの範囲でそれを使い、どう周知するか。

というところです。
個人で使うならまだしも、デザインを取り入れる企業、デザインを提供する企業それぞれの立場があるので、チームとして、共通認識を持って、定義し、活用する運用ルールが定まっていないと意味がありません。

デザインを行う会社において、そこはバラバラにやったり、権威の無い人がやってしまうと、それに従わない人がどうしても出てきて逆に面倒なことになりがちです。

ここの、周知と運用ルールの策定が、まず最初の大きい課題だと感じます。

なので、企業単位でデザインシステムの策定を考えるのであれば、まずは

誰が定義するのか
誰がレビューして承認するのか
どこに適用するのか
どう管理するのか
何を定義するのか

そういった外堀部分を埋めておくことをお勧めします。

その上で汎用的に利用できるものが定義出来れば、それは

制作スピード
品質
企業ブランディング

等の観点において強力なツールになると思います。