スタイルガイド

基本デザイン

カラー

• 次のようなセマンティックカラーユーティリティクラスを使用することを推奨する
  https://daisyui.com/docs/colors/
• 背景色と文字色は、それぞれのセマンティックカラーの組み合わせを利用する
• セマンティックカラーは、テーマを利用して決定する
  https://daisyui.com/docs/themes/

タイポグラフィとレイアウト

• https://design.digital.go.jp/foundations/layout/
• https://daisyui.com/docs/layout-and-typography/

タイポグラフィ

準備中

• https://design.digital.go.jp/foundations/typography/

レイアウト

• グリッドシステム(grid や flex )を使用する
• レスポンシブデザインを考慮する場合は、ブレークポイントを lg とする
  • モバイル・タブレット(768px未満)
  • デスクトップ(768px以上)

２カラムレイアウト

• ヘッダー
  • 準備中
• サイドバー
  • 準備中
• コンテンツ
  • 準備中
• フッター
  • 準備中

配色１

配色２

配色３

配色４

テーブル

• レスポンシブデザインを考慮する場合は、表示方法の柔軟性やモバイル・タブレットからの利用を考慮し、テーブルの利用は避ける

以下、テーブルのサンプルを示し、補足する。

• [必須] テーブルを配置する背景色は、 base-100 を前提とする
• [任意] テーブルの行数は、1画面に収まる表示データ数を目安に適切な行数（例えば10行）を選択すること
• テーブルの配色
  • [必須] テーブルの背景色は、base-100 （指定せず、デフォルト）を使用する
  • [必須] テーブルのヘッダーは、base-200 を使用すること
  • [必須] テーブルの行は、base-100 （指定せず、デフォルト）を使用する
  • [必須] テーブルの行の hover は、base-300 を使用する
• アクションボタン
  • [任意] [右配置] データの作成などのアクションボタンを配置することができる
  • [必須] ボタンの色は、Primary を使用すること
  • [必須] ２つの以上のアクションがある場合は、ボタン色はデフォルト(指定なし)を使用し、Primary アクションボタンの左に配置すること
  • [任意] ボタンの数が多くなる場合は、そのアクションの必要性の再検討やドロップダウンを使用を検討すること
• ヘッダー
  • ヘッダー内に次のようなコンポーネントを配置できる
    • [任意] [左配置] チェックボックス（全選択）とアクションボタン
      行毎にサブアクションボタンを配置する場合、複数選択可能なサブアクションの場合は、チェックボックス（全選択）とアクションボタンを配置する
    • [必須] [右配置] フィルター
      フィルターは、表示済みのデータをフィルタリングするためのものである
    • [必須] [右配置] 検索ボタン
      検索は、取り扱うデータに合わせて検索条件を指定してデータを取得するものである
      [任意] 検索ボタンの右側のアイコンは表示データのソート順を示すものである
• 行
  • 行内に次のようなコンポーネントを配置できる
    • [任意] [左配置] チェックボックス
      行毎にサブアクションボタンを配置する場合、複数選択可能なサブアクションの場合は、チェックボックスを配置する
    • [必須] キーデータ
      ユニークなデータを示すキーデータの色は Primary とし、別画面に遷移させる場合は、リンク表示とする
    • [任意] キーデータ以外
      データの色は、 base-content する。またバッジやアイコンを使用しても良い。レスポンシブデザインを考慮する場合は、表示データを制御する
    • [任意] [右配置] サブアクションボタン
      アイコンのみのグループボタンを使用すること。ボタンの配色はボタンを参照されたい
• [任意] ページネーション
  ページネーションは、表示データが多くなる場合、配置する

入力フォーム ※参照も含む

リンクテキスト

準備中

余白

準備中

角の形状

• [必須] 原則、テーマで決定する
• [任意] 角の形状は、テーマをカスタマイズして変更することができる
  https://daisyui.com/docs/themes/#how-to-customize-an-existing-theme
• [必須] indicator の角の形状は、テーマに関係なく、rounded-full を使用することを推奨する
  https://tailwindcss.com/docs/border-radius

エレベーション

準備中

コンポーネント

ボタン

• [参考] https://daisyui.com/components/button/
• [参考] https://design.digital.go.jp/components/button/

ボタンの種類

アクションボタン

• ラベル例：
  • 作成
  • 変更
  • 削除
  • インポート
  • エクスポート
  • OK
  • Cancel

サブアクションボタン

その他ボタン

• ラベル例：
  • 検索
  • 更新
  • 作成
  • 再作成

ボタンの配置について

• アクションボタン

  • [必須] [右配置] データの作成などのアクションボタンを配置することができる
  • [必須] ボタンの色は、Primary を使用すること
  • [任意] ボタンの幅は、統一することを推奨する
  • [必須] ２つの以上のアクションがある場合は、ボタン色はデフォルト(指定なし)を使用し、Primary アクションボタンの左に配置すること
  • [任意] ボタンの数が多くなる場合は、そのアクションの必要性の再検討やドロップダウンを使用を検討すること
  • [必須] キャンセルボタンは、ボタン色は ghost を使用し、Primary アクションボタンから一番左に配置すること
  • [必須] レスポンシブデザインを考慮し、flex-col flex-col-reverse を指定する

• サブアクションボタン

  • [必須] [右配置] アイコンのみのグループボタンを使用すること
  • [必須] ボタンの配色はソフトカラーを使用する

• モーダルのアクションボタン（注意操作）

  • [必須] [左配置] ボタンの色は、Error を使用すること
  • [必須] ２つの以上のアクションがある場合は、ボタン色はデフォルト(指定なし)を使用し、Error アクションボタンの右に配置すること
  • [必須] キャンセルボタンは、ボタン色は ghost を使用し、Primary アクションボタンから一番右に配置すること

• モーダルのアクションボタン（通常操作）

  • [必須] [右配置] ボタンの色は、Primary を使用すること
  • [必須] ２つの以上のアクションがある場合は、ボタン色はデフォルト(指定なし)を使用し、Primary アクションボタンの左に配置すること
  • [必須] キャンセルボタンは、ボタン色は ghost を使用し、Primary アクションボタンから一番左に配置すること
  • [必須] レスポンシブデザインを考慮し、flex-col flex-col-reverse を指定する

• モーダルのアクションボタン（確認のみ）

  • [必須] [右配置] ボタン色はデフォルト(指定なし)` を使用すること

• モーダルのアクションボタン（入力フォーム）

  • アクションボタンと同様

参考

以下、参考情報を示す。

OKボタンとキャンセルボタンの左右配置は、OSやデバイス、画面のレイアウトなどによって異なる。

OSやデバイスによる違い

• Apple社OSでは右側がOK、左側がキャンセル
• Microsoft社OSでは左側がOK、右側がキャンセル
• Android OSでは、Version 4（Ice Cream Sandwich）でOKボタンが右側に変更

画面のレイアウトによる違い

• 画面下部で中央分離配置を行った場合、右側ボタンをOKと感じている被験者が片寄る結果が出ている
• デスクトップデバイスでは、右寄せに「OK」または「完了」「次へ」などのボタンを配置し、左寄せに「キャンセル」または「中止」「戻る」などのボタンを配置することが原則
• モバイルデバイスでは画角の都合上、複数のボタンは縦積みで配置されることが多い

ボタンの配置の考え方

• 誤ってタップすると困るようなアラートの場合は、OKを左、Cancelを右に配置することも可能
• 重要度に応じたボタンの並べ方を行い、プライマリーのボタンを右端に配置する
• 同一の意味のアクションのボタンがどの画面でも一貫した配置となっていることで、ユーザーの認知負荷を抑えることができる

モーダル

• [必須] モーダルの色は、Secondary を使用すること
• [任意] 注意操作： 外部サイトに移動する、複数データ削除など
• [任意] 通常操作： データ１件削除など（作成、変更、検索などの操作は確認を省略）
• [任意] 確認のみ： 結果の表示など
• [任意] 入力フォーム： 検索条件の入力画面や簡単な作成画面や変更画面など
• [参考] https://daisyui.com/components/modal/
• [参考] https://design.digital.go.jp/components/dialog/

ドロップダウン

準備中

インプットテキスト

• 準備中
• [参考] https://daisyui.com/components/input/
• [参考] https://design.digital.go.jp/components/input-text/

テキストエリア

• 準備中
• [参考] https://daisyui.com/components/textarea/
• [参考] https://design.digital.go.jp/components/textarea/

セレクトボックス

• [必須] 選択肢が5つ以上の場合のみ、セレクトボックスを使用すること
• [参考] https://daisyui.com/components/select/
• [参考] https://design.digital.go.jp/components/select/

ラジオボタン

• [必須] 選択肢が4つ以下の場合のみ、ラジオボタンを使用すること
• [必須] コントロールは、左側に配置すること
• [参考] https://daisyui.com/components/radio/
• [参考] https://design.digital.go.jp/components/radio/

チェックボックス

• [必須] コントロールは、左側に配置すること
• [参考] https://daisyui.com/components/checkbox/
• [参考] https://design.digital.go.jp/components/checkbox/

トグル

• [必須] コントロールは、左側に配置すること
• [参考] https://daisyui.com/components/toggle/

ステータス

• [参考] https://daisyui.com/components/status/

インディケーター

• [必須] Secondary を使用すること
• [任意] 表示位置は、右上を推奨する
• [参考] https://daisyui.com/components/indicator/

バッジ

• [必須] 「必須」など、入力を補足するバッジは、 accent を使用すること
• [必須] 新規 一覧内のキー情報相当の横にバッジを利用する場合は、secondary を使用すること
• [必須] 変更 それ以外のバッジは、デフォルト(指定なし) badge-soft を使用すること
• [必須] ステータスを表すのバッジの色は、 success info warning error を使用すること
• [任意] 用途に応じてソフトやアウトラインなどのバッジを使用しても良い
• [参考] https://daisyui.com/components/badge/

パンくずリスト

• [必須] パンくずリストの色は、 base-content を使用すること
• [必須] 前の層はリンクで移動できるようにすること
• [任意] 深さは３層までを推奨する（深くなりすぎないように注意する）
• [任意] アイコンを使用しても良い
• [参考] https://daisyui.com/components/breadcrumbs/
• [参考] https://design.digital.go.jp/components/breadcrumb/

緊急時バナー

• [参考] https://design.digital.go.jp/components/emergency-banner/