マルティスープ
Staff Blog

2023.03.24

AdobeXDによるプロトタイプ・モック作成

みなさん、こんにちは。
システム開発する中で設計工程や開発工程で画面イメージを固めるのに苦労した経験はございませんか？ PowerPointやExcelで画面項目を決めていっても、なかなかお客様やプロジェクトチーム内で認識があわず、 htmlなどのモックや製品に近いにプロトタイプを何度も作り直した経験はございませんか？

そのような時は、簡単に利用できるモックやプロトタイプを作成するツールを利用してみるのはいかがでしょうか？

当社では、プロダクトやプロジェクトの開発工程の中で、プロトタイピングツールのAdobeXDを使って、簡易的なモックを作成し、短時間で製品に近い画面イメージを作ってから開発を行うことがあります。

今回は、AdobeXDを利用した簡単なモックアップの作成方法をお伝えします。

1. AdobeXDをダウンロードする

アカウントを作成し、無料体験版や有料版に申し込む必要があります。

アカウント作成後、Creative Cloudからログインし、XDをインストールします。
※Adobeのサポートページはこちらになります。

2. 画面作成

XDを立ち上げ、新規作成したレイヤーに対して、画面構成を決めていくパーツを作成し、画面イメージを作り上げていきます。 もちろん、デザインが得意な人はこの段階でデザインも行っていくことになります。 ただし、技術的な調査をしっかりと行ってからデザイン部分に取り掛かるようにしましょう！！

今回は、下記の3画面を使ってプロトタイプを作成してみようと思います。

• ・ログイン画面
• ・トップ画面
• ・詳細画面

トップ画面には、せっかくなのでライブラリの地図を埋め込んでみましょう。手順は下記の通りです。

• ①プラグインのインストール
  プラグインの管理から「Fancy Maps」(無料)をインストールします。
  ※mapboxのアカウントが必要となります。
• ②Fancy Mapの初期設定
  プラグイン – Fancy Mapsを選択すると、プラグインが立ち上がり、mapboxで作成したアクセストークンをセットします。
  
• ③Fancy Mapの地図設定
  バナーの地域名または検索ボックスから表示させる地域を選択し、ズーム値の変更やマーカーサンプルを仮置きすることもできます。
  
• ④Fancy Mapの地図埋め込み
  「Apply Mapボタン」をクリックし、表示したいエリアをクリックします。
  

3. 画面の繋ぎこみ

項目2で作成した画面同士をつないで画面遷移できるようにします。「SIGN UPボタン」を押した際にトップ画面へ遷移するように設定します。
プロトタイプタブを開いていることを確認したら、「SIGN UPボタン」ボタンをクリックすると線が出てきます。 トリガーが「タップ」になっていれば、そのまま線を画面遷移させたい画面にドラッグ&ドロップするだけです。

トップ画面の詳細ボタンをクリックした際も同様に詳細画面に画面遷移させ、詳細画面では「戻るの←ボタン」をクリックするとトップ画面に戻れるようにします。

4. プロトタイプの公開

共有タブの「リンク作成ボタン」をクリックして、作成したプロトタイプを公開します。
パスワードをかけたり、特定の人だけ参照するようにできるなど公開範囲を指定できますので、調整してみましょう。

いかがでしょうか？

細かなデザインをしなければ、パワーポイントなどのOfficeソフトと同じように作成できるので、短時間で作成から確認までスピーディーにできますね。

うまく活用すれば、「静的なhtmlで作成したモックを作ったものの開発では使い物にならなかった」、 「開発できないものをたたき台としてお客様と議論していた」などの悲劇を減らせるかもしれませんね。

プロトタイピングツールを利用して、手戻りや開発工程の見直しなど業務効率化を目指していきましょう。
※もっと細かく学びたい方は、また当社blogでも掲載させていただきますが、Adobe XD入門なども合わせてご視聴ください。

バイ！