サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
smarthr.design
SmartHR UIが大切にしていることSmartHR UIの開発における価値観や行動指針を以下のように定めています。これらはただ大切にしているだけでなく、開発コミュニケーションやタスクの優先順位づけなどにおける判断基準としても使っています。 使い勝手を損なわないことUIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要です。 ユーザーエージェントの振る舞いからかけ離れないようにすることやアクセシビリティに取り組むことも使い勝手に関わります。もちろんプログレッシブエンハンスメントな考え方も大切にしています。 またコンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはいけません。 開発者の生産性を損なわないこと私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしています。その状態に早く到達するためにも、質
デザインパターン特別なテキストリンク特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。 新規ウィンドウで開くテキストリンク新規ウィンドウ(新規タブ)で開くテキストリンクには、テキストの右側に 新規ウィンドウ アイコン(FaUpRightFromSquareIcon)を必ず配置します。リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
ユーザビリティテストの計画をはじめるときに知っておきたいことをまとめました。 テスト設計時の観点は、ユーザビリティテスト設計の観点を参照してください。 ユーザビリティテストを計画する流れユーザビリティテストの実施が決まったら、以下の流れで準備を進めます。 ユーザーリサーチの「目的」を確認するプロダクトを理解する検証内容を具体化するテストの被験者の条件を検討するテスト設計をするテスト環境を用意するメンバーの役割分担を決める被験者のリクルーティング、連絡1.ユーザビリティテストの「目的」を確認するユーザビリティテストはユーザーリサーチ手法の1つです。 最初に「何を明らかにしたいのか」というリサーチの目的を明確にしたうえで、リサーチ手法を選びましょう。壮大な目的を用意する必要はありません。具体的で明快な目標を決めましょう。 ユーザビリティテストで、何を観察するためにどんなシナリオとタスクを用意す
デザイントークンの目的デザイナー・エンジニアに低レイヤーな統一言語を提供します。開発設計担当者に必要な情報を明確に伝えられます。スケーラブルで一貫性のあるプロダクト設計を可能にします。ハードコードな設計を減らし、変更に強いプロダクト開発を可能にします。効率的に速いインターフェース設計を可能にします。種類SmartHR Design Systemでは2つのトークンを提供します。 プリミティブトークン具体性のある値です。もっとも低レイヤーで原子的な意味を持つトークンです。十分な値と、増減も容易な名前空間を設定しておくことが望ましいです。セマンティックトークン特定のコンテキストに関連した値です。トークンの意図した目的を伝えるのに役立ちます。単一の意図を持つ値が、複数の場所に現れる場合に使います。参考文献https://www.lightningdesignsystem.com/design-to
適切なリンクテキストを設定すると適切なリンクテキストを設定すると、ユーザーは目的のリンクにたどりつきやすくなります。 以下は、適切なリンクテキストが特に役立つ状況の例です。 例1: リンク先のページを開けないときリンク先のページを開けないときに、以下のような状況があります。 リンク先のページが削除などの理由で、閲覧不可リンク先のアドレスが正しくないウェブサイトが印刷された紙の資料を見ているこのような状況でも、リンクテキストでリンク先について説明されていれば、リンクによって提供されていた情報に近づくことができます。 リンクテキストから、どんなページにリンクしていたか推測できるページタイトルなどの情報を利用して、見られるはずだった情報について検索できる例2-1: リンクだけを拾い読みするとき(視覚的な拾い読み)時間に限りがあるユーザーは、ページを拾い読み・斜め読みします。リンクテキストでリンク
よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。 構成「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。 テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。 一括選択するチェックボックス(必須)個別選択するチェックボックス(必須)テーブル内の一括操作エリア一括操作エリアの表示選択状態の表示わくわくチェック(すべてのオブジェクトの選択)一括操作ボタン 1. 一括選択するチェックボックステーブル内の要素をすべて選択できるチェックボックスです。 デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。 表示しているページ外のオブジェクト(他のページのオブジェクト)は選択状態にしません。 「一括選択するチェックボックス」が未選択状態のときに、
SmartHRが採用している游ゴシック体はmacOSやWindowsに標準インストールされているシステムフォントです。基本的にすべての従業員が游ゴシック体を利用できるため、別途ウェブフォントを入れる必要がないという利点があります。ですが、CSSで游ゴシック体を指定する際に注意が必要です。 ここでは、ウェブサイトで游ゴシック体を利用するとき、どのようにCSSを書けばよいか、なぜそのように書くのかを説明します。ただし、これは2023年9月時点のもので、将来的に状況が変わっていく可能性があることも留意してください。 游ゴシック体のCSSでの指定方法CSSで次のように指定してください。font-familyの値であるAdjustedYuGothicの部分は任意の名称で構いません。
Secondary画面でのアクションを促す、Primaryボタンに対する副次的なボタンとして使います。 SmartHR UI では特に種類の指定をしない場合はSecondaryになります。 画面内にボタンが多すぎる場合、ユーザーは次に何をすればいいのか戸惑うかもしれません。その場合はボタンを減らしたり、画面を簡略化したり、複数の画面に分けることを検討しましょう。 Danger破壊的なアクション(データの永久消去など)の実行前に、ユーザーに一歩立ち止まって考えてもらいたいときに使います。 Dangerボタンが頻出すると効果がありません。主に削除ダイアログ)で使います。削除ダイアログを呼び出すボタンにはDangerボタンを使いません。すべてのユーザーが色を見たり、理解できるわけではないため、警告を促す赤色(DANGER)に頼らないでください。ボタン配置のコンテキストやラベルテキストは重要です。
SmartHRにおける「権限設定」のパターンをまとめています。 基本的な考え方プロダクトごとにアカウントの権限を管理するための画面です。画面パターンは以下のとおりです。 基本機能についてはこの限りではありません。 一覧アカウントの詳細権限の分類SmartHRにおける権限は、大きく2つに分けられます。分類によって、権限オブジェクトの考え方や画面設計が異なります。 新しくプロダクトを作る場合は、どちらの分類になるかを理解したうえで設計を進めてください。 RBAC(Role-Based Access Control)パターンABAC(Attribute-Based Access Control)パターンRBAC(Role-Based Access Control)パターンRBACは、ユーザーに役割(例:業務担当者、機能管理者)を割り当て、その役割に応じた特定の行動許可を設定するパターンです。 例
「使いやすい」プロダクトには、プロダクトの実用性やユーザー利用の感性による品質だけでなく、利用中のつまづきを解消できるサポート体制やコンテンツの品質、使いやすさを継続して向上できる組織体制など、さまざまな要素が影響します。 デザインシステムは、使いやすさを維持・向上する仕組みの1つとして、高いユーザビリティを実現するためのガイドラインやコンポーネントライブラリなどを提供しています。 複数のプロダクトを複数の開発チームで自立分散的に開発する状況では、その数が増えるほどプロダクト全体で一貫性のあるUIに保つなどの難易度は飛躍的に上がっていきます。 開発者が各々の裁量でガイドラインを参照し活用するだけでなく、準拠すべき共通の判断基準をもとに細部の設計に対しても判断を行なえる、より高度なシステムを提供していきます。 ユーザビリティ(使用性)の定義ユーザビリティを定義した規格は JIS Z 8530
アプリケーション上の表現で迷ったときの判断基準や、推奨する表記を記載しています。 ディスクリプションは敬体(です、ます調)を用いて、動詞まで書く説明アプリケーションにおけるディスクリプション(説明文)は、動詞まで記載します。体言止めは避けましょう。 なお、文体は敬体(です、ます調) を用います。 画面ごとのライティングの詳細は、デザインパターンで確認してください。 括弧「 」、[ ]、【 】の使い分け説明ライティングスタイル「括弧類は「 」、[ ]、【 】、( )を使用する」に準拠して、全角記号を使用します。 アプリケーション上での括弧の使い分けは以下です。 ヘルプページやリリースノートも準じます。 文中でファイル名を示すときに囲うもの ファイル名:「 」 地の文と区別したい 強調したいとき画面上の表示を示すときに囲うもの 設定項目名、タブ名、操作ボタン名、選択肢など → [ ] 画面名に
SmartHRオプション機能の管理者, 組織図機能管理者, サーベイ機能管理者, 評価機能管理者, 配置シミュレーション管理者
弱視・ロービジョンのユーザーの特性と利用環境弱視・ロービジョンのユーザーの多くは、画面拡大や色反転などの支援技術を活用して、ウェブを利用します。 弱視・ロービジョンの視覚特性と、支援技術の仕様によって、特有の困難に直面することがあります。 このページでは、弱視・ロービジョンのユーザーがSmartHR製品を利用する際に観察された問題点と、その解決案をまとめています。 画面拡大弱視・ロービジョンのユーザーは、OSの標準機能や専用ソフトを用いて画面の全体や一部を拡大して閲覧することがあります。拡大時はウェブページ全体を俯瞰することが難しくなります。 色反転機能弱視・ロービジョンのユーザーは、画面上の色を見やすい組み合わせに変更したり、色を反転するOSの設定や機能を利用することがあります。設定や機能の仕様により、ウェブページのUIは任意の色の組み合わせで表示されます。 スクリーンリーダー弱視・ロー
ヘルプページを書くうえでの基本的な考え方と表記ルールをまとめました。 ドラフトを自分でレビューする際は「チェックリスト」を活用してください。 また、このページで記載していない表記ルールは、プロダクトデザインにおけるライティングスタイル、用字用語、UIテキストに準拠します。 ユーザーが確実に目的を達成できる状態を目指しましょうヘルプページの役割は、ユーザーが目的を達成するサポートです。 情報を簡潔明瞭に伝えて、ユーザーが操作につまずかないようにしましょう。 不要な情報や曖昧な表現は目的達成の妨げとなるため、削除や言い換えを検討しましょう。 チェックリスト情報を取捨選択しましょう必要な情報を漏れなく記載する不要な情報を記載しない本文への追加情報に用いる囲み要素の多用を避ける情報を適切に配置しましょう先に知っておくべき情報から順番に配置する関連する情報は近くに配置する見出しや箇条書きを適切に使う
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
はじめにこの手引きはレビュー依頼時の必要事項を網羅的にまとめ、指針として共有するものです。レビュー時の迷いを減らし、レビュー相手への負荷の軽減する目的で定義しています。この手引きはレビューの手段を強制するものではありません。迷ったらお手本とし、必要があればカスタムしてください。項目に更新・改修・削除が必要な場合、どんどん編集していきましょう。本手引きの使い方「推奨事項」として書かれていることは、できるだけその方法に沿ってレビュー依頼をすると望ましい事項です。「任意事項」は、状況に応じて対応する、または不要な事項です。レビュー時は、レビューテンプレートをコピーして文書を作成して使ってください。その後のやり取り方法は各ツールに準拠します。レビューとはレビューはクオリティを高め、レビュー依頼者が気づかないことへの気づきを与えるものです。レビューは意見の押し付けではなく、ディスカッションです。レビ
Accordion styleExpanded optionsCallbackChange defaultExpanded
Figmaライブラリへのアクセス方法利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。 作成したコンポーネントライブラリはFigma Communityにも公開しています。 https://www.figma.com/community/file/978607227374353992 設計ルール前提Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提にした設計ルールですが、SmartHR UIのFigmaライブラリを利用してプロダクトのUI設計をする場合にも流用可能です。 実装を意識したコンポーネントの設計Figmaでの作業は実装と同義です。 コードと設計ロジックも踏まえ、可能な限り実装を意識した表層・コンポーネントの設計を心がけてください。 FigmaのAutoLayoutを活用することで実装(CSS)に近いコンポー
権限によるオブジェクトの表示・非表示・disabledルールを定義します。 基本的な考え方アカウントに付与された操作権限に伴う、UIの基本的な考え方は以下のとおりです。 権限がない場合、操作に関わるUI(アクションボタンやオブジェクトそのもの等)は非表示とする。権限はあるが、常に操作できないオブジェクトが対象である場合は非表示とし、その理由を明示する。権限はあるが、使用中など、オブジェクトの操作ができない場合はdisabledとし、その理由を明示する。種類基本的な考え方を元に、4つの表示パターンを定義します。
相手に誠実に、わかりやすい文章を書くための心がけをまとめました。 どういう思考プロセスからどんな表現が生まれるのか、参考として実例を紹介しています。実際に読み比べ、SmartHRの従業員として何かを伝えようとするときの、参考にしてください。 伝わる文章のガイドライン何を伝えるかによって、必要な情報の量や説明の粒度は異なります。 情報が不足していたり、逆に情報が多すぎたりすると、読者が意図を読み取れないことがあります。 読み手となる相手の状況(読む場面、事前知識など)を踏まえ、言葉にする内容や表現を厳選することが大切です。 目的に合わせて情報を取捨選択する読者の目線に立ち、コンテンツの目的に合わせて情報を取捨選択しましょう。 実例1:法律や業務に関わる記事目的業務に関係する「厚生年金保険」について正確に知りたいと思っている人に、わかりやすく内容を伝える。 Before日本の年金制度は、全国民
ユーザビリティテストをテスト設計に沿って円滑に進行し、被験者の心情に配慮しながら気持ちよくテストを受けてもらえるようにサポートするための、ファシリテーションの心得をまとめています。 多くの場合、被験者とは初対面です。意識的に普段よりも声のトーンを上げて会話して、明るい雰囲気で相手の緊張をほぐし、安心感を与えましょう。 テスト準備中にやることあらかじめ、被験者に関する情報を知っておくことで、テスト前の事前質問やアイスブレイクに活用し、信頼関係(ラポール)※1の構築に役立てます。 ※1 信頼関係(ラポール)とは、お互いを信頼して、安心して自己開示ができる状態のことです。被験者がお客さま(SmartHR Senseiなど)のとき企業規模、業種、契約プランといった情報だけでなく、過去に要望や問い合わせをいただいている場合には、その内容からどのようにプロダクトを利用しているかを把握しておく。 これま
SmartHRヘルプセンターに掲載しているヘルプページとリリースノート作成に関するガイドラインです。 ヘルプページのライティングは、基本的にプロダクトデザインにおけるライティングスタイル、用字用語、UIテキストに準拠しますが、ユーザーのメンタルモデルに配慮して特例を設けているケースがあります。 詳しくは、ヘルプページのライティングパターンなどを参照してください。 ヘルプページ作成の基本的な考え方ユーザーの関心事は何かを念頭に、どこまで説明が必要か、どう見せると伝わるかを考えます。 多すぎる情報はノイズになるので、取捨選択し、ページを設計します。 ヘルプページの構成ヘルプページの書き方ヘルプページのタイプヘルプページを情報の種類ごとに、下記のタイプに分類します。 1. 機能概要「この機能とはどういったものであるか」を説明したもの。ユーザーがアプリケーションを使いこなすうえで理解しておきたい、
ライティングガイドラインは、SmartHRのプロダクトで表記する言葉についての指針を示したものです。 デザイン原則に基づき、わかりやすく統一感のある言葉を誰でも迷わずに決定できる状態を目指します。 「わかりやすい」の定義については、UXライティンググループミッション 〜プロダクトを、もっとわかりやすく〜を参照してください。 適用範囲SmartHRのプロダクトで表記する言葉すべてです。 プロダクトとは、アプリケーションだけでなく、ヘルプセンターなど、ユーザーがSmartHRを使うときに触れるものすべてを指します。 ライティングガイドを通じて実現したいことユーザーの読解の負荷を軽減するユーザーは「年末調整を円滑に実施したい」など、ある目的を持ってプロダクトを操作します。 プロダクト上の言葉がわかりづらいと、その言葉そのものを読解することにユーザーは注意を払うことになり、本来の目的である「年末調
SmartHRロゴは、正しく使用されてはじめて本来の機能を発揮できます。 サイトにアクセスするすべての人が参照できますが、利用に関しては利用者・利用範囲を確認してください。 制作背景:リニューアルしたSmartHRロゴの作り方 | SmartHR Tech Blog 利用ガイドライン利用規約に違反する態様での複製・転用・変更することを禁止します。本ガイドラインに沿って、ロゴを利用してください。 本ガイドラインは、必ず守ることが目的ではなく、あくまでロゴを適切に扱うための指針です。ロゴやブランドを適切に扱って、SmartHRのより良い認知につなげる姿勢を大切にしてください。 本ガイドラインに沿うよりも効果的にロゴを利用できる場合や、ロゴの利用で迷う点がある場合は、問い合わせ先にご連絡ください。 バリエーションロゴは、横組を使用してください。 ただし正方形エリアでの利用の場合は、縦組も使用でき
概要Figmaというデザインツールを社内で普及していくために、関連する知見をまとめたドキュメントです。 2021年5月現在、メインのデザインツールをSketchからFigmaへの移行しています。新規で利用する場合はFigmaの利用を推奨します。 利用開始1. Figmaのアカウント作成する方法Slackの#gs_service_deskまたは#gs_johsys_requestでの申請方法にしたがって、Figmaアカウント(Edit権限)の発行を依頼してください。Gmailなどで自分でアカウント作成すると、SmartHRチーム内のリソースにアクセスできないので、上記のチャンネルで招待してもらうように依頼してください。2. Figmaのインストールブラウザ版はインストール不要です。チケットからデザインを確認したい場合などはこちらで十分です。パソコンのローカルフォントを利用したい場合はヘルパー
概要FigmaのSmartHR UI(ライブラリ)は組織全体で利用しているライブラリのため、意図しない更新から保護するために編集権限を制限し「ブランチ機能」を使って運用しています。 SmartHR UIにコンポーネントやスタイルを追加・変更したい場合は、本ページを参考にしてください。 コンポーネントの構造や命名などの考え方は、デザインデータ(Figma)の作り方を参考にしてください。 ブランチ運用上の注意SmartHR UIに変更を加える場合は、Figmaの「ブランチ機能」を利用してレビューを依頼する必要があります。 ブランチ作成時やレビュー依頼時は、以下の点に注意して作業してください。 守って欲しいルール「SmartHR UI」のライブラリを更新する場合は、「SmartHR UI 14px」も同じ内容でブランチを作成し更新してください。SmartHR UIはフォントサイズ基準が16pxと
構成デザインパターンは以下の項目で構成されています。 項目の表示順は以下の順序にしたがいますが、必須項目以外は、デザインパターンによって定義されている場合とされていない場合があります。 タイトル(必須)概要(必須)基本的な考え方構成レイアウト種類ライティングパターン{その他のルール}関連リンク参考文献デザインパターンの読み方まずは、概要と基本的な考え方を読みましょう。基本的な考え方には、そのガイドを定義した前提となる考え方やスタンスが書かれています。 この上で、目的に応じて以下を読んでいくことを推奨します。 デザインカンプの作成や実装をしたい場合は、構成とレイアウトを確認したうえで、配置やスタイリングをしてください。とりうるバリエーションの確認は、種類やライティングパターンに書かれています。余裕があれば、関連リンクを読むことで、そのデザインパターンに関連する内容を参照できます。項目の説明書
SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブルオブジェクト名(必須)オブジェクトの情報オブジェクトの操作タイトルエリアテーブル操作エリア一時操作エリア 1. テーブルよくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイルオブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあ
次のページ
このページを最初にブックマークしてみませんか?
『SmartHR Design System』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く