海外金融の説明を、働く気分から始める
金融 / 写真中心
Mercury
自然の風景に仕事机を置き、金融サービスの機能を「働く状態」のイメージから伝える。
設計の見どころ
ファーストビューは山あいの風景と机・ノートPCを大きく使っています。金融らしい図表を最初に詰めず、これまでと異なる仕事環境を視覚的に提示。その上にサービスの宣言と申込説明を重ね、情緒から機能へ入る構成です。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
上位の価値から、用途別の選択へ進む
冒頭では金融インフラとしての広い価値を伝え、その後に対面決済、オンライン決済、課金モデルなどの用途を分けています。複数商品をいきなり横並びにせず、何のための基盤なのかを先に共有してから選択させる情報順です。
動きのある色面を、整った枠で受け止める
ヒーロー右側の鮮やかな色面に対し、本文領域は白と細い罫線で区切られています。装飾は大きくても、テキストやカードの整列は崩さない。視線を引く部分と、比較検討する部分に異なる密度を与えることで両立させています。
決済画面を使い、見えないサービスを可視化
用途別カードには決済端末、購入フォーム、請求・利用量の画面が置かれています。金融インフラという見えにくい商品を、利用者が接する画面に変換して説明する手法。機能名を増やすより、利用の結果を想像しやすくしています。
日本向けの信用材料を早い位置に置く
冒頭の登録導線の下に、国内外の企業ロゴをまとめた帯があります。今回は日本向けページで国内企業も確認しました。グローバルな実績という説明を、日本の閲覧者にも身近な手がかりで補う配置として参考にできます。
導入の大きさに合わせて入口を分ける
本文の開始ボタンとGoogle登録に加え、ヘッダーには営業問い合わせを配置。セルフサービスで試す人と、条件を相談したい組織を別の経路へ案内しています。多商品サイトでも、最初の行動を細かい商品選択で塞がない構造です。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
複数の支援メニューを持つ会社なら、共通の提供価値を一文で示し、その後に用途別カードを置く。各カードには抽象アイコンより、実際に提供する画面や成果物を添えると伝わります。
そのまま真似する前に
動的な数値や顧客ロゴは自社の根拠があるものだけに限定します。色の演出は読みやすさと読み込み時間を優先し、同社の表現や図版そのものを複製しません。
次に見ておきたい参考
一覧へ →海外海外主張と計算結果を、同じ画面で照らす
金融 / タイポグラフィ
Wise
説明の横に料金計算を置き、利用者が知りたい「いくら届くか」から検討できる送金サイト。
設計の見どころ
左側には送金の価値を伝える見出し、右側には送金額と受取額の計算UIがあります。安さの説明を読んだ直後に、自分の条件で判断する場所へ目を移せる構成。説明と確かめる手段を遠く離さないことが、この画面の核です。
詳しい解説を読む →公式サイトを見る ↗海外成果物を背景にして、目的を大きく伝える
業務ソフト / グラフィカル
Pitch
完成スライドを背景に、入力欄をヒーローへ組み込み、作り始める行動を早く見せる。
設計の見どころ
ヒーローには複数のスライド例が敷かれ、その上に非常に大きな見出しが重なります。何が作れるかを文章だけで説明せず、完成物の多様さを背景で示す構成。製品の操作画面より先に、利用者が得る成果物へ視線を向けています。
詳しい解説を読む →公式サイトを見る ↗