github-actions[bot]
2de681da72
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22317?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
150 lines
4.8 KiB
Plaintext
150 lines
4.8 KiB
Plaintext
---
|
|
title: ウィジェット
|
|
description: Twentyのウィジェットの種類と可視化オプションを確認します。
|
|
---
|
|
|
|
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
|
|
|
## 利用可能なウィジェット
|
|
|
|
Twentyは、CRMデータを可視化するためのさまざまなウィジェットタイプを提供します。
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />棒グラフ</span>
|
|
|
|
データを横棒または縦棒で表示します。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="棒グラフ" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* カテゴリ間の値を比較する
|
|
* ランキングを表示する
|
|
* 期間別の指標を追跡する
|
|
|
|
**使用例:**
|
|
|
|
* ステージ別の商談
|
|
* 営業担当者別の売上
|
|
* 月別のコンタクト追加数
|
|
|
|
<Note>
|
|
**制限を表示**: 棒グラフは、Group Byを使用する場合、最大100小節、および1小節あたり50グループを表示できます。 警告 "Undisplayed data: max X bars per chart" が表示された場合は、フィルターを追加してデータを絞り込むか、グルーピングを変更します（例: 日単位ではなく週単位でグループ化）。
|
|
</Note>
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />円グラフ</span>
|
|
|
|
全体に占める割合を表示します。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="円グラフ" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* 構成や分布を示す
|
|
* 部分と全体を比較する
|
|
* 主要セグメントを強調する
|
|
|
|
**使用例:**
|
|
|
|
* ソース別の商談分布
|
|
* 業種別のコンタクト内訳
|
|
* 担当者別のパイプライン構成
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />折れ線グラフ</span>
|
|
|
|
時間の経過に伴う傾向を表示します。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="折れ線グラフ" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* 時間経過による変化を追跡する
|
|
* トレンドを把握する
|
|
* 複数の指標を比較する
|
|
|
|
**使用例:**
|
|
|
|
* 月次の商談数の推移
|
|
* 四半期ごとの売上成長
|
|
* 活動量の推移
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />グラフ</span>
|
|
|
|
重要な単一値を目立つ形で表示します。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="集計グラフ" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* KPIを強調する
|
|
* 合計や平均を表示する
|
|
* ステータスを素早く確認する
|
|
|
|
**使用例:**
|
|
|
|
* パイプラインの合計金額
|
|
* オープンな商談数
|
|
* コンバージョン率
|
|
|
|
**高度なオプション:**
|
|
|
|
* **比率**: Select フィールドで、値同士の比率を計算します。 **Data on display** → フィールドを選択 → **Ratio** オプションを有効にします。
|
|
* **Prefix & Suffix**: 可読性を高めるために、数値の前後にカスタムテキストを追加します（例: "$" のプレフィックスや "%" のサフィックス）。
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrame</span>
|
|
|
|
外部ツールやコンテンツをダッシュボードに直接埋め込みます。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* 外部のレポートやダッシュボードを表示する
|
|
* サードパーティのセールスツールを統合する
|
|
* 他システムのライブコンテンツを表示する
|
|
|
|
**使用例:**
|
|
|
|
* サポートツールの指標
|
|
* ダイヤラーの指標
|
|
* セールスシーケンスツールのライブコンテンツ
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />リッチテキスト</span>
|
|
|
|
書式設定されたテキストとコンテンツをダッシュボードに直接追加します。
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="リッチテキスト" />
|
|
</Frame>
|
|
|
|
**最適な用途:**
|
|
|
|
* 説明または説明を追加する
|
|
* ダッシュボードの説明
|
|
* メモと注釈
|
|
|
|
**機能:**
|
|
|
|
* リッチテキストの書式設定（太字、斜体、リストなど）
|
|
* 画像とファイルのアップロード
|
|
* Markdown スタイルの編集
|
|
|
|
<Note>
|
|
**近日提供予定**: ゲージチャートとテーブルはまだ利用できませんが、ロードマップに含まれています。
|
|
</Note>
|
|
|
|
### ウィジェットの複製
|
|
|
|
1. ウィジェットをクリックします
|
|
2. **Options** を開きます
|
|
3. **Duplicate widget** をクリックします
|