神話を覆しましょう。プロトタイプを作成しても、製品デザインのプロセスは遅くなりません。これは、低忠実度または高忠実度のプロトタイピングには当てはまるかもしれませんが、高速な高忠実度プロトタイピングツールには当てはまりません。
ProtoPieは、コード不要で高速な高忠実度プロトタイピングツールで、エラーをなくし、製品デザインのプロセスを加速します。デザイナーと関係者のコミュニケーションを改善し、創造性を育みます。
私たちのライブ配信「Prototyping: the Driver Behind Innovation」では、Picsartのプロダクトデザイナー2人、Lilit MkrtchyanとRoupen Babianに話を聞きました。彼らが要件を満たすためにProtoPieを選んだ理由を説明してくれました。下の動画を見るか、読み進めてPicsartのデザイナーがデザインプロセスでProtoPieを使う4つの理由をご覧ください。
概要
理由1. ProtoPieはユーザーテストを簡単にする
理由2. ProtoPieのコンポーネントは効率を高める
理由3. ProtoPieは開発者への引き継ぎを簡単にする
理由4. ProtoPieは学びやすい
理由1. ProtoPieはユーザーテストを簡単にする
Picsartは、フロリダに拠点を置くオールインワンのクリエイティブプラットフォームで、動画、写真、デザインのツールを提供し、ユーザーが自分の作品をソーシャルメディアで共有できるようにしています。
彼らのデザインチームは新機能をテストする必要があり、他のプロトタイピングツールを使って基本的なプロトタイプとして設計していました。それは、色相環の全スペクトルを表示し、ユーザーが色相と濃淡に基づいて色を選べるインタラクティブなカラーホイールでした。
ProtoPieで作成されたインタラクティブなカラースライダープロトタイプ。
チームは他のツールを使っていくつかの基本的なプロトタイプに取り組んでいました。しかし問題がありました。ユーザーテストを実施する必要があり、実際の製品を使っているかのように同じ体験をユーザーに提供したかったのです。
完全に作り込まれたプロトタイプを作ってテストすることもできましたが、それでは時間がかかりすぎます。他のプロトタイピングツールも検討されましたが、必要なスコープを広げる必要がありました。
そこでProtoPieに切り替えました。
「ProtoPieの柔軟性と視認性により、実際の体験のように見え、感じられるスムーズなインタラクションと複雑なフローを実現できました」とRoupenは語りました。「コンポーネント間のインタラクションとつながりを非常に細かく制御できるのです。」
彼らはFigmaで作成したシンプルなデザインをProtoPieに取り込み、ProtoPieを使ってより複雑な調整を加えることができました。
複雑なインタラクションをプロトタイプ化できることは、PicsartのデザイナーがProtoPieを愛用する多くの理由の一つです。
理由2. ProtoPieのコンポーネントは効率を高める
「デザイナーは他のプロトタイピングツールでは変数に制限があることがよくあります」とRoupenは語りました。「クリックするたびに何が起こるのかをプラットフォームに伝えなければならないのです。」
ProtoPieではそうではありませんでした。
あらかじめ作成されたコンポーネントをProtoPieの画面にドラッグするだけで、PicsartのカラースライダーをProtoPieで再利用できました。あとはコンポーネント同士をつなぎ、作業を始めるだけでした。
既存のカラースライダーは、あらかじめ作成されたコンポーネントをProtoPie Studioの画面にドラッグするだけで再利用できます。
ProtoPieによってコンポーネント同士を連携でき、スライダーの操作に合わせて色のスペクトルが変化しました。要するに、画面上の各コンポーネントが、それ自体として機能するようになったのです。
デザイナーは、スライダーを動かすと新しい色が作成されることをプラットフォームに指示する、入り組んだ詳細なコマンドをいくつも作成する必要はありませんでした。色相環上のカラースライダーのインタラクションによって、背景の色が変化しました。
「これは、ほかのどのプロトタイピングツールでもほとんど不可能です」とRoupenは語りました。
ProtoPie StudioでColor Pickerプロジェクトを再設計。
理由3. ProtoPieは開発者への引き継ぎを簡単にする
ProtoPieはユーザーテストを加速するだけではありません。デザインチームと技術チームの間の引き継ぎプロセスを大幅に加速し、簡素化します。ProtoPieのHandoff機能は、プロトタイプ内のインタラクションを実際の製品に実装する際のエンジニア向けガイドラインとして機能します。
「ProtoPieはデザイナーと関係者、開発者、クライアントとのコミュニケーションを高めてくれます」とLilitは語りました。「実際にプロトタイプを見せたときに、建設的なフィードバックを得られるのです。」
高忠実度のプロトタイピングツールは、製品デザインチームが実物のように見え、感じられるプロトタイプを作成するのに最適です。
しかし、インタラクションが複雑になるにつれて、引き継ぎの複雑さも増します。技術チームは、UXデザイナーの考えや感覚を推測しながら進めなければなりません。デザイナーは、混乱し苦戦しているエンジニアのチームとの終わりのないやり取りに巻き込まれがちです。
ProtoPieの開発者への引き継ぎプロセスは、はるかにシンプルです。
ProtoPieのHandoff機能を使うステップごとのガイド
「record」を押して、あとは見ているだけで、あらゆるインタラクションとアニメーションが細部に至るまで完全に記録されます。
ProtoPieのHandoff（インタラクションの記録）は、ProtoPieにおける驚くほど時間を節約できる機能で、デジタルデザイン版の、クラシック音楽の作曲家がプロトタイプの流れの細部まで一つひとつ書き起こすようなものです。
プロトタイプを受け取ると、開発者は「Play」を押し、画面上のあらゆるインタラクションを確認します。マウスの動き、サイズの拡大、曲線、アニメーション、継続時間、そしてどのレイヤーに対するインタラクションなのかまで見られます。
あらゆる細かなディテールが右側のパネルに表示されます。エンジニアは意図を推測する必要がありません。すべてをリアルタイムで確認できるからです。「これで創造性が高まります」とLilitは言いました。「プロトタイプが手に取れるようなものになります。」
ProtoPieのHandoff機能で、あらゆる推測をなくしましょう。
理由4. ProtoPieは学びやすい
学習曲線は、高忠実度プロトタイピングツールにおいてしばしば最大の課題です。
「デザイナーに朗報があります」とRoupenは語りました。「ProtoPieのUIと全体的なロジックは、Figmaのような他のデザインツールと似ています。Photoshopでさえそうです。」
ProtoPieには学習用の情報も豊富にそろっています。ProtoPie Communityは、仲間のデザイナーとヒントを共有したり、問題を解決したり、驚くほど革新的なプロトタイプを共有したり、フィードバックを得たりできるオンラインのエコシステムです。LilitはYouTubeチュートリアルが役立つと感じ、Roupenは記事のほうにより惹かれていました。
「私はウェブサイト上の記事を使って、ゼロから学びました」とRoupenは語りました。「記事は本当に詳しく、見やすくまとめられていて、優れた例も示してくれます。」
ProtoPie SchoolならProtoPieを簡単に学べます。ブログセクションのヒント＆コツカテゴリには、複雑なインタラクションの使い方からトリガーの作成、完全なフローのプロトタイピングまで、あらゆる内容を網羅した情報の宝庫があります。
ProtoPie Schoolで、無料でプロトタイピングの旅を始めましょう。
ProtoPieは、ユーザーテストを簡単にし、再利用可能なコンポーネントで効率を高め、開発者への引き継ぎを容易にし、学びやすさも備えているため、デザイナーに人気のツールです。今すぐProtoPieを無料でダウンロードして、Picsart、Meta、BMW、そして高忠実度プロトタイピングに使用している他の15,000社以上の企業に加わりましょう。
