こんにちは、Financial Design 2チームです。
1月24日にLINE証券の新サービス「LINE CFD」がリリースされましたが、私たちはそのプロダクトデザインを担当しました。

CFD取引とは、FXと同様に取引開始時点から取引終了時点に発生した差額分を決済する取引で、一定の証拠金を当社に担保として差し入れ、売買を行います。レバレッジを利用することで、証拠金以上の金額の取引をすることができます。「LINE CFD（いちかぶチャレンジコース）」では、米国株をはじめ、世界主要国の指数、日本株、原油や貴金属など様々な金融商品に少額から投資が可能で、時間やタイミングを選ばずご利用いただけます。
https://linecorp.com/ja/pr/news/ja/2022/4090

この記事では、投資初心者には少し難しいトレードサービスを私たちがどのようにデザインしたかをお話ししたいと思います。

デザインによって実現したかったこと

既存のトレードサービスは、機能が多すぎて複雑なUIが多いと感じていました。トレーディングの知識が豊富な人でなければ快適に利用しづらいので、初心者でも快適に利用するにはどうしたらいいのかを常に念頭においてデザインリサーチを行いました。
特に参考にしたのは海外のサービスですが、結果として、トレーディングの知識が浅くても直感的に操作できて先進的な印象を与えられるようなUIをデザインを実現できたと思います。
立体的になりすぎず、優先度に合わせて要素の強弱を調節をすることで、わかりやすく操作できるようになっています。

デザインの注力ポイント

投資初心者がトレードサービスを利用する際に戸惑う点の一つに、売買時に選択しなければならない要素が非常に多いことが挙げられます。
経験豊富な投資家はどの要素が必須で、どのステップが不要か理解したうえでサービスを利用できますが、初心者の場合は選択肢が多すぎることが利用の妨げになりかねません。
この問題を解消するために、オプションの優先度を決めました。必須ではないオプションについてはアコーディオン形式にして非表示とすることで選択肢を減らし、心理的に容易に操作できるようにしました。
また、Webアプリにおけるトレード画面の数量選択も注力したデザインポイントの一つです。
注文をする上で必須かつ、最も基本となる選択オプションである数量を選択する際に 悩まず操作できるように、ユーザーのタッチゾーンまで考慮しました。
この数量選択の箇所についてはリリースされるまでに様々なデザインテストを行いましたが、ここでは3つのボツ案と最終案をお見せします。

Test1の場合、スライダーを配置して簡単に数量を増減できるようにしましたが、少ない範囲の数量を微調整する時に不便さがあり、不慣れなUIという点でNGとなりました。
Test2は数量の両脇にプラスとマイナスのボタンを配置していますが、片手で操作する場合、片方のボタンがやや遠くて操作が不便だったのNGとなりました。
Test3は数量の下側にボタンを配置し、レートについては右側に矢印の形で配置しました。数量についてはボタンが片手操作も簡単にできるのでOKでしたが、レートのアップダウンボタンが数量選択のUIと統一性がない点でユーザビリティを損なう可能性があるためNGとなりました。

最終的に数量のプラスとマイナスのボタンは下段に配置、さらにその下にバランスを合わせる形でレートのプラスとマイナスのボタンも配置したことで、統一性を持たせるだけでなく容易な操作と明瞭なUIに仕上がりました。

LINE CFDは、トレーディングの経験が浅い方にも快適にご利用いただけるよう様々な点で工夫をこらしています。
たくさんの方にご利用いただけると嬉しいです。

関連記事