2018年2月9日

デザイン

シンガポールの人気アプリから学ぶUI

目次

  1. はじめに
  2. ofoとは
  3. ofoのUI
  4. まとめ

はじめに

本記事ではofoというシンガポールの人気アプリのUIを詳しく見ていきます。
ofoとはそもそもどういったアプリなのか、なぜシンガポールで人気があるのか、 どういったUIの特徴があるのかなど、色々と深掘りしてご紹介していきます。

また、bageleeではシンガポールで開催されたディベロッパーイベントのイベントレポートも公開しているので、興味がある方はぜひご覧ください!
【イベントレポート】Talk.CSS #19

ofoとは

ofoとは北京大学のサイクリングクラブに所属していた学生数名が立ち上げたバイクシェアリングアプリで、現在は中国、シンガポール、イギリス、アメリカ、オーストラリアなど世界数カ国でサービスを展開しています。

シンガポールでは、バイクシェアリングのアプリは3つあります。(正確にはもっとあるかもしれませんが、大きいのは3つです。)

シンガポールベースのoBike、そして中国ベースのMobikeofoです。

3社とも2017年からサービスを提供していますが、実際にバイクシェアリングの文化がシンガポールに根付き始めたのはここ数ヶ月ほどです。

バイクシェアリングの使用人口が増えている反面、壊れたバイクが増えたり、街のあらゆる場所にバイクが散乱していたり、社会問題にもなっています。というのも、シンガポールは日本みたいに「誰でも小さい頃から自転車に乗れる!マイ自転車を持っている!」という国ではないため、自転車の使用マナーや扱い方があまり浸透していないのです。

私は、2017年の頭ごろからシンガポールに住んでいますが、当初はoBike, Mobike, ofoの3社の中でoBikeが一番強い印象でした。もっと極端に言ってしまうとoBike, Mobikeは知っていましたが、ofoは存在自体あまり知りませんでした。

ここ最近になり、急激にofoに乗っている人を見かけることが多くなりました、また、プレイストアのアプリの評価を見ても現時点ではofoが一番評価が高いため、今回は本アプリを取り上げて、ユーザー数が急激にのびているUIを調査してみたいと思います。

2018年6月22日追記:
ofoは現在は日本のアプリストアでもダウンロードができるようになりました!

ofoのUI

まずofoを立ち上げると、このような画面が出てきます。

最初の画面はビジュアルを大きくのせ、「登録」と「ログイン」の2つのボタンを表示するアプリも多いですが、ofoではこれをタブ形式で表示させることにより、最初から「登録」の方のフォームが見えているような作りになっています。

また、「ログイン」の方ではメールアドレスの入力は必要なく、電話番号を入力するだけで入れるようになっているので、入力項目は本当に極限まで減らしているな〜というのが印象的でした。

登録後、簡単な4ステップチュートリアルがあります。

ここはそこまでユニークなUIではないですが、シンプルなイラストで分かりやすくまとめられていました。

また、チュートリアルの詳細分は全て2行以内に抑えられていて、とにかくユーザーがサクサク読めるようになっていました。

こちらがメイン画面です。
一見特に特別なところはなさそうですが、他のバイクシェアリングのアプリと比べてみましょう。

mobike

好き嫌いがあると思いますが、個人的には少しごちゃごちゃしているように見えます(主張が強い色を使用しているからかもしれません)。

obike

こちらも好き嫌いがあると思いますが、ofoと比べると押せる箇所が多く、少し迷うような気もします。

ここでもう一度ofoのUIを見てみます。

ここでまたofoのトップ画面を見返してみると、他の2つのアプリは画面の上あたりにヘッダーを設けていくつかボタンを置いていますが、ofoは(個人の設定ボタンのみは上にあるものの)画面の上を広く確保し、ユーザーが押しやすいであろう画面の下の方にボタンを集中させていることがわかります。

ofoはボタンの数とボタンを置く場所がすごく工夫されているように感じました。

ちなみに、街中にはこんな感じでofoの自転車が置いてあります。

「unlock」をタップするとQRコードリーダーが出てくるのでスマホを自転車にかざすと自転車のロックが外れ、使用できるようになります。

QRコードリーダーの画面でも、自転車のイラストが書いてあり、自転車上でQRコードが表示されている場所を何気なく示してくれています。

自転車を使用中は自分がどれくらい自転車に乗っているか、いくらかかっているのかなどを表示してくれます。

また使用後では、間違って自転車をアンロックしてしまった方の為に、「料金に不満がありますか?」ボタンなどがありました。

まとめ

以上、今回はofoというシンガポールの人気アプリのUIについてご紹介しました。

バイクシェアリングと言うコンセプト自体、シンガポールではまだまだ課題が多いですが、使用人口は増えており、アプリ自体もだんだん完成度が高まってきているので、これからがとても楽しみです。

1

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP