モバイル時代の今、E コマース アプリにますます注目が寄せられています。特に、E コマースのアプリは Web サイトよりもユーザー滞在時間が遥かに長くなるため、ビジネスを成功させるためにも重要な鍵を握っています。
それでは、どのように E コマース アプリを成功させることができるのでしょうか。アプリ内で顧客としっかりコミュニケーションを取るにはどうしたら良いのでしょうか。多くの企業が今、このような悩みを抱えているのではないでしょうか。
E コマース アプリを長く使ってもらうためには、頻繁にアプリを立ち上げたくなるようなコンテンツを継続的に発信していくこと、誰もがわかりやすい UI/UX を提供することが重要になってきます。
その中でも、今回はユーザーの使い勝手を左右する UI/UX デザインを Justinmind で作成していきたいと思います。たった 7 ステップだけで E コマースのアプリのプロトタイプを作成することができます。Justinmind を利用することで、誰でも簡単にプロトタイプを作成でき、作成から共有までの時間が大幅に短縮できます。
ステップ 1: Justinmind をダウンロード
デザインを開始する前に、Justinmind をお持ちでない方は 30日間無償の評価版を弊社 Web サイトからダウンロードできます。
ダウンロードが完了したら、Justinmind を立ち上げ新しいモバイル プロトタイプを作成します。Android または iOS を選択します。
ステップ 2: 画面を作成
今回は、画面を 4 つ作成していきます。Screen パレットに画面を 3 つ追加します。追加した各画面が紛らわしくならないようにそれぞれに分かりやすい名前を付けましょう。
次に、ホーム画面をクリックします。白紙のキャンバスが表示されます。
ステップ 3: Master を使用してピン留めされた要素を各画面に作成
上のアプリ参考画像のように、すべての画面は共通の要素を持っています。画面下には、ナビゲーション バーが、画面上には Wifi やバッテリーのアイコンなどを配置します。
Master パレット内で、新しい Master を作成します。Master に配置された Dynamic Panel 内の UI 要素を追加します。プロパティタブ内で、[Position] フィールドにいき [Pin to bottom] を選択します。
チップ: デザインに統一性を持たせるために、Font Awesome Icon kit を使用しています。Font Awesome Icon kit は開発元 Web サイトから無償でダウンロードできます。
ホーム画面に戻り、パレットから Master をすべての画面にドラッグ アンド ドロップします。これによりウィジェットを個々に作成しなおす必要がありません。
ステップ 4: スライド ショーを使ったインタラクティブな内容の追加
ホーム画面と初期画面でスライド ショーを作成します。ユーザーは、カテゴリやレシピ間をスワイプできます。
スライド ショーを作成するには、キャンバスに Dynamic Panel をドラッグ アンド ドロップします。各レシピに必要なパネルをすべて追加します。各カードをパネルに追加していきます。必要なスクリーンをリンクさせるためにホットスポットを書くためのパネルを含む必要があります。
スライドショーでカードを移動させるには、[On Swipe Left] と [Set Active Panel] イベントを各パネルに追加します。
ダイアログ内で、Outline パレット内の連続したパネルを選択します。[Transition Effect] オプションから [Slide left] を選択していることを確認してください。
下のカテゴリには、画面いっぱいの幅の Dynamic Panel を追加します。パネル内で、内容のグループを作成します。
Dynamic Panel を選択します。[Horizontal Overflow] で [Scroll auto] を選択します。
ステップ 5: データ グリッドおよびデータ マスターの活用
画面 1 を見ると、野菜が 1 つのカテゴリとして表示されています。画面 2 には、カテゴリをクリックした際の動作を表示し野菜の一覧を表示します。
データ マスターおよび データ グリッドを利用して、この効果を作成することができます。
データ マスターは、エクセル ドキュメントやスプレッドシートなどのようなものです。データ マスターには、表示したいデータが含まれます。データ グリッドは、どのようなデータベースもシミュレートできます。
データ マスターを作成するには、Masters パレットにいき [+] をクリックします。ダイアログ内で、フィールドを作成し名前を付けます。
Csv ファイルを追加したり、Justinmind 内に Master を作ったりすることができます。
データ マスターを作成した後は、データ グリッドをキャンバスにスライドします。コラムとセルを選択できます。プロパティ タブ内でデータ グリッドのデザインをカスタマイズします。
ステップ 6: 複数の材料を追加するために数量ボタンを作成
買い物のアプリを使っている際は、1 つだけではなく複数量購入することが多くあると思います。画面 2、3、4 からわかるように、数量ボタンを使用します。
Events、variables、expressions を使用して Justinmind 内に機能を作成できます。
以下があることを確認してください。
- [+] と [–] のアイコンがあること
- 数量が 0 になっているテキストウィジェットが [value field] にあること
[+] アイコンをクリックします。[Event] – [Set Value] を追加します。ダイアログ内で、インプットをクリックします。数値を計算に変更し、Expression を追加します。インプット (+ 機能) をドラッグし、最後の Expression フィールド内に数字の 1 を書き、[OK] をクリックします。プロトタイプをシミュレートし [+] アイコンをクリックすると、数字が増加していきます。
マイナス Expression を使用すること以外はマイナスボタンに対しても同じ手業を行います。作業が終わった後は、コンディションを追加します。正確な数量を得るためにもコンディションは非常に重要な要素になります。
コンディションのインプットは 0 以上に設定します。これにより、数量が 0 を下回ることはありません。
ステップ 7: UI スタイルをアレンジ
色の変更などをしていきます。
これで、E コマースのアプリの完成です。
Justinmind に関する詳細は、弊社 Web サイトをご覧ください。
また、30 日間無償評価版も弊社 Web サイトからダウンロードできます。
参考資料 「How to prototype a grocery shopping app in 7 steps」2018/9/4
