デザインリソースについて
FDSはFixelが開発したデザインシステムです。FDS UI KitとUXHubを組み合わせて利用することで、開発プロセスをよりスムーズに進めることができます。FigmaコミュニティFDS UI Kitまた、本サイトには上記Figmaの各コンポーネントガイドラインを記載してい
Drop ShadowZ軸に沿ったコンポーネント間の距離を表現します。現実世界にあるオブジェクトのように影を落とすことで、ユーザーはオブジェクト同志の位置関係を理解し、直感的に操作できるようになります。後ろにあるものは影が短く、手前にあるものの方が影が長くなります。図に掲載しているコンポーネン
Fontは読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。FDSでは幅広い使用例をサポートするためにより明瞭な印象を与える「BIZ UDPGothic」を使用しています。このFontはWindowsで標準で搭載されており、Macもダウンロードす
FDS - Design Tokens Pluginを使ってColor Tokensの編集を行い、カラーテーマを設計する事ができます。プラグインのインストールFDS - Design Tokens Pluginを使ったカラーテーマの設計一括設定Primary ColorをDrop
FDSでは色とサイズの定義をVariablesで行っています。構成（Collections）Alias ColorMainやLight、HoveredやSelectedといった主な役割を想定した色を定義しています。ハードコードした値ではなくGlobal Tokenを参照していま
Slot ComponentとはInstanceを入れる事のできる箱のようなものです。FDSでは、このSlot Componentを使う事で高速なモックアップ制作や汎用的なコンポーネントの使用を可能にしています。特徴 - （ 1 ）SlotはSpacingおよび縦組・横組の定義を持って
ページにおける大きな情報のまとまりの、数・配置を決めるアイテムです。Sectionは情報のまとまりの箱となるContainerで構成されています。レイアウトの骨格となるため、コンテンツの構造化と整理に役立つ重要な要素です。関連する情報がまとまって表示されることで、ユーザーはコンテンツの構造を理解し
画面構成の土台となるアイテムです。PC/SPのデバイスに合わせたTemplateを用意しています。TemplateはDrawer Menuの有無や種類、PC版コンテンツエリアのSetionタイプ（Containerの配置方法）を選ぶことができます。使い方画面を作成する際
Linkをクリックする事で他ページへの遷移、ページ内での遷移、ファイルやメールアドレス、電話番号へのアクセス等が行われます。Properties （振る舞いの設定）Component Propertiesで設定されている内容。必要に応じてアイコンを表示する事ができます。
Headerなどに配置するLogoのダミーデータです。配置要素に合わせて拡縮する「Sample-Scale」、配置要素の拡縮に左右されない固定サイズの「Sample-Fix」、具体的なロゴイメージを排除した「Placeholder」の３つを用意しています。Variables （色の設
アイコンを配置する際には「Icon Scale」を使うようにします。アイコンとテキストを並べる際は、できるだけそれぞれが同じサイズに見えるように設定してください。FDSで使用している以外のアイコンを使う場合はGoogle Fontsから検索・導入するかFigma Community
Buttonはユーザーに処理（アクション）をさせるために使用する要素です。選択すると、対応するビジネスロジックが作動します。FDSでは以下の3タイプのボタンを用意しています。Containedメインアクションに使用します。1つのセクションに最大で1つのContained Buttonを
ページ最下部に固定されるコンポーネントです。おもにクレジット表記に使用します。Properties （振る舞いの設定）Component Propertiesで設定されている内容。
Body Textに使用するColor Tokensです。本文のデフォルトカラー、意味のある箇所にアサインするロールカラーを定義しています。Variables （色の設定）各ステート時の配色はこちらを参考にしてください。StyleTokenDefaultG
ユーザーがアカウント関連機能にアクセスして管理できるようにするためのUIです。通常Popup Menuと併せて使用します。Properties（振る舞いの設定）Component Propertiesで設定されている内容。Variables（色の設定）
Pagenationは、大量のコンテンツやデータを複数のページに分割し、次のページや前のページに移動するためのコントロールとして使用します。種類Paginationは、以下3種類を利用可能です。Pagination Basic：Paginationの基本機能のみPagination
Popup Menuは、クリックすることで追加情報を表示することができます。中身はカスタマイズ可能でListやButtonなどのインタラクションを含むことができます。メニューのカスタマイズPopup Menu / Customizeを使ってメニューの中に他のインスタンスを入れる
Shortcutは、業務上よく使う機能やページに素早く遷移するためのコンポーネントです。ユーザーは、メニューの項目を選択するなどの複数の手順を経る代わりに、Shortcutを使用して直接操作や機能にアクセスすることができます。Properties （振る舞いの設定）Compon
Headerは、ロゴやサービス名、アカウント情報、設定や通知などのグローバルなアクションへのアクセスを提供します。ページの最上部に表示し、スクロール固定され常時見えている状態になります。SPでは画面サイズの関係で表示できる情報量を制限し、メニュー内で情報を表示するためその導線を設置していま
画面の端に表示され、コンテンツを開閉することが可能なパネルです。Drawerは、ユーザーにさまざまなオプションや設定にアクセスしたり、特定のタスクを実行したりするために使用できます。Drawerを使用して、ナビゲーションメニューや検索などの様々なオプションを表示できます。PCDrawe
ページの上部、または上下に配置され、階層内の現在の場所を表示します。選択した項目の階層の上位の状態に戻ることができます。Properties（振る舞いの設定）Component Propertiesで設定されている内容。カラートークンStateToken
ユーザーがオンとオフの状態を切り替えるためのUIコンポーネントです。通常、トグルスイッチやチェックボックスのような外観を持ち、オンとオフの2つの状態を持ちます。マークするだけのCheckboxとは異なり、Switchは状態を直接変更できます。Switchは、さまざまな設定やオプションの有効化や無効
ユーザーが時間を選択するためのコンポーネントです。ユーザーは、特定の時間や時間範囲を選択して、その情報をアプリケーションに送信したり、表示することができます。Properties （振る舞いの設定）Component Propertiesで設定されている内容。
ユーザーが複数の選択肢の中から1つだけを選択するためのインタラクティブなコンポーネントです。ラジオボタンは、選択項目の横に表示されます。ユーザーは、その中から1つだけを選択することができます。設計の原則複数選択が必要な場合、もしくは選択する項目がひとつしかない場合は、必ずチェックボッ
Inputは、ユーザーがコンテンツやデータを操作したり入力したりすることが可能なコンポーネントです。Form Setに入れてLabelやHelper Textとセットで使用します。設計の原則コンテナーの横幅は、言葉の長さに合わせて調整しましょう。ラベルテキストは端的に表現してください。入力
Form Setは、ユーザーがデータを入力したり、オプションを設定したりするための、入力コンポーネントのグループです。設計の原則Verticalラベルを垂直方向に配置したタイプ。ユーザーに入力させたい項目が多い場合は、ユーザーの目線の動きを抑えられます。Horizontal主に検索エリ
File Uploadは、ユーザーが1つまたは複数のファイルを選択し、特定の場所にアップロードすることができるコンポーネントです。Variables （色の設定）各ステート時の配色はこちらを参考にしてください。LV1 / File SelecElemen
ユーザーが複数のオプションの中からひとつの選択肢を選ぶことを可能にするコンポーネントです。Form Setに入れてラベルとセットで使用しますが、入力項目が1つしかなく、その意味を画面タイトルなどで明確に説明できる場合は省略可能です。設計の原則Popup Menuと一緒に使用します。
日付を選択または入力するためのUIです。入力する日付が当日に近い場合に有効なコンポーネントであり、生年月日などある程度遡って入力する必要がある場合にはプルダウンを使用してください。設計の原則Inputユーザーが入力する日付が1日の場合はDefault、期間を入力する場合はRangeを使用し
ユーザーが複数のオプションから複数の項目を選択するためのUIです。チェックボックスを1つだけ使用する場合は、Switchを使って2つの状態を切り替える事と同じですが、以下の違いがあります。Switch=状態を直接変更できるCheckbox=マークするだけのUIで、状態の変更には別
階層構造を持つデータを視覚的に表示するためのUIコンポーネントです。Treeは、親要素と子要素の関係によって形成される階層構造を視覚的に表現し、ユーザーがデータを探索したり操作したりするのに役立ちます。用途として主にファイルシステム、カテゴリやサブカテゴリの階層、組織図、フォルダとファイル
ユーザーに対して情報やヒントを提供するためのコンポーネントです。通常、ユーザーが要素にカーソルを合わせる（ホバーする）と、関連する情報が短いメッセージで表示されます。ユーザーがカーソルを外すと、Tooltipは非表示になります。Properties（振る舞いの設定）Componen
ユーザーが表示/非表示を切り替えることができる情報やヒントを提供するコンポーネントです。通常、ユーザーがアイコンやボタンをクリックすると、関連する情報が表示され、再度クリックすると非表示になるように設計されます。短い文字情報のみ表示するタイプのToggle tip Componentは「T
1つの主題に関連するコンテンツをグループ化し、表示できます。コンテンツは、さまざまなタイプとサイズの複数の要素で構成できます。Properties （振る舞いの設定）Component Propertiesで設定されている内容。PCSP
分類または設定や状態をマークする時に使用します。用途に合わせて色を設定したり、追加・削除の機能をできるようにしてください。Properties（振る舞いの設定）Component Propertiesで設定されている内容。
Tableは、データを表形式で表示するためのコンポーネントです。行と列からなるグリッド構造を持ち、セルにデータが配置されます。Tableは、通常、ヘッダー行、データ行、フッター行で構成されます。ヘッダー行は列の見出しを表示し、データ行は実際のデータを表示します。フッター行は、データの集計値
Tabは、関連するコンテンツをグループ化し、ユーザーがそれらのコンテンツ間を切り替えることで、ページを離れることなく表示を切り替えられるようにするUIです。Tabは、水平に配置された一連のタブ（ボタンやリンク）から成り、各タブには対応するコンテンツが関連付けられています。ユーザーが特定のタ
Headlineは見出しです。ページのコンテンツにおいて見出しの役割をします。Title with Buttonsはページ全体の見出し、Title with subTitleはコンポーネントやUIの固まりに対する見出しとして使用できます。設計の原則見出しレベルは、見た目の大きさではなく、文
プレビュー可能な画像画像を表示する必要がある場合に使用します。画像の差し替え方デフォルトに設定されている画像を差し替えしたい場合、右のパネルからimegeを選択し、「Choose image」を選択し、差し替えたい画像をアップロードすると差し替えることができます。
Chart (グラフとも呼ばれます) は、データを視覚化するためのものです。ユーザーの見たい視点を考慮し、最適なChartを選ぶようにしましょう。Stats現在の値を要約し、一目で確認したい時に使用します。使用グリッドは1/4〜1、表示サマリー数は表示グリッドに応じて調整します
折りたたんだり展開したりできるコンテンツ領域です。Accordionスタイルでは、一度につき一つのPanelのみ展開する事ができます。オープン時に表示される領域.Panelの中身は、Swap Instanceで他のコンポーネントに変更する事ができます。使用例Pro
通知があることやステータスをユーザーに知らせるためのパーツです。バッジは通常、目を引く魅力的な通知、またはユーザー アバターの近くに表示され、Numberは未読メッセージ数を表示します。Properties（振る舞いの設定）Component Propertiesで設定され
Avatarはユーザーのプロフィール写真やアイコンを表示するために使用できます。通常、ユーザーのアイデンティティを表示したり、ユーザーに関連付けられたコンテンツを識別したりするために使用されます。Badgeを組み合わせてリマインダーや通知に使用され、ユーザーに重要な情報を明確かつ簡潔に伝えるのに役
ユーザーにメッセージや通知を表示するためのUIコンポーネントです。Snackbarは、画面の一部に一時的に表示され、一定の時間が経過すると自動的に消えることが一般的です。Snackbarは、アクションの完了や状態の変化、エラーメッセージの表示など、さまざまな目的で使用されます。通常、画面の
Notificationは、ユーザーに情報を伝えるためのメッセージ・通知のことです。ユーザーの行った操作へのフィードバックの他、システムからのお知らせ・通知・障害なども表示できます。背景にはOverlayが入ります。表示中は背景画面の操作ができずユーザーが能動的に消す必要があり、Alertよりも強
ページまたはセクションの読み込み状態を表示します。ページの一部が非同期データを待機しているとき、またはレンダリングプロセス中に、この読み込みアニメーションを使う事でユーザーの不安を効果的に軽減できます。使用時の注意ページ全体、もしくは一部、またアクションに対する処理が読み込み中など場合に合
Dialogは、重要な情報を知らせ、決定や選択を求めるパーツに対して適用します。設計の原則Dialogは、ページ全体に黒いオーバーレイがかけられた上に表示され、オーバーレイの下に見えている機能は操作できません。使用時の注意・複数のタスクを含む場合があります。一時的にユーザーの
ユーザーに何かを通知したり、警告したりするために使用されます。Alertを使用して、次のようなメッセージを表示できます。・成功メッセージ・警告メッセージ・エラーメッセージまた、ユーザーに特定のタスク実行を依頼するためにも使用できます。たとえば、次のようなタスクを実行するように依頼できます。