キャンバスを使用したデータ詳細ページのカスタマイズ

キャンバスを使用したデータ詳細ページのカスタマイズ

Zoho CRMのデータ一覧ページ(ビュー)のキャンバス表示では、データ一覧のデザインを柔軟にカスタマイズできます(例:画像の追加、項目の自由な配置、背景色の設定、テキストの色/太さ/フォントの種類などの書式設定)。  
同様に、データ詳細ページでキャンバス機能を使用すると、詳細ページのデザインを柔軟にカスタマイズできます。この機能は、カスタムタブを含むすべてのタブで利用できます。


Zoho CRMのキャンバス機能の目的とメリットについての動画もぜひご参照ください。

Zoho CRMの認定キャンバスデザイナー
自分自身でキャンバスを作成するのが難しい場合、Zoho CRM認定のキャンバスデザイナーに、要件に応じたデザイン(テンプレート)の作成を依頼できます。詳細は、リンク先ページをご参照ください。
利用条件
必要な権限 
タブのカスタマイズ権限

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

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

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

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

データの詳細ページをカスタマイズするには
  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. また、画像や背景色などのスタイルを適用することも可能です。
        
  1. 表: 表を使用すると、データを表形式で表示できます。たとえば、次の画像は、商品名、説明、保管場所といった情報を表形式で表示した例です。表を使用することで、限られたスペースで必要なデータを簡潔に表示することが可能です。
    1. 行や列にカーソルを合わせて、[+]または[-]アイコンをクリックすると、行や列を追加または削除できます。



    2. 行を右クリックすると、項目の変更、要素の固定化/流動化、スタイルのコピーや貼り付け、項目の削除などが可能です。



    3. 枠線をドラッグすると、表のサイズを変更できます。
  2. テキスト:詳細ページに、任意のテキストを追加して表示できます。セクションの見出し、メモや注意事項などを表示できます。
    1. 枠線をドラッグすると、テキストの表示欄のサイズを変更できます。
    2. テキストの表示欄を右クリックすると、複製、固定化/流動化、削除などが可能です。



  3. 画像: 詳細ページに、画像を追加できます。たとえば、連絡先の詳細ページに、画像の要素を追加して、各連絡先のプロフィール写真として設定できます。
    1. 画像の要素を選択して、キャンバスにドラッグして配置します。



    2. 画像の要素をクリックすると、アップロード画面が表示されます。



      デバイス内の画像ファイルを参照してアップロードするか、事前にアップロードした画像データから選択するか、インターネット上に公開されている画像のURLを入力することで、画像を追加できます。
    3. 追加後、画像のサイズ変更や、枠線、影、角丸め、内側の余白などのスタイル調整が可能です。

  4. アイコン: 通常のテキストによるラベルではなく、アイコンを使用して項目を表すことができます。たとえば、次の画像は商品名と価格をテキストではなくアイコンで表示した例です。
      


    1. アイコンの種類は、アイコンの要素をキャンバスにドラッグして追加した後、一覧から選択できます。
    2. アイコンを右クリックすると、種類の変更や、アイコンの複製/削除ができます。
    3. 枠線をドラッグすると、サイズを拡大/縮小できます。



要素の固定化/流動化

セクション、タブ、表、テキストなどの要素は、固定または流動化できます。要素を固定化すると、要素のサイズは固定され、画面サイズに応じて変更されません。一方、要素を流動化すると、画面サイズに応じて要素のサイズが変更されます。
たとえば、セクションに挿入された背景画像が画面サイズを超えてしまう場合、要素を流動化することで、ユーザーの画面に応じて要素のサイズが自動で調整されます。

要素へのスタイルの適用

背景色、枠線、内側の余白、外側の余白、項目ラベルの配置などのスタイルは、すべての要素に適用できます。また、スタイルを適用して、ページの背景をカスタマイズすることも可能です。特定の要素にのみ適用可能なスタイルもあります。なお、スタイルを設定集に登録して、別の要素に再利用することも可能です。

スタイルの適用方法については、次の動画もご参照ください。

 

ページのスタイル設定

スタイルの設定項目:
  1. 背景
  2. 余白
  3. 高さ

  4. 画面に合わせる



背景 
  1. パレットまたは色の一覧から選択して、背景色を設定できます。16進数によるコードで色を設定することも可能です。
  2. 背景画像を設定する場合は、画像のチェックボックスを選択し、[画像をアップロードする]をクリックします。表示された画面で、デバイスから画像をアップロードするか、事前にアップロードした画像から選択するか、画像のURLを入力することで、画像を背景として使用できます。



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

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

高さと幅
ページの高さと幅をピクセル単位で入力して調整するか、自動的に調整されるように設定できます。


画面に合わせる
画面の高さと幅に応じて、ページのサイズが自動的に調整されます。

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

セクションについては、次の項目をカスタマイズできます:
  1. 背景:ページの背景設定と同様です。
  2. 枠線

  3. 角丸め
  4. 余白:ページの余白設定と同様です。
  5. 高さと幅:ページの高さと幅の設定と同様です。
  6. 重なり順



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


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

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

外側の余白
要素の外側の余白の幅を変更できます。これにより、詳細ページ内における要素の位置を調整できます。余白の幅を追加するには、要素を選択して[外側の余白]のチェックボックスをクリックします。 
  1. 余白の調整:スライダーを左右にドラッグすると、余白の幅を変更できます。余白をピクセル単位で指定することも可能です。
  2. すべての面の外側の余白を同じにする:このチェックボックスを選択すると、設定した余白を上下左右のすべての面の外側の余白に適用できます。チェックボックスの選択を解除すると、各面の外側の余白を個別に設定できます。

タブのスタイル設定

タブのスタイル設定では、次の項目を設定できます(背景、枠線、角丸め、内側の余白、外側の余白については、上記と同様です):
  1. 状態
  2. 背景
  3. 枠線
  4. 角丸め
  5. 内側の余白
  6. 外側の余白
  7. アイコン




状態
タブの状態や利用状況を区別できるようにカスタマイズすることが可能です。たとえば、あるタブが有効な状態の場合(該当のタブを選択した場合)に、背景色、余白、背景画像を変更できます。また、カーソルを合わせた場合に、枠線を青色に設定して区別することが可能です。状態には、次の3種類があります:
  1. 有効:タブを選択したとき
  2. カーソルを合わせた時:タブ名にカーソルを合わせたとき
  3. 通常:タブが無効、またはカーソルを合わせていないとき
各状態に対して、スタイル(フォントの種類、フォントのサイズ、色、大文字/小文字、取り消し線の有無、テキストの配置)を設定できます。
また、タブをクリックし、編集画面の[有効]状態の下部にあるテキスト欄にタブ名を入力することで、タブに名前を付けることが可能です。 



メモ
  1. タブに追加した関連リスト名は、変更できません。
  2. [+]アイコンをクリックすると、タブをさらに追加できます。
  3. タブを右クリックすると、項目の挿入、タブの固定化/流動化、タブの削除ができます。
  4. 各タブ名にカーソルを合わせると左側に表示される三本の横線()にカーソルを合わせ、両側矢印が表示されたら、タブを左右にドラッグすることで、表示位置を移動できます。

アイコン
タブにアイコンを表示できます。タブ名を右クリックし、メニューから[アイコンを表示する]をクリックすると、アイコンの選択画面が表示されます。 



アイコンの追加後に右クリックして、メニューから[アイコンを隠す]、[アイコンを変更する]、[テキストを隠す](タブ名を隠す)などを実行することも可能です。



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

表、テキスト、アイコン、線のスタイル設定では、次の項目を設定できます:
  1. 枠線

  2. 角丸め
  3. 内側の余白
  4. 重なり順
また、テキスト、アイコン、線については、それぞれ次の項目も設定できます:

テキスト:
フォントの種類、フォントのサイズ、色、大文字/小文字、取り消し線の有無を変更したり、テキストの配置を左揃え/中央揃え/右揃えに設定したりすることが可能です。

アイコン:
アイコンの色、背景色、背景画像、枠線、影、角丸め、余白、重なり順をカスタマイズできます。



線:線の方向を水平または垂直に設定したり、太さ、スタイル、色を調整したりできます。



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

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



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

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



登録したスタイルを再利用することで、キャンバス内の各要素のスタイルを簡単に統一できます。
 
設定集に登録できるスタイルは、次のとおりです:
  1. テキスト、ラベル、値
  2. 項目
  3. セクションとページ
  4. タブ
  5. 関連リスト
  6. ボタン
メモ: 
  1. 設定集には、スタイルを25件まで追加できます。

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

スタイルを設定集に登録しておくことで、適用したいスタイルを最初から設定しなくてもすぐに適用できます。適用するスタイルは、[設定集]→[個別指定]タブから選択できます。



 なお、[ギャラリー]タブから、あらかじめ用意されている標準(初期設定)のスタイルを選択することも可能です。




再利用する要素の管理 

キャンバス機能を通じて作成したページのデザイン(テンプレート)は、フォントの種類、サイズ、色などの[スタイル]、セクション、タブ、テキストなどの[要素]、項目の値を表す[データ]などで構成されています。キャンバスで作成したこれらの要素は、再利用する要素として保存できます。保存した要素は、キャンバスで新しいデザインを作成するときに、ドラッグ&ドロップするだけで簡単に再利用できます。そのため、最初から作成する手間を節約できます。
 
要素を追加する前に、プレビューすることも可能です。



たとえば次の画像は、再利用する要素としてセクションを保存した例です。次の画像のように、作成したメッセージを複数の場所で使用するような場合、メッセージが記載されたセクションを再利用する要素として保存すると便利です。これにより、最初から作成する手間を省き、メッセージの内容だけでなく、背景やフォントなどのスタイルも他の場所で再利用できます。



また、ギャラリーからあらかじめ用意されている要素を選択して、すぐに利用することも可能です。



メモ: 
  1. 再利用する要素は、25件まで保存できます。
  2. あるキャンバスで使用した要素は、別のタブのキャンバスでも再利用できます。たとえば、見込み客タブのキャンバスに[姓]の項目を追加し、そのキャンバスを連絡先タブでも再利用する場合、[姓]の項目はそのまま再利用できます。完全に同じ項目名ではなくても、類似の項目がある場合はその項目を再利用できます。たとえば、見込み客タブのキャンバスで[見込み客の担当者]の項目を追加していた場合、商談タブでそのキャンバスを再利用すると、[商談の担当者]の項目が表示されます。



  3. 再利用するタブで一致する項目や類似の項目が見つからない場合は、[N/A](値なし)と表示されます。その場合、該当の項目を右クリックすると、項目を変更できます。



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

作成したキャンバスを、どのユーザーに対して標準で表示するかは、権限を通じて設定できます。キャンバスが有効な権限が割り当てられているユーザーには、キャンバスの詳細ページだけが表示されます。 

キャンバスによる詳細ページを標準にする方法 
  1. [設定][カスタマイズ][キャンバス]をクリックします。
  2. [キャンバス][キャンバスを割り当てる]をクリックします。
  3. 一覧からタブとレイアウトを選択し、キャンバスを割り当てます。
  4. それぞれの権限に対するキャンバスを選択します。
  5. [保存する]をクリックします。
      
メモ
データの一覧画面(ビュー)で、対象のキャンバスにカーソルを合わせ、[…](その他)アイコンをクリックすると、キャンバスの編集、複製、名前の変更、プレビュー、削除が可能です。 
キャンバスのデザイン(テンプレート)の作成を依頼したい場合は、 Zoho CRM認定キャンバスデザイナーのページをご参照ください。


    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training










                          Resources

                          Videos

                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                          eBooks

                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                          Webinars

                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                          CRM Tips

                          Make the most of Zoho CRM with these useful tips.