@SHRDesignSystem profile picture
SmartHR Design System @SHRDesignSystem
Joined January 2021
  • Tweets 373
  • Following 1
  • Followers 2,247
45 Photos and videos
Pinned Tweet
SmartHR Design System@SHRDesignSystem
27 Feb 2023
SmartHR Design System運営メンバーの共著による 『ちいさくはじめるデザインシステム』 が発売されます🎉 SmartHRのデザインシステムの立ち上げ前から現在までの取り組みを扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説します amzn.to/3SMEb7j

ちいさくはじめるデザインシステム

「デザインシステム」は、デジタルプロダクト開発においてその必要性や役割を言及されることが多い概念で、プロダクトを提供するためのプロダクト、またはインフラとも呼ばれ、日本の企業・組織でも導入が進んでいます。一般的には、「デザインの再現性を高め、一貫した製品体験を効率よく表現すること」を目的に導入される「ドキュメントやリソース群のこと」と説明されます。 プロダクトの重要性が増すにつれ、プロダクト...

amazon.co.jp
90
467
110,681
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 FileViewer、Chip、Stepper smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…

FileViewer | コンポーネント | SmartHR Design System

画像やPDFファイルを表示・拡大縮小・回転できるファイルビューアーコンポーネントです。ファイルの内容をプレビューするときに使います。

smarthr.design
2
765
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 TabBar、SideMenu、Select、FloatArea smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…

TabBar | コンポーネント | SmartHR Design System

異なるオブジェクトやビューを横方向のタブで切り替えるためのコンポーネントです。同一画面内で並列関係にあるビューを切り替えるとき、影響範囲を下線で明確にしながらタブを並べるときに使います。

smarthr.design
4
752
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 DropdownMenuButton、Switch、Tooltip、Button smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…

DropdownMenuButton | Dropdown | SmartHR Design System

同じ対象に関連する複数の操作をまとめてドロップダウン表示するメニューボタンコンポーネントです。編集・複製・削除など、オブジェクトに対する複数アクションをまとめるときに使います。

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

ページレイアウト | デザインパターン | SmartHR Design System

SmartHRプロダクトの基本的なページレイアウトのパターンをまとめています。

smarthr.design
3
674
【プロダクト】「モバイルレイアウト」を更新しました🎉 smarthr-uiを使ったモバイルを判定する実装例（useEnvironment）を更新しました。 smarthr.design/products/desi…

モバイルレイアウト | デザインパターン | SmartHR Design System

モバイル対応をする基準と、その対応方法を定義します。

smarthr.design
1
7
703
【プロダクト】「選択コンポーネントの使い分け」を追加しました🎉 選択操作ができるコンポーネントを使い分ける考え方を説明しています。 MultiCombobox、SingleCombobox、Select、RadioButton、RadioButtonPanel、Checkbox、Switch smarthr.design/products/desi…
選択コンポーネントの使い分けをユースケースに沿って図示したフローチャート

ALT 選択コンポーネントの使い分けをユースケースに沿って図示したフローチャート
9
110
9,536
【プロダクト】「SpreadsheetTable」に説明を追加しました🎉 表データを表計算ソフトのように表示するコンポーネントです。 smarthr.design/products/comp…

SpreadsheetTable | コンポーネント | SmartHR Design System

表データを表計算ソフト風に表示するためのコンポーネントです。CSVインポート画面などで利用者にスプレッドシートを想像させるときに使います。

smarthr.design
1
4
986
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Input、SegmentedControl、PageCounter、Pagination smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…

Input | コンポーネント | SmartHR Design System

input[type='text']やinput[type='number']などの代替としてテキストや数値を1行で入力させるコンポーネントです。テキスト・数値を1行で入力させるとき、フォームに入力欄を追加するときに使います。

smarthr.design
1
431
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Checkbox、RadioButton、FilterDropdown、SortDropdown smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp… smarthr.design/products/comp…
383
【プロダクト】以下のコンポーネントに関連するモバイルを参照するように導線を追加しました🎉 AppNavi、Table smarthr.design/products/comp… smarthr.design/products/comp…

AppNavi | コンポーネント | SmartHR Design System

アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。

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

弱視・ロービジョンのユーザビリティチェックリスト | アクセシビリティインサイト | SmartHR Design System

smarthr.design
9
32
2,162
【アクセシビリティ】 画像の代替テキストに関するページに「SmartHR altディシジョンツリー」を追加しました。 W3CのaltディシジョンツリーをベースにSmartHRのプロダクトにあわせてカスタマイズしたものです。 同ページにはテキストによるリスト版も公開しています。 smarthr.design/accessibility…
「文字を含むか」「アイコンか」などの質問に対するYES/NOの答えに沿って代替テキストの書き方が提案されるフローチャート

ALT 「文字を含むか」「アイコンか」などの質問に対するYES/NOの答えに沿って代替テキストの書き方が提案されるフローチャート
30
139
10,210
【プロダクト】情報設計レビューの「情報設計のアウトプット」の内容をリニューアルしました🎉 情報設計レビューを通して蓄積された知見を、アウトプットを作成する際の注意点としてまとめて説明しています。 smarthr.design/products/desi…

情報設計のアウトプット | 情報設計 | SmartHR Design System

「UIデザイン使用性チェックリスト」の情報設計のチェック内容を達成するために必要なアウトプットを定義します。

smarthr.design
3
24
2,825
【プロダクト】「よくあるリスト」を追加しました🎉 デスクトップで「よくあるテーブル」で表示される情報を、画面幅が小さいモバイルで表示するパターンを説明しています。 「よくあるテーブル」のページには、「よくあるリスト」に切り替えるガイドラインも用意しています。 smarthr.design/products/desi…
「よくあるテーブルとよくあるリストの主な構成の違い」の画面キャプチャ

ALT 「よくあるテーブルとよくあるリストの主な構成の違い」の画面キャプチャ
1
7
1,291
【プロダクト】視線誘導の注意点に「デバイスや画面幅の違いによって視線誘導の効果が変わることを理解する」を追加しました🎉 smarthr.design/products/desi…

視線誘導 | デザインパターン | SmartHR Design System

視線誘導の法則を考慮したレイアウトの基準や注意点をまとめています。

smarthr.design
2
320
【プロダクト】InformationPanelにモバイルの項目を追加しました🎉モバイルにおける余白などについて説明しています。 smarthr.design/products/comp…

InformationPanel | コンポーネント | SmartHR Design System

ユーザーに伝えたい情報を視覚的に目立たせるパネルコンポーネントです。複数行のテキストや複数項目の不備一覧など、ResponseMessageやNotificationBarでは収まらない量のフィードバック情報などを表示するときに使います。

smarthr.design
2
414
【プロダクト】Tableにアクセシビリティの項目を追加しました🎉専用コンポーネントとaria-labelledby属性の使い方について説明しています。 smarthr.design/products/comp…

Table | コンポーネント | SmartHR Design System

table要素の代替として表形式でデータを表示するためのコンポーネントです。データを行列で一覧表示するとき、レコードを並べて比較するビューを提示するときに使います。

smarthr.design
3
346
SmartHR Design Systemのコンテンツ領域の幅を広げました。 読みやすさに配慮して画面幅に合わせてコンテンツ領域の幅が広がる変更をしています。 smarthr.design/products/
ブラウザにSmartHR Design Sytemサイトが表示されている画面キャプチャ

ALT ブラウザにSmartHR Design Sytemサイトが表示されている画面キャプチャ
4
435
【プロダクト】以下の各コンポーネントにモバイルの説明を追加しました🎉 Header、NotificationBar、Textarea、Headingにおけるモバイルの場合の基準を追加しています。 smarthr.design/products/comp…

Header | コンポーネント | SmartHR Design System

アカウント設定やアプリ切替などSmartHR共通の横断機能を提供するヘッダーコンポーネントです。基本はAppHeaderの利用を推奨し、独自のヘッダー構成が必要なときのみHeader単体で使います。

smarthr.design
1
1
299
more replies
Textareaにモバイルの説明を追加 smarthr.design/products/comp…

Textarea | コンポーネント | SmartHR Design System

textarea要素の代替としてテキストを複数行で入力させるコンポーネントです。長文を入力させるとき、文字数カウンタが必要なときに使います。

smarthr.design
1
253
Headingにモバイルの説明を追加 smarthr.design/products/comp…

Heading | コンポーネント | SmartHR Design System

見出し要素の代替として直後のコンテンツの見出しを示すコンポーネントです。「セクション」や「ブロック」に見出しをつけるときに使います。

smarthr.design
247
Load more