コンテンツにスキップ
DimensionKit
Try the app

テーマとブランディング

スコアカードの外観は、独立した2つのレイヤーで構成されています。

テーマは個性(タイポグラフィ、角丸、シャドウ、質感、モーション)を決定します。ブランドパレットはカラーを決定します。テーマを選んでも配色が固定されることはなく、配色を変えてもフォント設定は変わりません。対象読者に合ったテーマを選び、その上でブランドカラーを調整してください。

ニュートラルなシステムSansフォント、標準的な角丸、一般的なカードシャドウ。余計な主張をしないデザインです。

既存のWebサイトに埋め込む場合や、自社のブランドパレットを前面に出したい場合に適しています。

ポップで親しみやすいデザイン。NunitoおよびQuicksandフォント、大きめの角丸、背景に浮かぶぼかし絵文字、弾むようなアニメーションが特徴です。

一般消費者向け、気軽に受けてもらいたいセルフチェック、SNSでシェアされやすいコンテンツに最適です。新規作成時の初期設定です。

お金、健康、リスク、人員整理などの重いテーマでは、ポップさが不真面目に見えるため避けてください。

上質でエディトリアルなデザイン。見出しにInstrument Serif、本文にDM Sansを採用し、すりガラス調カード(グラスモーフィズム)、かすかな粒子感、落ち着いた動きを演出します。

経営層・エグゼクティブ向けの診断、コンサルティング、高単価B2Bなど、読者が「時間を費やす価値があるか」を品定めする場面に適しています。

営業パンフレットのような見た目を嫌う、純粋なエンジニア層向けには避けた方が無難です。

生々しくハイコントラストなデザイン。Space MonoとJetBrains Mono、角丸ゼロ、輪郭のはっきりしたオフセット黒シャドウ、アシッドグリーンのアクセント、イージングのない即時切り替えが特徴です。

開発者向けツール、セキュリティ・インフラ監査、強い視覚的主張を持つ制作会社など、等幅フォントを知的な信頼性の証と捉える読者層に最適です。

ブランドカラーを厳密に再現したい場合は避けてください。このテーマは独自のサーフェス色やアクセントを強く固定します。

回答者が診断を開始する30秒前、そして終了した30秒後に何をしているかを想像してください。コンサルティング会社を評価中のCTOと、LinkedInのリンクをクリックしたマーケターでは、期待する空間のトーンが異なります。

迷ったときは、より落ち着いたトーンを選んでください。体験の主役は装飾ではなく質問そのものです。

利用できるテーマはご契約プランによって異なります。プラン対象外のテーマを設定しようとすると保存が拒否され、利用可能なテーマ一覧がエラーメッセージで提示されます。scorecard_design_guideを参照したAIアシスタントはアカウントのプランを把握しているため、利用できないテーマを勧めることはありません。

HEX値で指定する10色:

キー 適用箇所
primary ボタン、進捗バー、画面を牽引するメインアクセント
primaryForeground primary の上に載るテキストやアイコン
accent 控えめな強調箇所
background / backgroundDark ページ全体の背景
surface / surfaceDark カードやパネルの背景
text / textDark 本文テキスト
muted 補足・副次テキスト

*Darkはダークモード時に使用されます。ライトカラーを自動反転させるのではなく、意図して色を指定してください(単なる反転は濁った色になりがちです)。

視認性の確認:通常の文字サイズで、primary上のprimaryForeground、およびbackground上のtextが明瞭に読めることを必ず目視で確認してください。

管理画面では、スコアカードの編集画面から設定できます。

AIアシスタントからはupdate_scorecard_configで設定します:

{
"slug": "leadership-check",
"theme": "obsidian",
"branding": {
"colors": { "primary": "#2563eb", "primaryForeground": "#ffffff" }
}
}

設定後はpreviewUrlをリクエストしてください。下書きごとに発行されるプレビューリンクで、公開前の仕上がりを確認できます。MCPプロンプトchoose_themeを使うと、対話形式でテーマ選びを進めることも可能です。