マネックス証券様 「株式らくらく口座」お取引サイト インターフェイス設計

2012年10月10日 | 広報・PR・イベント運営担当

わかりやすさ、使いやすさに重点を置いたインターフェイス設計

株式らくらく口座:
http://www.monex.co.jp/ServiceInformation/00000000/guest/G100/raku/index.htm

2012年秋の新サービス(株式らくらく口座)リリースに伴い、PCサイトとスマートフォンサイトの取引画面のインターフェイス設計、デザインを担当しました。

ネット取引初級者~中級者を意識

買い注文画面(PC)

買い注文画面(PC)

ネット取引上級者の利用を意識しつつも、メインの利用ユーザーとして想定されたのは、新規で口座を開設し、初めて株取引を行う初心者の方、ある程度ネットでの株取引に理解のある中級者の方です。

株取引において、ユーザーが見るべき情報は複数存在します。企業情報、市況情報、株の値動き、取引高等、多様な項目が検討材料となります。最も重視される項目は何か、どのタイミングで確認するのか、画面の遷移を意識しながら、初心者の方にもわかるように情報同士の関連性を重視した配置を行いました。
また、スクロールをしない範囲で取引が完結するよう、ご担当者様と確認を行いつつ、パーツ同士の余白や大きさ等、細かな調整を重ねました。

マネックス証券様のブランドカラーの黄色と安定感を与えるブラックで、本格トレード画面としての印象を与えるデザインとしています。

スマートフォンでも、さくさく動き、気持ちのよい使い勝手を目指す

買い注文画面(スマートフォン)

買い注文画面(スマートフォン)

スマートフォンサイトでは、PCサイト以上に限られたスペースで何を表示すべきかを検討しました。
重要項目は目立つよう配置し、参考情報にとどまる項目は操作を経て表示させるようにすることで、すっきりとした構成となるよう整理しました。

またスマートフォンならではの操作感も重視しました。構成を固めた後は、html5、css3でモックアップを作成。ヘッダーにおけるメニュー表示や、フリックによる動きを、端末やOSごとに何度も確認、調整を続けました。

マネックス証券様にて、PCサイトモックアップでユーザーテストを実施いただき、「使いやすさ」という課題は、無事クリアできました。
リリース後、より多くのお客様に新しいお取引画面をご利用いただければと願っております。

ライター

おもてなしを科学するイー・エージェンシーでは、クロスデバイス分析によるユーザー単位の分析やオンラインオフラインを横断した分析など次世代の分析をサポート。また分析データを元にしたABテスト支援から、EC領域での購買、行動データを活用したレコメンドシステムなどを提供。 お問い合わせはこちらにどうぞ。

お問い合わせ

サービスに関するご相談は
こちらよりお気軽にお問い合わせください。

関連記事

e-Agencyの様々な情報をFacebookでお届けします!