Eyes, JAPAN Blog > 動くモックアップを作るためのアプリ紹介!

動くモックアップを作るためのアプリ紹介!

ishii

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

デザイナーがモックアップを初めて作る場合、PhotoshopなどのAdobeアプリが身近ということもあり、一番の選択肢に挙がるのがAdobe XDではないでしょうか。
しかし実際に他にも色々なアプリを使用してみると、モックアップのタイプによって制作に向いているアプリが異なります。

モックアップとは?
デザインプロセスを大きく4つに分けると、モックアップは3番目に当たります。
1 ラフスケッチ → 2ワイヤーフレーム → 3モックアップ → 4プロトタイプ
モックアップとは、コーディングや機能実装には時間が掛かるため、実装する前に完成イメージを共有するものです。
複雑な動きが必要なもの、例えば1画面で様々な操作があるアプリは、モックアップの時点でどのようにページが操作できるかのシュミレーションとして作ることがあります。

今回は、私が実際に動くモックアップを作る際に使用したことがある4つのアプリと、使用してみて分かったメリット、デメリットを紹介します。
モックアップ制作初心者向けから、一般的にはモックアップ専用でないアプリまで紹介しておりますので、是非ご参考ください。

この記事で紹介しているアプリ

  • figma
  • prott
  • Adobe Animate
  • Live2d

以下は、4つのアプリをそれぞれの観点から比較しました。
1画面で様々な操作、特徴的な動きが実装できるものは「動きの表現の幅」。
基本的な動きのみ必要であれば「学習コスト」や、この後紹介するモックアップタイプご参考ください。



なお「学習コスト」は、1日もあれば画面遷移の設定手順を覚えることができるものは低め、画面遷移の設定の際キーフレームの知識が必要だったり、ドキュメントを見ながらの学習が必要なものは高めとしています。
実装できる動きが多いアプリは覚える操作も多いため学習コストは高くなっています。(比較B)

次にそれぞれのアプリのメリット、デメリットと制作に向いているモックアップタイプをご紹介します。

figma

Figma: the collaborative interface design tool.

figmaは前述のAdobe XDと機能が似ているデザインツールです。
大きな違いとして基本無料、ブラウザ上で使える(デスクトップアプリも有)という点があります。
1年ほど前から使用していますが、新機能のアップデートも多い印象です。
無料プランでも十分使えるので、気軽に手が出しやすいのではないでしょうか。

Good

  • 共有リンクが発行でき、実機でシュミレーションが可能なためUI/UXの確認がしやすい
  • チームでデザインの共有ができる、コメントがつけられる
  • デザインツールなので、画面のグラフィックから作ることができる
  • 基本無料
  • But

  • クリック後の動きを作るたびにページが増えるので、ページが多いものには向かない
    (例えば、1ページ内にドロップダウンメニューとページ移行ボタンをつけると、2ページ分それぞれどう動くかの画面を追加制作する必要がある)
  • 学習コストが高め(レイヤーやコンポーネントの概念ついて理解するのは初めてだと難しい)
  • >レイヤーやコンポーネントなど、デザインツールの基本的な知識が必要なためWebデザイナー向け
    >モックアップタイプ:Webだと5〜10ページ向け

    Prott

    Prott – Prototyping tool for Web iOS Android apps

    Prottはスマホのアプリ、デスクトップアプリがあります。
    特徴として、上の動画のようにスマホで撮った写真からも設定できるのでラフスケッチの時点で流れを説明したい時などにも向いています。
    また、画像を選択して遷移先を選ぶだけなので操作もすぐ覚えやすいです。

    Good

  • 遷移先の設定が簡単
  • ページ遷移が多くてもOK
  • 無料プランあり(無料プランでは1ユーザー、1プロジェクトの制限有り)
  • But

  • 画面の画像を用意しないといけない
  • 細かい動き(ドロップダウンメニューなど)の設定ができない
  • >遷移が分かれば良いもの、初心者向け
    >モックアップタイプ:1ページ〜、アプリケーション系

    Adobe Animate

    Adobe Animate | Flash & 2Dアニメーションソフト

    本来はアニメーション映像制作に使われるアプリですが、使い方によってリッチな動きの画面が作れます。
    アニメーション「映像」になるので、実機での操作はできませんが、JavaScriptの知識が必要な複雑な動きも実装できるため、デザイナーがイメージを共有する際に活用できます。

    Good

  • どんな動きでも再現することができる(例えば2つ以上の動きが1画面に必要なもの)
  • リッチな動きが実装できる
  • But

  • 多くの機能があるため、操作を覚えないと初めは難しい
  • 映像出力のため実機操作ができない
  • 無料プランが無い(無料お試し期間あり)
  • >学習コストが高い、上級者、Webデザイナー向け
    >モックアップタイプ:画面の動きを重要視しているもの(メーターなど動きの変化が大きいものなど)、1ページ程度

    Live2d

    Live2D Cubism

    こちらも先程紹介したAdobe Animate同様、本来はアニメーション映像制作に使われるアプリです。
    最近ではVtuberなどキャラクターを動かすアプリとして認知されている方も多いのではないでしょうか。
    モックアップで使用している例はあまりありませんが、Adobe Animateより学習コストが低いため簡単なアニメーション制作に向いています。
    学習コストが低い理由として、画像を動かす事に特化しているため機能がまとまっており、直感的に動きを設定できることが挙げれられます。

    Good

  • Adobe Animateよりは学習コストが低め
  • アプリ上で画像の変形、色の変更等ができる
  • Photoshopと互換性がある
  • 基本無料
  • But

  • 動きを付けるためのパラメータの理解が難しい(ある程度の学習コストは必要)
  • 実機操作ができない
  • 多いページや、リッチな動きには向いていない
  • 画面デザインは別で制作する必要がある
  • >簡単なページ切り替えやアニメーション制作向け、中〜上級者、Webデザイナー向け
    >モックアップタイプ:画面の動きを重要視しているもの(メーターなど動きの変化が大きいものなど)、1ページ程度

    ちなみに元となるPhotoshopファイルの色を変更しても、Live2dに再読み込みすることで反映されるので変更にも強いです。

    最後に

    今回はモックアップ制作では普段使われないアプリも含め紹介しました。
    他のアプリで実装を断念した動きも、このアプリを使えば可能という選択肢としてみて貰えればと思います。

    Comments are closed.