「デザインシステム」は、デジタルプロダクト開発においてその必要性や役割を言及されることが多い概念で、プロダクトを提供するためのプロダクト、またはインフラとも呼ばれ、日本の企業・組織でも導入が進んでいます。一般的には、「デザインの再現性を高め、一貫した製品体験を効率よく表現すること」を目的に導入される「ドキュメントやリソース群のこと」と説明されます。 プロダクトの重要性が増すにつれ、プロダクト...
画像やPDFファイルを表示・拡大縮小・回転できるファイルビューアーコンポーネントです。ファイルの内容をプレビューするときに使います。
異なるオブジェクトやビューを横方向のタブで切り替えるためのコンポーネントです。同一画面内で並列関係にあるビューを切り替えるとき、影響範囲を下線で明確にしながらタブを並べるときに使います。
同じ対象に関連する複数の操作をまとめてドロップダウン表示するメニューボタンコンポーネントです。編集・複製・削除など、オブジェクトに対する複数アクションをまとめるときに使います。
SmartHRプロダクトの基本的なページレイアウトのパターンをまとめています。
モバイル対応をする基準と、その対応方法を定義します。
ALT 選択コンポーネントの使い分けをユースケースに沿って図示したフローチャート
表データを表計算ソフト風に表示するためのコンポーネントです。CSVインポート画面などで利用者にスプレッドシートを想像させるときに使います。
input[type='text']やinput[type='number']などの代替としてテキストや数値を1行で入力させるコンポーネントです。テキスト・数値を1行で入力させるとき、フォームに入力欄を追加するときに使います。
アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。
ALT 「文字を含むか」「アイコンか」などの質問に対するYES/NOの答えに沿って代替テキストの書き方が提案されるフローチャート
「UIデザイン使用性チェックリスト」の情報設計のチェック内容を達成するために必要なアウトプットを定義します。
ALT 「よくあるテーブルとよくあるリストの主な構成の違い」の画面キャプチャ
視線誘導の法則を考慮したレイアウトの基準や注意点をまとめています。
ユーザーに伝えたい情報を視覚的に目立たせるパネルコンポーネントです。複数行のテキストや複数項目の不備一覧など、ResponseMessageやNotificationBarでは収まらない量のフィードバック情報などを表示するときに使います。
table要素の代替として表形式でデータを表示するためのコンポーネントです。データを行列で一覧表示するとき、レコードを並べて比較するビューを提示するときに使います。
ALT ブラウザにSmartHR Design Sytemサイトが表示されている画面キャプチャ
アカウント設定やアプリ切替などSmartHR共通の横断機能を提供するヘッダーコンポーネントです。基本はAppHeaderの利用を推奨し、独自のヘッダー構成が必要なときのみHeader単体で使います。
textarea要素の代替としてテキストを複数行で入力させるコンポーネントです。長文を入力させるとき、文字数カウンタが必要なときに使います。
見出し要素の代替として直後のコンテンツの見出しを示すコンポーネントです。「セクション」や「ブロック」に見出しをつけるときに使います。