クレディセゾン「セゾンカードwebサイト」から学ぶデザイン術
初めまして。
webデザイナーを目指し勉強中のryskと申します。
転職用のポートフォリオにあげる作品を作っていたところ、どうも自分にはデザイン力が足りないと実感しておりました。
しかし、プログラミングスクールではそこまで詳しいことは学べません。
そこで、何を見て、どう学べばいか考えていたところ、世に出ているwebから学習すれば良いではないかと考えるようになりました。
そして、学習にはインプットとアウトプットが重要だ、ということでこのようなブログを開設しました。
では早速始めていきたいと思います。
このブログでは、参考webサイトの
【構成・配色】
【フォント】
【写真・画像】
【装飾】
【効果】
の点から見ていきたいと思います。
今回、参考にさせていただくのは、
クレディセゾン株式会社さんの「セゾンカード」のWEBサイトです。
このサイトの目的は
「新規顧客にカード申し込みの促進」
「既存顧客のカスタマーサポート」
です。
この2点の視点からサイトのデザインについて考えてみたいと思います。
【構成・配色】
白と青をメインに、アクセントとして強調したいところに緑を使用することで、コントラストが効き、シンプルで見るときのストレスが少ないデザインのように感じました。。
会員専用サービスへのリンクはアクセントカラーの緑を使い、ページ全体を通して目立たせ「新規登録」「ログイン」に繋げています。
また、寒色の青と中間色の緑を使用していることでユーザーの印象の中に誠実さ、信頼感を与えることが期待できるのではないでしょうか。
レイアウトはシングルカラムを採用し、ユーザーの視線が上から下へ行くようにわかりやすく誘導しています。
メインコンテンツの各カラムの中身はグリット型（トランンプを神経衰弱の時のように並べた形）のような配置にすることでレスポンシブにも対応しやすくなっているように感じました。
コンテンツは上から順に「カードの種類」「カードを探す」「トピック」「選ばれる理由」「提携力」と並び、新規顧客のカードの申し込みを意識した配置となっております。
ヘッダーは最上部に設置し、スクロールに追従する形を採用し、ページ途中でもユーザーが簡単に他のページに飛べるデザイン。
さらに、グローバルナビゲーションをホバーすると、ドロップダウンメニューが出てくるUIデザインが採用されています。
そうすることで、ユーザーは求めている情報を最短で取りに行け、ヘッダーはスッキリさせ、見やすい状態で多くの情報を提示できているように感じました。
【フォント】
フォントは、ゴシック体（Inter/Noto Sans JP/sans-serif）を使用し、基本的なカラーは白・黒、強調したい箇所には青色が使用されています。
ゴシック体を使うことで、「安定感」や「親やすさ」を感じました。
見出しのフォントサイズは2.25remと大きめに設定し、font-weightは600と太字に設定することでユーザーの視認性を高めています。
さらに、margin:topに100pxほど余白を取ることで、ゆとりのあるデザインになっていることで、圧迫感なく、ゆとりを持って見ることができました。
見出しの次に強調したいグローバルナビゲーションや小見出しはサイズを1~1.25remと中位の大きさに、font-weightを600と太字に設定することで、見出し・文章との差別化をしています。
これは主にリンクがある、ユーザーを誘導する上での優先度が高い文字に使われていた印象。
説明文や補足文は、0.875〜1remに設定し、行間はline-height:1.8にしており、見るときにあまりストレスは感じませんでした。
【写真・画像】
全体のトーンに合うように、寒色系にすることで全体に統一感が出ていました。
また、写真よりもイラストが多い印象。
そのおかげで、イラストの持つ柔らかさ・暖かさが寒色の持つ硬さ・冷たさとうまい具合にバランスがとれており、親やすい雰囲気が生まれています。
セゾンカードの強みである種類・デザインの多さを活かし、カードの写真を多く使っているのも特徴です。
そのため、カードを作りたいユーザーにとってはイメージが膨らみ、ワクワクするサイトになっているのではないでしょうか。
【装飾】
ボタンやアイテムの角をとることで、きっちりとし過ぎないようデザインされていると感じました。
ボタンも大きめにし、色でコントラストを作ることででユーザーを誘導しています。
一見、写真や画像が多くごちゃつきそうな感じもしましたが、その他の背景の装飾はなく、周りに十分に余白を取ることでスッキリとした印象になっておりました。
【効果】
カード紹介コンテンツではタブによる表示の切り替えとコンテンツが横にスクロールするデザインが使われ、各タブにはユーザーにとって同時に閲覧/操作する必要のないものが並んでいます。
そうすることで、少ない表示領域に多くの情報を収納させることを可能にし、ページ移動の手間を省くことでユーザビリティが向上しています。
またスワイプ対応にすることで、表示領域の小さなモバイル端末にも優しいデザインになっていました。
まとめ
クレジットカードを決める上で重要なのが、安心感と信頼感。
そのイメージをつけるために寒色系の配色は有効だと思いました。
しかし、それだけでは冷たいイメージだったり、近づきにくいイメージを持たれかねません。
そこで、このサイトではイラストを多く使ったり、丸みのあるボタンを使用することで柔らかさや温かみが生まれ、親しみやすいデザインになっていると感じました。
また、タブやカルーセルといったデザインはユーザビリティにも優れ、よく目にするデザインなので今後実装していきたいと思います。
