はてなブックマーク

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

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

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

ライティングガイドラインは、SmartHRのプロダクトで表記する言葉についての指針を示したものです。 デザイン原則に基づき、わかりやすく統一感のある言葉を誰でも迷わずに決定できる状態を目指します。 「わかりやすい」の定義については、UXライティンググループミッション 〜プロダクトを、もっとわかりやすく〜を参照してください。 適用範囲SmartHRのプロダクトで表記する言葉すべてです。 プロダクトとは、アプリケーションだけでなく、ヘルプセンターなど、ユーザーがSmartHRを使うときに触れるものすべてを指します。 ライティングガイドを通じて実現したいことユーザーの読解の負荷を軽減するユーザーは「年末調整を円滑に実施したい」など、ある目的を持ってプロダクトを操作します。 プロダクト上の言葉がわかりづらいと、その言葉そのものを読解することにユーザーは注意を払うことになり、本来の目的である「年末調

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

概要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のウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている参考 画像の代替テキスト - 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 正しい文法表現を使用する説明使用したことのある表現であったとしても、文法的に誤っていないかを確認して使用しましょう。 例えば、メールや口頭で使用されることが多い「ご参考ください」という表現は文法的には誤りです。正しくは「ご参考にしてください」 「ご◯◯ください」は「ご利用ください」など、「◯◯する」と言い換えられるときに使用します。 議事録https://smart

SmartHRアプリケーション内で表示されるエラーメッセージの作成に関するガイドラインです。

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

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

Figmaライブラリへのアクセス方法利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。 作成したコンポーネントライブラリはFigma Communityにも公開しています。 https://www.figma.com/community/file/978607227374353992 設計ルール前提Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提にした設計ルールですが、SmartHR UIのFigmaライブラリを利用してプロダクトのUI設計をする場合にも流用可能です。 実装を意識したコンポーネントの設計Figmaでの作業は実装と同義です。 コードと設計ロジックも踏まえ、可能な限り実装を意識した表層・コンポーネントの設計を心がけてください。 FigmaのAutoLayoutを活用することで実装（CSS）に近いコンポー