【サイトが断然見やすくなる】UX改善について「SBI証券編」

証券会社のサイトを利用した時、こんなUXになったらいいのにと思ったことありませんか。

ここでは色んなシステムやサイト又はアプリのUX改修をかってに行い、より良いユーザービリティを目指し提案します。

今回は証券サイトSBI証券について考えてみました。本記事では「銘柄の詳細」画面を改修します。

SBI証券サイト「アップルインターナショナルの株価詳細の画面」

SBI証券のサイトでは、株、FX、投資信託などの金融商品をインターネットで取引できるサービスを提供しています。業種柄サイト内の情報が多く、それらがぎっしりと詰め込まれていて目的の情報を探し出すのに苦労する印象を受けました。

また、各ボタンのリンク先が想像しづらく、機能面で少々使いづらさを感じます。

そこで、ユーザーにとって「見やすい」「使い勝手がいい」サービスにするための改修案として以下を考えました。

• 幅広い年代のユーザーが、多くの情報を感覚的に理解できるデザイン改善
• 分かりやすく使いやすい機能の設計

まずは以下の画面案をご覧ください。

修正箇所です。

• ３つの検索欄を1つに統一
• メニューを左配置にし、押しやすいサイズに変更
• 【ポートフォリオ】などのボタンは、ログイン後に使用できるサービスのため削除
• 上記ボタンの代わりにログインボタンと口座開設ボタンを設置
• ボタンとテキストリンクの型を統一し役割ごとに整理し、余白を調整
• 銘柄の属性表示を視覚的に見やすい形に修正し、銘柄名のすぐ下に配置
• 株価情報をグリッドタイプとリストタイプに変更可能。
• チャートを利用率の高いロウソクチャートに変更（※チャートは他社様からのデータを引用していると思われるため、デザインの変更可能かは分からない。そのためヒアリングする必要がある。）
• 右のサイドバーのトンマナを統一。
• 【ご注意事項】【ヘルプ】をタブで表示。
• 各バナーをカテゴライズ。
• フッターにある【いますぐ口座開設】と【ログイン】をヘッダーへ移動。
• フッターにある【よくある質問】と【お問い合わせ】右サイドバーに移動。

現在の「アップルインターナショナルの株価」の画面では、全体的にフォントサイズの強弱がなくコンテンツの優先順位が分かりづらくなっています。

さらに、情報の配置や色にばらつきがあり、画面のどこに何の情報があるのかが視覚的に分かりづらい問題があります。ユーザーが求めている情報やボタンに辿り着くまでに時間を要すると感じました。

このままだとユーザーがストレスを感じ、離脱してしまう可能性があります。

そこで、SBI証券が幅広いユーザーに愛されるため、情報表示の切り替えをユーザー自身でグリッドタイプかリストタイプを選択できるようにし、各ユーザーに合わせた情報表示ができるよう改善しました。

ユーザー自身で表示タイプの選択ができるため、画面設定に愛着が湧くというメリットもあります。ここが長く愛されるための1つのポイントになります。

このようにユーザーの目線に立ち、「どこがストレスなのか」「求めているものは何か」を把握し、改善していくことがUIデザインの鍵となります。