デザインガイドライン

LifeShield AI は、AIが個人のデジタル行動を学習し、フィッシング、詐欺、不審メール、アカウント攻撃を検知して守る個人向けセキュリティサービスです。

ターゲットは、SNS、メール、EC、ネットバンキングを日常的に使う成人の個人PCユーザー。専門知識は高くないが、被害への不安があり、安心して使えるサービスを求める層です。

メインカラー #2F6FED は、青が持つ安心感、信頼感、冷静さを活かし、セキュリティ系サービスに必要な土台をつくるために採用しています。

サブカラー #DDEBFF は、メインカラーを支えながら画面全体を軽やかに見せ、圧迫感を抑える役割を持たせています。

アクセントカラー #7ED6C2 は、ミント系のやわらかさにより安全・安心・親しみやすさを補強し、個人向けサービスらしい温度感を加えます。

背景色 #F7FAFD は、真っ白ではなく少し青みを持たせることで、清潔感と静かな落ち着きを両立させています。

テキスト色 #1E2A3A と #6B7A90 は、情報の優先度を整理しつつ、上品で読みやすい印象を保つための組み合わせです。

見出しには Space Grotesk を使い、先進性と現代性を強調します。

本文には Noto Sans JP を使い、日本語でも読みやすく、情報を無理なく受け取れることを重視します。

全体として、「先進的だが難しすぎない」印象になるように、見出しと本文の役割を明確に分けます。

プライマリボタンは、利用開始や申し込みなど最重要の行動に使う。

セカンダリボタンは、詳細確認や比較など補助的な行動に使う。

注意喚起ボタンは、削除や解除など慎重な判断が必要な操作に限定して使う。

角丸を大きくし、個人向けサービスらしいやわらかさと押しやすさを両立する。

プライマリは少し濃い色に変えて軽く浮き上がる。セカンダリは背景を薄く色づけ、枠線と文字色をメインカラーへ寄せる。注意喚起は背景色をより明確に変え、危険な操作であることが直感的に伝わる見せ方にする。

テキスト入力、セレクト、テキストエリアは白背景を基本とし、圧迫感を抑える。

フォーカス時はメインカラーで状態を明確にし、入力中であることを分かりやすくする。

チェックボックスとラジオボタンは余白を広めに取り、誤操作を防ぐ。

エラー時は赤系の色と補足メッセージで、問題箇所をすぐ理解できるようにする。

全体として、難しい印象を避けながら、安心して入力できる見た目にする。

カードは淡い背景色とやわらかい角丸で、情報を整理して見せる。画像、タイトル、説明、ボタンの順で理解しやすい構成にする。

テーブルはヘッダーの視認性を高め、ストライプ表示で行の追跡をしやすくする。情報量が多くても読み疲れしないことを優先する。

アラートは情報、成功、警告、エラーで色を使い分け、状態を瞬時に判断できるようにする。

デザインコンセプトは「信頼感・先進性・親しみやすさ」とし、個人向けセキュリティサービスとして、整っていても冷たすぎない画面設計を基本とする。

コンテンツ最大幅は 1200px とし、広すぎず狭すぎない読みやすい情報密度を保つ。

グリッドシステムは 12カラム、ガター幅は 24px とし、ヒーロー、機能カード、数値セクションなどを柔軟に構成できるようにする。

セクション間の余白は 80px〜120px、要素間の余白は 16px〜24px を基本とし、圧迫感を抑えながら情報を整理する。

角丸は、入力欄 12px〜14px、カード 16px〜24px、ボタン 999px を基準とし、やわらかく親しみやすい印象を揃える。

シャドウは box-shadow: 0 10px 30px rgba(30, 42, 58, 0.08); を基本とし、強すぎない立体感で上品さを保つ。

ブレークポイントは、PC を 1025px以上、タブレットを 769px〜1024px、スマートフォンを 768px以下とし、スマートフォンでは基本的に1カラム構成へ切り替える。