こんにちは、開発部の原口です。普段はiOSアプリの開発をしています。

今回はUI/UXのお話。

あなたは任されている仕事の中で本当に自分のやってみたいことができていますか？スタディストには「やってみたい」を実現できる環境があります。　

今回私が携わった新機能開発プロジェクトは、ユーザーストーリーやユーザーテストといったUXデザインの手法を取り入れることで、これまで以上に洗練された機能へと仕上げることに成功しました。

プロジェクトの要件としては、もともと「スナップショット機能」という動画から任意の位置の静止画を切り出す機能がすでにあり、そこに指定した範囲の動画も切り出せるようにするというもの。

下の2枚の画像はどちらもプロジェクト要件に沿って考えた同じ画面のUIデザインです。

左側のBefore画像はUXデザインを取り入れる前に考えた初期段階のUI案、そして右側のAfterはUXデザインを取り入れて完成した最終デザインです。ご覧の通り、ガチャついて何をしていいのかわかりにくいUIから（ボタンの位置も微妙です）、整然とし説得力のあるUIに仕上がりました。

静止画の切り出しと動画の切り出しをひとつの画面内でできるようにし、その上シンプルな操作性も求められました。それはそれはとても難しいことでした。

そこで巷で話題のユーザーストーリーを取り入れてみることに！（人生初）。チーム全員で書籍などを参考にし見よう見まねでやってはみたのですが迷走。チームのひたむきな努力を感じた上司の提案で、UXデザイナーの佐藤純さんをお招きしワークショップを開いてもらえることになりました！

兼ねてから私がやってみたいと思っていた「UXデザインの手法」を本格的に取り入れ、ワークショップでその全ての工程を学び、それを即実践でアウトプットすることができました。

【今回のプロジェクトで行った工程】

①ペルソナを作成：　スナップショット機能をよく使いそうなお客様の役職から年齢、性別、性格、ITリテラシー、名前を決めました。ちなみに、下の名前まで決めることも重要なことだそうです。

②ユーザーストーリーを作成： 2日間に渡りチームで作り上げました。会議室の壁一面に付箋を貼っていき、ユーザーになりきって機能の動作手順を確認していきます。どのシーンでどんな機能があればスムーズになるのかが明確になりました。（例えば、切り出した画像の削除はどのタイミングで行いたいか？動画を切り出した後のUIはどうなっていると望ましいかなど）

③ユーザーストーリーをもとにUI案を作成： ユーザーストーリーがあることで、メンバー全員が操作手順を共有し、ブレることなく議論を進めることができました。今まで時間をかけてもできなかったことがすんなりとうまくいったのです！

④実装： UIはとてもシンプルになりましたが、さすがに実装は複雑でしたwww

⑤社内ユーザーテスト1回目： 社内の他部署にも協力を得て約半数の方にユーザーテストを行うことができました。今回開発した機能を初めて操作する方の様子は、意外なところに使いにくさを感じていたりと見るだけでも勉強になります。

⑥分析・修正： ワークショップで学んだ分析方法をもとにユーザーテストの結果を分析し、必要と判断した問題点を修正しました。

⑦社内ユーザーテスト2回目： 1回目のユーザーテストの結果を反映したUIで３人の社員にテストを行いましたが、ここでも新たな発見がありました。ユーザーテストをしっかり行うことでファーストリリースからクオリティの高い機能に仕上げることができたと実感しています。

⑧修正・検証： ようやく検証です。実装が複雑な分、検証項目もたくさんありチーム一丸となって乗り切りました。

⑨リリース： 「ベターではなくベストなUIができました」と社内でも評価の高いUIが完成しました。これからのお客様の反響が楽しみです。

さて、UXの定義とは実はまだはっきりと確立されてはいないそうです。しかし、今回実際にやってみた上での大きな収穫は、議論がブレることなく機能開発が出来た事。「どんなユーザーがどのシーンでどのように機能を使用するか」という意識を社内で共有することでそれを実現できました。

これからもUXデザインの手法を取り入れ、その経験の中からUI/UXの精度を高めていきたいと思います。

私のやってみたかった事が実現し、プロジェクトに新たな推進力が生まれた事はとても充実した感覚でした。そんな「やってみたい」ことを後押ししてくれる環境があるスタディストでは、UI/UXに興味のあるエンジニア、デザイナーを募集しています！

ぜひ、私たちと一緒にあなたのやってみたいことを実現させてみませんか！これまでに得た知識を最大限活かしたい方、能力をさらに高めたい方、ぜひ一度遊びに来てください。