本文へ移動

[バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました

*タイトルにバージョンを追加しました

ヘッダーエリアを構成するコンポーネント群を新規追加しました

デスクトップ、及びモバイルビューでヘッダーエリアを構成するために必要なUIコンポーネントを追加しました。
以下のコンポーネントが含まれます。

[コンポーネント] ヘッダーコンテナを新規追加しました

概要

  • ヘッダーコンテナとは、ロゴ、グローバルメニュー、ユーティリティリンク、ランゲージセレクター、検索ボックス、ログイン(ログアウト/サインアップ)などのコンポーネントが入る入れ物としてのコンテナです。

ッダーコンテナのスクリーンキャプチャ

[コンポーネント] グローバルメニューを新規追加しました

概要

  • サイト内で一貫して表示され、カテゴリレベルでの回遊ナビゲーションとして機能します。デスクトップビューのみで使用されるコンポーネントです。

グローバルメニューのスクリーンキャプチャ

[コンポーネント] ドロップダウン(コンテナ)を新規追加しました

概要

  • ドロップダウンはメニューリストなどが入るコンテナです。グローバルメニューで下層へのリンクをメニューとして追加する場合や、検索ボックスのフィルター表示などでも使用します。

ドロップダウン(コンテナ)のスクリーンキャプチャ

[コンポーネント] メガメニューを新規追加しました

概要

  • グローバルメニューから呼び出される、メニューリスト以外のコンテンツも内包できる領域が大きい、表示内容の幅的自由度の高いドロップダウンのバリエーションです。原則としてデスクトップビューのみで展開されるコンポーネントです。

メガメニューのスクリーンキャプチャ

[コンポーネント] メニューリストを新規追加しました

概要

  • メニューアイテムを束ねたコンポーネントです。ローカルメニューとしてコンテンツエリアに配置したり、ドロップダウンやメガメニューの中などに内包して使用します。

メニューリストのスクリーンキャプチャ

[コンポーネント] ハンバーガーメニューボタンを新規追加しました。

概要

  • 主にモバイルビューで使用され、ドロワーをオーバーレイ等の表示で開閉する起点となります。

ハンバーガーメニューボタンのスクリーンキャプチャ

[コンポーネント] ドロワーを新規追加しました

概要

  • ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。ハンバーガーメニューボタンのような起点となるコンポーネントによって開閉が制御されます。展開パターンはペイン展開、オーバレイ展開(モーダル)、オーバーレイ(モードレス)展開の3パターンがあります。

ドロワーのスクリーンキャプチャ

[コンポーネント] モバイルメニューを新規追加しました

概要

  • 主にモバイルビューで使用し、ドロワーをオーバーレイ表示で開閉する起点となります。

モバイルメニューのスクリーンキャプチャ

[コンポーネント] ディバイダーを新規追加しました

概要

  • ディバイダーは、異なるセクション、コンポーネント、またはコンテンツのグループ間に設けられる視覚的な区切りで、HTMLの<hr>要素に相当します。関連する要素あるいは無関係な要素の間に明確な区切りを設けることで、読みやすさを向上させる役割を果たします

ディバイダーのスクリーンキャプチャ

[スタイル]“Focused”カラーを修正しました

変更点

  • アクセシビリティの観点から、十分なコントラスト比を保つようWood-600で定義されていた“Focused”カラーの色が、Wood-500の色になっていたのを修正しました。

“Focused”カラーの変更点を紹介している。変更箇所が赤枠で囲まれている。

[コンポーネント] Figma上でのアイコンの扱いを変更しました

変更点

  • イラスト・アイコンアセットのリリースに伴い、Figma上でのアイコンが扱いが変更されました。フォームコントロールで使用されている従来のアイコンを新規の扱いでのアイコンに置き換えました。ただし、スタイルなど視覚的な変更はありません。

Figma上でのアイコンの変更について紹介している。変更箇所が赤枠で囲まれている。

[テンプレート] 「読み取り」「認証」テンプレートを削除しました

変更点

  • 現在使用されていないテンプレートを削除しました。

「読み取り」「認証」テンプレートが削除されたことを示すスクリーンキャプチャ

[イラスト・アイコン素材] 「マイナンバーカード」裏面の要素を変更しました

変更点

  • ナンバーを変更しました。

「マイナンバーカード」裏面の変更箇所を紹介している。変更箇所が赤枠で囲まれている。

[イラスト・アイコン素材] 「実装上の注意」のディスクリプションを修正しました

変更点

  • 「実装上の注意」のディスクリプションを修正しました。

「実装上の注意」のキャプション修正を紹介している。変更箇所が赤枠で囲まれている。

デザインデータ

デザインツールFigmaが提供するFigma Communityより、デザインデータを閲覧可能です。

Figma Community

関連情報