INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Customer Spotlight

7

分で読める

Reimagining, Redesigning & Reinventing Email App Interactions

Meet Briandito Priambodo and learn how he views product design and redesigned something that’s been a long-lasting pain point.

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

昨年7月、ProtoPieは初めてのDribbble Playoffコンテストを開催し、世界中の多くのデザイナーが参加して、自身の最高のプロトタイピングスキルを披露しました。厳しい審査期間の後、 Khonok Leeがグランプリ受賞者に輝きました。 しかし、Khonok Leeだけが手強い挑戦者だったわけではありません。参加者の中から、その印象的なプロトタイプで3人のデザイナーが頭角を現しました。

私たちは、次点入賞者の一人であるBriandito Priambodoとお話しする機会を得ました。彼はWegoというオンライン旅行会社のシニアデザイナーで、陽光あふれるシンガポールに拠点を置いています。

ProtoPieとの出会い

ProtoPieとの最初の出会いは2017年でしたが、さまざまなプロトタイピングツールを試していた2018年初頭になるまで、彼がProtoPieの世界に本当に深く入り込み、あらゆる機能を試すことはありませんでした。『ワークフローを改善できて、しかも他の会社でも広く使われているツールを見つけたかったんです。そうすれば、いろいろなツールを覚えなくて済みますから』とBrianditoは語ります。いくつかのサイドプロジェクトを作るために各ソフトウェアを2週間ずつ使ったあと、数か月後にはProtoPieとFramerの間で行き来するようになっていました。どちらも彼のワークフローに合っていたからです。『最終的にFramerのサブスクリプションを契約したのですが、理由は当時、多くの会社がFramerに注目していたからです。ProtoPieはまだ新しかったので、知っている人はそれほど多くなかったと思います』

試用期間後にBrianditoがなぜ契約しなかったのか気になった私たちのチームは、追加アンケートを送ってシニアデザイナーに連絡を取りました。すると、丁寧なフィードバックが返ってきて、半分冗談めかしてこう言ってくれました: 『追伸:1年間50%割引にしてくれたら、必ずライセンスを買うと約束します。聞いてみるだけなら損はないですよね?』。そしてその一言から、ProtoPieとBrianditoの素敵な協業が始まり、その結果 チュートリアルコンテンツ が生まれました。『それ以来、私が頼りにしているプロトタイピングツールはProtoPieです。この話の教訓は、求めよ、さすれば与えられん、です』と彼は言います。

では、ProtoPieはシニアデザイナーのワークフローにどのように自然に組み込まれているのでしょうか?『私はSketchを使いながらProtoPieで作業しています…。チームと私は、必要を満たすプロトタイプを問題なく作成できました。行き詰まって何かを学ぶ必要があるときは、いつでもProtoPieのドキュメントが助けてくれます!』


Small corner of home office


リビングルームの片隅:サイドプロジェクトを行う自宅オフィスです。私は物事をミニマルに保つのが好きです。

プロダクトデザイン

プロダクトデザインはさまざまな業界で広く使われており、定義も幅広いですが、Brianditoはそれを簡潔にこう定義します。『一般的に、私はデザインを問題解決だと考えています。プロダクトデザインとは、製品を媒体として人々が自分の問題を解決するのを助けることです』。では、それはWegoの成功にどう貢献しているのでしょうか?『私たちのサービスの中核は、ウェブサイトとモバイルアプリにかかっています。だから、プロダクトデザインは私たちの仕事に欠かせません。シンプルで、使いやすく、役立つ製品を作るためにプロダクトデザインが必要なのです』

Brianditoのデザインプロセスは4つのステップで構成されています。問題を見つける、問題を検証する、解決策を見つける、そしてそれらの解決策を検証する、です。このうちProtoPieは、ユーザーテストという2つの重要な側面と、ステークホルダーにアイデアを提示して売り込むことを支援してくれます。『ProtoPieを使えば、実際のアプリのインタラクションを再現し、プロトタイプがぎこちなかったり使い物にならなかったりする心配をせずに、適切なユーザビリティテストができます』とBrianditoは言います。『一方で、プロトタイプを提示するときは、概念やアイデアを説明しやすくなります。私はステークホルダーにプロトタイプを少し触ってもらう時間を設けるのが好きです。たいていの場合、彼らはそのアイデアを気に入ってくれます』

良いプロトタイプの特性については、実際のアプリのように動く必要も、華やかで凝ったインタラクションで設計されている必要もなく、目標に近づくのを助けるものであるべきだと彼は考えています。『ユーザーのフィードバックを得ることかもしれませんし、ステークホルダーを説得することかもしれません。あるいは、単に概念を証明するだけでもよいのです。要するに、より良い製品を作る助けになればいいのです』


Prototype showing interactions of news-app


ニュースアプリのインタラクションを探るために作ったプロトタイプ

Dribbble: ニュースアプリのワイヤーフレーム探索


Two options comparing an interaction idea


インタラクションのアイデアを並べて比較したもの:

Dribbble: コピー用メモのインタラクション詳細

勝つためのリデザイン

Brianditoは、定番で広く使われている有名なメールアプリをリデザインすることで、ProtoPie 5.0 Playoffコンテストへの参加を選びました。彼にひらめきを与えたのは、自分自身のメールとの格闘だけでした。『私はいつもメールに苦労してきました。自分にとって重要だと思うメールは、基本的に同じ送信者から来るものです。そこで、これに挑戦してみようと思ったんです。ユーザーが普段読むメールを集めてくれるスマートなメールアプリがあったらどうだろう?』

締切のわずか数日前、彼はそのアイデアをゼロから形にし、印象的で実用的なインタラクションを作り上げて受賞者の一人になりました。Brianditoはこう言います。『正直に言うと、計画的なデザインプロジェクトではありませんでした。締切のちょうど2日前くらいに始めたんです。というより、突然ひらめきが次々と湧いてきた感じでした。カードのインタラクションをあのように作ろうとさえ考えていませんでした』

メールアプリのインタラクションを試してみる


Mail app wireframing


メールアプリ

Dribbble : メールアプリのコンセプト

次の大きな潮流

多くの日常的で面倒な作業が、ただ話すだけで片付く未来は十分にあり得ます。『将来は音声インタラクションがより広く使われるようになると思います。人々はすでにAlexaやGoogle Assistantを使って家を操作しており、Apple Watchを使っているなら、Siriはすでに手首の上にいます』

Brianditoはさらに、3Dモデルを統合した3Dアプリが一般的になる可能性についても触れています。『だからデザイナーはスキルをアップグレードし、3Dモデルを設計プロセスに組み込むことを当たり前にしていく必要があります。プロトタイピングツールが最初から3Dモデルに対応していれば素晴らしいですね。というのも、将来的には人々が拡張現実や仮想現実の製品を日常的にたくさん使うようになると思うからです。それに、平面的な2Dイラストはそろそろ飽きられ始めているからです』