ダッシュボードのスタイル設定
テキスト、コンテナ、ディバイダーなどの表示コンポーネントを使用して、ダッシュボードの視覚的な外観をカスタマイズします。
コンテナ、ディバイダー、パディング
コンテナを使用して、関連するチャートをグループ化します。 ディバイダーとパディングを使用して、コンポーネントを区切ります。
コンテナを追加
ダッシュボードでコンテナを追加およびカスタマイズするには、次の手順を実行します:
コンポーネントパネルからコンテナをダッシュボードキャンバスにドラッグアンドドロップします。
コンテナの端をクリックしてドラッグし、サイズを変更します。
コンテナーをカスタマイズ
必要に応じて、ダッシュボードキャンバスにコンテナを追加します。
ディバイダーを追加
ダッシュボードで区切り線を追加およびカスタマイズするには、次の手順を実行します:
コンポーネントパネルから区切り線をダッシュボードにドラッグアンドドロップします。
区切り線を追加してカスタマイズ
コンポーネントプロパティパネルを使用して、区切り線の色をカスタマイズします。
パディングをカスタマイズ
チャートコンポーネントとコンテナコンポーネントのパディングをカスタマイズできます。
ダッシュボードのパディングをカスタマイズするには、次の手順を実行します:
ダッシュボードキャンバスでコンテナを選択します。
プロパティパネルを使用してパディングを変更します。 使用可能なオプションは大、中、小、なしです。
パディングをカスタマイズ
テキスト
テキストを使用して、ダッシュボードにコンテキストまたは手順を追加します。 テキストコンポーネントは、特定のMarkdown構文をサポートしています。
テキストのカスタマイズ
ダッシュボードでテキストを追加およびカスタマイズするには、次の手順を実行します:
コンポーネントパネルからテキストコンポーネントをダッシュボードにドラッグアンドドロップします。
プロパティパネルにテキストを入力します。 テキストコンポーネントは、特定のMarkdown構文をサポートしています。
サポートされているMarkdown構文
| Markdown要素 | Markdown構文 | 説明 |
|---|---|---|
| H1 | # | ダッシュボードタイトルなどの構造化された階層には、H1見出しを使用します。 |
| H2 | ## | コンテナタイトルなどの構造化された階層には、H2見出しを使用します。 |
| 太字 | **bold text** | 重要な情報を強調するには、太字テキストを使用します。 |
| 斜体 | *italic text* or _italic text_ | 重要な情報を強調するには、斜体テキストを使用します。 |
| ハイパーリンク | [link text](https://www.example.com) | 外部リソースまたは関連コンテンツへのリンクを追加するには、ハイパーリンクを使用します。 |
| 番号付きリスト | 1. First item1. Second item1. Third item | 連続する情報を番号付き手順にグループ化するには、順序付きリストを使用します。 |
| 箇条書きリスト | - First item- Second item- Third item | 関連情報を箇条書きリストにグループ化するには、順不同リストを使用します。 |
テキストを追加してカスタマイズ
テキストの配置をカスタマイズします。 使用可能なオプションは左、中央、右です。
事前定義されたオプションの範囲から選択して、テキストの色をカスタマイズします。
色
コンテナ、テキスト、チャートの色をカスタマイズして、読みやすさと視覚的な一貫性を向上させます。
色をカスタマイズ
ダッシュボードで色をカスタマイズするには、次の手順を実行します:
ダッシュボードでコンテナコンポーネントを選択します。
プロパティパネルから事前定義済みのオプションを選択して、コンテナの背景色と境界線の色をカスタマイズします。
コンテナーの色をカスタマイズ
ダッシュボードデザインのベストプラクティス
機能的で読みやすいダッシュボードをデザインするには、次のベストプラクティスに従ってください:
- ダッシュボードには意味のあるタイトル、見出し、チャートラベルを付け、閲覧者が見ているデータをすぐに理解できるようにします。 たとえば、メトリックにはデフォルトの
Count of Rowsではなく、Number of jobsというラベルを付けます。 - 色を使用して意味を伝え、ダッシュボードを直感的にします。 たとえば、成功したジョブには緑、失敗には赤を使用します。
- 関連するチャートをコンテナでグループ化し、ディバイダーとパディングを使用してコンポーネントを区切り、視覚的な煩雑さを減らします。 たとえば、概要レベルのジョブとレシピのメトリックを1つのコンテナに、利用状況データを別のコンテナにグループ化します。
- 閲覧者が特定のプロジェクト、レシピ、または日付範囲に集中できるように、ダッシュボードまたはコンテナレベルでフィルターを適用します。
Last updated: