ワイヤーフレーム - プロジェクトアーカイブ

1 設計前提

ページの目的必須

LifeShield AI が「個人のデジタル生活をAIで守るサービス」であることを短時間で理解してもらい、詳細確認または利用開始へ自然につなげることを目的とする。

ターゲット必須

SNS、メール、EC、ネットバンキングを日常的に利用する成人の個人PCユーザー。専門知識は高くないが、詐欺や乗っ取りへの不安を持ち、安心して使えるセキュリティサービスを求める層。

構成の概要必須

ページの上部でサービス名と主要メニューを見せ、すぐに内容へ入れる構成にしています。

最初に大きなメッセージとイメージで「何のサービスか」を直感的に伝え、その下で主な機能を分かりやすく紹介します。

続いて実績を見せて信頼感を高め、最後に申し込みや問い合わせにつながる案内を配置しています。

全体として、初めて見る人でも短時間で内容を理解し、次の行動を選びやすい流れを意図しています。

セクション構成必須

セクション	配置する要素	推奨サイズ	配置の意図
Header	ロゴ、ナビ、CTA	ページ上部の共通導線	最初にサービス名と移動先を明確にする
Hero	タイトル、説明、CTA、メインビジュアル	最も大きく見せる領域	何のサービスかを一目で理解させる
Feature	4機能カード	均等配置	主要機能を短時間で比較しやすくする
Result	実績数値	コンパクトな数値ブロック	信頼感を補強する
CTA	利用開始メッセージ、ボタン	独立した強調領域	行動喚起を明確にする
Footer	リンク、SNS、コピーライト	最下部の情報整理領域	補助導線と信頼情報をまとめる

フレーム設定必須

Desktop Frame / Width: 1440px / Height: Auto / Grid: 12 columns / Margin: 80px / Gutter: 24px

レイアウト構成: HEADER → HERO → FEATURE → RESULT → CTA → FOOTER

各セクション仕様必須

セクション	仕様	補足
Header	高さ 80px、Horizontal Auto Layout、Space between、Padding 80px	Logo / Nav / CTA Button
Hero	高さ 600px、左テキスト6カラム、右イメージ6カラム	タイトル、説明、CTA、AIセキュリティイラスト
Feature	高さ 500px、4カラムレイアウト、カード 260px × 180px、Radius 12px	AI詐欺検知、メール監視、SNS監視、通信異常検知
Result	高さ 300px、3カラム	ユーザー数、脅威検知数、AI精度
CTA	高さ 320px、青から紫のグラデーション背景	「今すぐAIセキュリティを始めよう」
Footer	高さ 220px	ロゴ、リンク、SNS、コピーライト

トップページワイヤーフレーム画像必須

Figma の Play 表示をスクリーンショットしたトップページ案