キャンバスレイアウトデザイナーの理解

キャンバスレイアウトデザイナーの理解

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. このページの目的は何ですか?

あなたのデータの詳細な表示するレイアウトを、法人のニーズに合わせて設計するための、CreatorのCanvasレイアウトビルダーの利用方法を学びます。

2. 誰がこのページにアクセスできますか?

  1. このガイドは、Creator 5および6のユーザーを対象としています。あなたのCreatorバージョンを特定してください。
  2. CanvasはCreatorの両方の無料と有料のプランで利用可能であり、すべてのデータセンターで利用できます。
  3. Canvasを使用したカスタムレイアウトの設計は、スーパー管理者、管理者、開発者のみが行えます、一方で、他のユーザーは適切な権限が与えられた場合には、それらにアクセスし表示することができます。
  4. Canvasはウェブブラウザ専用にサポートされています。つまり、データ詳細のカスタムレイアウトをデザインし表示することができます。

3. レイアウトとは何ですか?

レイアウトとは、テキスト、画像、他のコンポーネントなどの視覚的要素がデザインコンポジション内に配置された構造的な配置を指します。あなたの組織は、使用するソフトウェアの初期設定のデザイン/テンプレートと一致しないデザイン規定を持っている可能性があります。レイアウトビルダーを使用すると、ページ上で必要な要素をどのように配置し整理するかを自由に決定し、見た目が良く、整理された、そしてユーザーフレンドリーなインターフェースを作成することができます。

3.1 CreatorのCanvasとは何ですか?

Creatorでは、レイアウトとは、レポートを視覚的に整理し、読みやすくするための構造を指します。レポートの詳細表示に利用可能ないくつかの事前定義されたレイアウトがあり、データが整理される方法をある程度カスタマイズする能力を提供します。この伝統的なデータ表示方法は、表形式でデータを表示する方法はある程度機能しますが、大量のデータの場合、必要な情報を即座に見つけることは時間がかかることがあります。また、既存のレイアウトを使用して完全に満たされない法人要件を持っている可能性もあります。

Canvasは、データの詳細表示の視覚的な側面をカスタマイズすることを可能にします。レポートのデータを、心の中で思い描いている通りに具体的に表示する機能を提供します。テンプレートギャラリーで利用可能な任意の既製テンプレートを選択し、それをニーズに合わせてカスタマイズする、または、レイアウトビルダーの助けを借りて、自分自身のカスタムレイアウトをゼロから作成することができます。必要な項目を各データに簡単にドラッグアンドドロップし、それらを別のセクションに配置し、それらのデザインとサイズを変更し、組織のニーズに最適にフィットするユニークな詳細表示レイアウトを作成することができます。

Info
選択する テンプレート の事前設計をテンプレートギャラリーから選ぶと、それは実際のアプリケーションデータと強調表示されたテキスト、例えば電話番号とメールアドレスで表示されます。これらはアプリケーションのテーマの色で表示されます
Canvasはまた、すべてまたは選択済みのデータに条件付き書式を適用することができます。これにより、定義された基準に基づいてレポートの特定のテキストを強調できます。これらの基準が満たされると、選択したテキストがカスタマイズされた形式でデータに表示され、特定のレポートまたはデータが他のデータから目立つように強調されます。

また、データコメント、ブループリントステージ、カスタム操作をCanvasレイアウトビルダーにドラッグアンドドロップして、色などのプロパティをカスタマイズできます。Canvasレイアウトビルダー内の自動整列機能は、カスタマイズを簡単にするのに役立ち、スタイルのコピー機能により、他のキャンバス上の要素に簡単にスタイルを適用できます。したがって、頻繁にデータの詳細表示は、動的かつ高度に文脈に関連するエクスペリエンスとなります。
Notes
メモ:
  1. いつでも事前に定義されたレイアウトに戻ることができます。これには、レポートカスタマイズ - webのレイアウトセクションでそれを選択します。
  2. 作成したカスタムレイアウトは、初期設定の詳細表示レイアウトと一緒に表示されます。
  3. レポートカスタマイズのタブでは、モバイルとタブレットのデバイスではカスタムレイアウトビルダーを利用できません。しかし、ウェブブラウザでデータ詳細表示のためのカスタムレイアウトを作成することはできます。

3.2 Canvasレイアウトビルダーを使用した利点

  1. 希望通りにデータをカスタマイズし、並べ替えることで、ユーザーに向上した表示設定を提供します
  2. プロフェッショナルな詳細表示レイアウトを美的に魅力的で視覚的に魅力的なレイアウトに変換します
  3. 関連するデータ要素とコンポーネントのみを含めます。これにより、ユーザーは一目で必要な情報にアクセスできます。
  4. 効果的な視覚的表現のためのさまざまなアイコンから選ぶと、詳細表示のレイアウトを完全に新しく見せます
  5. Data要素のタブにいるコンポーネントに適用されたスタイルをリサイクルします。方法を参照
  6. カスタムレイアウトを動的に調整し、ユーザーの全画面を占有します。方法を参照
  7. あなたのパーソナライズされたレイアウトをJSON形式でエクスポートし、あなたのアカウント内のアプリケーション間でインポートできます
Notes
特定の項目がカスタムレイアウトで表示されない場合は、それらの項目をデータの詳細表示で表示しないように選択しています。データの表示に権限を持つユーザーは、項目が追加されていないため、これらの項目を見ることができません。ただし、データの編集中にこれらの項目にアクセスしたり、必要な権限を持つユーザーに値を割り当てることができます。
Info
ヒント:データの詳細表示に必要なすべての項目のリストを事前に整理して、カスタムレイアウトをデザイン中に関連する項目を省略しないようにしてください。

4. キャンバス内のタブ

キャンバスレイアウトビルダーを使用して、データの詳細表示UIを以下のようにパーソナライズできます。
  1. Data
  2. 要素
  3. Style

以下は、ほぼすべてのタブで実行できる一般的な処理です。
  1. Dataタブの左上にある検索バーを使用して、関連するデータを検索します。
  2. 上部の元に戻すやり直すのアイコンをクリックして、それぞれの変更を反転させ、再適用します。
  3. ダウンロードアイコンをクリックして、レイアウトを.json形式でエクスポートします。
  4. 上部にある全画面アイコンをクリックすると、レイアウトビルダーが全画面で表示されます。
  5. 上部に提供されたスペースにレイアウトの名前を割り当てます。
  6. レイアウトに行った変更を保存するためには、保存ボタンをクリックします。変更は自動的に保存されません。

4.1 データ

このタブは、データ内のデータを視覚化し、並べ替えることができます。次の操作を実行できます。詳細はこちらをクリックしてください。
Notes
メモ: '+' や '-'のアイコンをクリックすることで、Dataタブ内の各セクションを展開または折りたたむことができます。
  1. 項目: 項目(両方ともフォーム項目システム項目)をレイアウトビルダーにドラッグ&ドロップします。
  2. カスタム処理: 既にレポートで設定済みの場合は、必要なカスタム処理のタイルをドラッグ&ドロップします。それ以外の場合は、新しく追加する操作をクリックして設定します。
  3. カスタム機能:
    1. コメント: データコメントのタイルをビルダーにドラッグ&ドロップします。ビルダーは、列の枠にカーソルを置くとリサイズアイコンが表示されるので、これをドラッグ&ドロップするだけで列の幅を簡単に設定できます。
    2. Blueprints: ブループリントのタイルをビルダーにドラッグ&ドロップします。現在のステージが表示されます。
  4. 関連ブロック:
    1. 差出人に関連するブロック: 既存のサブフォームやルックアップ項目(データを参照する)をビルダーにドラッグ&ドロップできます。
    2. 関連ブロックへ: 選択したフォームからデータを参照するルックアップ項目は、他のフォームにリストアップされます。

4.2 要素

Info
こちらを参照して、カスタムレイアウトに要素を追加する方法を確認してください。
このタブには、特定のデータに関連するデータ表現のためのさまざまな要素が含まれています。これには以下のものがあります:
  1. セクション: セクション要素を使用すると、スタンドアロンのセクションを作成し、関連する内容(項目、データコメント、ブループリントなど)をグループ化できます。
  2. タブ: データを分割して切り替え可能なタブに整理できます。これにより、ユーザーに対してよく構造化された表示を提供できます。例えば、下の画像では、「商品管理」という名前のタブが「Workitem」タブの中に配置され、その中に「Design」、「Development」、「Testing」の3つのタブが配置されています。すべてこれらはセクション内にあります。
  3. テーブル: この機能を使用すると、データ値を表形式で表示し、詳細表示でスペースを節約し、データを行と列の構造化されたテーブルで表示することができます。例えば、下の画像では、商品名、説明、商品IDが行と列として表示されるフォーム項目です。
  4. テキスト: テキストボックス要素を挿入して、詳細表示内に必要な内容を入力できます。例えば、セクションを開始する前に見出しを表示したり、メモや免責事項を追加したりするためにテキスト要素を使用できます。
  5. アイコン: アイコン要素は、セクション、タブ、テーブルなど内部のテキストラベルではなく項目を表現するために使用できます。例えば、下の画像では、商品名と価格がテキストではなくアイコンを使用して表示されています。
  6. 折れ線グラフ: 折れ線グラフ要素は、コンテンツを分割したり、コンテンツの変化を示すための水平な折れ線グラフを挿入するために使用できます。基本的に、これはコンテンツ間のテーマフレークを表示するために使用されます。たとえば、レイアウト内の2つのセクションの間に折れ線グラフ要素を挿入することができます。

4。2。1 固定および流動性のあるコンポーネント

各要素(セクション、タブ、テキスト、テーブル)には、それを固定または流動的なコンポーネントとして設定するオプションがあります。固定コンポーネントオプションを選択すると、要素のサイズはユーザーの画面に合わせて変更されません。逆に、流動コンポーネントを選択すると、要素がユーザーの画面サイズに応じて自身のサイズを調整します。
たとえば、セクションに挿入した背景画像が特定の画面サイズを超えて表示される可能性があると思われる場合、画像がユーザーの画面に応じてサイズを調整するように流動的なコンポーネントとして設定することをお勧めします。

4。3 スタイル

Info
レイアウトの作成者に要素を追加する方法については、こちらのセクションを参照してください。
このセクションの設定では、フォント、フォントサイズ、背景色、境界線、影、半径、余白、背景画像を変更し、そして設定を適用する要素を布局ビルダーで選択することができます。
Info
選択した要素により、スタイル設定が異なる場合があります。

5. 使い方の確認


6. 使用例

  1. 従業員管理: Creatorを使用して従業員管理のアプリケーションを作成したとします。従業員データの詳細表示では、基本情報、連絡先情報、身内の詳細、請求詳細とともに、緊急連絡先情報が突出して表示されることを望んでいます。ここでCanvasが活躍します。このカスタムレイアウトビルダーを使用すれば、これらを全て実現することができます。たとえば、データにアクセスした瞬間に、カスタム化された突出表示が見られれば、より詳細を見ることなく、誰に緊急な連絡を取ればいいかがすぐにわかります。
  1. 教育管理: Creatorを使用して教育管理のアプリケーションを作成したとします。生徒や教職員のデータの詳細表示では、権限とコースの詳細が包括的に表示されることを望んでいます。Canvasのレイアウトビルダーを使用すれば、データの詳細表示をデザインし、あなたのアイデアを現実のものにすることができます。

  2. 不動産管理: Creatorを使用して不動産管理のアプリケーションを作成したとします。レンタル物件の詳細が鮮やかに表示され、ユーザーが理想の家を絞り込むのを助けることが必要です。また、購入希望者がレンタル情報を見たときに全ての情報に圧倒されてしまわないことも確認しなければなりません。Canvasを使用すれば、賃貸物件の詳細が一目でわかるような、整然とした魅力的なレイアウトを設計するのに役立ちます。
Info
これらの使用するケースに加えて、他の要件に遭遇するかもしれません。Canvasを使用すると、さまざまなデータコンポーネントや要素のスタイルと表示設定を制御でき、それぞれが広範な文脈とシナリオに対応して、非常に豊かで意味のあるダイナミックなユーザーエクスペリエンスを実現します。

7. Canvasへのアクセスガイド

アプリケーションの編集 方法で:
  1. カスタマイズしたい詳細表示が必要なレポートのDesignタブに移動します。
  2. 詳細 表示する タブを選択し、カスタム Layout カードの下にある新規 Layoutの開始をクリックします。するとCanvasビルダーのインターフェースが表示されます。

8. 忘れてはならない重要なポイント

  1. アプリケーションのテスト環境 を作成は、同じアプリケーション内にキャンバスレイアウトが存在する場合は可能ではありません。テスト環境作成についての詳細はこちらを参照してください。
  2. アプリケーションのデータに対してカスタムレイアウトを初期設定の詳細表示に設定するオプションがあります。設定方法
  3. カスタムレイアウトを.json形式でエクスポートすることが可能です。エクスポート方法
  4. 矢印キーを使用して、レイアウトビルダー内のすべての要素を移動することができます。
  5. Canvasビルダー内で選択した項目値の配置を、Styleタブの左パネルの配置設定を使用して設定できます。

9. 制限事項

  1. Canvasレイアウトビルダーは、表計算シートタイプの申請には適用できません。
  2. 現時点では、Canvasを使用してカスタムレイアウトを作成すると、変更内容は自動保存されません。必要な変更を行った後で保存をクリックする必要があります。

関連トピックス

  1. 詳細表示レイアウトを理解する
  2. Canvasを使用してカスタムレイアウトを作成する
  3. カスタムレイアウトを管理する

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

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

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

    Zoho CRM Training



            Zoho Campaigns Resources

              Zoho WorkDrive Resources




                • Desk Community Learning Series


                • Digest


                • Functions


                • Meetups


                • Kbase


                • Resources


                • Glossary


                • Desk Marketplace


                • MVP Corner


                • Word of the Day


                • Ask the Experts









                                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.