Sellix 越境フィンテックのヒーロー設計｜プロンプト付き

このテンプレートについて

Sellixは、越境決済・資産管理・暗号資産と法定通貨の交換を扱うフィンテックのヒーローセクションだ。紫に光る地球のループでグローバルな到達範囲と信頼を先に立て、その上で価値提案と2つのCTAを折り返しより上に置く。設計は単一ファイルで完結しているので、ナビゲーション、見出し、ボタン、余白がすべて同じ基準単位から導かれ、地球とコピーと2つのアクションを差し替えてもリズムは崩れない。金融プロダクトのサイトを組み上げる前に、最初の画面だけを成立させたいチームにとって、そのまま測って使える参考になる。

対象

越境決済やデジタル資産のプロダクトを立ち上げるフィンテックのチーム。
プロダクトサイトが整う前に、信頼感のあるヒーローが必要な創業者。
明確なコンバージョン動線を保ったまま、映画的なランディングページを組むデザイナー。
完成度の高い参考事例を、新しい金融ブランドへ作り替えるマーケティングチーム。

含まれる内容

グローバル金融の視覚言語. 回転する地球と星のフィールドが、プロダクトと国をまたぐ資金移動をその場で結びつける。同時に、画面が語る約束は一つに絞られている。
中央の見出しと短い補足. 2行の見出しが主張を担い、その下に短い段落を置く。訪問者はページ全体を走査しなくても、提供内容を判断できる。
階層の明確な2つのアクション. 明るい主ボタンと、より静かな副ボタンを並べる。試す気になっている訪問者にも、文脈を知りたい訪問者にも、次の一手がはっきり見える。
単一基準単位のレスポンシブ構成. 1つの基準単位から寸法を測るので、ヒーローセクションは無関係なブロックの寄せ集めではなく、1つの場面として拡大縮小する。

モーションとインタラクション

ループする地球の背景

無音の紫の地球クリップが、穏やかで途切れない動きを与える。見出しともCTAとも競合しない位置に収まっている。

マスクで行ごとに立ち上がる見出し

見出しの各行がそれぞれ立ち上がる。最初の画面に落ち着いた入場を作りながら、動きが止まった最終状態でも読みやすさを保つ。

このテンプレートがフィンテックに向く理由

金融プロダクトは、機能の問題より先に信頼の問題を抱えやすい。訪問者は、そのプロダクトがグローバルで、真面目で、始めやすそうだと先に理解したい。ところが規約の文言やプロダクト用語を最初の画面に並べると、その一画面が重くなる。Sellixはこの緊張を1つの視覚的なアイデアで解いている。発光する地球が、国をまたぐ資金移動を一目で読める形にするのだ。コピーは平易で実務的に保たれ、決済・資産管理・暗号資産と法定通貨の交換という具体的な仕事を短い補足段落で名指しする。抽象的なブランドの言葉の裏に隠さない。銀行、決済インフラ、資金管理、送金、デジタル資産のツールなど、取引端末に見えずに到達範囲を伝えたいプロダクトほど、この型が効く。

最初の画面が注意をどう導くか

ページには意図された読み順がある。ナビゲーションがプロダクトを示し、再訪者には慣れた移動手段を与える。中央の見出しはカテゴリーレベルの約束を2行で述べ、補足の一文が具体的な仕事を足す。主ボタンは場面に馴染む程度に静かで、それでいてすぐ見つかる明るさを持ち、副ボタンは慎重な訪問者に負荷の低い入口を用意する。ほかの要素はこの動線と競合しない。最初の判断より前に、カードのグリッドも、お客様の声の壁も、装飾的なダッシュボードも置かれていない。この抑制は別のブランドに合わせるときに効く。新しい視覚や一文が、提供内容か次の一手の説明に寄与しないなら、それは折り返しより下に属するという判断基準になる。

レスポンシブとアクセシビリティ

元のブリーフは、デスクトップのヒーローセクションを恣意的なブレイクポイントの寄せ集めではなく、計測された構成として扱っている。ワイドスクリーンでは地球が舞台を満たし、見出しはその上で中央に保たれる。ビューポートが狭くなると、文字サイズは使える幅から決まり、長いカテゴリ語が中途半端な位置で折り返さない。ナビゲーションはコンパクトなメニューに畳まれ、操作部はタップに足る大きさを保ち、補足コピーは小さい文字に押し込まれず自然に折り返す。動画はミュートでインライン再生され、ポスターフレームを持つので、自動再生が使えない環境でもページは意図を伝える。動きを減らす設定では入場アニメーションを止めて最初のフレームで保持し、動く背景を望まない訪問者にもメッセージを残す。

参考を自社ブランドに合わせる手順

まず約束を書き換え、装飾には手を付けない。自社のプロダクトがどの取引や結果を楽にするのかを一文で書き、そのあとに誰に向けたものかを明らかにする補足の一行を置く。そのうえで地球を差し替える。プロダクトのクローズアップ、経路図、素材の研究、静かなデータ可視化のいずれでも、文字の後ろに安定した焦点領域があれば成立する。コントラストの関係は保ち、ポスターだけでなく最も明るいフレームの上で見出しを確認する。最後に、ナビゲーションとCTAを、実際にたどってほしい動線に合わせて書き直す。このテンプレートの価値は計測された階層とテンポにあり、題材・裏付け・言葉は自社ブランドが用意するものだ。