![見出し画像](https://assets.st-note.com/production/uploads/images/166216100/rectangle_large_type_2_19c6d3379d2cf2746e4d3a5bd7b0ad5d.png?width=1200)
【Design Work01】海外トレンドのゲームUIデザイン×SaaSについて
1.はじめに
こんにちは!今回は、私が最近作成した「ゲームUI」と「SaaSサービスの融合」について考えた自主制作のデザインをご紹介します!
実は近年、海外では「ゲーミフィケーション」や「ゲームUI」と「SaaSサービス」の融合が検討されています。例えばOracleやHubspotなどでも取り入れられ始められており、社員のモチベーションの向上などが見込めます✨
![](https://assets.st-note.com/img/1734500204-a4KrDwkBvA9lWinZoqEP1Q7N.png?width=1200)
![](https://assets.st-note.com/img/1734500216-nESjJCLzdPUNxFk1htAQmHB6.png?width=1200)
![](https://assets.st-note.com/img/1734500229-EZ2zpT0q8M5XYCtuK4JdcByb.png?width=1200)
そんな中でも、今回はIT点呼キーパーさんなどが展開されている「タクシードライバーの管理業務」におけるSaaSサービスと、ゲームUIの統合について考えてみました!!
2.リサーチ
まずは、タクシードライバー向けのサービスを検討する上で、タクシードライバーが普段どういったモチベーション・やりがいで日々仕事をしているのかをオンラインで調べて、キーワードをまとめました。また、50~60代男性に1番人気のあるスマホゲームであるPokemonGOの機能調査を行いました。
![](https://assets.st-note.com/img/1734500490-pL0waYimX5BNysGjZVbU2SHx.png?width=1200)
3.キーワードの選定
その中でも、リサーチを元にキーワードを分類し、最終的に3つのキーワードを選定しました!!
#人との繋がり
お客様との繋がりや、社内の人間関係を大切にしているというリサーチ結果や、PokemonGOでも人との繋がりを深める機能が取り入れられていることから、「繋がり」を促進できる設計・デザインを検討しました。
#仕事に対する肯定
仕事に対して、社内やお客様問わず、「誰かの役に立っている」「誰かに認められている」という気持ちが重要視されている点から、「プロダクトを通して肯定感」を感じられる設計・デザインを検討しました。
#チャレンジと達成
「チャレンジ」をやりがいだと感じている層がいるという記事を元に、PokemonGOにも取り入れられている目標設定や競争要素を追加しました。また、タクシードライバーのモチベーションとして「報酬」や、「運転自体の魅力」が記載されていた為、「運転」を行うと「自身の報酬」に繋がるというチャレンジ・達成までの行為を明確化できる設計・デザインを検討しました。
4.デザインコンセプト
![](https://assets.st-note.com/img/1734503394-3eYzdqHfPpi14E6kmhN7oJZU.png?width=1200)
#CONCEPT
遊び心と暖かさのあるデザイン
#遊び心
モチベーションを高める為にも、積み木のようなグラフィックデザインをランダムに配置することによって、遊び心やワクワク感を演出しました。また、モチベーション向上の為にゲーミフィケーションに繋がる機能も追加している為、フッターやステップの表示などで、一般的なUIとゲームUIを組み合わせたような面白い形を多く採用しています。
カラーパレットに関しても、テトラード配色を使用し4色をカラフルに使用することにより、「楽しさ」を演出しています。
#暖かさ
リサーチから抽出した「人との繋がり」や「仕事に対する肯定」と言ったキーワードは、人の温もりに繋がるキーワードであると考え、人の暖かさを感じるような優しい笑顔のイラストを描きました。また、全体的に角Rを大きめにとって柔らかい印象のデザインにしました。
![](https://assets.st-note.com/img/1734501412-kYMAWbP4gX63wHSVrZdspRuK.png?width=1200)
5.機能紹介
![](https://assets.st-note.com/img/1734502766-kEdU78ijyY5mZ9qc0oKDTeWI.png?width=1200)
今回は、IT点呼キーパーさんにならい、スマホでの画面作成を行いました✨
#HOMEの機能について
![](https://assets.st-note.com/img/1734587442-bQfg231i7vSwlVestkazqHjy.png?width=1200)
1.目標報酬と現状の想定報酬の表示
メーター情報を元に、走行距離に対しての自身の想定給料を表示し、目標報酬と見比べることで、よりモチベーション高く仕事を実施できる機能を検討しました。
2.「モーニングミッション」の表示
ゲーミフィケーション要素を取り入れ、何か業務タスクがあった際にモーニングミッションという名前で、チェックボックスを用いたUIを使用することで、より気軽にかつついやりたくなるような設計にしました。
3.ホットスポットの表示
過去のデータからより売り上げに繋がりそうなスポットを時間帯別で表示することで、より効率的に稼げる設計にしました。
4.同僚の場所と状態の共有
社員が今どこにいるかと「運転中」なのか「休憩中」なのかを、公開したい人は表示できる機能を追加し、近くにいる同僚同士で一緒に休憩ができたりと「繋がりを強化する」方法を検討しました。
5.レベルの表示
自身のアバターに対して、モーニングミッションなど様々なアプリ上のミッションを達成することでレベルアップができる機能を設けました。それにより、ゲーミフィケーションのような形でモチベーションの向上を狙いました。
#DAIRY REPORT、MODALの機能について
![](https://assets.st-note.com/img/1734587430-uGkmPKFVwILtp9f4EXedU1aS.png?width=1200)
1.デイリーレポートの表示
昨日のデイリーレポートという形で昨日のサマリーを表示します。「売上目標に対しての達成感」や「売上ランキング」を通してチャレンジと目標達成を通してのモチベーションの向上を行ったり、「乗客からのいいね」や「乗客からのコメント」を通して、仕事に対する肯定感を得て、モチベーションに繋がるような設計にしました。
2.ミッション達成によるモンスターの付与・育てる機能
売り上げやいいね数などのミッション達成を通して、PokemonGOのような形でモンスターが付与される機能を追加しました。色んなモンスターを集めることによる達成感や、モンスターを育てることによる少しの自己肯定感を得ることができます。またPokemonGoのように色んな場所でのモンスター収集は危険な為難しいと思いますが、走行距離によってモンスターが付与されることにより、日々の運転を「冒険」だと思って楽しく取り組んでもらうことができるよう検討しました。
#CALLの機能について
![](https://assets.st-note.com/img/1734587415-c3iYRsUg6FTxQBHZklAI5M4z.png?width=1200)
1.ステータスの表示
アイコンに「休憩中」などのステータスを設置しつつ、お互いの都合の良いタイミングで通話ができ、仕事のことやその他雑談等もしやすくする為の機能を設けました。
6.まとめ
最後までご覧いただきありがとうございました☺️今回は、「ゲームUIのような面白いデザイン×SaaSという珍しい組み合わせ」に沿ってデザインを制作して行きましたが、今後も、海外のトレンドやUIUXの様々な情報を発信していきますので、ぜひいいね、フォローをお願いします!励みになります!
また、ぜひ他のデザインに関する記事も見てみてください✨
お役に立てるかと思います!!
![](https://assets.st-note.com/img/1734512480-f3xDJ6zKYrUsTehERXPOgFud.png?width=1200)
いいなと思ったら応援しよう!
![清水はるか|UIUX Designer](https://assets.st-note.com/production/uploads/images/166110090/profile_fbfa40651f2e5e8703bf51283fe725f8.png?width=600&crop=1:1,smart)