SmartHR Design System
  • さがす
  • はじめに
  • 基本原則
  • 基本要素
  • アクセシビリティ
  • プロダクト
  • コミュニケーション

プロダクト

  • デザイン原則
  • ユーザビリティ(使用性)
    • UIデザイン使用性チェックリスト
    • アクセシビリティの品質基準
    • ユーザビリティテスト
      • ユーザビリティテストの計画をはじめる
      • ユーザビリティテスト設計の観点
      • ファシリテーションの心得
      • ユーザビリティテストの被験者になったら
  • デザイントークン
    • 色
    • タイポグラフィ
    • 余白
    • 角丸
    • レイヤー順序
    • 影
    • メディアクエリ
    • 行送り
  • コンポーネント
    • AccordionPanel
    • AppHeader
    • AppNavi
    • Badge
    • Base
      • BaseColumn
    • BottomFixedArea(非推奨)
    • Browser
    • Button
    • Calendar
    • Checkbox
    • Chip
    • Combobox
      • MultiCombobox
      • SingleCombobox
    • DatePicker(非推奨)
    • DatetimeLocalPicker(非推奨)
    • DefinitionList
    • Dialog
      • ActionDialog
      • MessageDialog
      • ModelessDialog
      • StepFormDialog
    • DropZone
    • Dropdown
      • DropdownMenuButton
      • FilterDropdown
      • SortDropdown
    • ErrorScreen
    • Fieldset
    • FlashMessage(非推奨)
    • FloatArea
    • FormControl
    • Header
    • Heading
    • Icon
    • InformationPanel
    • Input
    • InputFile
    • Layout
      • Center
      • Cluster
      • Reel
      • Sidebar
      • Stack
    • LineClamp
    • Loader
    • MessageScreen(非推奨)
    • MonthPicker(非推奨)
    • NotificationBar
    • PageCounter
    • Pagination
    • RadioButton
    • RadioButtonPanel
    • RangeSeparator
    • RequiredLabel
    • ResponseMessage
    • SectioningContent
    • SegmentedControl
    • Select
    • SideMenu
    • SideNav
    • SmartHRAILogo
    • SmartHRLogo
    • SpreadsheetTable
    • StatusLabel
    • Stepper
    • Switch
    • TabBar
    • Table
    • Text
    • TextLink
      • UpwardLink
    • Textarea
    • TimePicker(非推奨)
    • Tooltip
    • VisuallyHiddenText
    • WarekiPicker
  • デザインパターン
    • 視線誘導
    • 視覚的グルーピング
    • ページレイアウト
    • 余白の取り方
    • モバイルレイアウト
    • フィードバック
    • モーダルなUI
    • 権限による表示制御
    • よくあるテーブル
    • テーブル内の一括操作
    • デフォルト値
    • ワンクッション必要な操作
    • 削除ダイアログ
    • 値がない項目の表示
    • 権限設定
    • バックグラウンド処理
    • 企業アカウント選択
    • 「基本機能」の共通設定
    • 「基本機能」の共通設定の操作権限項目
  • デザインレビュー
    • 情報設計レビュー
      • 情報設計のアウトプット
    • UIレビュー
  • デザインデータ
    • デザインデータ(Figma)の作り方
    • デザインデータ(Figma)の更新をライブラリに適用する手順
  • ライティング
    • ライティングガイドラインの使い方
    • 基本的な考え方
    • 用字用語
      • 索引
      • 漢字とひらがなの使い分け
      • カタカナ語の表記
      • 数字・数えの表記
      • 記号(括弧、句点、スペースなど)の表記
      • SmartHRの用語
      • 操作を表す用語
      • コンポーネントの呼び方
      • その他類似する用語の使い分け
    • UIテキスト
      • ヘルプページへの動線
      • 通知メール
      • ステータス
      • ファイル名
      • アカウントや従業員の表記
      • その他のUIテキスト
    • エラーメッセージ
      • エラーメッセージの基本的な考え方
      • バックグラウンド処理のライティングパターン
      • NotificationBarのライティングパターン
    • ヘルプページ
      • ヘルプページの構成
      • ヘルプページの書き方
      • 概要の書き方
      • 操作手順の書き方
      • 仕様の一覧の書き方
      • エラーメッセージごとの対応方法の書き方
      • よくある質問の書き方
      • ヘルプセンターで使用する画像要素
      • コンテンツレビュー
    • リリースノート
      • リリースノートの基本的な考え方
      • リリースノートの書き方
      • 「アクセシビリティの向上」に分類される文言の変更
  • リソース

  • デザイン原則
  • ユーザビリティ(使用性)
    • UIデザイン使用性チェックリスト
    • アクセシビリティの品質基準
    • ユーザビリティテスト
      • ユーザビリティテストの計画をはじめる
      • ユーザビリティテスト設計の観点
      • ファシリテーションの心得
      • ユーザビリティテストの被験者になったら
  • デザイントークン
    • 色
    • タイポグラフィ
    • 余白
    • 角丸
    • レイヤー順序
    • 影
    • メディアクエリ
    • 行送り
  • コンポーネント
    • AccordionPanel
    • AppHeader
    • AppNavi
    • Badge
    • Base
      • BaseColumn
    • BottomFixedArea(非推奨)
    • Browser
    • Button
    • Calendar
    • Checkbox
    • Chip
    • Combobox
      • MultiCombobox
      • SingleCombobox
    • DatePicker(非推奨)
    • DatetimeLocalPicker(非推奨)
    • DefinitionList
    • Dialog
      • ActionDialog
      • MessageDialog
      • ModelessDialog
      • StepFormDialog
    • DropZone
    • Dropdown
      • DropdownMenuButton
      • FilterDropdown
      • SortDropdown
    • ErrorScreen
    • Fieldset
    • FlashMessage(非推奨)
    • FloatArea
    • FormControl
    • Header
    • Heading
    • Icon
    • InformationPanel
    • Input
    • InputFile
    • Layout
      • Center
      • Cluster
      • Reel
      • Sidebar
      • Stack
    • LineClamp
    • Loader
    • MessageScreen(非推奨)
    • MonthPicker(非推奨)
    • NotificationBar
    • PageCounter
    • Pagination
    • RadioButton
    • RadioButtonPanel
    • RangeSeparator
    • RequiredLabel
    • ResponseMessage
    • SectioningContent
    • SegmentedControl
    • Select
    • SideMenu
    • SideNav
    • SmartHRAILogo
    • SmartHRLogo
    • SpreadsheetTable
    • StatusLabel
    • Stepper
    • Switch
    • TabBar
    • Table
    • Text
    • TextLink
      • UpwardLink
    • Textarea
    • TimePicker(非推奨)
    • Tooltip
    • VisuallyHiddenText
    • WarekiPicker
  • デザインパターン
    • 視線誘導
    • 視覚的グルーピング
    • ページレイアウト
    • 余白の取り方
    • モバイルレイアウト
    • フィードバック
    • モーダルなUI
    • 権限による表示制御
    • よくあるテーブル
    • テーブル内の一括操作
    • デフォルト値
    • ワンクッション必要な操作
    • 削除ダイアログ
    • 値がない項目の表示
    • 権限設定
    • バックグラウンド処理
    • 企業アカウント選択
    • 「基本機能」の共通設定
    • 「基本機能」の共通設定の操作権限項目
  • デザインレビュー
    • 情報設計レビュー
      • 情報設計のアウトプット
    • UIレビュー
  • デザインデータ
    • デザインデータ(Figma)の作り方
    • デザインデータ(Figma)の更新をライブラリに適用する手順
  • ライティング
    • ライティングガイドラインの使い方
    • 基本的な考え方
    • 用字用語
      • 索引
      • 漢字とひらがなの使い分け
      • カタカナ語の表記
      • 数字・数えの表記
      • 記号(括弧、句点、スペースなど)の表記
      • SmartHRの用語
      • 操作を表す用語
      • コンポーネントの呼び方
      • その他類似する用語の使い分け
    • UIテキスト
      • ヘルプページへの動線
      • 通知メール
      • ステータス
      • ファイル名
      • アカウントや従業員の表記
      • その他のUIテキスト
    • エラーメッセージ
      • エラーメッセージの基本的な考え方
      • バックグラウンド処理のライティングパターン
      • NotificationBarのライティングパターン
    • ヘルプページ
      • ヘルプページの構成
      • ヘルプページの書き方
      • 概要の書き方
      • 操作手順の書き方
      • 仕様の一覧の書き方
      • エラーメッセージごとの対応方法の書き方
      • よくある質問の書き方
      • ヘルプセンターで使用する画像要素
      • コンテンツレビュー
    • リリースノート
      • リリースノートの基本的な考え方
      • リリースノートの書き方
      • 「アクセシビリティの向上」に分類される文言の変更
  • リソース

    MessageScreen(非推奨)

    MessageScreenコンポーネントは非推奨です。ErrorScreenコンポーネントを使用してください。
    • 前へ

      Loader
    • 次へ

      MonthPicker(非推奨)

    SmartHR Design System

    • さがす
    • 利用規約
    • お問い合わせ・フィードバック
    • 運用ガイドライン
    • 更新情報(X)
    • 運営会社

    はじめに

    • 利用者のかたへ
    • コンテンツ構成
    • 運営理念

    基本原則

    基本要素

    • ロゴ
    • 色
    • タイポグラフィ
    • アイコン
    • イラストレーション
    • メタ情報
    • 伝わる文章

    アクセシビリティ

    • 機能ごとの検証結果
    • ウェブアクセシビリティ簡易チェックリスト
    • アクセシビリティチェックはじめてガイド
    • 画像の代替テキスト
    • 多言語化対応
    • やさしい日本語
    • リンクテキスト
    • 弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案(WIP)

    プロダクト

    • デザイン原則
    • ユーザビリティ(使用性)
    • デザイントークン
    • コンポーネント
    • デザインパターン
    • デザインレビュー
    • デザインデータ
    • ライティング
    • リソース

    コミュニケーション

    • 写真・動画
    • アイキャッチ
    • スライド・資料
    • 名刺
    • 画面キャプチャ
    • 端末モック
    • サンプル集

    SmartHR © SmartHR, Inc.