プロトタイピングは、UXデザイナーがアイデアを生きた現実へと形にすることを可能にする、プロダクトデザイン段階の重要な要素です。
しかし、多くのプロトタイピングツールには実験の余地がほとんどありません。シンプルすぎるか、複雑すぎるかのどちらかです。
デザイナーには守るべき締め切りがあり、ステークホルダーを感心させる必要があります。彼らには、コード不要で、リアルで豊かなインタラクションを作り出せる、高速なハイフィデリティ・プロトタイピングツールが必要です。
私たちは、マルチチェーンのウォレット間メッセージングアプリである G.host のデザイン責任者、Yasir に話を伺いました。
この包括的なケーススタディでは、パララックス効果や色から、チルト効果、そしてプロトタイプをクラウドで共有する方法まで、すべてを取り上げます。ProtoPie が Yasir にアイデアを試すことをどう可能にしたのか、そして最終的にそれらのデザインがどのように拡散したのかを紹介します。
Yasir Bugra, G.host のデザイン責任者
なぜ G.host は ProtoPie を選んだのか
私たちが使う製品から距離を感じるのは簡単です。そもそも、製品には命がありません。では、なぜ製品が私たちと関わる必要があるのでしょうか？
しかし、タッチは重要です。私たちが現実の生きた世界と関わると、その世界は私たちに反応します。風と光の中で草の葉が揺らめくこともあれば、近づくと猫が喉を鳴らすこともあります。日差しの中を動くと、影が落ちることもあるでしょう。
**Yasir: **私は、ユーザーが自分の製品に感情的につながれるようにしたいのです。そのために、私はタッチインターフェース向けの感情に訴えるインタラクションとパターンを設計しています。
タッチインタラクションを好むモバイル中心のデザイナーとして、プロダクトデザインの面でかなり複雑なプロトタイピング要件があります。
当然ながら、そのニーズを満たすためにさまざまなツールを試しましたが、製品はあまりにも原始的すぎるか、複雑すぎるかのどちらかでした。一流のデザイナーなら誰でも、デザイン段階で締め切りに追われているときに、コーディング言語を学んでいる時間などないことを知っています。
要するに、デザインツールと調和して動き、突飛なアイデアをすばやく形にできる、つまりコード不要のハイフィデリティ高速プロトタイピングツールが必要なのです。
私は Principle でプロトタイピングを始めました。これはまずまずの高速ローファイプロトタイピングツールですが、単純なインタラクションは素朴でした。その後、特定の製品のフローを検証するために Figma を使いましたが、アニメーションは精彩を欠き、複雑なインタラクションのデザインはいつも期待に届きませんでした。
前職の Frame.io でプロジェクトに取り組んでいたとき、同僚の一人が ProtoPie を紹介してくれました。
デバイスのセンサーにアクセスし、より現実的なプロトタイプでデザインをテストする必要がありました。ProtoPie により、私たちはデザインを現実的に検証でき、さまざまなアイデアを生み出せるようになりました。それ以来、他のツールに戻ろうとは思っていません。これほど優れたハイフィデリティのプロトタイピングツールはほかにありません。
ProtoPie が G.host を支えた方法
私がその仕事に就いてまだ2か月しか経っていませんでしたが、チームを奮い立たせたかったのです。
まず、オンボーディング画面のデザインから始めました。結局のところ、ユーザーを迎える方法は、ユーザージャーニーにおける重要な瞬間です。私は Figma でデザインを作成し、ProtoPie を使ってさまざまなアニメーションのアイデアを試しました。
当初は、ロゴと背景を動かすだけでシンプルなパララックス効果を作ろうとしていました。すると、ふと考えました。異なるセンサーを異なる要素に接続したら、どうなるのだろうか？
まだアプリの色は決まっていませんでした。私は突然、デバイスを持つ角度に応じてアプリの色が変わったらどうだろう？ と考えました。さらに、ユーザーが画面に表示される色を自分で決められたらどうだろう？ とも思いました。
期待で胸を躍らせながら、そのアイデアを素早くプロトタイピングし、Twitter で共有しました。それは目から鱗でした。アイデアは予想以上に大きな注目を集めたのです。実際、何人かのデザイナーは、とても刺激的だったと私に言ってくれました。それ以来、それは G.host のデザイン言語の中核的な要素になっています。
ProtoPie が最高のハイファイプロトタイピングツールである理由
ProtoPie なしでは、私たちはこれを実現できませんでした。追加のエンジニアリングコストなしで、そのアイデアを素早く、かつ現実的に検証できたのです。ユーザビリティテストもとても簡単になります。
ProtoPie の協働しやすさも見逃せません。以前は同僚とプロトタイプを共有するのは面倒で、もっと複雑な手順が必要でした。ProtoPie なら、QR コードをスキャンするだけで、ほら！プロトタイプをクラウドで簡単に共有できます。ProtoPie をダウンロードする必要すらありません。
プロトタイプをエンジニアに引き渡すのは通常は難しい作業ですが、ProtoPie のインタラクションレシピは大幅に時間を節約してくれます。エンジニアは、各トリガーとレスポンスのあらゆるアクションや詳細を網羅したビジュアルドキュメントで UI アニメーションを確認でき、アニメーションを任意の速度で再生し、どの値を使うべきかを簡単に理解できます。
ProtoPie は単に優れているだけではありません。私は 2 年間 ProtoPie を使っていますが、本当に気に入っています。インタラクションデザインのプロセスにおいて、多くの可能性のあるアイデアを引き出してくれるからです。実験する余地を与えてくれます。
ProtoPie は、実験のための最高のハイファイ高速プロトタイピングソフトウェアです。
実験は不可欠です。あえてデザインのアドバイスをひとつ挙げるなら、創造的なアイデアはたいてい異なるコンセプトのリミックスから生まれる、ということです。いろいろ試してかき混ぜなければ、新しいものは見つかりません。
自分で試してみよう
Yasir の刺激的なデザインの歩みを踏まえ、ProtoPie のエキスパートが、あなた自身のデバイスのネイティブセンサーを ProtoPie のチルトトリガーとカラー応答と組み合わせて使う方法を学べる簡単なデモを下に用意しました。ぜひ、あなた自身のプロトタイプで簡単かつ創造的に応用する方法をご覧ください！
ProtoPie とともに、無限の可能性を
15,000社を超える企業が、プロトタイピングのニーズを満たすために ProtoPie を信頼しています。デモを予約して、ProtoPie があなたのチームの成功にどう役立つかをご確認ください。
