バナー & ログインページのデザインガイド

このガイドは、メインバナーとスペースバナーの両方のデザインに適用されます。レスポンシブWebデザインの設計は難しい場合があるため、含まれている寸法は、バナーデザインで常に表示したいテキストや主要なグラフィックを使用する際に役立つ便利なガイドとして機能するはずです。

付属の寸法を使用してデザインを設定したり、さらに簡単にするために、この記事で使用するべき3つの例を含めました。

メインバナー(デスクトップビュー)

バナーのデザイン: 含まれるテキストの量を最小限に抑え、可能な限り人物の写真を避けることをお勧めします。

バナーファイルの種類:PNG、JPG、JPEG、JFIF、またはGIF<3MB

寸法 : 2241px × 474px

主要なテキスト/画像を安全に配置できる領域：中央に配置した幅895px x 高さ474px

メインバナーの変更方法については、こちらの記事をぜひチェックしてください。

スペースバナーデザイン - すべきこととすべきでないこと

スペースバナーの画像はモバイルとデスクトップの両方に表示されるため、両方で表示したときにデザインが適切に機能することを確認することが重要です。

デスクトップでは、バナー画像の多くが表示されますが、以下に示すように、モバイルアプリで表示したときに表示されることが保証されている安全なスペースがあります。

次の例は、この安全なスペースを効果的に使用し、バナー画像デザインの焦点が常に中央にあることを確認する方法を示しています。

例 1 - ベクトル イラストと要素

デザインの焦点をバナーの中央に保ち、右にも左にも寄せないようにして、最も重要な部分がセーフスペースを占めているようにします。

例2：写真

スペースバナーの画像に使用する適切な写真を選ぶことが重要です。常に被写体を中心にし、ズームしすぎていない写真を選ぶことが大切です。そうしないと、モバイルで見ると判別が難しくなることがあります。

 

例3 - パターン

パターンは、パターンを構成する要素が小さく、デザインの中に密集している限りは、スペースバナーデザインとして安全な選択肢です。

要素が大きすぎると、パターンは表示されません。

以下に示すように、最初の画像は推奨される画像です。

スペースバナー (デスクトップビュー)

スペースバナー（モバイルビュー）

ログイン画面デザインガイド

なお、ログインページはパスワード認証でWorkvivoにアクセスするユーザーにのみ表示されます。SSO経由でアクセスするユーザーは、Workvivoのログイン画面ではなく、組織のSSOログインページが表示されます。

新しいログイン画像を検討する際のヒント：

• デスクトップ上の表示エリア：このエリアは画面サイズによって若干変わる場合があります
  
• モバイル上の表示エリア：提供された画像の中央部分がモバイル上に表示されます
  
• サポートされているファイル形式：PNG、JPG
  

ログインページのレスポンシブデザイン

レスポンシブWebデザインの設計は難しい場合があるため、ここの寸法は、バナーデザインで常に表示したいテキストや主要なグラフィックを使用する際のガイドとして機能する必要があります。

また、アートワークの端にテキストや重要なグラフィック要素を配置することを避けることをお勧めします。

最も役立つヒント：

• 一部の画像はログインボックスの対象となるので、これを覚えておいて
• 最適な結果を得るには、デザインでテキストを使用しないようにします
• 24インチ画面の可視領域:1500px x 750px
• 隠しエリア:1500px x 125px

ログインページの応答デザイン（モバイルビュー）

レスポンシブWebデザインとして、バナーデザインで常に表示したいテキストや主要なグラフィックを使用する場合は注意してください。モバイル画面はデスクトップ画面と同じアートワークを使用し、クリエイティブの中央部分が表示されます。

繰り返しになりますが、背景は汎用的なものにし、テキストを入れないようにすることをお勧めします。

最も役立つヒント：

• 一部の画像はログインボックスの対象となるので、これを覚えておいて
• 最適な結果を得るには、デザインでテキストを使用しないようにします
• 可視領域:中央に545px x 971px