テーマとブランディング
スコアカードの外観は、独立した2つのレイヤーで構成されています。
テーマは個性(タイポグラフィ、角丸、シャドウ、質感、モーション)を決定します。ブランドパレットはカラーを決定します。テーマを選んでも配色が固定されることはなく、配色を変えてもフォント設定は変わりません。対象読者に合ったテーマを選び、その上でブランドカラーを調整してください。
4つのテーマ
Section titled “4つのテーマ”default
Section titled “default”ニュートラルなシステムSansフォント、標準的な角丸、一般的なカードシャドウ。余計な主張をしないデザインです。
既存のWebサイトに埋め込む場合や、自社のブランドパレットを前面に出したい場合に適しています。
playground
Section titled “playground”ポップで親しみやすいデザイン。NunitoおよびQuicksandフォント、大きめの角丸、背景に浮かぶぼかし絵文字、弾むようなアニメーションが特徴です。
一般消費者向け、気軽に受けてもらいたいセルフチェック、SNSでシェアされやすいコンテンツに最適です。新規作成時の初期設定です。
お金、健康、リスク、人員整理などの重いテーマでは、ポップさが不真面目に見えるため避けてください。
obsidian
Section titled “obsidian”上質でエディトリアルなデザイン。見出しにInstrument Serif、本文にDM Sansを採用し、すりガラス調カード(グラスモーフィズム)、かすかな粒子感、落ち着いた動きを演出します。
経営層・エグゼクティブ向けの診断、コンサルティング、高単価B2Bなど、読者が「時間を費やす価値があるか」を品定めする場面に適しています。
営業パンフレットのような見た目を嫌う、純粋なエンジニア層向けには避けた方が無難です。
brutalist
Section titled “brutalist”生々しくハイコントラストなデザイン。Space MonoとJetBrains Mono、角丸ゼロ、輪郭のはっきりしたオフセット黒シャドウ、アシッドグリーンのアクセント、イージングのない即時切り替えが特徴です。
開発者向けツール、セキュリティ・インフラ監査、強い視覚的主張を持つ制作会社など、等幅フォントを知的な信頼性の証と捉える読者層に最適です。
ブランドカラーを厳密に再現したい場合は避けてください。このテーマは独自のサーフェス色やアクセントを強く固定します。
テーマの選び方
Section titled “テーマの選び方”回答者が診断を開始する30秒前、そして終了した30秒後に何をしているかを想像してください。コンサルティング会社を評価中のCTOと、LinkedInのリンクをクリックしたマーケターでは、期待する空間のトーンが異なります。
迷ったときは、より落ち着いたトーンを選んでください。体験の主役は装飾ではなく質問そのものです。
プランによる利用制限
Section titled “プランによる利用制限”利用できるテーマはご契約プランによって異なります。プラン対象外のテーマを設定しようとすると保存が拒否され、利用可能なテーマ一覧がエラーメッセージで提示されます。scorecard_design_guideを参照したAIアシスタントはアカウントのプランを把握しているため、利用できないテーマを勧めることはありません。
ブランドパレット
Section titled “ブランドパレット”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を使うと、対話形式でテーマ選びを進めることも可能です。