2017年最新版！プロトタイピングツールのまとめ | Supership Tech Blog
Supership デザイナーの若林です。アプリやWebサイトのUI/UXに携わっています（と言っても3月入社の新人ほやほやです）。 最近プロトタイピングツールが増えていますが、実際どれが一番実務に適しているんだろう？と気になっていたところ、良い機会をいただいたのでデザイナー観点で実際に（ざっくり）触った感想と比較をしてみたいと思います。 代表的なツールと種類・トランジション型（遷移）：Prott、Adobe XD、inVision、CanvasFlip、Marvel ・インタラクション型（アニメーション）：Origami Studio、Framer ・複合型：CRAFT + inVision、protopie、Principle、flinto、atomic 大まかにこのような分類で上記のようなツールが代表的かと思います。現在、当チームでは主に「Sketch」でUI制作、「Prott」でプ
“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた | CyberAgent Developers Blog
こんにちは、コンテンツメディアスタジオ所属デザイナーの大脇です。 先日2016年11月21日、社内で “ProtPieワークショップ” が開かれました。今回は、ワークショップの内容とProtoPieについて、わたしなりの見解も交えつつお伝えできればと思います。 ProtoPieってなに？ ProtoPieとはデザイナー向けに開発されたプロトタイピングツールのことです。 デバイスの進化に伴う表現の高度化は開発現場を大きく変えつつあります。特にデザイナーは静的デザインで表現を完結させるには厳しい昨今となりました。UX・インタラクション・アニメーションすべてを組み込んだ動的デザインが求められる流れに伴い、数々のプロトタイピングツールが登場しました。ProtoPieもその中の一つです。 ワークショップの様子 さっそく当日の様子をレポートしていきます。 会場入口にはPritoPieのみなさまより素敵
【Protopieのススメ】UIデザイナーのためのインタラクションモックアップツール - Qiita
ProtoPieとは？ インタラクションデザイン・アニメーションデザイン ProtoPieとは、インタラクションデザイン・アニメーションデザイン のためのモックアップツールで、 Sketchからインポートができ、スクロールやページングなど、細かいインタラクションを表現できる素晴らしいソフトウェアです 昨今では、技術力や表現力の向上によって、常に新たなユーザー体験届けるための試みが行われています そのため、今ではUIを考える上で、従来の静的なものでは、より良いユーザー体験が届けることができない時代になってしまいました よりリッチで、ワクワクさせるユーザー体験を作り上げるためには、デザイナーがインタラクションやアニメーションの表現にも精通していることが求められています そこで、デザイナー必見のProtoPieをここで紹介したいと思います！ ProtoPie デモ例 どんなものが作れるか？ まず
ProtoPie キミに決めた！（たぶん）第１回 - Galapagos Tech Blog
はじめまして。まあのんです。普段はアプリのUIデザイナーをやっています。 好きな食べ物はゆでたまごです。 世の中にプロトタイプツールってたくさんありますよね。 私の場合、トランジション（遷移）系はProttもしくはinVisionで安定してきているんですが、（XDにシフトするかもしれないけれど） インタラクション（動き）系はPixate勉強してみよっかなと思ったらサービス終了しちゃったり、Origami難しくて根気が続かなかったりで本命不在の状態でした。 でもやっぱりエンジニアやクライアントとイメージの共有には欠かせないので一つ選んで学習しよう！ということでProtoPieに決めました。 www.protopie.io なんとこの記事 さよなら Pixate, よろしくProtoPie – heru – Medium によるとたった5時間学習するだけでこんなことができるようになるみたいなん
さよなら Pixate, よろしくProtoPie
국내 유일 디자이너를 위한 프로토타이핑 툴 프로토파이🍪를 널리 전파하고픈 한 유저로써 무언가 큰 사명감을 갖고, 번역을 시도해 보았다. 앞으로도 종종 프로토파이의 서포터 역할을 자진해서 할 생각이다w それは残念なお知らせだった。Pixateがサービスを終了してしまった。それはまるでFlashがこの世界から消えたのと同じくらいの心持ちだった。PixateはFlashのように支配的でもなく、シンプルなプロトタイピングが好きな多くのユーザーたちにきっと受け入れられたと思う。Pixateはいいツールだった。そして我々はもうすぐPixateとお別れをしなければいけない。 先日、あるデザイナーにPixate似の、もしくはそれより少し優れているツールを見せてもらったことがある。（それにβ版…涙）彼が見せたそのツールの名は、「 Protopie 」。その出会いが私の心配を一瞬で吹
インタラクションデザインのプロトタイプ作成には「ProtoPie」がおすすめ！ | Web Design Trends
ProtoPieは、インタラクションデザインのプロトタイプを作成できるプロトタイピングツールです。複雑なアニメーションから、タップ、クリック時のマイクロインタラクションまで、様々な動きを伴うプロトタイプを作成できるので、開発前にプロダクトの完成形をイメージすることができ、取り入れることで制作の効率やワークフローに大きな変化をもたらします。 日本でも徐々に普及してきているツールですが、今回は改めてProtoPieとはどのようなプロトタイピングツールなのかご紹介していきたいと思います。 ProtoPieとは プロトタイピングツールには、画面遷移を作成するために用いる「トランジション型」と、アニメーションを作成するために用いる「インタラクション型」、そしてどちらも作成することができる「複合型」のプロトタイピングツールに分類することができます。ProtoPieは複合型プロトタイピングツールなので、
Foursquare: A UX case study の日本語版 - 灰色ハイジのテキスト
Tradecraftに入って最初に出た各自がそれぞれやるべき課題のひとつに実際のプロダクトの改善にチャレンジするものがありました。全体の流れは以下のようなもの。 自分が改善したいと思う、そして誰もが知っているアプリを選ぶ 問題点を見つけ、その仮説を立てる ユーザビリティテスト（ゲリラ！）を行い、仮説を検証する 改善のプロトタイプを作る プロトタイプを検証するユーザビリティテストを行う この一連のプロセスをケーススタディとしてまとめる インストラクターのZacがひとりひとりに対して、丁寧にレビューをしてくれていたのですが、他のプロジェクトが始まり忙しくなったせいもあり、公開するための編集を放置してしまっていました。それをようやくまとめなおし、遂にMediumへ投稿することが出来たのが以下の記事でした。 この記事は、自分のスキル故に英語ではうまく書ききれなかった補足事項、Tradecraftの
ProtoPieが日本語に対応！インタラクティブなプロトタイプを作ってみよう | Web Design Trends
プロトタイピングツール「ProtoPie(プロトパイ)」が日本語に対応しました。ProtoPieは動きやアニメーションを伴うデジタルプロダクトを作るデザイナー向けのプロトタイピングツールです。 また、日本語に対応したバージョン3.8では、それだけでなく他にも注目の機能が追加されています。今回は、バージョンアップしたProtoPieについて、改めてその魅力をご紹介したいと思います。 ProtoPieとは ProtoPieとは、スクリーン内のボタンをタップすることで画面遷移をしたり、スクロールやエフェクトといった動きやアニメーションを再現したりすることができる「ハイブリッド型」のプロトタイピングツールです。 プロトタイピングツールには大きく3種類に分けることができ、画面遷移に特化した「トランジション型」、動きやアニメーションに特化した「インタラクション型」、そしてどちらも行うことができる「ハイ
ProtoPieでのプロトタイピングは、より良いUIを作るための選択
どうやら、ProtoPieというプロトタイピングツールの中の人のようです。ネタ混じりの英語の機械翻訳だからでしょうが、挑戦的な文面です。笑 そこまで言うなら使ってみようじゃないか。 ということで、使ってみました、ProtoPie。 昨今のプロトタイピングツール戦国史の中、「ProtoPie」の実力はいかほどのものなのか。どういうツールで、誰にオススメできそうかを書こうと思います。 （参考情報として、私はPOP、Marvel、Prott、InVision、Principle、Flinto、Sketch、XDの使用経験があります。） どういうものが作れるのか？ 実際に何か作ってみたProtoieの実力を測るため、まずはレベル感ごとに適当なモックを8つほど作ってみました。（全部GIFなので少し重いかもしれません。） FixedHeaderでの縦のスクロール（Mediumの模写）👆まずは基本の、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
