海外上位の価値から、用途別の選択へ進む
金融 / グラフィカル
Stripe
大きな事業価値の宣言を、決済画面と用途別カードで具体的なサービスへ分解する。
設計の見どころ
冒頭では金融インフラとしての広い価値を伝え、その後に対面決済、オンライン決済、課金モデルなどの用途を分けています。複数商品をいきなり横並びにせず、何のための基盤なのかを先に共有してから選択させる情報順です。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
主張と計算結果を、同じ画面で照らす
左側には送金の価値を伝える見出し、右側には送金額と受取額の計算UIがあります。安さの説明を読んだ直後に、自分の条件で判断する場所へ目を移せる構成。説明と確かめる手段を遠く離さないことが、この画面の核です。
数字に最も強い文字の階層を与える
計算カード内では送金額と受取額が太く大きく、手数料や着金予定はその下にまとめられています。すべてを同じ大きさで並べず、比較する数値と補足条件を段階化。金融情報の量を減らさずに、読み順をつくっています。
鮮やかな緑を、操作と比較の目印に
白地を基本に、ボタンと比較セクションへ明るい緑を使用。計算結果や競合比較の領域が続く中でも、ブランドと主要行動を見失いにくい構成です。濃い緑の文字との組み合わせで、色面の上でも情報を読ませています。
不安への回答を、計算のすぐ下へ
ヒーロー直下に、実績、認可、日本語サポートの三つの説明が並びます。費用が分かった次に気になる「任せられるか」「困った時どうするか」に対応する並び。売り文句を増やすより、次の疑問を先回りする配置です。
比較表でも、入力条件を上に残す
次のセクションでは送金額と通貨の欄が上部にあり、その下に各サービスの受取額が並びます。比較の前提と結果が同じ領域で読める設計。表の結論だけを切り出さず、どの条件の結果かを一緒に伝える構成として参考になります。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
料金が条件で変わるサービスなら、早い段階で見積り例や計算フォームを置く。金額だけでなく、含まれるもの、所要時間、対応条件を結果の近くで説明すると判断を助けられます。
そのまま真似する前に
料金・為替・比較結果は変動するため、ここでは数値の優劣を評価していません。計算機を設ける際は、条件・更新時点・誤差を明記し、確定価格と混同させない設計が必要です。
次に見ておきたい参考
一覧へ →海外海外金融の説明を、働く気分から始める
金融 / 写真中心
Mercury
自然の風景に仕事机を置き、金融サービスの機能を「働く状態」のイメージから伝える。
設計の見どころ
ファーストビューは山あいの風景と机・ノートPCを大きく使っています。金融らしい図表を最初に詰めず、これまでと異なる仕事環境を視覚的に提示。その上にサービスの宣言と申込説明を重ね、情緒から機能へ入る構成です。
詳しい解説を読む →公式サイトを見る ↗国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
MENSHO
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
設計の見どころ
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗