全画面で魅せる
ファーストビュー

宇宙的なビジュアルを全面に敷き、発光するグラデーション見出しを重ねたヒーロー領域です。左寄せのテキストと広い余白のコントラストでメッセージの強度を高め、訪問者の視線を一点へ集約させる構成にしています。

下へスクロール
CONCEPT

左に発光するシンボルアイコン、右に説明テキストを置いた非対称の2カラム構成です。アイコンは回転する二重の軌道リングで囲み、ブランドの世界観を象徴的に視覚化しています。

セクションラベル・本文・キャッチコピーという3段の情報階層で優先順位を整理し、読み手の視線を上から下へ自然に誘導するレイアウト設計を採用しました。

余白と階層で、語る。

SERVICES

3枚のカードを等間隔に並べたグリッドレイアウト。アイコン・タイトル・説明文の構成を統一し、視線が左から右へ流れるよう設計しています。

カード構成 01

アイコンを上部中央に配置し、要素を縦方向へ整列させたカードの基本形です。

カード構成 02

連番ラベルでカード同士の並列関係を示し、一覧性と比較しやすさを確保します。

カード構成 03

発光する細い境界線で領域を区切り、ホバー時の浮き上がりで奥行きを演出します。

PROCESS

順序性のある内容を矢印でつなぎ、流れを左から右へ可視化したステップ型レイアウトです。

STEP 01

起点のアイコン

円形アイコンで工程の入り口を象徴的に示します。

STEP 02

接続の矢印

ステップ間を矢印で結び、進行方向を明示します。

STEP 03

段階の明示

三段構成で全体の流れを一目で把握させます。

NUMBERS

大きな発光数字を主役に据えた実績表示レイアウト。ラベルを小さく抑え、数字へ視線を集中させます。

発光グラデーション・シアン
350+
発光グラデーション・マゼンタ
98.4%
発光グラデーション・ブルー
85.0%
FAQ
A. 質問行をクリックすると回答が縦に展開する開閉式リストです。展開中の項目は反転するアイコンで状態を示し、回答テキストは行間を広げて可読性を確保しています。
A. 初期状態では回答を隠し、質問のみを並べることで一覧性を高めます。細い境界線と下向きアイコンが「開ける余地」を控えめに示すデザインです。

CONTACT US

グラデーションの帯状バナーに、アイコン・見出し・ボタンを横並びに配置した行動喚起ブロックです。明度差で領域を区切り、最後の一押しを担います。

フォームレイアウトへ