同様に、データ詳細ページでキャンバス機能を使用すると、詳細ページのデザインを柔軟にカスタマイズできます。この機能は、カスタムタブを含むすべてのタブで利用できます。

Zoho CRMのキャンバス機能の製品ページ もぜひご参照ください。

Zoho CRMの認定キャンバスデザイナー

自分自身でキャンバスを作成するのが難しい場合、 Zoho CRM認定のキャンバスデザイナー に、要件に応じたデザイン（テンプレート）の作成を依頼できます。詳細は、リンク先ページをご参照ください。

この機能は、チームタブでも利用できます。詳細については、「チームタブの利用」、「チームタブの設定」、「チームタブにおける自動化機能の利用」のヘルプ記事をご参照ください。

利用条件

必要な権限 

タブのカスタマイズ権限

各プランの機能と制限を確認する    

キャンバスを使用した詳細ページのカスタマイズで設定可能な項目

キャンバスを使用すると、データの一覧ページと同様に、データの詳細ページを柔軟にカスタマイズできます。詳細ページの編集画面では、次の項目を設定できます：

1. 要素： レイアウト内に表示する要素。セクション、タブ、表、テキスト、画像、アイコン、線、ボタンなど。
   
2. データ： レイアウト内に表示するデータやメニュー。項目、関連タブの項目、関連リスト、操作メニュー（編集、送信、次へなどのボタンやリンク）、キオスクなど。
   
3. スタイル： レイアウトの表示要素に適用するスタイル。フォントの種類、フォントのサイズ、背景色、枠線、影、角丸め、余白（内側／外側）、背景画像など。スタイルは、キャンバス編集画面で対象の要素を選択して設定できます。設定できる内容は、選択した要素によって異なります。なお、適用したスタイルを設定集に登録して、後で再利用することもできます。
   
4. 再利用する要素 ：キャンバスを使用したデータ詳細ページの作成時に設定した要素やデータと、そのスタイル設定は、再利用する要素として保存しておくことができます。これにより、保存した要素を複数のタブで共通的に利用することが可能です。
   

メモ

キャンバスを使用した詳細ページには、関連タブ（ルックアップ項目によって関連付けられているタブ）の項目を5件まで追加できます。ただし、関連タブのテリトリー項目、画像アップロード項目、ファイルアップロード項目は、追加できません。ただし、キャンバスを使用した詳細ページで、関連タブのすべての項目を表示するための操作を行うと、これらの項目も表示されます。

データの詳細ページのカスタマイズ

要件に応じて、ギャラリーからデザインを選択して適用するか、独自のデザインを始めから作成するかを選択できます。

データの詳細ページをカスタマイズするには

1. ［設定］   → ［カスタマイズ］ → ［キャンバス］ の順にクリックします。 
   
2. 画面右上にある ［新しい詳細ページを作成する］ をクリックします。
   
3. 詳細ページの作成 画面で、一覧から対象の タブ と レイアウト を選択します。
   
4. ［作成する］ をクリックします。  
5. キャンバスの編集画面 で、左側のメニューから ［要素］ をクリックします。
   詳細は、 要素と設定可能な項目 をご参照ください。
6. セクション 、 タブ 、 表 、 テキスト、画像、アイコン、線、ボタン から必要な要素を、ドラッグ＆ドロップでキャンバスに追加します。
   
7. 必要に応じて、 スタイル を追加します。
   詳細は、 要素へのスタイルの適用 をご参照ください。
8. 上部のメニューでは、次の操作を実行できます：
   
1. 変更を元に戻す／やり直す
   
2. 保存前にプレビューする
   
3. 全画面で表示する
   
4. 名前を付ける
   

設定可能な項目の概要

要素

［要素］メニューから、次の要素をキャンバスに追加できます：

1. セクション： セクションとは、詳細ページに表示する項目をまとめるための枠（ブロック）です。
   
1. セクションには、項目や画像、メッセージを表示することが可能です。
   
2. 枠線をドラッグすると、セクションのサイズを変更できます。
   
3. アイコンをクリックすると、セクションを複製できます。
   
4. セクションを右クリックすると、項目の追加、要素の固定化／流動化、スタイルのコピー／貼り付け、セクションの削除などができます。
   
5. また、スタイル設定を追加することも可能です（スタイルについての詳細は、関連情報をご参照ください）。
   
   
   
   
2. タブ： タブを使用すると、項目と関連リストを複数の画面に分けて整理できます。表示内容が多い場合に、カテゴリーや手順ごとに内容を分割して各画面に配置し、簡単に切り替えながら表示することが可能です。たとえば、次の画像は、商品データの詳細ページに追加した、［関連情報］（Related Info）という名前のタブ要素の例です。タブ内には、さらに3つのタブ（メモ、添付ファイル、問い合わせ）が表示されています。［+］アイコンをクリックすると、項目または関連リストをタブとしてさらに追加できます。
     
   
   
   
1. 左側の設定画面では、タブ名を入力できます。
   
2. タブを削除するには、対象のタブにカーソルを合わせて、［×］アイコンをクリックします。
   
3. タブの外枠にカーソルを合わせ、両側矢印が表示されたら、枠をクリックしてドラッグ＆ドロップすることで位置を変更できます。
   
4. タブ内を右クリックすると、関連リストの変更、要素の固定化／流動化、関連リストのスタイルのコピー／貼り付け、タブのロックや削除ができます。 
   
   
   
   

要素の固定化／流動化

要素へのスタイルの適用

ページのスタイル設定

1. 背景
   
2. 余白
   
3. 高さ
   
4. 幅
   
5. 画面に合わせる
   
   
   
   

1. パレットまたは色の一覧から選択して、背景色を設定できます。16進数によるコードで色を設定することも可能です。
   
2. 背景画像を設定する場合は、画像のチェックボックスを選択し、［画像をアップロードする］をクリックします。表示された画面で、デバイスから画像をアップロードするか、事前にアップロードした画像から選択するか、画像のURLを入力することで、画像を背景として使用できます。
   
   
   
   
1. 画像のサイズ： サイズは3つの方法のいずれかで設定できます。
   
1. 同じ縦横比で調整する： 縦横比を維持したまま、ページに収まるように画像のサイズを調整します。
   
2. 元のサイズ： 画像は元のサイズで保存されます。
   
3. 全体に表示する： 縦横比に関係なく、画像をページの縦と横いっぱいに拡大します。
   
2. 画像の繰り返し： 背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像を繰り返して配置するように設定できます。同じ画像を複数回繰り返して使用することで、背景を完全に塗りつぶすことができます。繰り返しの種類は、次のいずれかから選択できます：
   
1. 横： 画像は横方向に繰り返し表示されます。
   
2. 縦： 画像は縦方向に繰り返し表示されます。
   
3. 両方 画像はページの横方向と縦方向の両方に繰り返し表示されます。
   
4. 繰り返しなし： 画像は繰り返し表示されません。
   
3. ［グラデーション］ のチェックボックスを選択すると、背景の色にグラデーション（色の諧調）を設定できます。複数の色を選択して組み合わせたり、分岐点や方向や角度を調整したりすることが可能です。
   

1. 余白の調整： スライダーを右にドラッグすると、余白の幅を変更できます。余白の幅をピクセル単位で指定することも可能です。
   
2. すべての面の内側の余白を同じにする： このチェックボックスを選択すると、設定した余白を上下左右のすべての面の内側の余白に適用できます。チェックボックスの選択を解除すると、各面の内側の余白を個別に設定できます。
   

セクションのスタイル設定

1. 背景：ページの背景設定と同様です。
   
2. 枠線
   
3. 影
   
4. 角丸め
   
5. 余白：ページの余白設定と同様です。
   
6. 高さと幅：ページの高さと幅の設定と同様です。
   
7. 重なり順
   
   
   

1. 太さの変更： スライダーをドラッグすると、枠線の太さを変更できます。太さをピクセル値で入力することも可能です。
   
2. スタイル： 一覧から枠線のスタイルを選択できます。
   
3. 色： パレットから枠線の色を選択するか、色を16進コードで入力することも可能です。
   
4. すべての面の枠線を同じにする： チェックボックスを選択すると、設定した枠線をセクションの上下左右のすべての面の枠線に適用できます。チェックボックスの選択を解除すると、各面の枠線を個別に設定できます。
   
   

1. 横： 設定した値に基づいて、影が横方向（左右）に移動します。プラスの値にすると、影が要素の右側に表示されます。マイナスの値にすると、左側に表示されます。
   
2. 縦： 設定した値に基づいて、影が縦方向（上下）に移動します。プラスの値にすると、影が要素の上側に表示されます。マイナスの値にすると、下側に表示されます。
   
3. ぼかし： 影の鮮明度を設定できます。ぼかしの値を0にすると、影は鮮明になります。ぼかしの値を大きくすると、影は不鮮明になります。
   
4. ぼかし度： 影のサイズを変更できます。プラスの値にすると、影が大きくなります。マイナスの値にすると、影が小さくなります。
   
5. 色： 枠線の色を選択できます。
   
   

1. 半径の調整： スライダーをドラッグすると、半径を変更できます。半径をパーセント値で入力することも可能です。 
   
2. すべての角の半径を同じにする： このチェックボックスを選択すると、設定した丸め半径をすべての角に適用できます。チェックボックスの選択を解除すると、4つの角の半径を個別に設定できます。
   
   

1. 余白の調整： スライダーを左右にドラッグすると、余白の幅を変更できます。余白をピクセル単位で指定することも可能です。
   
2. すべての面の外側の余白を同じにする： このチェックボックスを選択すると、設定した余白を上下左右のすべての面の外側の余白に適用できます。チェックボックスの選択を解除すると、各面の外側の余白を個別に設定できます。
   

タブのスタイル設定

1. 状態
   
2. 背景
   
3. 枠線
   
4. 角丸め
   
5. 内側の余白
   
6. 外側の余白
   
7. アイコン
   

1. 有効： タブを選択したとき
   
2. カーソルを合わせた時： タブ名にカーソルを合わせたとき
   
3. 通常： タブが無効、またはカーソルを合わせていないとき
   

以上の設定は、タブ別に行うことも可能です。タブごとに個別のスタイルを設定するには、編集欄でタブを選択し、編集メニューで［専用のスタイル］の設定を有効にします。設定を有効にすると、該当のタブに対して、［通常］、［有効］（タブにアクセスしているとき）、［カーソルを合わせたとき］のそれぞれの場合に適用するスタイルを指定できます。

表、テキスト、アイコン、線のスタイル設定

1. 枠線
   
2. 影
   
3. 角丸め
   
4. 内側の余白
   
5. 重なり順
   

項目のラベルのスタイル設定

1. フォントの種類、フォントのサイズ、色、大文字／小文字、取り消し線の有無を変更したり、テキストの配置を左揃え／中央揃え／右揃えに設定したりすることが可能です。
   
2. 項目のラベルの配置は、上／下／左／右に設定できます。
   
3. また、背景色、角丸め、内側の余白、外側の余白の設定を変更できます。
   
4. 項目のラベルを右クリックすると、項目を変更する、ラベルを隠す、ラベルを左／上に移動する、要素を固定化／流動化する、スタイルをコピーする、項目を削除するなどの操作を実行できます。 
   
   
   

可変式ボックスのスタイル設定

可変式ボックスの項目の配置

可変式ボックス内の項目の配置箇所を指定できます。左上、中央上、右上、左、中央、右、左下、中央下、右下のいずれかを選択することが可能です。

可変式ボックスの項目の間隔

可変式ボックス内の項目の間隔を指定できます。縦の可変式ボックスの場合、行間の縦の間隔を指定可能です。横の可変式ボックスの場合、列間の横の間隔を指定できます。また、間隔を指定するにあたって、以下のいずれかを選択することが可能です。

1. 指定値：指定した余白の値に基づいて、要素内の各項目を表示します。
   
2. 均等（両端揃え）：最初と最後の項目を要素内の両端に配置し、各項目の間の余白が均等になるように表示します。
   
3. 均等（すべて均等）：要素内の各項目の間の余白がすべて均等になるように表示します。要素と項目の両端の間の余白も、項目間の余白と同じ幅になります。
   
4. 均等（両端が半分）：要素内の各項目に均等な余白をつけて表示します。要素と項目の両端の間の余白に対して、項目間の余白が広くなります。
   

可変式ボックスの要素に合わせた幅／高さ

項目を拡大して可変式ボックスの要素に合わせる代わりに、項目に合わせて可変式ボックスのサイズを調整することができます。以下のいずれかを選択することが可能です。

1. 可変の幅：可変式ボックス内の項目の幅に合わせてサイズを変更します
   
2. 可変の高さ：可変式ボックス内の項目の高さに合わせてサイズを変更します
   
3. 上記の両方をもとに可変式ボックスのサイズを調整することもできます。
   

子の可変式ボックスの項目

可変式ボックス内に可変式ボックスを追加することもできます。追加した可変式ボックスは、子の可変式ボックスとして扱われます。追加するには、可変式ボックスの要素を対象の可変式ボックス内にドラッグ＆ドロップします。必要に応じて、スタイルや各値を設定します。

・子の可変式ボックスを追加するにあたって、左、中央、右のいずれかに配置を指定できます。また、縦、横、その両方のいずれかに子の可変式ボックスを拡大することも可能です。

・子の可変式ボックスの最大幅／最小幅
子の可変式ボックスの最大幅／最小幅を自動で設定できます。また、表示内容を画面サイズに応じて切り替える際の基準となる幅（ブレイクポイント）を設定し、調整可能なサイズの上限／下限の値を指定することも可能です。

キャンバスルールによる条件付きスタイルの適用

キャンバスルールを作成するには

1. キャンバスの設計画面で、要素を選択します。
   
2. ［+］アイコンをクリックします。
   
   
   
3. ［キャンバスルールを作成する］をクリックします。
   
4. キャンバスルールの作成画面で、条件を指定します。
   
   
   
5. ［保存する］をクリックします。
   
6. キャンバスルールが作成されます。一覧から適用するルールにチェックを入れます。［適用する］をクリックします。
   
   
   
7. 対象の要素の［スタイル］タブに、キャンバスルール名のサブタブが新しく追加されます。キャンバスルールの条件が満たされると、こちらで設定した内容が要素に適用されます。
   
   
   

スタイルの設定集への登録

キャンバス内の要素を右クリックすると、スタイルを設定集に登録できます。

1. テキスト、ラベル、値
   
2. 項目
   
3. セクションとページ
   
4. タブ
   
5. 関連リスト
   
6. 表
7. ボタン

設定集からのスタイルの適用 

要素を追加する前に、プレビューすることも可能です。

キャンバスのデザイン（テンプレート）のエクスポート／インポート 

キャンバスのデザイン（テンプレート）のエクスポート

キャンバスのデザイン（テンプレート）をエクスポートするには

1. ［設定］→［カスタマイズ］→［キャンバス］の順に移動し、対象のキャンバスにカーソルを合わせて ［…］ アイコンをクリックします。
   
2. ［キャンバスをエクスポートする］を選択します。
   
3. キャンバスのテンプレートのエクスポート 画面で、 ［エクスポートする］ をクリックします。
   
4. 対象のキャンバス専用のキーが生成されます。［コピーする］をクリックしてキーをコピーし、［完了する］をクリックします。コピーしたキーを共有相手に伝えます。
   

キャンバスのデザイン（テンプレート）のインポート

Zoho CRMの他のユーザーから共有されたキャンバスのデザイン（テンプレート）をインポートできます。キーをもとにデザイン（テンプレート）をインポートした後、デザインを編集したり、キャンバスを組織内のユーザーに割り当てたりすることが可能です。

キャンバスのデザイン（テンプレート）をインポートするには

1. ［設定］→［カスタマイズ］→［キャンバス］ の順に移動し、 ［新しい詳細ページを作成する］ をクリックします。
   
   
2. 詳細ページの作成画面 でタブとレイアウトを選択し、 ［作成する］ をクリックします。 テンプレートの選択画面 で、画面左側のメニューから［空のテンプレートを作成する］の隣の［▽］アイコンをクリックし、 ［キャンバスのテンプレートをインポートする］ を選択します。キーの入力欄に共有されたキーを貼り付けて、 ［インポートする］ をクリックします。
   
   

その他のエクスポート／インポート方法

1. キャンバスの画面で、［新しい詳細ページを作成する］をクリックします。
   
2. タブとレイアウトを選択し、［作成する］をクリックします。テンプレートの選択画面で、画面左側のメニューから［空のテンプレートを作成する］をクリックするか、任意のテンプレートを選択します。キャンバスの設計画面で、画面左側のメニューから ［…］ アイコンをクリックします。
   
1. インポートする場合は、 ［キャンバスのテンプレートをインポートする］ を選択します。
   
   
2. エクスポートする場合は、 ［テンプレートをエクスポートする］ を選択します。 
   

キャンバスによる詳細ページを標準にする設定