ドキュメントリスト
このページにある項目
Tue Oct 01 2024

テーマ / ホワイトラベリング

テーマ設定

テーマ設定ページでは、環境のデザインや雰囲気を自由にカスタマイズできます。背景画像の変更、ロゴのアップロード、ブランドカラーやフォントの調整など、御社のスタイルに合わせてUIを最適化し、一貫したプラットフォーム体験を提供します。テーマ設定は3つの主要セクションに分かれています:ブランディング全体カラーモデルカラー

  • ブランディング: ヘッダー背景・ロゴ・サムネイルなどのビジュアル要素をカスタマイズし、ブランドイメージを統一できます。
  • 全体カラー: アプリ全体のカラーをLight/Dark両モードで変更でき、各環境ごとに2つのフルテーマが設定できます。
  • モデルカラー: モデリング属性のカラーを調整でき、他の部分と色分けしたい場合に役立ちます。
  • データセットカラー: データセット属性のカラーも変更でき、アプリ内の他要素と区別できます。
  • チャートカラー: チャート専用のカラースキームもカスタマイズ可能で、グラフの色分けが自由自在です。

環境をブランディング

環境の主要なビジュアル要素、ヘッダー背景、ロゴ、サムネイルをパーソナライズできます。プラットフォーム全体で一貫したブランドアイデンティティを作成できます。会社のロゴを更新したり、カスタム背景を設定したりする場合も、これらのツールはアプリケーションの外観を洗練させるのに役立ちます。

カスタムブランディングでテーマをパーソナライズ

info

イメージの選択を必ずプレビューし、全体のテーマに合っているか、シームレスなユーザー体験を提供できているか確認してください。

一般アプリカラー

LightモードとDarkモードのアプリケーションカラーをパーソナライズし、各環境に対して2つの完全なテーマ設定を実現します。テキストと背景のコントラストを確認し、最適な可読性とユーザー体験を保証するために変更を注意深くテストしてください。この柔軟性を活かして、異なるモードでブランドアイデンティティに合ったプラットフォームの外観を完全に調整できます。

テーマをパーソナライズ

プロセスモデルカラー

モデリングオブジェクトやキャンバスの色をLight/Dark両モードで個別に設定でき、1つの環境で2つの完全なテーマが利用できます。テキストと背景のコントラストも確認し、可読性とユーザー体験に配慮しましょう。この柔軟性により、ブランドに合った見た目を全モードで一貫して表現できます。

テーマのパーソナライズ|プロセスモデルカラー

データセットカラー

データセットオブジェクトやキャンバスの色をLight/Dark両モードで設定できます。複数のdatasetをモデル内で使う場合など、datasetごとに区別が簡単です。 データセットカラーはデータ連携された属性を識別しやすくします。データ未連携属性には上記カラーが標準で適用されます。 名称も自社用語変更が可能です。

テーマのパーソナライズ|データセットカラー設定

チャートカラー

チャートオブジェクトのカラーをLight/Dark両モードでカスタマイズできます。たとえばゲージチャートのNorm設定では、良好・注意・警告の各ゾーンを色で直感的に示せます。 名称も自社用語に合わせて変更可能です。

テーマのパーソナライズ|チャートカラー設定

データセットカラー

データが紐づく属性は、自動でモデラーで指定されたデータセットカラーになります。 これにより、データリンク済の属性を視覚的に区別できます。 上記カラーは、データ未連携属性のデフォルトカラーです。

ビジュアルヘルパー

image テーマに変更を加えた場合、色の背景がその特定の属性に対して変更が行われたことを示します。

image 色を変更するには、選択したテーマ(LightまたはDark)のカラードサークルをクリックします。カラーピッカーが表示され、色合いを選択したり、HEX / RGB / HSL値を入力できます。色値が不明な場合は、**“PipetIcon”**を使用して画面上の任意の場所から色を選択してください。即時に更新されます。

テーマの例

アプリケーションのテーマを変化させるさまざまな方法を探りましょう。ここでは、オリジナルのテーマが青と緑のバリエーションでカスタマイズされています。

オリジナルから

image

ブルーへ

変更された項目は、テキストカラー、ボディカラー、パネル(ライト)カラー、ロゴ画像、ロゴテキスト、ヘッダーBGです。

image

マトリックスグリーンへ

”選択。問題は選択だ” – ネオ(マトリックス リローデッド)

image

プロセスモデルカラー

モデリング属性の色をアプリケーションの他の部分と異なるように調整します。これにより、モデルに独自の外観を持たせることができます。

image