UIデザイナーのためのプロトタイピングツール

2020年9月18日 14:59

こんにちは。Financial Design 2チームのイハンソルです。
わずか数年前までは、開発が完了するまで、自分のデザインが実際にユーザーたちにどのように受け止められているか分かりづらかったと思います。
また、デザインのモーションを関係部署に説明するには口頭で「スルスルっとした感じ」とか「シュンッと出るように」などの表現を使いながらコミュニケーションをとったため時間もかかりました。
しかし、この頃はデザイン業務をより効率的に進めるための多彩なプロセスが開発されていますが、その中の一つがプロトタイピングです。

プロトタイピング(protoyping)とは？

プロトタイプ(prototype)は辞書によると「本格的な商品化に先立ち、性能を検証·改善するために簡単にコア機能のみを組み込んで製作した基本モデルや試製品」を指し、既に機械、自動車、建築、医療など様々な分野で使い勝手を検証する方法として使われています。なぜUIデザインでプロトタイピングが必要になるでしょうか？

プロトタイピングをする理由

簡単に上で述べましたが、UIデザイナーがプロトタイピングを必要とする理由は大きく3つあります。

1. ユーザーフローを確認し、欠落したページや追加で必要な機能がないか確認する
2. ページ間のトランジション(transition)及びインタラクション(interaction)のビジュアル的な完成度を高める
3. 関係部署とコミュニケーションを円滑にする

1に挙げたユーザーフロー確認のためには、クオリティは下がりますが、PowerPointでも検証することは可能です。
しかし、2と3を満たすためにはクオリティの高いアウトプットが得られるプロトタイピングツールを使う必要があります。
普段プロトタイピングと言うのは開発向けでコードを使わなければいけない領域でした。しかし最近はデザイナー向けのコードを使わなくてもページ間のトランジションやマイクロ・インタラクションのようなモーションをコントロールできるプロトタイピングツールがたくさんあります。
ここではデザイナーたちに知られているプロトタイピングツールをいくつか紹介します。

プロトタイピングツールのご紹介

1.Figma
Figmaは一般的によく知られているSketch、Adobe XDのようなUIデザインツールですが、プロトタイピングもすることができます。
ウェブ基盤のツールなので、インターネットさえあればどんな環境でも作業ができ、リアルタイムで共同作業も可能なので、多くのUIデザイナーに使われています。特に簡単な操作で素早くプロトタイピングができることがこのツールのメリットです。

2.Protopie
Protopieは、マイクロインタラクション・プロトタイピングツールです。
習得の難易度が低い反面、実現できる範囲は広く、デザイナーが最も馴染みのあるやり方で、繊細なインタラクションを実現できることがメリットです。
UIデザインツールのインタフェースに慣れているデザイナーなら簡単に入門できると思います。

3.Origami
OrigamiはFacebookが作ったプロトタイピング・ツールです。
FacebookがPaperアプリを制作した当時、デザイナーたちが複雑で独創的なアニメーションをコーディングチームの支援なしで直接テストできるように作られたそうです。
Origamiはコードは使いませんが、パッチ(patch)という「入出力」と「条件」の機能を持っているボックスをつなぐ操作でインタラクションを実現するので、プログラミング的な思考が必要なツールだと思います。

4. Principle
Principleは、Appleの元開発者が作ったHi-Fi（高忠実度、高再現性）プロトタイピング・ツールです。
直観的で習いやすく、表現の自由度が高く、タイムラインとキーフレームが設定できるというメリットがあります。
コードを使用しないためデザイナーも利用しやすいですが、macOS用に制作されたツールですので、Windowsユーザーには使い勝手が難しいと言われています。

5. Framer
Framerはもともとプロトタイピング・ツールとして開発が進められたツールです。現在はUI製作からプロトタイピングまで可能なツールで、最大の特徴はコードを使ってインタラクションを実現できることです。実現の範囲が広く、クオリティの高いプロトタイプを製作できることはメリットがですが、やはりコーディング知識のないデザイナーにとってはハードルの高いツールだと思いました。しかし最近Figmaのようにブラウザ版で簡単に操作できるようになりましたので一度使ってみてください。