SmartHR Design System

作成ガイドライン

プロダクトの画面キャプチャや、その他ウェブサイトの画面キャプチャを作成する際のガイドラインです。 このガイドラインでは、一貫性があり、わかりやすく、見栄えのよい画面キャプチャの作成をサポートします。

適用範囲

注意点

要素を調整する際、実際には利用できない機能やサービスが、利用できそうに見えうる表現にはならないように注意しましょう。

作成ツールの選定

目的に合わせて作成するツールを選定します。Figma、Adobe Photoshop、Adobe Illustratorなど、作成する画面キャプチャの用途に合わせて選定してください。

Figmaでつくる

Adobe PhotoshopやAdobe Illustratorでつくる

  • 色やタイポグラフィや余白などの要素で迷うことがあれば、デザイントークン を参照してください。

内容の調整

画面キャプチャに掲載するあらゆる要素から、受け手がサービスの利用シーンを想像できるようにしましょう。 そのためには、施策の訴求内容や作成する画面キャプチャがどこでどのように利用されるのかを理解する必要があります。

文言や文章

パーソナリティに則り、受け手が体験するサービスや機能と一致する文言や文章にしましょう。
文章の書き方は、伝わる文章も参考にしてください。

利用シーンに近い表現

氏名や日付など、実際のサービス利用時に重複しない要素は表記を分散させましょう。
また、特定の性別、年齢層、カテゴリ（部門・ステータスラベル・用途など）に偏りがないようにし、実際の利用シーンに近い表現に調整してください。

左側には表組みの中に同じ名前や写真番号が繰り返し表示されており、右側にはバラバラの名前と社員番号が表示がされている。画面中央には矢印が配置されている。

サンプル

画面キャプチャ内の各種要素には、推奨する表記・画像を反映してください。

テキスト

サンプルテキストを参照してください。

プロフィール画像

モデル写真を使用してください。
使用する際は、モデル写真の注意事項・利用方法（DocBase）を参照してください。

見た目の調整

ウィンドウサイズ

基準のサイズです。よりよい見栄えになる最適なウィンドウサイズがあれば、ウィンドウサイズを変更しても構いません。

横幅

  • パソコンの場合、横幅1400pxで作成しましょう。
  • スマートフォンの場合、横幅375pxで作成しましょう。

キャプチャ画像のサンプルが表示されており、画像の左端から右端の長さを矢印が示している

縦幅

基本的にはページの最上部から最下部まで、全体を収めてください。

使用時にトリミングなど場面に応じて調整するため、機能の全体が十分見える縦長でのキャプチャを推奨します。以下の、重要な要素の位置や最小サイズを参照の上作成しましょう。

重要な要素の位置

機能を象徴する重要な要素は、下記の縦幅の範囲に収めることを推奨します。
端末モックの縦幅であるこの範囲を超えた要素は、利用シーンによっては表示されません。

  • パソコンの場合、最上部から880px以内に重要な要素は収める。
  • スマートフォンの場合、最上部から760px以内に重要な要素は収める。

端末モックの中にキャプチャ画像が入っている。モックの画面の高さを矢印が示している

重要な要素は、端末モックの縦幅（黒い矢印）に収めるように作成します
縦幅の最小サイズ

端末モックへの合成を担保できる高さです。
合成やトリミングなどの加工がしやすいように、画像のサイズ自体は端末モックの縦幅以上の大きさで作成することを推奨します。

  • パソコンの場合、縦幅は880px以上で作成しましょう。
  • スマートフォンの場合、高さ760px以上で作成しましょう。

上記は、横幅を推奨サイズで作成した場合の値です。 横幅を異なるサイズで作成する場合、必要な高さも変化するため利用シーンに応じて変更してください。

端末モックにキャプチャ画像が問題なく入っている

端末モックに収まる十分な縦幅を確保します

端末モックにキャプチャ画像が入っているが、高さが足りずスクリーンの下部に余白ができている

推奨サイズ以下で作成すると端末モックに合成するための高さが不足するため、推奨しません

フォント

  • 可読性を優先して、適宜ウェイトを調整しましょう。

    • 実装されているウェイトのままでは、図版として画面キャプチャを利用する際に可読性を担保できない場合があります。そのときは、読みやすいウェイトに調整しても構いません。

    左側には細いウェイトのテキストが、右側には太いウェイトのテキストが表示されている。画面中央には矢印が配置されている。

    ウェイトの調整例（左：調整前、右：調整後）

色

  • 視認性を優先して、色を調整しましょう。

    • 実装されている色のままでは、図版として画面キャプチャを利用する際に視認性を担保できない場合があります。そのときは、見やすい色に調整しても構いません。

  • 色を調整するときは、テキストや図形といった要素自体が持つ意味や要素同士の関係性が変わらないようにしてください。

    左側には明るい色のテキストが、右側には左側に比べて明度が低い色のテキストが表示されている。画面中央には矢印が配置されている。

    色の調整例（左：調整前、右：調整後）

要素の位置

  • テキストや図形といった要素自体が持つ意味や要素同士の関係性が変わらないよう注意しましょう。

要素の表示・非表示

  • 画面キャプチャのテキストや図形などの要素を取捨選択することで、より効果的な画面キャプチャを作り上げることができます。
  • ウェブサイトやアプリケーションの仕様が正しく受け手に伝わるよう、要素を取捨選択するときは慎重に意思決定しましょう。

相談・フィードバック先

画面キャプチャの作成ガイドラインに関する相談やフィードバック