メインコンテンツへスキップ

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

Bethany Lakomy
  • 更新

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

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

テーマ

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

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

アップデート方法:

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

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

983C966F-6B55-4011-8965-084AD2C3D5D1.png

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

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

1.メインバナー:

メインバナーはデスクトップでのみ表示され、モバイルアプリには表示されません。

仕様：

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

私たちのトップヒント:

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

1. 「テーマの編集 」ページ内からプレビューを表示します。 変更を加えるたびにテーマがどのように表示されるかを示します。

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

自分のスペースに移動して>スペースを編集>バナーをクリックし>アップロード>保存をクリックします。 画像内のテキストや人物はトリミングできるため、使用を最小限に抑えます

2.原色

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

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

3. セカンダリカラー

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

  • プロファイル・オプションを示すサイド・ナビゲーション・メニュー(メニューが開いている場合):

スクリーンショット 2024-07-03 at 15.27.25.png

  • アプリとドキュメント: 'おすすめ' ステータス チップとフォルダ アイコンの色:

Apps & Docs - Chip:フォルダアイコン Color.png

  • 特定の境界線 (Web 上のフィード上のイベント アバターの周りの境界線など):

スクリーンショット 2024-07-03 15.30.48.png

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

スクリーンショット 2024-07-03 15.32.38.png

 

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

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

スクリーンショット 2024-07-03（15.34.02.png）

 

5. 会社ロゴ

サイズ:最小幅400px ファイルタイプ:JPG、JPEG、PNG、BMP、SVG、WEBP。

A1325FE9-766E-4700-B584-98CA95E8F0B7.png

 

 

テーマの詳細については、テーマを参照してください。

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

個人プロフィールバナー

個人プロファイルバナーは、メインバナーと同じ推奨ファイル仕様ですべてのユーザーに設定できます。これらは、デスクトップとモバイルの両方でユーザーのプロファイルを表示している場合にのみ表示されることに注意してください。この記事で詳細をお読みください !

仕様：

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

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

スペースのバナーとアイコンをカスタマイズして 、 スペースを目立たせる 。

デスクトップでは、スペースアイコンが画面の左側に表示されます。モバイルでは、スペースのアイコンは各スペースのアクティビティフィードの最上部に表示されます。

スクリーンショット 2024-07-03 14.44.08.png

スクリーンショット 2024-07-03 15.15.40.png スクリーンショット 2024-07-03 15.17.39.png

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

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

スペースバナーの仕様:

  • 推奨サイズ: 2241px x 474px
  • 主要なテキスト/画像用のセーフスペース:中央揃えで1290px x 135px
  • このスペースバナーガイドの詳細とヒント
  • サポートされているファイルタイプ:PNG、JPG、JPEG、JFIF、またはGIF<3MB
  • 手記： スペース バナーの端がモバイル ビューで切り取られる

バリューアイコン&ヒーローステートメント

Workvivoであなたの会社の価値観を実現させよう ！従業員は投稿に会社の価値観をタグ付けできるので、目的意識や組織全体への帰属意識が高まる 。スクリーンショット 2024-07-03 15.31.34.png

仕様：

アイコン

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

ヒーロー画像&ビデオ

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

バッジアイコン

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

スクリーンショット 2024-06-05 at 1.44.07PM.png

仕様：

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

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

アプリとドキュメント ([リソース] タブからアクセス可能) は、組織内で日常的に使用されている主要なシステムとドキュメントへの窓口です。アプリにアイコンを追加することで、アプリを簡単に認識できるようにすることができます。画像が追加されていない場合、デフォルトは以下の例の黒いリンクアイコンになります。スクリーンショット 2024-06-04 at 3.57.03PM.png

仕様：

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

ドキュメントアイコン

仕様：

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

メガメニューアイコン

メガメニュー(ナビゲーションバーからアクセス可能)を使用すると、自分や同僚が関連するリソースを簡単に見つけることができます。重要なリンクやアプリを常に前面に表示させるには、関連するアイコンを追加します。

スクリーンショット 2024-07-03 09.45.29.png

仕様：

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

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

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

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

09.22.03.pngの 2024-07-03のスクリーンショット

仕様：

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

チームアイコン

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

スクリーンショット 2024-07-03（10.27.41.png）

仕様：

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

看板

ビルボードを使用すると、デスクトップユーザーとモバイルユーザーの両方で、アクティビティフィードの上部にコンテンツを強調表示して表示できる。

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

ポッドキャストカバー画像

Workvivoを通じて ポッドキャスト を他の人と共有できます!独自のポッドキャストを作成する場合は、そのポッドキャストのカバー画像を追加できます。カバー画像は、デスクトップユーザー向けのフィードの右側にあるポッドキャストウィジェットにも表示されます(有効になっている場合)。


スクリーンショット 2024-06-06 (11.53.09)AM.png

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

ギャラリー

Workvivoの ギャラリー 機能を使用して、デスクトップやモバイルで画像を保存、整理、同僚と共有できます 。

 

仕様：

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

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

グローバルページは、デスクトップのアクティビティフィードの右側にあるウィジェットで紹介できます。

2.15.33 PM.png の 2024-06-10 のスクリーンショット

仕様：

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

カスタマイズ可能な画像と推奨事項の概要

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

カスタマイズ可能な画像 サポートされているファイルの種類 推奨寸法
メインバナー GIF、PNG、JPG、JPEG、JFIF 2241px x 474px、アスペクト比2:1
パーソナルバナー GIF、PNG、JPG、JPEG、JFIF 2241px x 474px、アスペクト比2:1
スペースバナー GIF、PNG、JPG、JPEG、JFIF

2241px x 474px、アスペクト比2:1

セーフスペース:1290px x 135px
スペースアイコン GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
記事の画像 GIF、PNG、JPG、JPEG、JFIF 1000px x 500px、アスペクト比2:1
セーフスペース:620px x 540px
イベントイメージ GIF、PNG、JPG、JPEG、JFIF 500px x 330px、アスペクト比2:1
セーフスペース:500px x 255px
ポッドキャスト画像 GIF、PNG、JPG、JPEG、JFIF 300px x 300px、アスペクト比1:1
グローバルページの注目の画像 GIF、PNG、JPG、JPEG、JFIF 800px x 400px、アスペクト比2:1
値アイコン GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
ドキュメントアイコン GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
メガメニューアイコン GIF、PNG、JPG、JPEG、JFIF 24px x 24px、アスペクト比1:1
バッジアイコン GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
ビルボードイメージ GIF、PNG、JPG、JPEG、JFIF 600px x 300px、アスペクト比2:1

チームアイコン

GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
便利なリンクアイコン PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
ヒーローステートメント画像 GIF、PNG、JPG、JPEG、JFIF 600px x 300px、アスペクト比2:1
ヒーローステートメントビデオ MP4、ムーブ <5GBの
アバター画像 GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
バッジアイコン GIF、PNG、JPG、JPEG、JFIF 200px x 200px、アスペクト比1:1
調査カバー画像 GIF、PNG、JPG、JPEG、JFIF 600px x 300px、アスペクト比2:1 
アップデート/シャウトアウトの画像 GIF、PNG、JPG、JPEG、JFIF 1280px x 720px (理想的)
最新情報/シャウトアウトの動画 MP4、ムーブ 1280px x 720px、<5GB
カスタム絵文字 GIF、PNG、JPG、JPEG、JFIF >128KB、正方形、透明背景、1:1の比率
ファイルからGIFをアップロードする GIF画像 1280px x 720px(理想)、<5GB
ギャラリーの画像 GIF、PNG、JPG、JPEG、JFIF、MP4、MOV <5GBの
テンプレート内の画像 (記事 & ページ) GIF、PNG、JPG、JPEG、JFIF 2 枚のカード テンプレートのデッキ - 推奨サイズ: 640 × 275 px または 540 × 230 px、

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

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

その他の考慮事項:

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

関連記事