SmartHR Plus パートナー

SmartHR Plus パートナー(アプリ事業者) のみなさまに向けて、利用方法を掲載したページです。

提供アプリに関するガイドラインを掲載しますので、かならずご確認ください。

1. アプリのUI・デザインについて

SmartHRと連携するアプリ(プロダクト)のユーザーインターフェース(UI)およびデザインに関するガイドラインです。

1-1. UIの制限はありませんが、SmartHR UI の利用を推奨します

SmartHR Plusパートナーが提供するアプリのUI・デザインに、原則として制限はありません。
ただし可能なかぎりSmartHRのUIコンポーネント「SmartHR UI」の利用を推奨しています。これはSmartHRと一貫したUIを提供することで、ユーザーの学習コストが少ないプロダクトを提供できるためです。また、SmartHR UIはアクセシビリティに配慮しているため、多様な環境で利用してもらえる可能性が高まります。

アプリのUI例

OK例のプロダクトのUI例。背景色などにSmartHR Blueが利用されている。

SmartHR UIを利用できます。配色をそのまま利用してもよいです。

OK例のプロダクトのUI例。背景色などが提供アプリのブランドカラーに変更されている。

SmartHR UIを利用できます。配色を変更してもよいです。

OK例のプロダクトのUI例。SmartHR UIを利用していないプロダクトのUI。

SmartHR UIの利用を推奨しますが、利用しなくてもよいです。

1-2. プロダクトカテゴリのコンテンツはすべてご活用いただけます

SmartHR Design Systemのプロダクトカテゴリで公開している、Figmaファイルやライティングルールなども、アプリ開発にご活用いただけます。

1-3. アプリ内でのSmartHRロゴ利用について

アプリ内でSmartHRロゴを使用できますが、SmartHRが連携対象サービスであることをユーザーに示す場合に限定されます。

SmartHRロゴの利用方法

  • ロゴの利用ガイドラインを守ってご利用ください。
  • SmartHRロゴをボタンの要素として内部に配置することは、ユーザーに誤解を与える可能性があるため避けてください。ロゴは、あくまでSmartHRというサービスを示す識別子として扱ってください。 ボタンのNG例が3つ。ボタンの要素として、ロゴや、ロゴの一部が利用されている。

利用シーンの例

  • 例1:SmartHRを含む、連携可能なサービスの一覧を表示する画面 アプリ画面のOK例。連携サービス一覧のうちの1つにSmartHRがあり、ロゴがサムネイルとして利用されている。

  • 例2:ユーザーがSmartHRとの連携設定を行なうための操作画面 アプリ画面のOK例。SmartHRとの連携操作画面。アイキャッチとして、アプリロゴとSmartHRロゴを相互の矢印でつなぐ図が描かれている。

2. アプリ(プロダクト)以外

アプリ(プロダクト)においてはシームレスな体験を提供するため制限がありませんが、それ以外の要素については、以下のガイドラインを設定しています。
これは、提供するアプリ・サービスがSmartHRブランドと不要に混同されることなく、適切に認知され、お互いのブランドと権利を守るために設定しているものです。

対象範囲

提供アプリ名義での、アプリ本体(プロダクト)以外のすべての要素
(例)

  • アプリのロゴ
  • アプリのサービスサイトやLP
  • 資料
  • チラシ
  • バナー

利用できるコンテンツ

アプリ(プロダクト)以外では、以下のコンテンツ・アセットが利用できます。

1. SmartHRロゴ

「株式会社SmartHR」または「サービスSmartHR」の説明として、SmartHRロゴを利用できます。 ロゴの利用ガイドラインを守ってご利用ください。

2. 機能・仕様をあらわすアイコン

SmartHRでは、機能・仕様に関するアイコンをオリジナルで作成し、サービス全体で利用しています。アプリ・アプリ以外ともに、同じ特定の意味を示すアイコンとして利用できます。
アイコンの利用ガイドラインを守ってご利用ください。

3. 端末モック

スマートフォン・パソコンのモック画像を利用できます。
利用ガイドラインを守ってご利用ください。
https://smarthr.design/communication/mock/

利用できないコンテンツ

アプリ(プロダクト)以外で、以下のコンテンツ・アセットは利用できません。

注意事項(色について)

アプリ(プロダクト)以外では、SmartHRのPrimary Brand Color「SmartHR Blue」とその近似色をメインカラーとして利用しないでください。
これは、提供するアプリ・サービスがSmartHRブランドと不要に混同されることなく、適切に認知され、お互いのブランドと権利を守るためです。

ロゴのOK・NG例

OK例が4つ配置されている。SmartHRのブランドカラーであるOrange、Sunlight04、Aqua04が利用されたロゴマークが3つ。シンボルマークにAqua04、ロゴタイプにStone04が利用されたロゴマークが1つ。

OK例:メインカラーにはSmartHR Blueを利用しない

NG例4つに赤い斜線が引かれている。全体にSmartHR Blueが利用されたロゴマークが1つ。シンボルマークやロゴタイプのみにSmartHR Blueが利用されたロゴマークが3つ。

NG例:メインカラーにSmartHR Blueを利用する

LPやチラシなどのOK・NG例

OK例のLP。背景色やテキストに、提供アプリのブランドカラーが利用されている。

OK例:提供アプリのブランドカラーをメインとした配色

OK例のLP。背景色やテキストには提供アプリのブランドカラーが配色されており、部分的にSmartHR Blueやその近似色が利用されている。

OK例:提供アプリのブランドカラーをメインとし、部分的にSmartHR Blueを利用する

NG例のLPに赤い斜線が引かれている。背景色やテキストには主にSmartHR Blueが利用されている。

NG例:SmartHR Blueをメインとした配色

NG例のLPに赤い斜線が引かれている。背景色やテキストには主にSmartHR Blueやその近似色が利用されている。

NG例:SmartHR Blueの近似色をメインとした配色