駆け出しデザイナーが新サービスのUI設計を0から担当した話
こんにちは、株式会社ラブグラフでデザイナーインターンとして働いているさくらです。
インターンを始めて、早11ヶ月。ほぼ素人の状態でデザイナーインターンを始めましたが、日々学びながら、クリエイティブ制作に取り組んでいます。
今回は4月1日にリリースしたLovegraphアカデミーのマイページ開発に関してのお話をします。
Lovegraphアカデミーとは、株式会社ラブグラフが提供する月額制の写真教室。120本以上の動画がいつでも見放題で、趣味で写真を勉強する人からプロのカメラマンを目指す人まで、累計600人以上の方が在籍。現役のラブグラファーが写真上達をサポートします。毎週多数のオンラインイベントを開催しており、交流も盛んなので全国にカメラ友だちを作ることができます。2021年の4月1日にリニューアルしました。
このマイページ開発は、駆け出しデザイナーである私が0から担当した初めてのUIになります。UI未経験だったこの私が、0から担当したことで学んだこと、反省したことなどをお話ししたいなと思います。まだUI未経験の人たちにも読んでもらえたら嬉しいです。
そもそもUIってなに？
「UI」という言葉が聴き慣れない方もいるかと思うので説明しておくと、UIとはユーザーインターフェイスの略称です。
簡単にいうと、今みなさんがスマホで見ているサイトの見た目や、使いやすさのことをいいます。
使いやすいようにどこにどうボタンを配置するか、どこに情報をおくかを考え、設計していきます。なので表側のデザインだけではなく、裏側のことも考えるのがUIデザインになります！
詳しく知りたい方はこのあと紹介する本を読んでみてくださいね。
UIデザインがはじめてだった…？
この開発に関わるまでUIに関しては、ほとんど何も知らない状態でした。
UI/UXデザインの領域には興味があったのでデザイナーチームにはそのことを共有していましたが、「何を勉強したらUIできるようになりますか…？」という状態で、右も左も分かりません。
まず読んだ本は『はじめてのUIデザイン 改訂版』。もしUIデザインに少しでも興味がある方は読んでみることをおすすめします。初心者にはもってこいの本なのに、無料でダウンロードできます。
いろいろな本を読んだり、世の中のサービスのUIをみて勉強をしつつ、開発担当の方やデザイナーの先輩方に頼りながらマイページ開発を進めていくことになりました。
第1段リリースで実装した機能
第1段リリースの実装では、ラブグラフアカデミーの最重要コンテンツである動画視聴をマイページで行えるようにすること、それと同時にユーザー登録や支払い周りなどの実装も行いました。
それまでSlackやnotion、Googleフォームなどを駆使してかなり人力で運用されていたサービスだったので、大幅なリニューアルプロジェクトでした。
ここからは実際にUI設計をはじめてからの学び、反省などをお話ししていきます。
UI設計する際に意識したこと
① シンプルかつ、0思考で操作できること
とにかく使いたくなるUIを目指すということが最も重要であると考えました。
Lovegraphアカデミーのマイページは、動画や写真（サムネイル）の埋め込みが多いことが想定されたので、デザインはシンプルに。操作もシンプルに設計しています。（※もっと使いやすくできないか常に考え、アップデートしていくので受講生の皆さんは楽しみにしていて欲しいです。）
兎にも角にも、直感的に理解できるUIを目指しました。
どんなUIを作るときでも、万人に受け入れてもらえるようにシンプルに削ぎ落としていく作業は必要だと思います。
☝️全体の遷移図。デザインはFigmaで作成しています。
② ユーザーのリテラシーを想像すること
Lovegraphアカデミーには10代から50代という幅広い年齢層の方が在籍し、写真を学んでいます。職業、性別もバラバラ、写真を学ぶ目的やゴールも様々です。かつパソコンではなく、スマホで学ぶ方が多いというのも特徴でした。
今でもサービスの一部でSlackを使用していますが、Slackを使うのははじめてという方が大半です。
はじめUIを設計する際に、私自身の感覚（20代のデジタルネイティブの感覚）で設計を行ってしまいました。想像する力が全く足りていません。
これでは全くユーザーに優しいUIデザインになっていないと気付いてからは、極力難しい動きを避け、どこに何があるのかできる限りわかりやすく設計していきました。また、うんざりするような入力なども極力減らしていきました。
各サービスによって、ユーザーの属性が異なるとは思いますが、必ず利用する人たちのリテラシーを考える時間を設けた方がいいなと思います。
③ 利用するユーザーのことを想像すること
これにはいろんな視点での意味が込められているのですが…
まず自分自身がユーザーだと想定して、UIを考えていくと欲しい機能や機能自体のイメージが湧いていきます。
開発者の立場であれば、ユーザーがこのUIを触った時のことを想像すると、ユーザーが思った通りに動く（操作する）のでワクワクします。
デザインのモチベーションがあがるし、いいものができるので想像は大事ですね。もちろんユーザーのことを考えるという意味でも想像はとても大事な要素です。
余談ですが、自分が想像するように人を動かせるのはUIの面白いところだなと思っています。私はUIのこの特性が結構好きです。
☝️毎日のようにこういったコメントでのやりとりも行っていました。
UI設計する際に反省したこと
① 意識したものの、想像が甘かった
想像というよりも想定かもしれませんが、遷移の部分でユーザーに優しくなかったり、開発チームにパスをしてからページが足りないと気がついたり…
もっと徹底的に抜け漏れなく想像しないといけないなと反省しました。
今回の反省の原因としてはPMの要件定義とUI設計が並行して行われていたこともあります。要件定義は全ての土台になっていくので、絶対にサボってはいけません。徹底的に要件と向き合うことから始まるのだと思います。
② コミュニケーション不足で冷や汗
個人的に仕事で雑なコミュニケーションをとってくる人が苦手なので、できる限り丁寧にコミュニケーションをとるように意識しています。
ですが今回に関しては、完全に不足しました。はじめてのUIというのもあってデザイン面に意識がいきがちになっていたのだと思います。
リリースが近づいてから「これ確認してないの！？」「その機能いれるって聞いてないよ！！」といったコミュニケーションが発生しました。
これではデザイナーもPMも、開発もハッピーではありません。
コミュニケーションをたくさんとり、わからないことは徹底的に聞くこと、そして気になることは丁寧に確認を取ることが大事だと改めて痛感しました。
はじめての挑戦に関しては、わからないことばかりなので作業の部分での反省は次回に活かして力に変えていきたいと思っています。コミュニケーションはどんな仕事で大事なスキルなので常に意識し続けたいです。
③ 開発への理解不足
これは個人的な問題ではありますが、全く開発の知識がない状態でした。
開発担当の方も、とても良い方でよしなにやっておくよと言ってくれます。ただその優しさに甘えすぎたのは大反省でした。
わからないなりの行動をするべきだったなと思います。
開発に関してはコーディングの勉強から始めていて、今後はフロントエンドエンジニアのことはわかるくらいには開発の勉強をしていきたいと思っています。
はじめてのUI設計を通して学んだこと
☝️ 私はいないけど一緒に頑張ったラブグラフのメンバーたち
今回、たくさんの反省がありながらも多くのことを学びました。
個人的に良かった点としては、自分らしさにこだわらずUIデザインに向き合うことができたことです。
UIは機能とデザインのバランスが命であり、使いやすさとわかりやすさが最優先されるべきだと思っています。課題を解決をするためにどういったUIにするか論理的に考える必要があります。
デザインはアートとは違います。自己満ではなくユーザーが喜ぶモノを作ることが使命なのです。
サービスを愛しながらチームメンバー、さらにはユーザーと一緒にサービス育てていくことができたこの期間はとても楽しかったです。
正直リリース前は吐きそうなくらい緊張しましたし、直前まで最高だと思っていたものが本当にこれがいいのかと今更ながらに思ったりもしました。
でも結果的にリリースをして、受講生のみなさんや関係各所の反応を見て本当に頑張って良かったなとホッとしました。
もちろんLovegraphアカデミーのマイページは発展途上ですし、まだまだ力不足で使いにくい点もあるかと思います。すでに第2段リリースは完了し、第3段のリリースも絶賛準備中です。
今後も改良を重ね、最高の写真教室を作っていきます。
もしLovegraphアカデミーで写真を学んでみたいと思った方は、こちらから！お待ちしております。
UIデザイン初心者のデザイナーが、UIデザインに初挑戦したお話でした。チャレンジを応援してくれて、サポートしてくれるデザイナーチームに感謝したいと思います。
最後に
私は普段、都内の一般私立大学に通っています。
実は、ラブグラフで出張カメラマンとしても働いていて写真も撮っていますが、写真もデザインも大学に通いながら学びました。
それぞれの専門学校には通っていません。写真はLGC（Lovegraphアカデミーの前身）で学びましたし、デザインはインターンをしながら学んでいます。もし写真やデザインを学びたい、仕事にしたいけど一般大学じゃ無理…？と悩んでいる方がいればいつでもご連絡ください。いくらでも相談にのります。
写真の世界も、デザインの世界もとっても奥深くて面白いです。もしこのnoteでUIデザインに興味を持ってくれる方がいれば嬉しいです。
写真はTwitterに載せているのでもし良かったら見てください。
#私が撮りたかった女優展#女優展2022entry pic.twitter.com/ISfbNAMyiH
— さくら｜写真とデザイン (@sa_pic_) May 31, 2021
そして株式会社ラブグラフでは一緒に働く仲間を募集しています！もし興味がある方はお気軽にご連絡ください。
お読みいただきありがとうございました！
お読みいただきありがとうございます！サポートいただいたものはカメラ＆レンズの購入代に当てさせていただきます。写真がちょっぴり変わると思います。