Customer Spotlight

6

分で読める

Meet the Man Who Prototyped a Prototyping Tool with ProtoPie

Say hi to Ahmed Amr who took the task of creating a full workable prototyping app in 6 days to become one of the winners of the ProtoPie Playoff contest.

Adriana Diaz、 Social Media Manager
connect ai agents like claude, cursor and more to protopie via mcp

この7月に開催されたProtoPie初のDribbble Playoffコンテストの成功を受け、Khonok Leeがグランプリ受賞者に輝いたこの大会で、私たちはLeeに挑んで最終タイトルを競った他の上位3名の候補者に話を聞く機会を得ました。 長年の悩みの種となっていたアプリを再設計したBriandito Priambodoへの前回のインタビューはこちら。 最近、フード注文アプリのKoinz.appで働く若手プロダクトデザイナー、Ahmed Amrに話を聞きました。


Prototyping tool interface


プロトタイピングツールのインターフェース

UI開発者からプロダクトデザイナーへ

Ahmedはデザインの世界でしっかりとした基盤を築きました。もともとは自分のためにウェブページのデザインやダッシュボードを作りたかったUI開発者としてスタートし、早い段階でデザインを学んだことで、サイドでいくつかのフリーランス案件をこなしながら、非営利組織で自主的にグラフィックデザイナーとして活動するようになりました。それで特別な情熱が芽生えたわけではありませんでしたが、ほどなくしてUI/UXとプロダクトデザインという言葉に出会いました。「とても面白かったので、さらに調べたり動画を見たりして、個人プロジェクトを作り始め、プロダクトデザインのキャリアを続けることにしました。最終的に高校を卒業すると、プロダクトデザインの仕事に応募し始め、Koinzで最初の仕事を得ました」と彼は言います。

では、KoinzのデザイナーはどうやってProtoPieを知ったのでしょうか。「私がProtoPieを初めて使ったのは、2018年にポートフォリオを準備してフルタイムの仕事を探し始めようとしていたときでした。私はWindowsを使っていて、ジュニアデザイナーとして、Dribbbleのデザインのような派手なインタラクションを作りたかったので、プロトタイピング用のプログラムを探し始めました。すると、多くのデザイナーが使っているいくつかのプログラムを見つけたのですが、問題はそれらがMacOS専用で動作することでした。」

多くの定評あるデザインツールがMacOSユーザーにのみ優位性を与えており、Windowsユーザーにとっては不公平だというのは周知の事実です。では、Amrはこの課題をどう乗り越えたのでしょうか。「代替手段を探していたところ、ProtoPieはWindowsで動くことがわかりました。試してみると本当に素晴らしくて…学習コストが低かったんです。MacOSに切り替えた後も使い続けました。簡単で、より効率的だったからです。」

ProtoPieは、アイデアを提示して具体的な成果物へと落とし込む際に、デザイナーと開発者の間の重要なコミュニケーションツールとして機能することが証明されています。では、これはAmrにどんなメリットをもたらしたのでしょうか。「開発者へのインタラクションの引き継ぎで問題を抱えていました

2つの選択肢から選ばなければなりませんでした:

  • インタラクションがどうあるべきかを直接伝え、タイミングとイージング関数を提供する(締め切りに追われているとき)

  • プロトタイピングツールでインタラクションを作成し、デザインを開発者に渡す(より時間がかかりました)

そこでProtoPieの役割が登場します。時間の問題を解決してくれるので、私はわずか数分でインタラクティブなプロトタイプを作成し、すべてのタイミングとイージング関数を備えた状態で開発者に渡せます。」


Prototyping tool animation timeline


Ahmed AmrによるMockyアプリ

プロトタイピングアプリを作る

他にもたくさんの素晴らしく創造的なプロトタイプがある中で、どのデザインが今でも一番のお気に入りなのか気になりました。「私のお気に入りのプロジェクトは、ProtoPie Dribbble Playoffの Mockyアプリ です。これは、デザイナーがモックアップの中で自分のデザインをアニメーション化し、人々と共有できるWebアプリケーションツールです」と彼は言います。

Mockyアプリを作るきっかけになったのは、Rotatoというアプリでした。これは、デザインを美しいモックアップで見せてくれるものです。「ただし、アートボード全体のアニメーションがあらかじめ定義されていて変更できないという制限がありました。だから、アートボード内の要素をユーザーがコントロールできれば、もっと良くなるのではないかと思ったんです。」そしてこうしてMockyアプリは生まれました。「モックアップの中にデザインを入れ、テキスト、図形、画像を追加して、制限なく全体の構成の中で一緒にアニメーションさせることができます」と彼は言います。Mockyアプリのコンセプトは挑戦しがいのある大胆なものでしたが、より大きな敵となったのは時間との戦いでした。Dribbbleの締め切り前に提出したいという思いから、Amrは複数のコンセプトをスケッチする時間を見つけ、そのうえでわずか6日間でピクセルパーフェクトなプロトタイプを作る必要がありました。

少し競争の世界から離れて、ProtoPieがデザイナーが普段使う他のデザインツールをどう補完するのかを見てみましょう。Amrは、「ProtoPieは複雑なインタラクションとマイクロインタラクションをより速く作るのに役立ちます。だから、ステークホルダーやエンジニアと複雑なアイデアや解決策を伝えようとするとき、プロセスの主要な部分になるのです」と話します。これにより、Amrはプロジェクト全体を見直し、主な要件であるビジネス/個人的な影響、労力、締め切りに集中できます。そのため、スケジュールに余裕があるなら、要望の複雑さに関係なく、インパクトの大きいプロジェクトが優先的に進められます。

Mockyアプリを試してみる

デザインの未来

では、デザイナーはデザインの未来がどのようになると予測しているのでしょうか。Ahmedにとって、それはインターフェース中心のツールからウェアラブルデバイスやAR/複合現実へと重点が移っていくものです。「人工知能の助けによって、デザイナーはもうデスクトップやモバイル画面で複雑なインターフェースを見せる必要がなくなります。複雑なことのすべてはバックエンドで処理できるからです」と彼は説明します。