セオリーに反しても守り続ける、「GMOクリック FXneo」流のデザイン
24時間市場が動き、多額の取引が行き交うFX(外国為替証拠金取引)。その専用アプリとして、これまでさまざまランキングでNo.1を獲得しているのが「GMOクリック FXneo」です。どうやって小さな画面のなかで膨大な情報量を捌き、安全に取引を成立させているのか?そのデザインの視点や姿勢について伺いました。

松村健太郎 | GMOフィナンシャルホールディングス株式会社 デザイン広告運用部長
2001年WEB制作会社へ入社。モノづくりの現場作業(デザイン〜開発)をひととおり経験した後にディレクター、PMとなる。2009年にクリック証券株式会社(現GMOクリック証券株式会社)に入社、以後デザインチームの責任者としてWEBを中心としたクリエイティブ全般(CM・OOH・雑誌・ラジオ)、事業者側の運営・マーケティングに携わる。
澤田智佳子 | GMOフィナンシャルホールディングス株式会社 UI/UX担当
証券会社での営業経験を経て、設立間もないGMOインターネット証券株式会社(現GMOクリック証券株式会社)に入社。営業開始に向けた業務マニュアル策定や取引サイト構築など多様な業務に従事する。その後、UI/UX業務を一貫して担当し、現在はGMOフィナンシャルホールディングス株式会社にてグループ各社の多岐にわたるUI/UX関連業務を行っている。
野澤智久 | GMOフィナンシャルホールディングス株式会社 デザイン担当
ECサイトなどのデザインを経験後2015年にGMOフィナンシャルホールディングス株式会社に入社。GMOクリック証券のWeb取引サイトやスマートフォンアプリなどをメインにグループ各社のUIデザインに携わる。
月間200兆円の取引を支える「GMOクリック FXneo」
── はじめに、「GMOクリック FXneo」について教えてください。
松村:「GMOクリック FXneo」は、GMOクリック証券の店頭FX取引専用のアプリです。FXとは外国為替証拠金取引のことで、米ドルやユーロなど異なる国の通貨を売買して利益を狙う投資商品を指します。市場が24時間動き続け、レート(外国為替の価格)が常に変動する点が、銀行や保険などの金融商品との違いです。
サービスの取引規模は非常に大きく、ひと月の取引金額は約200兆円、1日あたりの注文件数は100万件にも上ります。アプリとしても、「みんかぶ」のFXアプリランキングで1位を獲得したりと、多方面で評価をいただいています。
── アプリで取引を行うお客様は、どれくらいの割合にのぼるのでしょうか?
澤田:全取引のうち7〜8割が、アプリからのアクセスです。以前はパソコンのブラウザからのアクセスがメインで、アプリは一部の機能のみで運営していた時期もあったのですが、現在はアプリ利用が多数を占め、機能もアプリの方が充実しています。市場が24時間動いており、その動きに素早く反応しやすいこともあって、アプリが支持されているのだと思います。
投資機会を逃さずに正しく数字を確認できてこそ、お客様は利益を得られる
── 金融領域のアプリとして、どのような点を特に重要視しているのでしょうか?
松村:「24時間常に数字が動く」ことに重きを置いて、インターフェースを設計しています。投資家であるお客様はレートを基準に売買の判断をするので、それらがどれだけ見やすいかが最も重要です。
野澤:決まった画面サイズの中に多くの数字情報を収めなければならないので、UIデザインには非常に苦心しています。扱う金額の桁が多く、10桁(10億円)以上のケースも考慮しなければいけませんし、お客様が誤認する可能性があるため、数字を省略したり改行したりすることもできません。取引するお客様の視線の流れに沿って数字を配置することや、確認すべき数字を大きくして視認性をあげるなどのサイズ調整、そして数字同士の関係性も考慮して配置するなど、細かな調整を行っています。
重要なのは「実際のアプリ上でどう見えるか」なので、エンジニアが実装したものを一緒に見ながら調整することに時間をかけています。

── これまでの施策のなかで、特に反響や手応えを感じたものは何ですか?
澤田:Apple Watchに対応し、アプリを開くことなくApple Watch上でレートやチャートを確認し、発注まで行うことができるようにしたときには、特に大きな反響がありました。アプリを立ち上げていない間もレートは常に動いているので、プッシュ通知やコンプリケーションなどを用意し、レートの変化にすぐに気づき、タイミングを逃さず発注までできるような導線を大切にしました。

松村:お客様は常に投資すべきタイミングを待っていますが、常にアプリを見続けているわけではありません。だからこそ、別のことをやっているときでも市場の動きに気づける仕組みをつくり、情報発信を行い、取引に無駄な時間を要さない導線を整えることで、お客様により良い形で投資の機会を提供できるようにしているのです。
「あの人ならどう使う?」投資家ひとり一人の反応を思い浮かべて
── 金融やFXなど、専門的な知識や視点を要する領域のプロダクトですが、どのようにドメインの知識やお客様のニーズなどを掴んでいるのでしょうか?
松村:いろいろな投資家の方々とお話ししてきた経験から、「投資のスタイルや取引で重視することは千差万別」という理解がベースとなっています。売買は短期で行いたいのか、長期で行いたいのか。チャートを見て取引したいのか、ニュースを主眼において相場の値上がりを読んで行いたいのか。本当に人によって異なる考え方をお持ちなのです。
澤田:私は証券会社での営業経験を通じて、投資家の方々の多様な考え方に触れてきました。当時お会いしたお客様を一人ひとり思い浮かべ、「あのお客様だったら、こう使いたいだろうな」「この操作方法だと伝わらないかもしれない」など、なるべく多種多様なお客様にご利用いただいている場面を想像し、多方面から見た「使いやすさ」を考えるようにしています。
セオリーに反するデザインが「正解」になることも
── お客様の資産を預かるというセンシティブな要素に対して、デザイン上どのような考慮や工夫をしているのでしょうか?
澤田:ボタン同士の距離が近く押し間違いやすかったり、押せる場所と押せない場所がわかりづらくないよう、細心の注意を払っています。たとえば、ボタンとボタンが隣接しているときは、タップ可能範囲をボタン全体ではなく部分的に細かく削って設定することで、誤タップをしないようにしています。ほかにも、1タップで即時注文可能な「スピード注文」機能では、誤発注を防ぐために画面を簡易ロックする仕組みを取り入れることで、安心かつスピーディーにご利用いただけるようにしました。

野澤:いわゆる「一般的なインターフェースのデザインのセオリー」が、「GMOクリック FXneo」には適していなかったり、お客様にストレスを与えてしまったりするケースも考慮する必要があります。
たとえば、ボタンを押したときのふわっとしたアニメーションは、一般的なUIでは心地よさを感じさせるものかもしれませんが、素早く注文することが重要な「GMOクリック FXneo」には適しません。実際にテストでアニメーションを入れてみたのですが、やはり邪魔に感じてしまいました。
ほかにも、画面上でお客様を迷わせないために、押せるものは1か所もしくは少ない方が良いとする考え方がありますが、「GMOクリック FXneo」のお客様にとっては、ひとつの画面からさまざまなアクションを一発で起こせることの方が重要です。一般的に見ると、情報の込み入ったUIだと思われるかもしれませんが、そういった特性を考慮したものなのです。

野澤:このように、デザイン的には一般的であったり正しいと言われているものを敢えて排除する場面も多いのが、「GMOクリック FXneo」の特徴かもしれません。フラットデザインなどは個人的にも興味があったのですが、お客様が誤認しないかを考慮した結果、採用とはなりませんでした。
澤田:私はそもそもセオリー自体を気にしないで、このプロダクトとしての使いやすさだけを考えています。
大切にしているのは「誰であっても迷わず使えること」です。幅広いリテラシーのお客様の利用を想定し、知っていないと使えない仕様にならないように意識しています。たとえば、ある画面を表示する際に「長押しすると表示できる」といった仕様のみの場合、長押しできること自体を知らなければ使えなくなってしまいます。そのようなことを避けるため、必ず一目でわかるようなボタンを別につけるなど、「知らなくても問題なく使え、知っていればもっと便利に使える」を考慮して設計しています。
ビジネスとのバランスを睨みつつ、使い勝手を守る番人であれ
── デザインの変更や改修を行う場合、どのようなプロセスで行っているのでしょうか?
澤田:どんなに小さな1か所の変更であっても、不具合を出さないように金融機関としてテストをかなり厳しく行っています。
野澤:発注までのステップをシナリオにして、最後まで問題なく達成できるか対応している各種デバイスでテストを行うのですが、サービス上かなり古い型のデバイスもサポートしているため、社内には常に100台以上のデバイスが用意されています。テストにかける工数は、おそらく一般的なアプリよりもかなり多いのではないでしょうか。
── とすると、新規機能の追加などは、さらに大変な労力がかかりそうですね。
澤田:そうですね。取引に必要な機能はほぼ実装されてきているので、今後取り組むものはプラスアルファとなる機能です。あとは、金融制度やルール変更で入れなければならなくなった要素などでしょうか。取引にあまり関係しないものは、不必要に意識させることなく現状通りに使っていただけるようなつくりを目指し、一方で「これは使ってほしい」と思うものに関しては、取引の邪魔にならない形で適切に気づいていただけるようなバランスを目指し、慎重に調整をしています。
── どれぐらい主張するかという点を、かなり丁寧に考える必要がありそうですね。
澤田:新しい施策やキャンペーンなどを行うときに「アプリ上で大きく表示したい」という要望が事業部からあがってくることもありますが、この点は本当に慎重に考えています。アプリに慣れ親しんだお客様の持っている操作性や操作イメージを阻害するような変更を行わないよう、「私自身がお客様の視点に立って現状の使い勝手を守る」という意識が強いかもしれません。
他商品のご案内やバナーなどを設置することも、プロモーションの観点から必要だと思います。究極的にはバランスが重要ですが、アプリ上の「土地」が少なくなっているなかで将来も見据えてどのように采配すべきかは、本当に悩ましい部分です。
── その際に澤田さんが持っているのは、 「お客様の意見をすくいあげる」といった意識なのでしょうか?
澤田:お客様からいただくご意見はとても貴重で大切なものです。ただし、それらをすべて採用するべきかというと違うのではないかと考えています。一部の意見を取り入れてデザインを変えたら全体の配置バランスが崩れてしまう場合もありますし、単体では良い機能でも、それを採用することでアプリ全体としての使用感やバランスを崩してしまうような機能であれば、採用しないという選択をしています。
本当に難しいことですが、金額の大小が違っても、使用頻度が違っても、お客様一人ひとりが大切なお金を扱っていることには変わりはなく、あくまで「すべてのお客様にとって使いやすいものを」が目指すべき理想です。
そのため、私はスマホアプリにおいてペルソナというものを意図的に設定していません。ペルソナを設定すると、その範疇に収まるお客様にとっての使いやすさだけにフォーカスしてしまい、ペルソナ像から外れたお客様にとっては使いにくいアプリが出来上がってしまう可能性があるからです。
守るべきは守りつつ、変化には前向きに
── GMOクリック証券のアプリとしては、以前「GMO-FX DASH」という別アプリがあったと伺いました。現在は既にクローズしていますが、この取り組みから得た学びやヒントはありましたか?
松村:別チームが担当していたので、当時のメンバーに振り返りのコメントをもらいました。
・どのような狙いを持ったプロダクトだったのでしょうか?
当時のスマホアプリの最新トレンドを踏まえ、且つiOSとAndroidでそれぞれのOS固有の動きを活かしたアプリを目指していました。
・うまくいかなかったのは、どのような部分が理由と考えていますか?
「GMOクリック FXneo」と違うものを目指したのですが、プロダクトアウトとなってしまい、ユーザビリティを大きく損なったことが原因だと考えています。具体的には、注文までの遷移ステップの多さや画面スクロールの長さなどがストレスを与えてしまったり、フラットなボタンを採用したことでわかりにくくなってしまったり、といった部分があげられます。

松村:良いチャレンジではあったのですが、総じてお客様からの評価が芳しくなく、経営上の判断もあって早々に終了となりました。このときの経験から、やはりデザインや使い勝手の急激な変更はせず、少しずつ積み上げていくなかで細かな調整を重ねていくことが最適解なのだと考えています。
一方で、評判の良かった「デモ画面」は「GMOクリック FXneo」でも取り入れるなど、この取り組みからの収穫もありました。
── デザインを変えることに絶妙なバランスが求められるなかで、今後取り組んでみたいことはありますか?
松村:FXは商品だけでは差別化が難しいからこそ、アプリの使用体験はとても重要です。「日常的に使いたい」「使っていてストレスがない」、そう感じていただけるプロダクトであり続けたいですね。ただし、新しいテクノロジーがどんどん出てくるなかでは、人の価値観も徐々に変わっていきます。今のやり方に固執せず、チャレンジする姿勢を持ち続けたいです。
澤田:取引を邪魔しない部分で、できればちょっとした遊び心を感じられるものを取り入れていきたいと思っています。たとえば過去には、ローディングアニメーションの最後に、おみくじのように一定割合で虹が出るようにしていたこともあります。証券会社のアプリはまだまだ堅いイメージがあると思うので、もっと投資に親しみやすさを感じていただけるようにしていければと考えています。
提供 GMOインターネットグループ株式会社
GMOクリック FXneo サービスページ
https://www.click-sec.com/corp/guide/fxneo/
GMOクリック FXneo アプリ紹介ページ
https://www.click-sec.com/corp/tool/fxneo_app/
Written By
