SmartHR Design System

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

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

[SmartHR Design System @SHRDesignSystem]

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

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

https://t.co/yw2lQIeHX9

[SmartHR Design System @SHRDesignSystem]

スキル②：/design-pattern-guidelines

・テーブル、ダイアログ、ページなど、複数のコンポーネントを組み合わせるレイアウトの実装時にAIが参照します。
・デザインシステムのデザインパターンを直接参照し、実装例も充実しました。

[SmartHR Design System @SHRDesignSystem]

【プロダクト】AIコーディングエージェント（Claude Codeなど）向けのプラグインを追加しました🎉

・ガイドラインをスキルとして提供し、コード品質とレビュー負荷の改善につなげます。
・スキル更新を別にせず、普段の更新作業の流れに乗せる仕組みを作っていきます。

https://t.co/lpisHHLMUk

[SmartHR Design System @SHRDesignSystem]

スキル①：/component-guidelines

・100以上のsmarthr-uiコンポーネントのドキュメントを、実装・レビュー時にAIが参照します。
・Props情報、eslintの実装ルール、ガイドラインを人の目でまとめた使い方チェックリストで構成。デザインシステムの更新によって最新化されます。

[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