海外上位の価値から、用途別の選択へ進む
金融 / グラフィカル
Stripe
大きな事業価値の宣言を、決済画面と用途別カードで具体的なサービスへ分解する。
設計の見どころ
冒頭では金融インフラとしての広い価値を伝え、その後に対面決済、オンライン決済、課金モデルなどの用途を分けています。複数商品をいきなり横並びにせず、何のための基盤なのかを先に共有してから選択させる情報順です。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
金融の説明を、働く気分から始める
ファーストビューは山あいの風景と机・ノートPCを大きく使っています。金融らしい図表を最初に詰めず、これまでと異なる仕事環境を視覚的に提示。その上にサービスの宣言と申込説明を重ね、情緒から機能へ入る構成です。
入力欄と主要CTAをひとつのまとまりに
メールアドレス欄と口座開設ボタンを横につなぎ、隣にはデモの入口を置いています。説明の後に別ページで最初の入力を探させる構成ではなく、行動の始点を冒頭に見せる設計。まだ判断できない人の確認経路も残しています。
ブランド色は操作の位置で強く使う
背景は霧や夕景の柔らかな色ですが、主要な開設ボタンは鮮やかな青紫です。写真の雰囲気を活かしながら、押せる箇所の位置を色で固定しています。背景画像が変わる場合も、CTAの見え方を一定にする考え方が参考になります。
風景の中のPCから、実際の画面へ寄る
スクロールした画面では、PCに映る口座情報や操作メニューが大きく現れます。最初のイメージだけで終わらず、金融サービスとして何を操作するかへ接続する流れ。情緒的なヒーローの次に具体的な情報を置く好例です。
提供主体の注記をヒーロー内に残す
最初の画面下部に、同社が銀行そのものではないことなどを説明する注記帯があります。写真の世界観とは別に、利用上の重要情報を読む場所を確保。安心感の演出と、事実を伝える役割を分けて設計している点に注目できます。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
専門サービスでも、利用後の状態を表す写真を入口に使い、その次に実際の提供内容を見せる。雰囲気をつくる素材と、事実を証明する画面の役割を分けると応用しやすいです。
そのまま真似する前に
金融の表現や注記は、そのまま他業種へ転用できるものではありません。写真上の白文字は背景次第で読みにくいため、画像差し替え時にも確認が必要です。
次に見ておきたい参考
一覧へ →海外海外主張と計算結果を、同じ画面で照らす
金融 / タイポグラフィ
Wise
説明の横に料金計算を置き、利用者が知りたい「いくら届くか」から検討できる送金サイト。
設計の見どころ
左側には送金の価値を伝える見出し、右側には送金額と受取額の計算UIがあります。安さの説明を読んだ直後に、自分の条件で判断する場所へ目を移せる構成。説明と確かめる手段を遠く離さないことが、この画面の核です。
詳しい解説を読む →公式サイトを見る ↗海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗