デザインレビュー 9/21

Kyash 

pay payみたいなクレジットカードやapple payなどと連動したキャッシュレスアプリ。

印象面
装飾が少なくとてもシンプルなウェブサイト

画像1

ベースカラーが非常に薄い、限りなく白に近いグレー。そのため、水色のアクセントが非常に効いたサイト。
フォントを太くして、タイトルが可読性・視認性が高くしている。

画像3

-タイトルと、説明文のジャンプ率がちょうど2倍。タイトル28px 説明文14pxになっている。タイトルを太くしているので、目につきやすい。補足のような内容なので、あえて14pxにして目立たないようにしている可能性あり。

画像2

-ちょうどきれな斜め線が入るくらいの角度で写真を配置している。また、青い縁が目立つので、斜めに目線が行くようになっている。
斜めに余白を十分にとっているので、印象には各ポイント残りやすい。

画像4

ちなみに、ここがきれいだなと思ったので、調べてみたら、少しだけはみ出ますが、黄金比の比率に近い形になっていました。
※赤の長方形は黄金比の長方形。

画像5

アプリをダウンロードした際の内容がスマホの実際の画面にして配置されるとわかりやすい。
また、スマホ内の配色が青と緑色で統一されているので綺麗に見え、また、スマホの背景も白なので、視認性が高くなっている。
-スマホのしたに状況を説明する薄い英文(単語)が重なるように乗せられていて、少しオシャレ。また、文字を重ねることでスマホの画面がより浮いているように見える。

⬇︎比較のため文字がないバージョン。

画像6

機能面
-このアプリの強みを各セクションごとに説明をして、詳細ページに飛ばして回遊させてアプリダウンロードを狙っていると考える。理由としては、各ポイントにコンバージョンボタンはなく、各ポイントに詳細ページに飛ぶボタンが配置されているため。
-文章として各タイトルを大きく目立たせて、説明文は補足の内容なので目立たないようになっていることで、パンパンスクロールに進める。
-少佐ページに飛ぶリンクとダウンロードボタンをホバーさせていつでも内容やコンバージョンをできるようにしてある。

カラー
ベース:ベースカラーが非常に薄い、限りなく白に近いグレー #fdfdfd
メイン:ブラック #26262a
アクセント:水色  #54d1fb

フォント
ヒラギノ sans
英:Avenirnext,Arial (スマホとかぶさっているところ)

レスポンシブ
ブレイクポイント:991px
可変:横2列配置が縦一列配置などに可変。
※斜め配置は変わらずな斜めに配置。

画像7


この記事が気に入ったらサポートをしてみませんか?