本文へ移動

メニュー

お知らせデザイン

  • デザインデータ(Figma)v2.1.2を公開しました。

    v2.1.2の更新内容
    • 「緊急時バナー」コンポーネントの仕様を変更(バナータイトル、クリッカブルエリア)
    「v2.1.2の更新内容」の先頭に戻る
  • デザインデータ(Figma)v2.1.1を公開しました。

    v2.1.1の更新内容
    • 「ドロワー」コンポーネントをモーダルに限定した仕様として整理したため、下タイプ(モードレス)を削除

    「v2.1.1の更新内容」の先頭に戻る
  • デザインデータ(Figma)v1.4.3に記載のガイドラインを、デザインシステム本体(本ウェブサイト)に掲載しました。

  • デザインデータ(Figma)v2.1.0を公開しました。

    v2.1.0の更新内容
    全体
    • 各コンポーネントをページ化
    コンポーネント
    • アコーディオン

      • 開閉アイコンが文頭に配置されるコンポーネントをデフォルトに設定
      • 閉用アイコンのミディアム、エクストラスモールサイズを追加
      • 全てのコンポーネントのパディングを調整・変更
      • アコーディオン展開時のリターンリンクを追加
    • メニューリストボックス

      • 「ガイドラインを見る」のリンクURLを修正
    • ディスクロージャーコンポーネントを新規追加
    「v2.1.0の更新内容」の先頭に戻る
  • デザインデータ(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時の表現を変更(グレーボーダーを追加)
    • ランゲージセレクター

      • メニューリストボックスとメニューリストの変更を同コンポーネントに反映
    • リストコンポーネントを新規追加
    「v2.0.4の更新内容」の先頭に戻る
  • デザインデータ(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内からご参照ください)

    「v2.0.0の紹介(従来のデザインシステムv1.4.2からの主な変更点)」の先頭に戻る
  • 従来のデザインシステム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)へ変更

    • 「ノティフィケーションバナー」内の「バナーデスクリプション」を任意要素に変更
    「v1.4.1からv1.4.2へのコンポーネントの修正内容)」の先頭に戻る