Customer-Enabled: ブランディング&カスタマイズ

Workvivoをブランドに合わせて調整する方法はいくつかあります。

このガイドでは、WorkvivoのAdmin Panelを通じてカスタマイズできる領域、画像の推奨事項/要件、その他のヒントとコツについて詳しく説明します。

テーマ

管理者パネルの[テーマ]エリアでは、次のブランディング項目を設定できます。

1. メインバナー画像
2. 原色
3. セカンダリカラー
4. ナビゲーションバーの色 (オプション)
5. 会社ロゴ

アップデート方法:

上記のブランドアイテムを更新するには:

• 「管理」>テーマに移動します。

• デフォルトのブランディングは「デフォルトのテーマ」オプションに表示されます。アクティブとして表示されます。
• このテーマはアクティブなまま編集できません。
• 新しいブランディングを作成するには、「テーマを追加」をクリックします。
• テーマに名前を付けて、ブランディングアイテムの編集を開始できます。

テーマのブランディングアイテムに関する追加情報:

1.メインバナー:

Webとモバイルのテーマを設定し、同じWebバナーをモバイルアプリに適用したり、カスタムイメージで上書きしたりできます。

ウェブ仕様：

• 推奨サイズ: 2241px x 474px
• 主要なテキスト/画像用のセーフスペース:約895px x 474px、中央揃え。この領域内に主要なテキストと視覚要素を保持すると、デスクトップ、モバイル、およびメインフィードでトリミングされたときに、それらが表示され続けるようになります。最高のエクスペリエンスを得るために、常にイメージをテストして洗練してください。
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、またはGIF<3MB
• 最大ファイルサイズ:10 MB

モバイルの仕様：

私たちのトップヒント:

バナーの画像をプレビューするには、次のことができる。

1. 「Edit theme（テーマの編集）ページでプレビューを表示します。変更を行うたびに、テーマの見え方を表示します。

2. 隠しスペース/プライベートスペースにアップロードします。スペース内からバナーを表示すると、デスクトップのメイン バナーと同じように表示されます

「Space」>「Edit Space（スペースの編集）」に移動し、「Banner（バナー）」をクリックし、「Upload（アップロード）」>「Save（保存）」をクリックします。画像内にテキストや人物があるとクロップされる可能性があるため、使用を最小限に抑えてください。

2.原色

原色のスタイルには、次のような主要なアイテムがあります。

• デスクトップ:
  • デスクトップ ナビゲーション バー (既定の色)
  • 投稿 UI (アイコン、枠線、ボタン)
  • すべてのボタンの境界線と一部のボタンのメインカラー
  • ナビゲーションバーを除くすべてのアイコン
  • アクティビティ、スペース、ニュース記事、目標/値、分析、検索セクションのマスターテキスト
  • アクティビティフィードのイベントアバター
  • リンク例@mentions、ハイパーリンク、ハッシュタグ(「青いリンク」が有効になっている場合を除く)
  • プロファイル・オプションを示すサイド・ナビゲーション・メニュー(メニューが開いている場合):
  • AppsおよびDocs：「機能」ステータスチップとフォルダーアイコンの色
• モバイル:
  • ヘッダー (個別のナビゲーション バーの色が選択されていない場合の既定の色)
  • ハンバーガーメニューのテキストとアイコン
  • 投稿 UI (アイコン、枠線、ボタン)
  • values & peopleのアイテムラベル
  • リンク例@mentions、ハイパーリンク
  • メール通知ヘッダー：デフォルトは原色だ

3. セカンダリカラー

セカンダリカラースタイルには、次のような主要なアイテムがあります。

•  例えば、Web版のフィード上に表示されるイベントのアバター周りの枠線など、特定の枠線：

• 「価値観」ページのミッションステートメントの背景色は少し暗くなっていますが、これはカスタマイズできません。

• メガメニューの「新規」ボタン。 

4.ナビゲーションバーの色(オプション)

• これは、ラベルの白いフォントと対比する必要があります。
• 白いフォントラベルはカスタマイズできませんのでご注意ください。
• ナビゲーションバーの色をカスタマイズしない場合、デフォルトでプライマリカラーの90%になります。

5. 会社ロゴ

寸法： 幅最小 400px
ファイルタイプ：JPG、JPEG、PNG、BMP、SVG、WEBP。

顧客対応のブランディングの追加

個人プロフィールバナー

個人プロフィールバナーは、メインバナーと同じ推奨ファイル仕様で全ユーザーに設定できます。バナーはデスクトップとモバイルの両方とも、ユーザープロフィールを閲覧する際にのみ表示されます。詳細はこの記事をご覧ください。

仕様：

• 推奨サイズ: 2241px x 474px
• 主要なテキスト/画像用のセーフスペース:中央揃えで1290px x 135px
• サポートされているファイルタイプ:PNG、JPG、JPEG、<3MB
• 最大ファイルサイズ:10 MB

スペースアイコン & スペースバナー

Spacesを目立たせるために、スペースのバナーとアイコンをカスタマイズしましょう。

デスクトップでは、スペースアイコンは画面左側に表示されます。モバイルでは、左上のプロフィール画像をクリックするとスペースアイコンを確認できます。また、アプリ上で左から右にスワイプしてサイドメニューを開くこともできます。

スペースアイコンの仕様:

• 推奨サイズ: 200px x 200px または 1:1 の比率
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、またはGIF<3MB

スペースバナーの仕様:

• 推奨サイズ: 2241px x 474px
• 主要なテキスト/画像用のセーフスペース:中央揃えで1290px x 135px
• 詳細情報とヒントはこちらの「スペースバナーガイド」をご覧ください
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、またはGIF<3MB
• 注：モバイル表示ではスペースバナーの端が切れてしまいます
  

値アイコンとヒーローステートメント

Workvivoで会社の価値観を表現しましょう。従業員は投稿に会社の価値観をタグ付けできるため、組織全体で目的意識と帰属意識が高まります。

仕様：

アイコン

• 推奨サイズ: 200px x 200px
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF <3MB
• 正方形の画像は正方形の値アイコンになり、円形の画像は円形の値アイコンになります

ヒーロー画像&ビデオ

• ヒーロー画像の推奨サイズ: 600px x 300px
• サポートされているファイルタイプ:PNG、JPEG、JPG、JFIF、GIF <3MB
• ヒーローステートメントビデオファイルタイプ:MP4、MOV<5GB
• 画像は2:1の比率で表示されます - 動画もアップロードされている場合、画像はカバー画像として表示されます
• 手記： 「値」セクションはプラットフォームから削除できません

バッジアイコン

Badgesは、職場でのエンゲージメントを促進し、従業員の認知度を高めるために全社的に利用できる手段です。Badgesのアイコンは、Badgesの目的に合わせてカスタマイズできます。

仕様：

• 推奨サイズ: 200px x 200px または 1:1 の比率 (正方形)
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

アプリとドキュメントのアイコン

アプリとドキュメント（リソースタブからアクセス可能）は、組織内で日常的に使われている主要なシステムやドキュメントの窓口です。アイコンを追加することでアプリを簡単に認識できます。画像が追加されていない場合は、以下の例のようにデフォルトで黒いリンクアイコンが表示されます。
 

仕様：

• 推奨サイズ:200px x 200px(正方形)
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

ドキュメントアイコン

仕様：

• 推奨サイズ:200px x 200px(正方形)
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

メガメニューアイコン

メガメニュー（ナビゲーションバーからアクセス可能）を使うと、あなたや同僚が関連するリソースを簡単に見つけられます。関連するアイコンを追加することで、重要なリンクやアプリを常に前面の中央に表示できます。

仕様：

• 推奨サイズ: 24px x 24px
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB
• この画像は、メガメニューの見出しタイトルの前に表示されます

便利なリンクサイドバーのアイコン

Workvivoのホームページに、クイックアクセスのための便利なリンクサイドバーウィジェットを作成できます。

ウィジェットは、デスクトップのフィードの左側にのみ表示され、管理パネルで追加できます。

仕様：

• 推奨サイズ:200px x 200px(正方形)
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

チームアイコン
 

従業員データがプラットフォームに追加されたら、チームにチームアイコンを追加できます。

仕様：

• 推奨サイズ:200px x 200px(正方形)
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

Billboards
 

Billboardsにより、デスクトップとモバイルの両方のユーザー向けにActivity Feedの上部にコンテンツをハイライトして表示できます。

• 推奨サイズ:最小サイズ600px x 300px
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB
• 画像は2:1の比率で表示されます

Podcastカバー画像
 

PodcastsをWorkvivoを通じて共有できます。自分でポッドキャストを作成している場合は、そのポッドキャストのカバー画像を追加できます。カバー画像は、デスクトップユーザーのフィードの右側にあるPodcastウィジェットにも表示されます（有効になっている場合）。

• 推奨サイズ: 最小 300px x 300px
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

ギャラリー
 

Workvivoのギャラリー機能を使えば、デスクトップやモバイルで画像の保存や整理だけでなく、同僚と共有することもできます。

仕様：

• 対応ファイル形式：GIF、PNG、JPG、JPEG、JFIF、MP4、MOV
• Workvivoの風景画像を常にお勧めします
• サムネイルはデスクトップでは10:7、モバイルでは1:1の比率で表示されます 2:1のアスペクト比の風景画像をお勧めします
• テキストを含む画像の場合は、テキストが途切れないようにテキストを中央に配置することをお勧めします

グローバルページの注目の画像

デスクトップのActivity Feedの右側にあるウィジェットにGlobal Pageをフィーチャーすることができます。

仕様：

• 推奨サイズ: 800px x 400px
• サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、GIF < 3MB

カスタマイズ可能な画像とおすすめのまとめ

手記： JFIFはデスクトップでのみ動作します。

セーフスペースとは？
デスクトップのレスポンシブ表示を確保するため、テキストと画像に「セーフスペース」を設けることを推奨します。例えば、アプリランチャーウィジェットやニュース記事/イベントのカバー画像は、ブラウザウィンドウの幅に応じて3つの異なるサイズにスナップできます。

これがレスポンシブデザインの性質です - 人々は常にさまざまなサイズのウィンドウでWorkvivoを表示し、全画面表示でない限り、ウィンドウサイズは設定されていません。

その他の考慮事項:

• Spotlight - ニュース記事（ヒーロー記事を含む）、イベント、Global Pagesの画像は自動的にSpotlightに取り込まれるため、このセクションに個別の画像をアップロードする必要はありません。