AdobeXDでプロトタイプは作れる？
プロトタイプは「試作品」を意味します。例えばWebサイトを作成する時、いきなり作り始めて完成してから大幅に修正が必要になると、多くの費用と時間を要します。しかし、アイデアをビジュアル化したプロトタイプを作成しておくことで、前もってデザインのすり合わせができるのです。ユーザーがどんな体験をするのか前もって検証し、より快適なWebサイトを作成しましょう。
Part 1: AdobeXDでプロトタイプを作成する方法
① オブジェクトの配置
リピートグリット機能を使うとオブジェクトの複製や一括変更が簡単にできるようになるので、作業がスムーズです。リピートグリッドを選択したうえでコピーしたいオブジェクトをドラッグすると、簡単にコピーされます。マウスやショートカットでコピー＆ペーストをしなくて良いので効率的な作業が可能です。また、1つのオブジェクトに変更を加えるとコピーした分にも反映されるので、1つ1つ直す手間が無いのも便利なポイントです。ページを増やしたい場合はアートボードを追加することで増やせます。
②インタラクションの設定
デザインが作成できたら次はインタラクションを設定しましょう。インタラクションとは、例えば「次へボタンを押すと次のページへ移動する」などの画面の移り変わりを線で繋げてビジュアル化したものです。まずはプロトタイプモードに切り替えて画像とアートボードをリンクします。リンクできたら画面切り替え時のアニメーションを設定し、インタラクションデザインを付けましょう。
③プレビュー
細かな調節まで終わったらプレビューして実装された時の見え方などを確認してください。実際のWebページの様な見た目で確認できるので、ユーザー目線で細かなところまでチェックすることが大切です。プレビュー画面でも編集が可能なので、実際に目で見て直したほうが良い箇所があれば画面を確認しながら調節しましょう。
④その他の設定項目
サイト設計で重要な要素が「トリガー」です。トリガーとは、タップやドラッグなどの動きに関連して起きるアニメーションのことです。例えば、タップするとアイコンが表示されたりドラッグすると次のページに移動したりするアニメーションがこれに当てはまります。 また、アクションの設定も重要です。アクションには、トランジション（画面の移り変わりなど）やスクロール先（ボタンを押すとページのトップまで移動する）などがあります。スマートフォン用のページでは、1ページ当たりのボリュームが多いとページの移動が大変です。スクロールしてページのトップまで戻って別のページに移動すると時間もかかり、ユーザーにとってストレスとなりかねません。有名なサイトや作品集などを見て、使いやすいトリガーやアクションを研究してみましょう。
Part 2: プロトタイプの作成するツールMockitt
Wondershare Mockittは様々なデザインを作成できる総合的なデザインツールです。ここでは、Mockittを使ってプロトタイプを作成する方法を具体的に紹介します。
① ベースとなるサイズを選択
まずは用途に合わせて適切なサイズを選びましょう。Webページはもちろん、スマートフォンの機種に合わせたページサイズが用意されているので、選ぶだけですぐにデザインに取り掛かれます。
② オブジェクトの配置
図形やOS特有のアイコンやボタンなどのテンプレートがたくさん用意されています。画像や写真を配置したい場合、まず空の画像フレームを配置しましょう。配置できたら「画像をアップロード」をクリックすることで簡単に画像の配置ができます。
③ アニメーションの設定
オブジェクトが配置できたらアニメーションを付けてみましょう。フェードアウトやズームインなど、こちらも様々なアニメーションがテンプレート化されています。それぞれ何秒くらい動かすかということも設定できるので、適宜調節してみましょう。また、Mockittの便利なところは機能の細かさです。Webページを読み込むスピードは環境によって左右されます。遅延時間を設定することで読み込みが遅かった場合のシミュレーションもしてみましょう
④ プレビュー
いよいよプレビュー画面で確認してみましょう。プレビューボタンを押すと画面サイズに応じたデモ画面が表示され、本当にデバイスを操作しているように確認ができます。ユーザーが使うことを想像し、アニメーションにかかる時間やそれによって生じるストレスなども細かくチェックしましょう。
⑤ その他の便利機能
上記で紹介した機能以外にも便利な機能があります。例えば、チームで作業を進める時にいちいちファイルを受け渡ししていては面倒です。Mockittはオンラインで使えるツールなので、こまめに自動保存されます。また、共同編集もできるのでチームや上司、クライアントなど複数人で同時にリアルタイムで確認でき、作業効率が良いです。
プロトタイプは作る手間はかかりますが、準備しておくことであらかじめデザインの方向性を確認したうえで作業を進められるというメリットがあります。Wondershare Mockittでは誰でも簡単に使えるので、プロトタイプ作成の際はぜひ活用してみてください。
