👀デザイナー目線で振り返る！アプリ開発

2024年8月23日 18:09

こんにちは！NEデザイナーのわたなべです。

NEのコミュニケーションデザイン部は横断部署で、デザイナーそれぞれが担当する事業部をもっています。

私の場合は新規事業開発室で、2024年1月にβ版をリリースした仕入れと卸のマーケットプレイス「encer mall（エンサーモール）」を担当しています。

encer mallは8月1日に弊社プロダクト、一元管理システムを提供する「ネクストエンジン」との連携アプリ「encer mall連携 for 卸会員」をリリースしました。

私もこのアプリの開発とリリースのためのプロモーションに携わらせていただきました。

今回はデザイナー目線でアプリ開発について書いてみたいと思います。

💡アプリのリリースによって実現したこと

「encer mall連携 for 卸会員」のリリースによって、ネクストエンジンとencer mallがシームレスに連携、ネクストエンジンのユーザーに新たな販路拡大のチャンスを提供できるようになりました。

たとえば、楽天などのECモールに出品している自社の商品を数クリックでencer mallに出品できる、つまりはカンタンに卸売り市場に参入することが可能となります。

小売と異なり業者向けに販売ができるため、大量受注やリピート買いが期待できます。

👩‍💻開発体制と進め方

体制やツールについてまとめてみました。

💪チーム体制

プロダクトオーナー　1名　
エンジニア　6名
デザイナー　2名

💻タスク管理

Asana

🎨デザインツール

Figma

🗓️期間

約3ヶ月

🏃開発の進め方

開発はスクラムを組んで進めました。

プロダクトオーナーがユーザーストーリーをもとにバックログを立てる
リファインメント
- 毎日17時から45分間実施
- ユーザーストーリーを実現するために、どんな機能が必要か、またその優先度などについてディスカッション
- チームメンバーの疑問が解消され、共通の認識が持てている状態を目指す
プランニング
- 実際に手を動かすためのタスクへ落とし込む。だいたい1日でやり切れる粒度に分割

1〜2を繰り返し、3はエンジニアとデザイナーで分かれ、それぞれで作業を進めました。

👩🏻‍🎨デザインを作成する上で意識したこと

🎯ユーザー体験を考慮したデザイン

ユーザーがアプリを起動するところから「このボタンをクリックしたら次どうなるか」が1アクションごとにわかるようにフローを作成しました。

「検索する」ボタンをクリックし、次の画面で検索結果が出てくることがわかるフロー図

🛁フローを作成する際に工夫した点

誰が見てもわかる、を目指して作成しました。

この画面でユーザーが何をしようとしているのかがわかるように、画面デザインの上に明記
ユーザーフロー（本筋）と関連画面・説明画面を分けて作ることで、本筋がゴチャゴチャして見づらくなることを防いだ
Comment Noteで説明を補足

関連画面については特に問題なかったですが、説明画面については見落としがあったので、改善が必要だな〜と考え中です。

🔧便利なウィジェット・プラグイン

デザインの仕様などをエンジニアに伝えるために便利だったのが、「Comment Note」です。

コメントが何を示しているのかを5つの項目から選ぶことができます。

「仕様」「作業者メモ」「修正」「レビュー」「要確認」から項目を選ぶことができます。

コメント内でメンションができないので、Figmaのコメント機能と合わせて使うのがおすすめです。

また「Auto Flow」にもめちゃくちゃお世話になりました！
ボタンなどのUIと次の画面を繋ぐ、フロー作成に欠かせないプラグインです。

UIと画面を繋ぐ矢印がAuto Flowによるもの。起動した状態であれば画面を動かしてもしっかり追従してくれるデキるプラグイン（有料版にしたい）

🙌アプリ開発に携わってみて

エンジニアと連携し、スクラムを組むのは今回が初めての経験でした。
中でも学びが大きかったことに絞って書いてみました。

🥺最初から完璧に作ることは難しい

あとから要件が追加で出てくることで手戻りが多く発生したため、改善のためにエンジニアに相談を持ちかけたことがありました。

そこでわかったことは、いくら時間をかけてデザインを作り込んでも実際にページとして見て、さわれる状態になって初めてわかる考慮漏れがあるということです。

手戻りは発生する前提で、少しでも早く実装し検証することが大事だということがわかりました。

🐥まずは小さく作る

そして早く実装し検証をするためには、小さく作ることが必要です。

スクラムをうまくプロセスに落とし込めず、今考えるとほぼウォーターフォール型に近い進め方をしていました。

ただこのやり方では、バックエンドの開発は進んでいるのに、デザインができていないというズレが発生してしまいます。
結果、検証が遅れ本来開発する予定だったものの優先度を下げたり、機能を限定してリリースしなくてはならなくなります。

ページ単位にこだわらず、リファインメントでディスカッションした機能やパーツなどから、まずは小さく作って検証する。
検証が早い段階でできることで、ユーザー体験という観点でも、きっとより価値のあるプロダクトにすることができると考えます。

✍️まとめ

UI/UXデザインの経験が浅く、ディレクターとしても未熟でうまくいかないことが多々ありましたが、毎日が学びの連続で、プロジェクトにジョインし開発に携われたことをとてもありがたく思っています。
サポートしてくれたエンジニアや、プロダクトオーナー、CDDのメンバーにとても感謝しています。次に活かすぞー💪

そしてアプリはまだリリースしたばかり、これからがスタートです。
プロダクトをより良い形にし、ユーザーに価値を届け続けられるように邁進していきます！

NE株式会社はデザイナーを募集しています！

各事業、顧客に価値をもたらすデザインチームとして一緒に活躍したいという方を募集しています。詳細は採用ページをご確認ください。
「領域や事業はまだ分からない」「とりあえず話だけ聞いてみたい」という方はカジュアル面談も可能です。

この記事が気に入ったらサポートをしてみませんか？