参考サイト考察　ー株式会社メルペイー

株式会社メルペイ

【テーマ】
・モダンでシンプルなデザイン

・余裕のある余白設定

・無彩色のカラーレイアウト

・直線の構成

【事業内容】
メルカリの運営する決済サービス

【Responsive】
対応（ブレイクポイント:768px)

【color】
ベースカラー（background)：#fffeff

キーカラー（薄い水色）：#e3edf9

キーカラー （少し青みがかった薄いグレー）：#d2dce5

アクセントカラー（明るい水色）：＃009add

【font-family】
見出し、テキスト：my-azo-sans web

整然とした印象を与えるゴシック体の等幅フォントを採用し抜け感と誠実な印象を与えている。

【font-size】

（見出し）40px（本文）16px

（キャッチコピー）40px

【余白】

（キャッチコピー）ファーストビューの半分より下にキャッチコピーが配置。リンクはボトムラインを合わせて右側に配置。

（各セクション間）150〜225pxの余白。

（見出し〜本文間）70~90pxの余白。aboutのセクションは横並びに配置。

（テキスト段落間）15px。フォントサイズとほぼ同じ

各セクション共に過剰にはならない程度の余裕を持たせた余白設計。

各セクションでさりげなくレイアウトを変更し、全体にリズムを生み出している。

【その他のあしらい】
（ホバー 時のアクション）テーマカラーと同系色の水色の矢印のホバー 時のアクションについて

・リンクのシャドウが濃くなる。

・矢印が右に動く

・矢印の色が白に変化する

上記のように箇所ごとに違いを持たせることで新鮮な印象を与えている。

（各セクション横見出し横のボーダー）

見出しから30px程離した位置の細く短いボーダーを配置し、縦のラインを少しずつずらすことによって生まれるサイト全体のリズムを阻害せずセクションの始まりを明確にしている。

【目的と工夫】
目的①：決済サービスというお金をダイレクトに扱う企業ならではの信頼感や誠実で真面目な印象を与えつつシンプルかつミニマルなデザインでモダンな印象を与えている。

工夫①：カラーの選定

クリーンな印象を与える青とグレーの中間のような無彩色にカラーを統一し、サイト全体とサービスに落ち着きと信頼感を与えている。

工夫②：各セクションでグリッドへの配置に変化を与える

各セクションのグリッドへのレイアウトに少しずつ変化を与え、抑制された整然としたデザインでありながらも柔軟で現代的な印象を与えている。

また各セクションともに両端ぞろえを守ることで、ガチャついた印象になることを防いでいる。

目的②：分かりやすく使いやすいユーザー目線のサービスであることを伝えようとしている。

工夫①：サービス内容が直感的に理解できるMVやその他の画像の使用

決済サービスがどこで使えるものなのか直感的に把握できるメインヴィジュアル（動画）やスマホのイメージなどもそれさえあれば利用できることを伝える上で有効に機能している。