お知らせ(デザイン)
デザインデータ(Figma)v2.1.2を公開しました。
v2.1.2の更新内容
- 「緊急時バナー」コンポーネントの仕様を変更(バナータイトル、クリッカブルエリア)
デザインデータ(Figma)v2.1.1を公開しました。
v2.1.1の更新内容
「ドロワー」コンポーネントをモーダルに限定した仕様として整理したため、下タイプ(モードレス)を削除
デザインデータ(Figma)v1.4.3に記載のガイドラインを、デザインシステム本体(本ウェブサイト)に掲載しました。
デザインデータ(Figma)v2.1.0を公開しました。
v2.1.0の更新内容
- 全体
- 各コンポーネントをページ化
- コンポーネント
アコーディオン
- 開閉アイコンが文頭に配置されるコンポーネントをデフォルトに設定
- 閉用アイコンのミディアム、エクストラスモールサイズを追加
- 全てのコンポーネントのパディングを調整・変更
- アコーディオン展開時のリターンリンクを追加
メニューリストボックス
- 「ガイドラインを見る」のリンクURLを修正
- ディスクロージャーコンポーネントを新規追加
デザインデータ(Figma)v2.0.4を公開しました。
v2.0.4の更新内容
- 全体
- Color、Size、TypographyのLocal variablesを設定
- 基本デザイン
アイコン
- arrow_upwardのスモール、arrow_downward、drag_indicator、errorアイコンを追加
- ステートを含むアイコンをAction Iconとして追加
カラー
- Color stylesを全てLocal variablesに変更
リンクテキスト
- Local styles内のText stylesに「Link」を追加
- コンポーネント
チェックボックス
- hover時の表現を変更(グレーボーダーを追加)
ドロワー
- 下タイプ(モードレス)を追加
ボタン
ボタンバリアブルを統合し、Styleプロパティを追加。各スタイルはStyleプロパティより変更、選択が可能となります。
- コンポーネント内のAuto layout設定を変更
- テキストボタン、hover時の下線ウェイトを変更
- 下線付きのテキストにローカルライブラリーを適用
メニューリストボックス
- メニューリストボックスの上下左右マージンを24 CSS pxに変更
メニューリスト
- Menu List ItemsのWith Thumbnailにボーダー有無のバリアントを追加
- Boxed / Menu List Itemsコンポーネントの左右のマージンを24 CSS pxに変更
Boxed / Menu List Items(With
Thumbnailを除く)コンポーネントのバリアントを統合し、サイズプロパティを追加- Category Titleのインデントを追加し、16、24、32、40、48、56に変更
ラジオボタン
- hover時の表現を変更(グレーボーダーを追加)
ランゲージセレクター
- メニューリストボックスとメニューリストの変更を同コンポーネントに反映
- リストコンポーネントを新規追加
デザインデータ(Figma)v2をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
デザインデータ(Figma)v2をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
デザインデータ(Figma)v2とv1をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
デザインデータv2.0.0を公開しました。
v2.0.0の紹介(従来のデザインシステムv1.4.2からの主な変更点)
今後は専用サイトでコンテンツ展開するため、Figma内に記載されていた「利用の手引き」、「ガイドライン」、およびPagesから「テンプレート」を削除
- 「スタイル(Style)」としていたPagesの名前を「基本デザイン(foundations)」に変更
アクセシビリティ確保のため、デザインシステムの方針としてフォントサイズは16px以上を求めているため、Figma内でのテキストのフォントサイズを原則16px以上に設定
- フォーカス状態の視認性向上のため、フォーカスインジケーターのスタイルを変更
フォーカスインジケーターのスタイル変更にともない、カラートークンのうちFocus-BlueとFocus-Yellowを削除
リンクの視認性向上のため、「ユーティリティリンク」のDefaultステートおよびVisitedステートにUnderlineを追加
コントラスト要件を満たすため、「リンクテキスト」のHoverステートのスタイルにおいて、Defaultに対してbackground-colorを変化させていたのを取りやめ、underlineの太さを変化させるように変更
- ディスレクシア対応のため、ベースとなるテキストカラーをGrey-900からGrey-800に変更
FigmaのColor
stylesを新カラートークンのみの構成に変更(移行用で保持していた旧カラートークンを削除)FigmaのText
stylesを新タイポグラフィトークンのみの構成に変更(移行用で保持していた旧タイポグラフィトークンを削除)- FigmaのGrid stylesに基本デザイン「レイアウト」の内容を追加
イラストレーションアセットをデザインデータから分離(イラストレーションアセットは引き続きDS1内からご参照ください)
従来のデザインシステムv1.4.1におけるアクセシビリティ上の重要な問題点を含む各種修正を実施し、v1.4.2として公開しました。
v1.4.1からv1.4.2へのコンポーネントの修正内容
色覚多様性を考慮し、識別性を高めるため、フォームコントロールの「必須」ラベルの接頭辞として「※」(米印、U+203B
Reference Mark)を追加色覚多様性を考慮し、識別性を高めるため、フォームコントロールの「エラーテキスト」の文頭に「*」(アスタリスク、U+FF0A
Fullwidth Asterisk)を追加「テキスト入力」、「テキストエリア」、「セレクター」、「ラジオボタン」、「チェックボックス」の「必須」ラベルの文字サイズ、および「ラジオボタン」、「チェックボックス」に関してはラベル自体のフォントサイズが、それぞれ14px・12pxになっていたため、すべて16pxに修正
「ノティフィケーションバナー」内の「情報提示
2(Info)」のボーダーおよびアイコンのカラーを黒(Black)からグレー(Solid Grey-536)へ変更- 「ノティフィケーションバナー」内の「バナーデスクリプション」を任意要素に変更