はてなブックマーク

アプリケーション上の表現で迷ったときの判断基準や、推奨する表記を記載しています。 ディスクリプションは敬体(です、ます調)を用いて、動詞まで書く説明アプリケーションにおけるディスクリプション(説明文)は、動詞まで記載します。体言止めは避けましょう。 なお、文体は敬体(です、ます調) を用います。 画面ごとのライティングの詳細は、デザインパターンで確認してください。 括弧「 」、[ ]、【 】の使い分け説明ライティングスタイル「括弧類は「 」、[ ]、【 】、( )を使用する」に準拠して、全角記号を使用します。 アプリケーション上での括弧の使い分けは以下です。 ヘルプページやリリースノートも準じます。 文中でファイル名を示すときに囲うもの ファイル名:「 」 地の文と区別したい 強調したいとき画面上の表示を示すときに囲うもの 設定項目名、タブ名、操作ボタン名、選択肢など → [ ] 画面名に

ヘルプページを書くうえでの基本的な考え方と表記ルールをまとめました。 ドラフトを自分でレビューする際は「チェックリスト」を活用してください。 また、このページで記載していない表記ルールは、プロダクトデザインにおける基本的な考え方、用字用語、UIテキストに準拠します。 ユーザーが確実に目的を達成できる状態を目指しましょう ヘルプページの役割は、ユーザーが目的を達成するサポートです。 情報を簡潔明瞭に伝えて、ユーザーが操作につまずかないようにしましょう。 不要な情報や曖昧な表現は目的達成の妨げとなるため、削除や言い換えを検討しましょう。 チェックリスト 情報を取捨選択しましょう 必要な情報を漏れなく記載する 不要な情報を記載しない 本文への追加情報に用いる囲み要素の多用を避ける 情報を適切に配置しましょう 先に知っておくべき情報から順番に配置する 関連する情報は近くに配置する 見出しや箇条書き

アクセシビリティとは アクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針 SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上

ライティングガイドラインは、ユーザーがプロダクトを利用する際の助けとなる、わかりやすい言葉をデザインするための指針です。 デザイン原則に即した、簡潔で統一感のある言葉を、誰でも迷わずに決定できる状態を目指します。「わかりやすい」の定義については、UXライティング部のビジョン別タブで開くを参照してください。 ユーザーがプロダクトを操作する際に触れる情報は、UIテキストだけではありません。 そのためライティングガイドラインには、ヘルプページやリリースノートに関するガイドラインも含まれています。 適用範囲 SmartHRのプロダクトで表記する言葉すべてです。 プロダクトとは、アプリケーションだけでなく、ヘルプセンターなど、ユーザーがSmartHRを使うときに触れるものすべてを指します。 ライティングガイドを通じて実現したいこと ユーザーの読解の負荷を軽減する ユーザーは「年末調整を円滑に実施した

相手に誠実に、わかりやすい文章を書くための心がけをまとめました。 どういう思考プロセスからどんな表現が生まれるのか、参考として実例を紹介しています。実際に読み比べ、SmartHRの従業員として何かを伝えようとするときの、参考にしてください。 伝わる文章のガイドライン 何を伝えるかによって、必要な情報の量や説明の粒度は異なります。 情報が不足していたり、逆に情報が多すぎたりすると、読者が意図を読み取れないことがあります。 読み手となる相手の状況(読む場面、事前知識など)を踏まえ、言葉にする内容や表現を厳選することが大切です。 目的に合わせて情報を取捨選択する 読者の目線に立ち、コンテンツの目的に合わせて情報を取捨選択しましょう。 実例1:法律や業務に関わる記事 目的 業務に関係する「厚生年金保険」について正確に知りたいと思っている人に、わかりやすく内容を伝える。 Before 日本の年金制度

概要 FigmaのSmartHR UI(ライブラリ)は組織全体で利用しているライブラリのため、意図しない更新から保護するために編集権限を制限し「ブランチ機能」を使って運用しています。 SmartHR UIにコンポーネントやスタイルを追加・変更したい場合は、本ページを参考にしてください。 コンポーネントの構造や命名などの考え方は、デザインデータ(Figma)の作り方を参考にしてください。 ブランチ運用上の注意 SmartHR UIに変更を加える場合は、Figmaの「ブランチ機能」を利用してレビューを依頼する必要があります。 ブランチ作成時やレビュー依頼時は、以下の点に注意して作業してください。 守って欲しいルール コンポーネントを配置しているフレームの位置の変更を、ブランチ内で行なわないでください。 マージ前にフレームを入れ替えたり移動すると、フレームの移動によって関係ないコンポーネントにも

SmartHRに頻出する、表形式で一覧表示するUIのパターンをまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成 よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブル オブジェクト名(必須) オブジェクトの情報 オブジェクトの操作 見出し テーブル操作エリア 一時操作エリア 1. テーブル よくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名 オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイル オブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクト

ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている参考 画像の代替テキスト - SmartHR Design System非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されている 動画の内容を解説した音声、またはコンテンツがあるか 音声や動画が自動で再生される場合、一時停止できるか 画面内に1秒に3回以上の点滅や閃光を起こすも

言葉をデザインするときの基本的な考え方をトピックごとに記載しています。 冗長な日本語を避ける 説明 ユーザーに簡潔明瞭に伝えるため、「することができる」などの冗長な表現は極力避けましょう。 例 OK:◯◯を確認してください。 NG:◯◯をご確認いただけますようお願いいたします。 OK:◯◯しました。 NG:◯◯させていただきました。 議事録 https://smarthr-inc.docbase.io/posts/1304668別タブで開く 正しい文法表現を使用する 説明 使用したことのある表現であったとしても、文法的に誤っていないかを確認して使用しましょう。 例えば、メールや口頭で使用されることが多い「ご参考ください」という表現は文法的には誤りです。正しくは「ご参考にしてください」 「ご◯◯ください」は「ご利用ください」など、「◯◯する」と言い換えられるときに使用します。 議事録 htt

アプリケーション内に表示するエラーメッセージの作成に関するガイドラインです。 エラーメッセージのライティングは、基本的な考え方、用字用語に準拠します。 そのほか、エラーメッセージ特有の気をつけるべきポイントを記載しています。 適用範囲 アプリケーションを操作してエラーが発生したときに表示するメッセージすべてです。

デザインは、デザイナーだけのものとは限りません。 プロダクトがどのようにあるべきかを考え、試行錯誤し、意思決定することは「デザイン」そのものだからです。 SmartHRのプロダクト作りには多くの人が関わり、これからも増えていきます。このような中で大切にしたいことを言語化し、デザイン原則としました。 このデザイン原則は、SmartHRを取り巻く環境の変化に合わせて定期的に見直し、更新しながら運用していくことを前提としています。 ユーザーの時間は有限だ 私たちのプロダクトは、仕事の時間をよりよくするためのソフトウェアです。ユーザーの生産性を高めることによって対価を得ていることを忘れてはいけません。 私たちは、ユーザーの限りある業務時間をムダにしない、使い勝手のよいプロダクトを作ります。 道具であるはずのプロダクトの都合でユーザーを動かしていないか、ユーザーの時間を奪っていないかを意識します。

用字用語:一覧このページに記載しているガイドラインは随時更新していきます。用字用語に関する最新のガイドラインは、このページで確認してください。記載内容に気になる点があったり、用字用語以外のガイドラインを確認したい場合は #productside_文言相談 チャンネル、または、お近くのUXライターまでお声がけください。

ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 わからないことがあれば #accessibility_and_human_rights_aka人権 チャンネルにていつでもお気軽にご相談ください! 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている 代替テキストが空で設定されている または背景画像として表示されている参考 非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されてい

SmartHRのプロダクト群全体で再利用できる、デザイントークンやコンポーネントライブラリ(SmartHR UI)、デザインパターン、ライティングガイドラインを提供します。 これらを組み合わせることで、デザインの再現性を高め、統一感のあるユーザーインターフェースと一貫した製品体験を効率よく設計できるようにします。 また、このデザインシステムは、ドキュメントやガイドラインを素早く提供することを優先し、常にWork In Progressで運用されています。 デザインシステムをつくる目的 デザインシステムの取り組みには、2つの目的があります。 包括的な「デザインの共通言語」をつくり、プロダクトの生産性と品質に貢献すること 具体的には、以下に関わるブレを低減し向上する: プロダクト開発におけるアウトプットの速度 プロダクトにおける提供価値の品質 ユーザーの体験品質(プロダクト利用時の一時的UX別

概要 SmartHR UIのコンポーネントをデザイナーが追加・更新する場合、デザインツールでUI設計する場合があります。 デザインデータを作成する際に必要な情報と、守って欲しいルールをまとめています。 ツール SmartHRのプロダクト開発で利用しているデザインツールは以下のとおりです。これらツールを利用開始したい場合は、社内情シスに利用申請してください。 Figmaライブラリへのアクセス方法 利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。 作成したコンポーネントライブラリはFigma Communityにも公開しています。 https://www.figma.com/community/file/978607227374353992別タブで開く 設計ルール 前提 Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前

だれでも・効率よく・迷わずに。 SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。 デザインシステムとは?

CSS Pre-Compiler Enable Less or Sass pre-compilation for your pattern CSS to use variables, mixins & more.