mitocoのデザインを自社のテーマに変更する方法
「自社のロゴが入ったTシャツを着ると士気が高まる」ということありますよね？
mitoco（Salesforce）では、「自社のロゴ」を表示したり「背景画像を変更する」等のカスタマイズができます。今回はmitocoを自社のテーマに変更する方法について説明します。
画像の変更できる場所について
次の場所でカスタマイズが可能です。３番目のカラーは画像の指定ではなく背景カラーを指定します。
ブランド画像
ページ背景画像
ページ背景カラー
デフォルトのユーザプロファイルアバター
デフォルトのユーザプロファイルバナー
デフォルトのグループアバター
デフォルトのグループバナー
利用できる画像のサイズについて
ロゴや背景を設定するにあたっては画像の用意が必要になります。利用可能なサイズやファイル形式についてお伝えします。アップロードを行う画像のサイズが合わない場合は、「写真の更新ダイアログ」が表示されリサイズできます。よって厳密にこのサイズの画像を用意しなくても問題ありません。
キャプチャ番号 | 項目名 | ピクセル数 |
1 | ブランド画像 | 600x120ピクセル |
2 | ページ背景画像 | 1800 x 360 ピクセル |
3 | ページの背景 | - |
4 | デフォルトのユーザプロファイルアバター | 200 x 200 ピクセル |
5 | デフォルトのユーザプロファイルバナー | 1800 x 360 ピクセル |
6 | デフォルトのグループアバター | 200 x 200 ピクセル |
7 | デフォルトのグループバナー | 1800 x 360 ピクセル |
ファイル形式
PNG、JPEG、GIFなどの一般的な画像フォーマットが利用できます。
ファイルサイズ
5MB未満の画像が利用できます。
mitocoの「テーマおよびブランド設定」を表示する
画像が用意できたらさっそく設定してみましょう。以下の手順で設定画面を表示します。
画面右上の設定アイコン（ギアマーク）→ 設定
左上の「クイック検索」に「ブランド」と入力
「テーマおよびブランド設定」をクリックして表示
表示された画面の右上の「新規テーマ」をクリック
「テーマおよびブランド設定」の項目を入力する
画面が表示されると、テーマを変更するための項目が表示されます。設定できる箇所は次のとおりです。
キャプチャ番号 | 項目名 | 説明 |
1 | ブランド画像 | 画面の左上に表示される画像です。会社のロゴはここに設定します。 |
2 | ページ背景画像 | ページの背景画像です。 |
3 | ページの背景 | 画面のページの背景カラーを設定します。この後に説明する「ページ背景画像」と合わせた色を選択すると統一感が出せます |
4 | デフォルトのユーザプロファイルアバター | ユーザープロファイルにアバターが設定されていない場合のデフォルトアバターの画像です。 |
5 | デフォルトのユーザプロファイルバナー | ユーザープロファイルのバナーに利用される画像です。 |
6 | デフォルトのグループアバター | グループにアバターが設定されていない場合のデフォルトアバターの画像です。 |
7 | デフォルトのグループバナー | グループのバナーに使われる画像です。 |
ブランドの色 | ナビゲーションバーの色や、選択中の色として使用されます | |
アクセシビリティの上書き | デフォルトではアクセシビリティに対応した「ブランド色」が使用されますが、「リンク」や「ボタン」などを独自の色に変更する場合には、チェックをつけ、カラーを設定します | |
Lightning Experience 読み込み中ページでブランド画像を使用 | 画面の読み込み中にブランド画像を利用するかどうかを設定します | |
グローバルヘッダーの背景 | 画面のヘッダーのカラーを設定します。基本的には「ブランド画像」とマッチする色を選択すると統一感が出せます | |
リンクの色 | チェックを入れると、UI上のリンクテキストなどに「ブランド色」が設定されます。あまりオンにすることはないかもしれません |
「テーマおよびブランド設定」を設定する時のポイント
「テーマ及びブランド設定」にはさまざまな設定項目がありますので、デフォルトのテーマから変更するときには、「プレビュー」機能を利用して少しずつ設定を変更することをオススメします。
プレビュー機能を利用してじっくりデザインを確認したのち、「有効化ボタン」を押して組織に反映すると良いでしょう。
自社のブランディングが設定された組織のイメージ
組織全体のイメージ
ユーザプロファイルにテーマを設定した例
以上で「テーマおよびブランド設定」設定は終わりました。
一覧に戻る