---
schema_version: "1"
id: fd93e50c35d58530e8c9031b007b7b922ee451457908c597a64387894b3ed306
title: 標準コンポーネント
collection: architect
version: next
locale: ja-jp
portal_url: https://docs.salesforce.com/architect/next/ja-jp/reference-diagrams/guides/kit-of-parts.md
canonical_url: https://staging.architect.salesforce.com/docs/architect/ja-jp/reference-diagrams/guide/kit-of-parts.html
source_site: staging.architect.salesforce.com
content_type: documentation
content_hash: ff353fd92e4cbe5bb12f710928621b260624471af33f1508a32b5d9887ebfaad
products:
- 参照図
- Architect Site Content Repo
updated_at: 2024-09-15T00:00:00Z
---
## 標準コンポーネント
標準コンポーネントを使用すると、高品質で一貫性のある図を簡単に作成、カスタマイズ、再利用できます。このプロフェッショナルなスタイルは、すべての Salesforce ダイアグラムテンプレートで使用され、ダイアグラムの使用事例を示すパートナーツールで利用できます。
コンポーネントの使用方法の例については、[リファレンスアーキテクチャギャラリー](https://architect.salesforce.com/diagrams#reference-architecture-gallery)を参照してください。
## ベストプラクティス
次のセクションでは、標準コンポーネントに含ま[れるヘッダー](#ヘッダー)、[カード](#カード)、[アイコン](#アイコン)、および[コネクタ](#コネクタ)の詳細なベストプラクティスについて説明します。
## ヘッダー
ヘッダーはすべての図に表示され、次の内容が含まれている必要があります。
- 利用者にとってすぐに理解できるタイトル
- ダイアグラムの目的と意図を明確に説明する
- (省略可能) 著者を伝えるロゴまたは会社名
- (省略可能) 分類として使用されるアイコン、デザイン、記号を明確にするキー
サイズは、図の高さの 10% 以上、幅の 100% 以上を占める必要があります。
説明のフォントサイズは、タイトルの半分以上である必要があります。
アイコン、コネクタ、色など、図自体のタイトルで指定されていないものを使用する場合は、キーを含める必要があります。可能な場合は、キーを偶数行にグループ化する必要があります。
## カード
図のすべてのプロパティはカードで表されます。カードのサイズを変更したり、透明または色付きの塗りつぶしにしたりできます。カードには複数のセクションがあり、さまざまな概念を図で表すために使用できます。
### **カードの構造**
カードの例を次に示します。さまざまなセクションが説明されています。必須のカードコンテンツは \[タイトル] のみです。その他のセクションは、特定の使用事例で必要に応じて使用できます。
**カードアイコン**
カードアイコンは、カードのプロパティを表すビジュアルアセットです。
**カードタイトル**
カードタイトルは、カードが表すプロパティ、エリア、または概念を把握してすばやく理解できるカードの名前です。
**カード属性**
カード属性は、プロパティに関するテキストベースの詳細で、リストとして表され、複数のデータポイントを取得して伝達する必要がある場合に使用されます。
**カードフッター**
カードフッターには、プロパティの追加の特性が表示されます。例として、次のようなものがあります。パッケージ/オブジェクト/API 参照名、所有権、機能など
**カードフッターアイコン**
フッターアイコンセクションは、プロパティに関する追加情報をビジュアルアセットに表示するためのものです。たとえば、チャネル、共有サービス、機能などがあります。フッターアイコンは、ダイアグラムキーに含めるか、説明する必要があります。
### **カードのバリエーション**
異なるセクションを使用すると、用途に応じて異なるカードのバリエーションが提供されます。必要に応じてカードの構造を組み合わせて、図に次のバリエーションを作成できます。以下の例を参照してください。
これらのバリエーションの使用方法のアイデアについては、[リファレンスアーキテクチャギャラリー](https://architect.salesforce.com/diagrams#reference-architecture-gallery)を参照してください。
必要に応じてカードのサイズと色を調整する機能を利用して、種別を区別し、わかりやすくわかりやすい図を作成します。
## **コンテナ**
カードは、複数のプロパティのグルーピングなどのコンテナとしても機能します。必要に応じて、カードを別のカード内にネストして階層関係を示したり、関連プロパティを分類したりできます。
## **アイコン**
Salesforce ダイアグラムには、Salesforce 商品ロゴの基本セットと、プロパティや図の他の領域を表す追加アイコンが用意されています。
アイコンの使用方法の例については、[リファレンスアーキテクチャギャラリー](https://architect.salesforce.com/diagrams#reference-architecture-gallery)を参照してください。
_その他のアイコンについては、[Lightning Design システムアイコンを参照してください。](https://www.lightningdesignsystem.com/icons/)_
## コネクタ
コネクタは、常に肘の接続線を使用し、可読性を高めるために可能な限りまっすぐにします。
**コネクタ**は、2 つのカード間のリレーション、インテグレーション、またはプロセスステップを表します。線スタイルは、異なる種類の接続を示すため、ダイアグラムキーで表現する必要があります。エンドポイントは、インテグレーションコネクタまたはプロセスコネクタの方向を示します。エンドポイントは、リレーションコネクタのカーディナリティと順序も示します。
**ピル**は、接続に関する詳細を提供するために使用されます。ピルの使用例については、[ソリューションアーキテクチャ](/docs/architect/ja-jp/reference-diagrams/guide/section-solution-architecture)と[インタラクションプロセスフロー](/docs/architect/ja-jp/reference-diagrams/guide/section-interaction-process-flow)の図を参照してください。
## アクセシビリティ
世界では、約[13 億](https://www.salesforce.com/company/legal/508_accessibility/#:~:text=Product%20Accessibility%20Status&text=Around%20the%20world%2C%20approximately%201.3,global%20economy%20that%20includes%20everyone.)人が何らかの障害を抱えて生活しており、これは世界人口の 15%を占めています。アクセシビリティとは、すべての閲覧者が理解しやすい図にすることです。スクリーンリーダー用に最適化することと、色のコントラストを適切に使用することの 2 つの重点領域があります。
アクセシビリティの設計に関するその他のリソースは、[Salesforce Design ブログ](https://medium.com/salesforce-ux/tagged/accessibility)を参照してください。
**スクリーンリーダー**
スクリーンリーダーは、ファイル、アプリケーション、または Web サイトの単語を読み上げるソフトウェアアプリケーションです。スクリーンリーダーは、図をはっきりと確認できない個人にも図を表示できます。スクリーンリーダーの互換性のための最適な形式は PDF (Portable Document Format) です。画像やアクセスできないアプリケーションとは異なり、PDF はスクリーンリーダーでアクセスして単語、図形、色を読むことができます。他のユーザーと共有するときに図を PDF 形式にエクスポートすると、アクセシビリティが向上します。
**色のコントラスト**
色のコントラストを上げると、図がわかりやすくなります。テキストの背景色とテキスト自体の色の比率を 4.5:1 にするという [Web Content Accessibility Guidelines](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (WCAG) の最小色のコントラストを満たすと、ユーザーは図をより適切に認識して読むことができます。
[Salesforce カラーシステム](https://medium.com/salesforce-ux/the-salesforce-color-system-c7c6b5b9c577)の各色には、0 ～ 100 の数値が関連付けられています。図の色を選択するときは、テキストの背景色がテキストの色より 50 ポイント以上大きいか小さいことを確認してください。たとえば、背景色が 80 の場合、テキストの色は 30 以下にする必要があります。必要に応じて、境界線とアウトラインにも 50 ポイントルールを使用することを検討します。
**Salesforce Diagrams の入力や質問がありますか?**[こちら](https://docs.google.com/forms/d/e/1FAIpQLSe5RmVA2ZtpfGlR2u436FA4QN6QmJGdAWxtZ_AcRLMAH_US9Q/viewform?usp=sf_link)でご意見をお聞かせください。
Lucidchart
要素
ミロ
Google スライド