大手メーカー様と自動販売機のデザイン・プロトタイピング及び開発を実施｜プロジェクト実施報告レポート
Tweet
Share
アンカーデザインは業界を代表する大手メーカー様におけるDXプロジェクトの一環としての自動販売機開発をデザイン及びプロトタイピングの手法によって支援させて頂きました。本レポートではプロジェクトの流れについてご紹介します。
プロジェクトの流れ
本プロジェクトではソフトウェア開発、ハードウェア開発を並行して進めておりますが、説明の都合上、下記のようにレポートを構成させて頂いております。
- 要件ヒアリングおよび簡易ワイヤーフレーム作成
- アプリUIおよびUXデザイン
- ソフトウェア開発
- ハードウェア仕様検討
- ハードウェアデザイン
- 実物大プロトタイプ作成
- 電気回路作成
本記事ではそれぞれのステップについて簡単にご紹介します。
1. 要件ヒアリングおよび簡易ワイヤーフレーム作成
クライアント担当者様から情報共有頂き現状を把握させていただいたのちにfigmaを利用して簡単なワイヤーフレームを作成させていただきました。
私たちが実施させていただく様々なプロジェクトで共通する点ですが、ヒアリングの内容をもとに「おそらくこう言うことだろう」「このようなシステムをイメージしているのだろう」と想定して、ラフな画面イメージを作成させて頂きます。
私たちはプロダクトを作る時、まずはクイックに目に見える形にすることが重要だと考えています。双方の持つイメージのすり合わせには、丁寧なドキュメントよりもプロトタイプの方が意味があることは珍しくありません。ここで作成する画面イメージは、おそらく多くの場合、ステークホルダーがイメージするものとは様々な面において異なりますが、それぞれが頭の中で思い描いているアイデアを重ね合わせた時に、何が一致しているのか？そして何が異なるのかを明らかにしていくことが重要であると考えています。
なお、本プロジェクトで開発したシステムは、自動販売機側に埋め込まれたタブレットを通してユーザーにサービスを提供する一方で、各所に設置する自動販売機はWebブラウザでアクセスするダッシュボードから制御可能となっています。そのため、ワイヤーフレームについてもタブレットを通してユーザーに提供する画面だけではなく、管理者に対して提供する画面も作成しています。
2. アプリUI及びUXデザイン
簡易ワイヤーフレームでおおよそのイメージについて擦り合わせを実施したあとは、実現可能なシステムとして成立させるため、より詳細な画面遷移やUI要素の検討に入ります。まずはカスタマージャーニーマップを作成してユーザーの体験を可視化します。アプリの中だけではなく、ユーザーがどのような行動をとり、どのようなタイミングでシステムとのタッチポイントが発生しうるのかを洗い出した上で、必要なインタラクションを検討していきます。その際には、UIとしてのインタラクションだけではなく、サーバーとどのようなやりとりが発生するか、またハードウェアなどアプリの外の世界と連携が必要な部分がどこで、その内容はどのようなものかについても整理していきます。
アプリの検討に際しては週1回で定期的なミーティングを実施しながらUIについてディスカッションさせていただきつつ、打ち合わせ以外にもFigmaのコメント機能を活用して細かな表示や仕様のやりとりをさせていただきました。Figmaは無料でアカウントを作ることができることと画面全体を全員が同じ環境で俯瞰して見ることができるなどのメリットがあり、弊社ではFigmaを活用してプロジェクトを進めています。
なお、お客様から要望をお伺いしてワイヤーフレームを作成するとかなりのボリュームのものになってしまいがちですが、MVPやPoCなど検証要素の強い段階では時間をかけて完璧なものを作りリリースするよりも、少しでも早くユーザーが触れるものを作り上げるかが重要であると私たちは考えています。そのためには、やりたいことを実現するために最低限必要な部分はどこなのかを見極めることがポイントとなります。運用開始後に（あるいはベータ期間を設けて）ユーザーからフィードバックを集め、ユーザーにとって価値のある機能を見極めながら継続的な改善を続けて行くことが価値の高いプロダクト・サービスを開発するための良い方法であると考えています。
3. ソフトウェア開発
前述した通り本プロジェクトではひとつのサービスを実現するために大きく分けてAPIサーバー、iPadアプリ、Webアプリ（管理画面）の3種類のソフトウェアを開発しています。システム開発フェーズにおいては厳密な仕様書ではなくfigma上のデータをもとにインクリメンタルに実装を進めていきました。
このような開発スタイルでは開発着手後もチーム内のコミュニケーションが多くなる点はデメリットとも言えますが、実際に動くものを触りながらプロダクト開発を進めていくことができるため、ユーザーにとって価値のあるサービスを比較的短期間かつ柔軟に開発できるメリットがあります。
なお、本システムのバックエンドはnginxとnode.js（express）、MongoDBで稼働しており、WebダッシュボードはReact、タブレットアプリはReact Nativeで実装させて頂きました。
4. ハードウェア仕様検討
次に、ハードウェア開発についてご紹介します。本記事ではハードウェアとソフトウェアを独立して記述していますが、実際にはハードウェアとソフトウェアを同時に歩調を併せながら検討し、デザインおよび開発を進めています。ハードウェアをどのようにして作るかについては様々な方法がありますが、今回のプロジェクトでは下記の3通りの方法を提案させていただきました。
- アルミフレームで筐体を組み立てる方法
- 木工造作で筐体作成する方法
- 既存の家具を改造する方法
それぞれの方法にメリット・デメリットが存在しますが本プロジェクトでは、費用やスケジュールなどを考慮して木工造作で筐体を作成することとしました。
筐体そのものをどのように制作するかだけではなく、自動販売機として販売する商品をどのようにして格納するかも重要な検討項目となります。下記はあくまでも一例ですが商品を格納する上では様々な評価項目が想定されますので、各要素のトレードオフを調整し構成を決定する必要があります。
- 在庫としてどの程度の商品を保持できるか
- ユーザーにとってどのような形が商品を取り出しやすいか
- ユーザーが希望する商品を簡単に探し出すことができるか
- 様々な商品の存在をユーザーに対して訴求できるか
本プロジェクトでは下記のように商品の保持方法についていくつかのバージョンのスケッチを作成し、フルサイズのプロトタイプを活用しながら検討し適切と思われる商品の保持方法について決定を行いました。
5. ハードウェアデザイン
本プロジェクトでは木工造作で筐体を作成することとなりましたので、それを前提に筐体のデザインを進めます。スケッチを作りながら様々なバリエーションを作りながら方向性を見出していきます。（下記は一例）
この中から方向性を定めて、さらに細部の検討を進めていきます。今回のプロジェクトではiPadを用いてシステムの操作を行うためタブレットをどのようにして筐体に固定するかについても検討しました。
筐体デザインの方向性が定まるとCADを用いてサイズ感の確認を行いながら詳細な寸法を決めていきます。
6. 実物大プロトタイプ作成
CAD上で人と筐体を並べてみても実際に３次元で作成してみると私たちが抱いていたイメージとちょっと違うケースはどうしても存在します。そのためCAD上でおおよその形状が定まったあとは1/1のフルサイズでプロトタイプを作成します。ハードウェア製品は特に、実際のサイズを作ってみないとわからないことが多いので最終製品を作成する前には実物大サイズのプロトタイプを作成することには大きな意味があります。
作成したプロトタイプはクライアント様とも共有させていただき、プロトタイプを囲みながらディスカッションさせて頂くことで、様々なフィードバックをいただくことができました。なお、本段階のプロトタイプはサイズ感や機械的な使い勝手を検証することが目的ですので外観の色や素材については最終版と異なる部分が多くあります。
7. 電気回路作成
本プロジェクトで開発したシステムには電気回路が含まれています。電気回路を構成する方法についてはいくつかあるのですが、費用や開発機関との兼ね合いでArduinoに独自開発のArduinoシールドを重ねて使用することしました。これによってファームウェア開発にはAdruino開発環境が利用可能となります。
回路作成にあたってはブレッドボードでの検証モデルを作成して動作試験を行った後にCADで回路図を作成してプリント基板を作成しています。
おわりに
これまでに説明させていただいたソフトウェア、筐体、電気回路を組み合わせることによってユーザー様に提供するサービスを実現することができています。
.png){kind=small}
