[バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました
バージョン1.4.0を公開しました。今回追加・修正・更新を行ったのは以下になります。
- 新規スタイル：カラー2.0
- 新規スタイル：エレベーション
- 新規コンポーネント：ノティフィケーションバナー
- 新規コンポーネント：緊急時バナー
- 新規コンポーネント：リソースリスト
- 新規コンポーネント：プログレスインジケーター
- その他の変更／修正
- デザインデータ
[新規スタイル] カラー2.0を追加しました
注意：既存の「カラー」ガイドはそのまま継続して利用できます。
概要
- カラーの規定を刷新し、様々なサービスに汎用的に利用できるカラーガイドに追加しました。
- 「カラー2.0」はデザイナーの方が各々のサービスに相応しいカラースキームを柔軟に構築をできることを目的としています。
- セマンティックやリンクカラーなどを含むカラー使用の定義を改訂しました。
- 「プリミティブカラー2.0」で追加・変更されたカラーはFigma Libraryのカラースタイルから使用できます。またアクセシビリティの観点からカラーのコントラスト比の基準表示を加えました。
[新規スタイル] エレベーションを追加しました
概要
- エレベーションは、ドロップシャドウなどを利用し、ボタン、カードなどの要素がその下の表面に影を落とす視覚効果です。これにより、要素は背景からわずかに浮いているように見え、高さの奥行きと分離感（エレベーション）を演出します。
- 各々のサービスに相応しい高さのレベルをシステム化できるよう、エレベーションの考え方や設定する必要なガイドラインを提供しています。
[新規コンポーネント] ノティフィケーションバナーを追加しました
概要
- サイト/サービス全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、サイト/サービス側からユーザーへ提示する場合に用いる通知バナーです。通知に対するユーザーアクションを要求することが可能です。メンテナンスを通知したい、ユーザーの対応が必要な情報を通知してアクションさせたい、といった要求に対応することができます。
※ユーザーのアクションごとに逐一状況を通知するといった要求には「スナックバー」コンポーネントを使用します(v1.4.1で提供予定)。 - カラー改訂版のセマンティックカラーを用いて異なった通知目的に対応するコンポーネントを規定しました。
- 使用や実装におけるガイドラインが提供されています。
[新規コンポーネント] 緊急時バナーを追加しました
概要
- 緊急時バナーは、当該ウェブサイトで本来成すべきコミュニケーションを中断してでもファーストビューを占有して注意を促すためのコンポーネントです。たとえばユーザーの生命や財産に影響をもたらすような事象が発生して直ちに知らせなければならないような緊急性の高い告知のために使用します。緊急時バナーはより迅速にメッセージを伝達するためのコンポーネントであり、最もシンプルな構造での実装で全てのユーザーが確実に認知できることを最優先したスタイルとなっています。
- 使用や実装におけるガイドラインが提供されています。
[新規コンポーネント] リソースリストを追加しました
概要
- リソースリストは、共通した複数の任意情報で構成されたオブジェクトのリストを表示します。
複数のオブジェクトの状態一覧をリストで表示したいといった要求に対応します。 - 多様な用途に対応するコンポーネントのバリエーションとその使用におけるガイドラインが提供されています。
[新規コンポーネント] プログレスインジケーターを追加しました
概要
- プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。
- 用途に応じた利用を考慮し、円形と線形のスタイルを提供。また、アニメーション作成用のパーツとプロトタイプも用意されています。
- 使用や実装におけるガイドラインが提供されています。
以下は今回の変更／修正になります
修正 [スタイル] カラー
- プリミティブカラーのSeaのカラーチャート900のチップが800と同じカラーでしたので、これを修正
修正 [スタイル] タイポグラフィ
- 「箇条書き」の「字下げを設けた場合」の作例を修正（インデントとビュレットを修正）
修正 [コンポーネント] ボタン
修正箇所（この修正はバージョン1.3.4のリリース直後に修正されたものです。）
旧ver. 1.3.3のボタンコンポーネントをアーカイブコンポーネントとして追加しました。
デザインシステムバージョン1.3.4更新後、作業中のファイルでデザインシステムライブラリを更新するとボタンコンポーネント内の一部のレイヤー（テキストやサイズなど）がデフォルトのコンポーネントに戻ってしまう状況が発生していると報告を受け、デザインシステムバージョン1.3.4に修正を加え、そのライブラリとFigma Communityのファイルをバージョン1.3.5としてアップデートしました。
- デザインシステムバージョン1.3.3のボタンコンポーネントはアーカイブコンポーネントとして戻されています。アーカイブ化されているのでライブラリには表示されませんが、バージョン1.3.3、またはそれ以前のボタンコンポーネントを元に作成され、変更を加えた作業ファイル内のボタンは更新されず、変更は維持されます。
修正 [コンポーネント] ディバイダー（メニューリスト、モバイルメニュー、アコーディオン
修正箇所
- 最も明るいディバイダーコンポーネントの色をSumi-500（コントラスト比3:1以上）に設定しました。これによりディバイダーコンポーネントに使用している他のコンポーネン内の作例などのディバイダーはSumi-500に変更されています。
デザインデータ
デザインツールFigmaが提供するFigma Communityより、デザインデータを閲覧可能です。