主要アクション
Hero — First View

全画面ビジュアルと
大胆なセリフ体の見出しで
第一印象を設計する。

ファーストビューはネイビーを基調に、右手へ象徴的なビジュアルを大きく配置。テキストは左寄せで整列させ、視線を自然に見出しへ導きます。余白とゴールドの差し色で格式と信頼感を演出するレイアウトです。

主要CTAボタンの配置
Scroll Down

左カラム：
課題を提示するブロック

暗い背景に細いアウトラインアイコンを並べ、リスト形式で「読み手の課題」を可視化するエリアです。
各行はアイコン＋短文の2カラム構成。視線の起点をアイコンに固定し、走査性を高めています。
明度を落とした本文色で階層を作り、次の明るいカラムへのコントラストを準備します。

右カラム：
価値を訴求するブロック

明るい背景へ切り替え、ゴールドの見出しで「提供価値」を対比的に見せる領域です。
左の課題と行数・アイコン構造を揃え、左右で1対1の対応関係が読み取れるようにしています。
中央のダイヤ型モチーフが2カラムの結節点となり、明暗の切り替わりを象徴的に演出します。
Numbers Section

数字で見せる実績エリア

大きな数字カード①
99.8%
セリフ体の巨大な数字とラベルを縦積みにし、白いカードで実績を強調するレイアウトです。
大きな数字カード②
12,400+
3枚のカードを均等グリッドで整列。上辺のゴールド罫線が信頼のトーンを統一します。
大きな数字カード③
96.5%
数字の下に区切り線と補足文を置き、視線の落としどころを明確に設計しています。
Services

3カラムのサービスカード

サービスカード①

上部に写真、円形アイコンを重ね、見出し・説明・リンクを縦に並べる定番の縦型カード構成です。

詳細リンクの配置

サービスカード②

3枚を等幅グリッドで並べ、ホバーで浮き上がる動きを付与。画像・アイコン・文字の階層を統一しています。

詳細リンクの配置

サービスカード③

写真にオーバーレイをかけ、ネイビー円のアイコンを差し色に。全体トーンを保ちながら視認性を確保します。

詳細リンクの配置
Process Flow

横並びのステップフロー

Step 01

ステップ①

円形ノードに番号とアイコンを載せ、手順を左から順に並べる導線設計です。

Step 02

ステップ②

各ステップ間を矢印でつなぎ、時系列の流れを視覚的に明示します。

Step 03

ステップ③

番号・見出し・補足文を縦に揃え、4ステップで視線の等間隔を保ちます。

Step 04

ステップ④

スマホ表示では縦積みに切り替わり、矢印も回転して一貫性を保つ設計です。

Frequently Asked Questions

アコーディオン形式のFAQ

開いた状態のアコーディオン行はこう見えます。
質問行をクリックすると回答が下に展開する開閉式レイアウトです。初期状態で1件だけ開いておき、余白の使い方と展開時の見え方を提示しています。
閉じた質問行はプラスアイコンで開閉を示します。
各行はカード状に区切られ、境界線とホバーで操作対象を明示。開閉状態でアイコンが切り替わります。
複数行を積み重ねてリズムを作ります。
質問文はセリフ体、回答文はサンセリフで役割を分け、中央寄せの見出しから左寄せのリストへ視線を落とす構成です。

最終CTAセクション：
上下の光る罫線で締めくくる。

補助アクション 主要アクション