ダッシュボードのスタイル設定

このページは機械翻訳により提供されています。翻訳内容と英語版に相違がある場合は、英語版が優先されます。

テキスト、コンテナ、ディバイダーなどの表示コンポーネントを使用して、ダッシュボードの視覚的な外観をカスタマイズします。

コンテナ、ディバイダー、パディング

コンテナを使用して、関連するチャートをグループ化します。 ディバイダーとパディングを使用して、コンポーネントを区切ります。

コンテナを追加

ダッシュボードでコンテナを追加およびカスタマイズするには、次の手順を実行します:

1

コンポーネントパネルからコンテナをダッシュボードキャンバスにドラッグアンドドロップします。

2

コンテナの端をクリックしてドラッグし、サイズを変更します。

コンテナーをカスタマイズコンテナーをカスタマイズ

3

必要に応じて、ダッシュボードキャンバスにコンテナを追加します。

ディバイダーを追加

ダッシュボードで区切り線を追加およびカスタマイズするには、次の手順を実行します:

1

コンポーネントパネルから区切り線をダッシュボードにドラッグアンドドロップします。

区切り線を追加区切り線を追加してカスタマイズ

2

コンポーネントプロパティパネルを使用して、区切り線の色をカスタマイズします。

パディングをカスタマイズ

チャートコンポーネントとコンテナコンポーネントのパディングをカスタマイズできます。

ダッシュボードのパディングをカスタマイズするには、次の手順を実行します:

1

ダッシュボードキャンバスでコンテナを選択します。

2

プロパティパネルを使用してパディングを変更します。 使用可能なオプションはなしです。

パディングをカスタマイズパディングをカスタマイズ

テキスト

テキストを使用して、ダッシュボードにコンテキストまたは手順を追加します。 テキストコンポーネントは、特定のMarkdown構文をサポートしています。

テキストのカスタマイズ

ダッシュボードでテキストを追加およびカスタマイズするには、次の手順を実行します:

1

コンポーネントパネルからテキストコンポーネントをダッシュボードにドラッグアンドドロップします。

2

プロパティパネルにテキストを入力します。 テキストコンポーネントは、特定のMarkdown構文をサポートしています。

サポートされているMarkdown構文
Markdown要素Markdown構文説明
H1#ダッシュボードタイトルなどの構造化された階層には、H1見出しを使用します。
H2##コンテナタイトルなどの構造化された階層には、H2見出しを使用します。
太字**bold text**重要な情報を強調するには、太字テキストを使用します。
斜体*italic text* or _italic text_重要な情報を強調するには、斜体テキストを使用します。
ハイパーリンク[link text](https://www.example.com)外部リソースまたは関連コンテンツへのリンクを追加するには、ハイパーリンクを使用します。
番号付きリスト1. First item
1. Second item
1. Third item
連続する情報を番号付き手順にグループ化するには、順序付きリストを使用します。
箇条書きリスト- First item
- Second item
- Third item
関連情報を箇条書きリストにグループ化するには、順不同リストを使用します。

テキストコンポーネントを追加テキストを追加してカスタマイズ

3

テキストの配置をカスタマイズします。 使用可能なオプションは中央です。

4

事前定義されたオプションの範囲から選択して、テキストの色をカスタマイズします。

コンテナ、テキスト、チャートの色をカスタマイズして、読みやすさと視覚的な一貫性を向上させます。

色をカスタマイズ

ダッシュボードで色をカスタマイズするには、次の手順を実行します:

1

ダッシュボードでコンテナコンポーネントを選択します。

2

プロパティパネルから事前定義済みのオプションを選択して、コンテナの背景色と境界線の色をカスタマイズします。

コンテナーの色をカスタマイズコンテナーの色をカスタマイズ

ダッシュボードデザインのベストプラクティス

機能的で読みやすいダッシュボードをデザインするには、次のベストプラクティスに従ってください:

  • ダッシュボードには意味のあるタイトル、見出し、チャートラベルを付け、閲覧者が見ているデータをすぐに理解できるようにします。 たとえば、メトリックにはデフォルトのCount of Rowsではなく、Number of jobsというラベルを付けます。
  • 色を使用して意味を伝え、ダッシュボードを直感的にします。 たとえば、成功したジョブには緑、失敗には赤を使用します。
  • 関連するチャートをコンテナでグループ化し、ディバイダーとパディングを使用してコンポーネントを区切り、視覚的な煩雑さを減らします。 たとえば、概要レベルのジョブとレシピのメトリックを1つのコンテナに、利用状況データを別のコンテナにグループ化します。
  • 閲覧者が特定のプロジェクト、レシピ、または日付範囲に集中できるように、ダッシュボードまたはコンテナレベルでフィルターを適用します。

Last updated: