SmartHR Design System

クラウド人事労務ソフト「SmartHR」に関わるひとが、だれでも・効率よく・迷わずに SmartHR らしい表現をするためのデザインシステムです。

作業リポジトリを公開しています

[SmartHR Design System @SHRDesignSystem]

SmartHR Design System運営メンバーの共著による
『ちいさくはじめるデザインシステム』
が発売されます🎉

SmartHRのデザインシステムの立ち上げ前から現在までの取り組みを扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説します

https://t.co/yw2lQIeHX9

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
FileViewer、Chip、Stepper

https://t.co/9gsbKDmCDk https://t.co/UNZAuIOIFz https://t.co/QxWdDtDFBr

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
TabBar、SideMenu、Select、FloatArea

https://t.co/THHVlLECmu
https://t.co/IFfAhIJuDT https://t.co/VuYN02wo2c https://t.co/033YwRxg4i

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
DropdownMenuButton、Switch、Tooltip、Button

https://t.co/hrEG5dhTEB https://t.co/ZAxQr1lt9y https://t.co/JlF2cS7Zv1 https://t.co/VbHq67Dm5g

[SmartHR Design System @SHRDesignSystem]

【プロダクト】「ページレイアウト」を更新しました🎉
基本的な��え方に「リード文を適切に設定する」を追加し、ページ構成を整理しました。

https://t.co/W0eciXkCLh

[SmartHR Design System @SHRDesignSystem]

【プロダクト】「モバイルレイアウト」を更新しました🎉
smarthr-uiを使ったモバイルを判定する実装例（useEnvironment）を更新しました。
https://t.co/0o40EHbf9Y

[SmartHR Design System @SHRDesignSystem]

【プロダクト】「選択コンポーネントの使い分け」を追加しました🎉
選択操作ができるコンポーネントを使い分ける考え方を説明しています。 MultiCombobox、SingleCombobox、Select、RadioButton、RadioButtonPanel、Checkbox、Switch
https://t.co/h90RTgbWA2

[SmartHR Design System @SHRDesignSystem]

【プロダクト】「SpreadsheetTable」に説明を追加しました🎉
表データを表計算ソフトのように表示するコンポーネントです。
https://t.co/iwbGxsVLf0

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
Input、SegmentedControl、PageCounter、Pagination
https://t.co/4l39DwTTtC
https://t.co/Oo8mfe64jZ
https://t.co/lGL2YywvYs
https://t.co/zwDwgzoMfA

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
Checkbox、RadioButton、FilterDropdown、SortDropdown
https://t.co/UcMhhk2Wbu
https://t.co/6OAgWcD7iK
https://t.co/AU8fZq8iSJ
https://t.co/LvmpOYawgI

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下のコンポーネントに関連するモバイルを参照するように導線を追加しました🎉
AppNavi、Table
https://t.co/YDPFkmZVPn https://t.co/7W17Q7WsHC

[SmartHR Design System @SHRDesignSystem]

【アクセシビリティ】
ユーザビリティテストで得た知見から解決策をまとめ、弱視・ロービジョンのユーザビリティチェックリストを公開しました🎉
https://t.co/jfhkfOE4oUあわせて、弱視・ロービジョンに関するページに支援技術や見え方の一例を追加しています。
https://t.co/SFJ5z5PHoS

[SmartHR Design System @SHRDesignSystem]

【アクセシビリティ】
画像の代替テキストに関するページに「SmartHR altディシジョンツリー」を追加しました。
W3Cのaltディシジョンツリー���ベースにSmartHRのプロダクトにあわせてカスタマイズしたものです。
同ページにはテキストによるリスト版も公開しています。
https://t.co/NZIEMHvBm7

[SmartHR Design System @SHRDesignSystem]

【プロダクト】情報設計レビューの「情報設計のアウトプット」の内容をリニューアルしました🎉
情報設計レビューを通して蓄積された知見を、アウトプットを作成する際の注意点としてまとめて説明しています。 https://t.co/iD3Cxw8noi

[SmartHR Design System @SHRDesignSystem]

【プロダクト】「よくあるリスト」を追加しました🎉
デスクトップで「よくあるテーブル」で表示される情報を、画面幅が小さいモバイルで表示するパターンを説明しています。
「よくあるテーブル」のページには、「よくあるリスト」に切り替えるガイドラインも用意しています。 https://t.co/OAMqLYA6KS

[SmartHR Design System @SHRDesignSystem]

【プロダクト】視線誘導の注意点に「デバイスや画面幅の違いによって視線誘導の効果が変わることを理解する」を追加しました🎉
https://t.co/0mzO80oJlT

[SmartHR Design System @SHRDesignSystem]

【プロダクト】InformationPanelにモバイルの項目を追加しました🎉モバイルにおける余白などについて説明しています。
https://t.co/4XkGE32Ljj

[SmartHR Design System @SHRDesignSystem]

【プロダクト】Tableに��クセシビリティの項目を追加しました🎉専用コンポーネントとaria-labelledby属性の使い方について説明しています。 https://t.co/B8mTNVLvHA

[SmartHR Design System @SHRDesignSystem]

SmartHR Design Systemのコンテンツ領域の幅を広げました。
読みやすさに配慮して画面幅に合わせてコンテンツ領��の幅が広がる変更をしています。
https://t.co/ksxc1CfFB0

[SmartHR Design System @SHRDesignSystem]

Headingにモバイルの説明を追加
https://t.co/fy3wzfucnG

[SmartHR Design System @SHRDesignSystem]

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
Header、NotificationBar、Textarea、Headingにおけるモバイルの場合の基準を追加しています。
https://t.co/C2D8CFqD5S

[SmartHR Design System @SHRDesignSystem]

Textareaにモバイルの説明を追加
https://t.co/IWzaaakwQG