わかりやすさ、使いやすさに重点を置いたインターフェイス設計
株式らくらく口座:
http://www.monex.co.jp/ServiceInformation/00000000/guest/G100/raku/index.htm
2012年秋の新サービス(株式らくらく口座)リリースに伴い、PCサイトとスマートフォンサイトの取引画面のインターフェイス設計、デザインを担当しました。
ネット取引初級者~中級者を意識

買い注文画面(PC)
ネット取引上級者の利用を意識しつつも、メインの利用ユーザーとして想定されたのは、新規で口座を開設し、初めて株取引を行う初心者の方、ある程度ネットでの株取引に理解のある中級者の方です。
株取引において、ユーザーが見るべき情報は複数存在します。企業情報、市況情報、株の値動き、取引高等、多様な項目が検討材料となります。最も重視される項目は何か、どのタイミングで確認するのか、画面の遷移を意識しながら、初心者の方にもわかるように情報同士の関連性を重視した配置を行いました。
また、スクロールをしない範囲で取引が完結するよう、ご担当者様と確認を行いつつ、パーツ同士の余白や大きさ等、細かな調整を重ねました。
マネックス証券様のブランドカラーの黄色と安定感を与えるブラックで、本格トレード画面としての印象を与えるデザインとしています。
スマートフォンでも、さくさく動き、気持ちのよい使い勝手を目指す

買い注文画面(スマートフォン)
スマートフォンサイトでは、PCサイト以上に限られたスペースで何を表示すべきかを検討しました。
重要項目は目立つよう配置し、参考情報にとどまる項目は操作を経て表示させるようにすることで、すっきりとした構成となるよう整理しました。
またスマートフォンならではの操作感も重視しました。構成を固めた後は、html5、css3でモックアップを作成。ヘッダーにおけるメニュー表示や、フリックによる動きを、端末やOSごとに何度も確認、調整を続けました。
マネックス証券様にて、PCサイトモックアップでユーザーテストを実施いただき、「使いやすさ」という課題は、無事クリアできました。
リリース後、より多くのお客様に新しいお取引画面をご利用いただければと願っております。
PICK UP
-
タグ: Firebase, Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム
アプリ + ウェブ プロパティとは? (4) Google アナリティクスのアプリ + ウェブ プロパティは早めの導入がお勧めな理由 -
タグ: Firebase, Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム
アプリ + ウェブ プロパティとは? 連載特集まとめ Google アナリティクスのアプリ + ウェブ プロパティ -
タグ: Firebase, Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム
アプリ + ウェブ プロパティとは? (3) Google アナリティクスのアプリ + ウェブ プロパティで見られるデータは? -
タグ: Firebase, Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム
アプリ + ウェブ プロパティとは? (2) 従来のGoogle アナリティクスとアプリ + ウェブ プロパティの違いは? -
タグ: Firebase, Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム
アプリ + ウェブ プロパティとは? (1) Google アナリティクスのアプリ + ウェブ プロパティはなぜ登場したのか? -
タグ: Google アナリティクス 360, Google マーケティング プラットフォーム, Webマーケティング・構築・運用, eコマース, コラム, セミナー&イベント
今年も過去最多 Google マーケティング プラットフォームのユーザー様懇親会「第7回 OMOTENASHI 2019」開催レポート