クラウド人事労務ソフト「SmartHR」に関わるひとが、だれでも・効率よく・迷わずに SmartHR らしい表現をするためのデザインシステムです。 作業リポジトリを公開しています https://nitter.cf/t.co/6ARyTCABum
Joined January 2021
- Tweets376
- Following1
- Followers2.4K
- Likes5
Pinned Tweet
SmartHR Design System運営メンバーの共著による
『ちいさくはじめるデザインシステム』
が発売されます🎉
SmartHRのデザインシステムの立ち上げ前から現在までの取り組みを扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説します
amzn.to/3SMEb7j
【プロダクト】AIコーディングエージェント（Claude Codeなど）向けのプラグインを追加しました🎉
・ガイドラインをスキルとして提供し、コード品質とレビュー負荷の改善につなげます。
・スキル更新を別にせず、普段の更新作業の流れに乗せる仕組みを作っていきます。
github.com/kufu/smarthr-desi…
スキル①：/component-guidelines
・100以上のsmarthr-uiコンポーネントのドキュメントを、実装・レビュー時にAIが参照します。
・Props情報、eslintの実装ルール、ガイドラインを人の目でまとめた使い方チェックリストで構成。デザインシステムの更新によって最新化されます。
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
FileViewer、Chip、Stepper
smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
TabBar、SideMenu、Select、FloatArea
smarthr.design/products/comp…
smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
DropdownMenuButton、Switch、Tooltip、Button
smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…
【プロダクト】「ページレイアウト」を更新しました🎉
基本的な考え方に「リード文を適切に設定する」を追加し、ページ構成を整理しました。
smarthr.design/products/desi…
【プロダクト】「モバイルレイアウト」を更新しました🎉
smarthr-uiを使ったモバイルを判定する実装例（useEnvironment）を更新しました。
smarthr.design/products/desi…
【プロダクト】「選択コンポーネントの使い分け」を追加しました🎉
選択操作ができるコンポーネントを使い分ける考え方を説明しています。 MultiCombobox、SingleCombobox、Select、RadioButton、RadioButtonPanel、Checkbox、Switch
smarthr.design/products/desi…
ALT 選択コンポーネントの使い分けをユースケースに沿って図示したフローチャート
【プロダクト】「SpreadsheetTable」に説明を追加しました🎉
表データを表計算ソフトのように表示するコンポーネントです。
smarthr.design/products/comp…
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
Input、SegmentedControl、PageCounter、Pagination
smarthr.design/products/comp…
smarthr.design/products/comp…
smarthr.design/products/comp…
smarthr.design/products/comp…
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉
Checkbox、RadioButton、FilterDropdown、SortDropdown
smarthr.design/products/comp…
smarthr.design/products/comp…
smarthr.design/products/comp…
smarthr.design/products/comp…
【プロダクト】以下のコンポーネントに関連するモバイルを参照するように導線を追加しました🎉
AppNavi、Table
smarthr.design/products/comp… smarthr.design/products/comp…
【アクセシビリティ】
ユーザビリティテストで得た知見から解決策をまとめ、弱視・ロービジョンのユーザビリティチェックリストを公開しました🎉
smarthr.design/accessibility…あわせて、弱視・ロービジョンに関するページに支援技術や見え方の一例を追加しています。
smarthr.design/accessibility…
【アクセシビリティ】
画像の代替テキストに関するページに「SmartHR altディシジョンツリー」を追加しました。
W3CのaltディシジョンツリーをベースにSmartHRのプロダクトにあわせてカスタマイズしたものです。
同ページにはテキストによるリスト版も公開しています。
smarthr.design/accessibility…
ALT 「文字を含むか」「アイコンか」などの質問に対するYES/NOの答えに沿って代替テキストの書き方が提案されるフローチャート
【プロダクト】情報設計レビューの「情報設計のアウトプット」の内容をリニューアルしました🎉
情報設計レビューを通して蓄積された知見を、アウトプットを作成する際の注意点としてまとめて説明しています。 smarthr.design/products/desi…
【プロダクト】「よくあるリスト」を追加しました🎉
デスクトップで「よくあるテーブル」で表示される情報を、画面幅が小さいモバイルで表示するパターンを説明しています。
「よくあるテーブル」のページには、「よくあるリスト」に切り替えるガイドラインも用意しています。 smarthr.design/products/desi…
ALT 「よくあるテーブルとよくあるリストの主な構成の違い」の画面キャプチャ
【プロダクト】視線誘導の注意点に「デバイスや画面幅の違いによって視線誘導の効果が変わることを理解する」を追加しました🎉
smarthr.design/products/desi…
【プロダクト】InformationPanelにモバイルの項目を追加しました🎉モバイルにおける余白などについて説明しています。
smarthr.design/products/comp…
【プロダクト】Tableにアクセシビリティの項目を追加しました🎉専用コンポーネントとaria-labelledby属性の使い方について説明しています。 smarthr.design/products/comp…
