SmartHR Design System

SmartHR Design System運営メンバーの共著による 『ちいさくはじめるデザインシステム』 が発売されます🎉 SmartHRのデザインシステムの立ち上げ前から現在までの取り組みを扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説します amzn.to/3SMEb7j

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 FileViewer、Chip、Stepper #h2-1" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 TabBar、SideMenu、Select、FloatArea #h2-2" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h3-2" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-2" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 DropdownMenuButton、Switch、Tooltip、Button #h4-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h3-3" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-5" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-5" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

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

【プロダクト】「モバイルレイアウト」を更新しました🎉 smarthr-uiを使ったモバイルを判定する実装例（useEnvironment）を更新しました。 #h3-5" target="_blank" rel="nofollow noopener">smarthr.design/products/desig…

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

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

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Input、SegmentedControl、PageCounter、Pagination #h2-4" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-1" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Checkbox、RadioButton、FilterDropdown、SortDropdown #h2-3" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-3" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… smarthr.design/products/compo… #h3-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】以下のコンポーネントに関連するモバイルを参照するように導線を追加しました🎉 AppNavi、Table #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo… #h2-1" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

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

【アクセシビリティ】 画像の代替テキストに関するページに「SmartHR altディシジョンツリー」を追加しました。 W3CのaltディシジョンツリーをベースにSmartHRのプロダクトにあわせてカスタマイズしたものです。 同ページにはテキストによるリスト版も公開しています。 #h2-2" target="_blank" rel="nofollow noopener">smarthr.design/accessibility/…

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

【プロダクト】「よくあるリスト」を追加しました🎉 デスクトップで「よくあるテーブル」で表示される情報を、画面幅が小さいモバイルで表示するパターンを説明しています。 「よくあるテーブル」のページには、「よくあるリスト」に切り替えるガイドラインも用意しています。 #h2-3" target="_blank" rel="nofollow noopener">smarthr.design/products/desig…

【プロダクト】視線誘導の注意点に「デバイスや画面幅の違いによって視線誘導の効果が変わることを理解する」を追加しました🎉 #h3-5" target="_blank" rel="nofollow noopener">smarthr.design/products/desig…

【プロダクト】InformationPanelにモバイルの項目を追加しました🎉モバイルにおける余白などについて説明しています。 #h3-2" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】Tableにアクセシビリティの項目を追加しました🎉専用コンポーネントとaria-labelledby属性の使い方について説明しています。 #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

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

Headingにモバイルの説明を追加 #h2-4" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

Textareaにモバイルの説明を追加 #h2-2" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…

【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Header、NotificationBar、Textarea、Headingにおけるモバイルの場合の基準を追加しています。 #h2-0" target="_blank" rel="nofollow noopener">smarthr.design/products/compo…