メインコンテンツまでスキップ

デザインシステム

Scoutelloは、温かみがあり、信頼感があり、プロダクトを中心に据えた印象を目指します。推奨する外観は、明るく、ゆとりがあり、角が丸く、エディトリアルなスタイルです。まずコンテンツを明確に示し、その上で控えめなブランドカラー、柔らかなサーフェス、落ち着いたモーションを加えます。プロダクトが反応している感覚を生みながら、装飾的なノイズにはなりません。

マーケティング用ランディングページは、現在のビジュアルの方向性を示す最も明確な公開リファレンスです。プロダクトのサーフェスでは、可能な限り共有デザイントークンを再利用し、ブランドやマーケティングを明確に意図したサーフェスに限って、より表現豊かなスタイルにします。

ロゴとブランドアセット​

エージェント、インテグレーション、生成ページで再利用可能なブランドマークが必要な場合は、公開ドキュメントのアセットURLにあるScoutelloのロゴを使用します。

画面サイズに左右されず鮮明に表示できるため、SVG版を優先します。ツールや表示先がSVGに対応していない場合は、PNG版を使用します。ロゴの周囲には十分な余白を確保し、引き伸ばしたり色を変更したりしないでください。コントラストを保てる白、暖色系クリーム、その他の落ち着いたサーフェス上に配置します。

ブランドカラー​

プライマリカラー: #ff8d49

プライマリオレンジは、Scoutelloのアクセントカラーとして使用します。主な用途は、主要なCTA、フォーカス状態、アクティブなナビゲーション、小さなアイコンの背景、ハイライトテキスト、柔らかなグロー、暖色系グラデーションです。プロダクトコードでは--primary: 24 100% 64%に対応し、bg-primary、text-primary、border-primary/15、shadow-primary/10などのTailwindクラスで使用します。

セカンダリカラー: #145466

セカンダリのディープティールは、全体を引き締めるカラーとして使用します。プライマリオレンジとのグラデーション、暗いCTAパネル、奥行きの表現、特に強調したいブランド要素に適しています。デフォルトのアクションカラーとして、プライマリオレンジの代わりに使用しないでください。

補助カラー:

  • 暖色系クリームの背景: #fff8f1、#fff4ea、#fcf6f1、および淡いorange-50 / amber-50のサーフェス。
  • プロダクト用ニュートラルカラー: 白いカード、暗い前景テキスト、通常70～75%の不透明度にした控えめなテキスト、明るいボーダー。
  • ターシャリーブルー: hsl(205 100% 51%)は補助トークンとして使用できますが、オレンジとティールがブランドの組み合わせとして認識されるよう、使用は控えめにします。

ビジュアルスタイル​

汎用的な印象にならない程度の温かみを備えた、クリーンで上質なSaaSの外観を優先します。ランディングページでは、クリーム色のメッシュ背景、白いカード、大きなプロダクトスクリーンショット、角丸、控えめなグラデーションを組み合わせます。

使用するもの:

  • rounded-2xlからrounded-[2rem]程度の角丸カードとパネル。
  • border-primary/10、border-primary/15、ring-black/5などの柔らかなボーダー、および明るいニュートラルカラーのボーダー。
  • 強い色のブロックではなく、白またはクリーム色を重ねたサーフェス。
  • shadow-sm、shadow-lg、shadow-2xl shadow-primary/10のような控えめなシャドウ、または不透明度を低くしたカスタムシャドウ。
  • 大きなプロダクトスクリーンショットやUIモックアップ。特にマーケティングや機能紹介では、具体的な根拠として使用します。
  • オレンジのハイライトテキスト、アイコンチップ、リング、グロー、グラデーションCTAなど、小さなブランド表現。

避けるもの:

  • ページ全体を覆う派手なオレンジ背景。
  • 通常のコントロールでティールを過度に使用すること。
  • 情報量が多く、窮屈なレイアウト。
  • 強すぎるシャドウ、角の鋭い長方形、冷たいモノクロのダッシュボード。
  • 読み取りやタスク完了の妨げになる装飾的なモーション。

タイポグラフィ​

マーケティングサイトでは、以下を使用します。

  • landing-displayクラスを通じたディスプレイ見出しにはSpace Grotesk。
  • マーケティング本文にはManrope。

共有アプリとドキュメントのサーフェスでは、システムに合わせたUIタイポグラフィを使用し、現在はInterに近い構成です。すべてのサーフェスで目指すスタイルは一貫しています。信頼感のある見出し、詰めた見出しの字間、読みやすい本文、ゆとりのある行間です。

見出しのガイダンス:

  • マーケティングページでは、大きくバランスの取れた見出しを使用します。
  • 重要なフレーズだけをプライマリオレンジで強調します。
  • 利用できる場合はmax-w-*とtext-balanceで行の長さを調整します。

本文のガイダンス:

  • 段落は落ち着いた直接的な表現にします。
  • 説明文には控えめな前景テキストを使用し、通常はtext-foreground/70またはtext-foreground/75を指定します。
  • 流し読みしやすいセクション、短い段落、明確なラベルを優先します。

レイアウトとスペーシング​

レイアウトは、ゆとりがあり安定した印象にします。ランディングページでは、レスポンシブな左右パディングと大きな縦方向のセクションを備えたmax-w-7xlコンテナを使用します。

一般的なパターン:

  • py-16、py-20、または主要なマーケティングセクションではそれ以上のセクションパディング。
  • 一貫した間隔を持つレスポンシブグリッドにカードを配置。
  • 強い左側のコンテンツカラムと、右側のプロダクトスクリーンショットまたはデバイス構成を備えたヒーローセクション。
  • 幅広いプロダクトの価値を示すセクションでは中央揃えの見出し、ストーリーやワークフローのセクションでは左揃えの見出し。
  • モバイルファーストのレイアウト。大きな画面で複数カラムに変わる前に、モバイル上で自然に積み重なる構成。

余白もデザインの一部として扱います。セクションが分かりにくい場合は、装飾を追加する前にコンテンツを整理し、呼吸できる余白を増やします。

コンポーネントとサーフェス​

Scoutelloのサーフェスは、触感がありながら軽やかな印象にします。

  • ボタン: マーケティングで目立たせるCTAには丸みのあるピル型、それ以外のプロダクト画面では標準的なプロダクトボタン。
  • カード: 白またはクリーム色で、角丸、ボーダー付き、軽い浮き上がり。
  • アイコン: オレンジ系のチップに配置した、小さくシンプルな線画アイコン。
  • 統計情報と信頼性要素: オレンジ系のボーダーまたはグラデーションを使った控えめなカード。
  • フォーム: 明確なラベル、簡潔な補足テキスト、モバイルで使いやすい十分な間隔。
  • スクリーンショット: 大きく、鮮明で、少し浮き上がった表示。プロダクトの具体的な根拠として使用します。

製品 UI を構築する際は、カスタムの一度限りのスタイルではなく、既存の共有 UI コンポーネントとトークンを起点にしてください。マーケティング UI を構築する際は、適用できる箇所でランディング用のプリミティブとクラスを使用してください。

モーション​

モーションは、インターフェースを洗練された印象にするためのものであり、忙しない印象を与えるものではありません。ランディングページでは、短い表示アニメーション、デバイスがせり上がるエフェクト、グローが広がるエフェクト、小さなホバー時の浮き上がりを使用します。

推奨するモーション:

  • 12～24px 下から、ソフトな透明度変化を伴って表示する。
  • ホバーカードは数ピクセルだけ浮き上がらせる。
  • CTA のホバー状態では、わずかに浮き上がらせ、影を深くする。
  • ストーリーを追って読みやすくする効果がある場合は、セクションの表示を段階的にずらす。

常に視覚効果を減らす設定を尊重してください。コンテンツを隠したり、操作を妨げたり、ページを理解するために不可欠だと感じさせたりするアニメーションは避けてください。

トーンとコンテンツ設計​

このビジュアルシステムは、直接的で具体的なコピーと組み合わせることで最も効果を発揮します。組織が Scoutello で何を公開、管理、自動化できるのかを説明する言葉を優先してください。

使用するもの:

  • 製品に固有の名詞: ランディングページ、タイル、ツアー、イベント、組織、ダッシュボード、ゲスト、QR コード、翻訳。
  • ゲスト体験と運営担当者のワークフローを結び付ける、成果を重視した説明。
  • ドイツ語やその他のローカライズされたコピーでは、ジェンダーに中立な表現。

避けるもの:

  • 具体例のない曖昧なプラットフォーム表現。
  • 過度に形式的なエンタープライズ向けの専門用語。
  • スキャンしやすいセクションの方が適している、長い段落。

実践的なルール​

  • メインのブランドアクセントには #ff8d49 を、補助的な基調色には #145466 を使用します。
  • 製品画面では、ハードコードした色ではなく、トークン化されたクラス（primary、secondary、foreground、muted、border）を優先します。
  • マーケティングページは、温かみがあり、余白を広く取り、角を丸くし、スクリーンショットを中心に構成し、アニメーションは控えめにします。
  • ダッシュボードや運用画面は、落ち着きのある密度を保ち、必要な箇所に限って情報量を高め、タスクに集中できる構成にします。
  • 製品ですでにブランディング設定を提供している場合は、顧客が管理するゲスト体験に組織のブランディングを反映します。ただし、Scoutello が管理する画面はこのシステムに沿わせます。

関連する概念: ルートと画面、ランディングページとタイル、ブラウザファーストのゲスト体験。