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

プロダクト

  • デザイン原則
  • ユーザビリティ(使用性)
    • UIデザイン使用性チェックリスト
    • アクセシビリティの品質基準
    • ユーザビリティテスト
      • ユーザビリティテストの計画をはじめる
      • ユーザビリティテスト設計の観点
      • ファシリテーションの心得
      • ユーザビリティテストの被験者になったら
  • デザイントークン
    • 色
    • タイポグラフィ
    • 余白
    • 角丸
    • レイヤー順序
    • 影
    • メディアクエリ
    • 行送り
  • コンポーネント
    • AccordionPanel
    • AppNavi
    • Badge
    • Base
      • BaseColumn
    • BottomFixedArea
    • Button
    • Calendar
    • CheckBox
    • Chip
    • ComboBox
      • MultiComboBox
      • SingleComboBox
    • CompactInformationPanel(非推奨)
    • DatePicker
    • DefinitionList
    • Dialog
      • ActionDialog
      • MessageDialog
      • ModelessDialog
    • 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(非推奨)
    • NotificationBar
    • PageCounter
    • Pagination
    • RadioButton
    • RadioButtonPanel
    • RangeSeparator
    • ResponseMessage
    • SectioningContent
    • SegmentedControl
    • Select
    • SideMenu
    • SideNav
    • SmartHRLogo
    • SpreadsheetTable
    • StatusLabel
    • Switch
    • TabBar
    • Table
    • Text
    • TextLink
    • Textarea
    • Tooltip
    • VisuallyHiddenText
  • ライティング
    • ライティングガイドライン
    • ライティングスタイル
    • 用字用語
      • 用字用語:一覧
      • 用字用語:理由
    • UIテキスト
    • エラーメッセージ
    • 通知メール
    • ヘルプセンター
      • ヘルプページの構成
      • ヘルプページの書き方
      • 概要の書き方
      • 操作手順の書き方
      • 仕様の一覧の書き方
      • エラーメッセージごとの対応方法の書き方
      • よくある質問の書き方
      • リリースノートの目的
      • リリースノートの書き方
      • ヘルプセンターで使用する画像要素
      • コンテンツレビュー
  • デザインパターン(共通)
    • 権限による表示制御
    • 余白の取り方
    • ヘッダー
    • 上に戻るリンク
    • 値がない項目の表示
    • よくあるテーブル
    • 権限設定
    • テーブル内の一括操作
    • 削除ダイアログ
    • モーダルなUI
    • 企業アカウント選択
    • デフォルト値
    • ヘルプページへの動線
    • バックグラウンド処理
    • 取り返しのつかない操作
    • フィードバック
    • ページレイアウト
    • 視線誘導
    • モバイルレイアウト
  • デザインパターン(基本機能)
    • 共通設定
    • 共通設定の操作権限項目
  • デザインの進め方
    • デザインデータ
      • デザインデータ(Figma)の作り方
      • デザインデータ(Figma)の更新をライブラリに適用する手順
    • デザインレビュー
  • リソース

  • デザイン原則
  • ユーザビリティ(使用性)
    • UIデザイン使用性チェックリスト
    • アクセシビリティの品質基準
    • ユーザビリティテスト
      • ユーザビリティテストの計画をはじめる
      • ユーザビリティテスト設計の観点
      • ファシリテーションの心得
      • ユーザビリティテストの被験者になったら
  • デザイントークン
    • 色
    • タイポグラフィ
    • 余白
    • 角丸
    • レイヤー順序
    • 影
    • メディアクエリ
    • 行送り
  • コンポーネント
    • AccordionPanel
    • AppNavi
    • Badge
    • Base
      • BaseColumn
    • BottomFixedArea
    • Button
    • Calendar
    • CheckBox
    • Chip
    • ComboBox
      • MultiComboBox
      • SingleComboBox
    • CompactInformationPanel(非推奨)
    • DatePicker
    • DefinitionList
    • Dialog
      • ActionDialog
      • MessageDialog
      • ModelessDialog
    • 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(非推奨)
    • NotificationBar
    • PageCounter
    • Pagination
    • RadioButton
    • RadioButtonPanel
    • RangeSeparator
    • ResponseMessage
    • SectioningContent
    • SegmentedControl
    • Select
    • SideMenu
    • SideNav
    • SmartHRLogo
    • SpreadsheetTable
    • StatusLabel
    • Switch
    • TabBar
    • Table
    • Text
    • TextLink
    • Textarea
    • Tooltip
    • VisuallyHiddenText
  • ライティング
    • ライティングガイドライン
    • ライティングスタイル
    • 用字用語
      • 用字用語:一覧
      • 用字用語:理由
    • UIテキスト
    • エラーメッセージ
    • 通知メール
    • ヘルプセンター
      • ヘルプページの構成
      • ヘルプページの書き方
      • 概要の書き方
      • 操作手順の書き方
      • 仕様の一覧の書き方
      • エラーメッセージごとの対応方法の書き方
      • よくある質問の書き方
      • リリースノートの目的
      • リリースノートの書き方
      • ヘルプセンターで使用する画像要素
      • コンテンツレビュー
  • デザインパターン(共通)
    • 権限による表示制御
    • 余白の取り方
    • ヘッダー
    • 上に戻るリンク
    • 値がない項目の表示
    • よくあるテーブル
    • 権限設定
    • テーブル内の一括操作
    • 削除ダイアログ
    • モーダルなUI
    • 企業アカウント選択
    • デフォルト値
    • ヘルプページへの動線
    • バックグラウンド処理
    • 取り返しのつかない操作
    • フィードバック
    • ページレイアウト
    • 視線誘導
    • モバイルレイアウト
  • デザインパターン(基本機能)
    • 共通設定
    • 共通設定の操作権限項目
  • デザインの進め方
    • デザインデータ
      • デザインデータ(Figma)の作り方
      • デザインデータ(Figma)の更新をライブラリに適用する手順
    • デザインレビュー
  • リソース

デザインの進め方

デザインデータ

Figmaによるデザインデータ作成時のルールや、FigmaのSmartHR UI(ライブラリ)の更新方法をまとめています。

デザインレビュー

UIデザイン、デザインモックに対してのレビュー方法についてまとめた手引きです。

  • 前へ

    共通設定の操作権限項目
  • 次へ

    デザインデータ

SmartHR Design System

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

はじめに

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

基本原則

基本要素

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

アクセシビリティ

  • 機能ごとの検証結果
  • ウェブアクセシビリティ簡易チェックリスト
  • アクセシビリティチェックはじめてガイド
  • 画像の代替テキスト
  • リンクテキスト
  • 弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案(WIP)
  • アクセシビリティの改善となるUIテキスト変更の判断基準

プロダクト

  • デザイン原則
  • ユーザビリティ(使用性)
  • デザイントークン
  • コンポーネント
  • ライティング
  • デザインパターン(共通)
  • デザインパターン(基本機能)
  • デザインの進め方
  • リソース

コミュニケーション

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

SmartHR© SmartHR, Inc.