正しくKeynoteでプロトタイプを作るコツ
09より最新版を ChatWorkの社内勉強会で、Keynote をプロトタイプ制作に使う方法を共有したことがあります。コード不要な点と、共有が比較的しやすいのでオススメしています。しかし、他のプロトタイプツールと同様、得意・不得意をしっかり理解していないと時間がかかるだけで無意味な作業になることがあります。 古くから Keynote を使っている方は Keynote 09 を好む方がいます。最新版に比べて UI が分かりやすく分類されていたり、AppleScript のサポートが充実していることから、今でも使っている方がいると思います（私も講演時は 09 を使うことがあります）。ただ、プロトタイプを作る際は必ず最新版を使うようにしています。最新版のほうが優れているのは以下の4点です。 0.01秒単位で微調整が可能 Keynote 09 では、スライドショーを再生しなければアニメーションを
簡単すぎて驚いた！ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow
Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。 しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。 Sketch（Photoshop, Adobe XDにも対応予定）ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。 現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています。 Overflow Overflowの特徴 Overflowのダウンロード Overflowの使い方 Overflowの特徴 Overflowは、ユーザーフローとプロトタイプを簡単に作成することができるデスクトップ用のツールです。 オンラインツールではないので、安心して利用できると思います。 ユーザーフローの作成 Ov
[sketch] Prottyping機能を試してみました #sketch | DevelopersIO
デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 2018年3月、sketch にとうとうプロトタイピングがやってきましたので、早速試してみたいと思います。 公式：https://sketchapp.com/ https://sketchapp.com/docs/prototyping/ Sketch の version を確認 プロトタイピングは、Sketch 49 のアップデートで使えますので、ご自分の Sketch バージョンを確認しましょう。 Sketch 上部メニューの【About & Registration...】を選ぶと確認できます。 プロトタイピングでは、以下ができるようになっています。 オブジェクトを選択しての画面遷移指定 ホットスポット（エリア）を作成からの遷移 プロトタイプを開始するアートボードを指定 プレビュー確認 他に
![[sketch] Prottyping機能を試してみました #sketch | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/9107e74b02d950e01c757f911caa1a9b0799d7e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F03%2Fsketch4icon.png)
Protowire
Prototyping in Sketch No coding or exporting to other applications Watch the Video Protowire is no longer available for download. Rather than something you do at the end, Protowire aims to integrate interaction and animation into the design process without having to change your designs to suit the software. Integrated into Sketch No need to export to a separate prototyping application - review the
STUDIO | サービスづくりのための、次世代デザインツール
誰でも直感的に使える操作性。もうプロダクト作成にデザインスキルもプログラミングスキルも必要ありません。STUDIOを使えば、知識やスキルの有無に関係なく、あなたのアイデアをプロダクトにすることができます。
Kite Compositor
A powerful animation and prototyping application for Mac & iOS Download TrialRequires macOS 11+ Buy Now $99 “It’s kind of like Sketch meets After Effects” – A designer Visually drag and drop layers to build complex interfaces on a WYSIWYG canvas. Add animations and tune them with the integrated timeline. “It’s kind of like PaintCode but for Core Animation” – A developer Use the built-in JavaScript
Pixateに変わるプロトタイピングツールとは？５つのツールを徹底比較！ | CyberAgent Developers Blog
みなさん、初めまして。AbemaTVデザイナーの竹原です。 AbemaTVは、無料で楽しめるインターネットテレビ局として、スマートフォンやPC、AppleTV、AndroidTVなど様々なデバイスで提供している動画サービスです。今回は開発現場でUIを制作する時に使用する【プロトタイピングツール】についてまとめます。 デザイナーの役割とプロトタイピングツールの必要性 ネイティブアプリの開発現場では、デザイナーは静的なデザインを作るだけでなく遷移や動きのイメージをエンジニアやプロデューサーと共有する事が求められています。プロトタイピングツールを使うことで、全体のストーリー設計を早い段階からメンバーと共有でき課題を洗い出せることで、制作の効率をあげることに繋がります。2010年Sketchが登場して以来、新しいプロトタイピングツールも次々と登場しています。ここ数年のプロトタイピングツールの変化と
POP Joins Marvel! | Marvel Blog
Back in 2012, a new app called POP burst onto the scene and allowed users to turn paper sketches into interactive prototypes. It quickly grew in popularity and by 2013 Apple had selected it as one of the Top Apps of the year. Today it has over 500,000 users. Earlier this year, the POP team joined Priceline, leaving the popular platform needing a new home. The founder of POP, Ben Lin reached out to
Marvel - The design platform for digital products. Get started for free.
Introducing Ballpark - Simple surveys and user testing for prototypes
さよなら Pixate, よろしくProtoPie
국내 유일 디자이너를 위한 프로토타이핑 툴 프로토파이🍪를 널리 전파하고픈 한 유저로써 무언가 큰 사명감을 갖고, 번역을 시도해 보았다. 앞으로도 종종 프로토파이의 서포터 역할을 자진해서 할 생각이다w それは残念なお知らせだった。Pixateがサービスを終了してしまった。それはまるでFlashがこの世界から消えたのと同じくらいの心持ちだった。PixateはFlashのように支配的でもなく、シンプルなプロトタイピングが好きな多くのユーザーたちにきっと受け入れられたと思う。Pixateはいいツールだった。そして我々はもうすぐPixateとお別れをしなければいけない。 先日、あるデザイナーにPixate似の、もしくはそれより少し優れているツールを見せてもらったことがある。（それにβ版…涙）彼が見せたそのツールの名は、「 Protopie 」。その出会いが私の心配を一瞬で吹
[和訳]Craft Prototype:InVisionのAdobe XDキラー
この文章は、原文(Craft Prototype: InVision’s Adobe XD Killer)の著者であるJoe Toscano 氏の許可を得て日本語訳をしています。 It is allowed by Joe Toscano that I translated the article to Japanese and republished it.InVisionはSketchの中でプロトタイプを作れるようにしようとしている。それは、完全なコード化したプロトタイプのような見た目や使い心地になる。 この文章はこれから何ができるようになるかのスニークピークだ。けっして尻込みしないだろう。 未来の先端私はキャリアの中でたくさんのプロトタイピングツールを使ってきた、InVisionのSketch向けのCraft Prototype Pluginはまだベータ中ではあるけれど、容易に今まで使
![[和訳]Craft Prototype:InVisionのAdobe XDキラー](https://cdn-ak-scissors.b.st-hatena.com/image/square/4250ed907bce385dd4472b5934fa862847e3cc53/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fda%3Atrue%2Fresize%3Afit%3A270%2F1%2A0zN0pVkGOFtQJncrxNfIpQ.gif)
ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
プロトタイピングツールAtomicがSketch Pluginをリリース。
UIデザイン＆プロトタイピングツールのAtomicがSketch Pluginをリリースしました。 Complete your workflow with the Atomic Sketch Plugin Our Sketch Plugin for exporting to Atomic is here Atomicって？ Atomicはブラウザ上でUIデザインを作ったり、ホットスポットという機能でアニメーション付きのプロトタイピングができるツールです。タイムライン上でアニメーションを編集できるので、ちょっとFlashぽい操作性です。 Sketch Pluginで出来ること 今回出たSketch PluginではSketch上で作ったデザインをAtomicの中のプロジェクトにエクスポートしてアップロードが出来ます。 しかもAtomic上に書き出されたデザインはちゃんとパーツ・レイヤーごとに
Design-JP 第1回 勉強会に行ってきたメモ - らこらこブログ
先日、 "Design-JP"という名前のデザイン勉強会に参加してきた。 design-jp.connpass.com その名のとおりデザイナーやデザイン寄りのエンジニア向けの勉強会で、 専らGoogle App EngineやらAngularやらやってる人間からすると未知の領域だった。 今の仕事でデザインやプロトタイピングをやることはまず無いので、 "知識"を得るというよりは、"異文化交流"しようと思って、新しい考え方を求めて参加した。 以下はイベント中のメモや参考リンクの備忘録である。 発表中に"これは秘密で"と言われた部分はもちろん書いていない。 プロトタイピングツールの使い所の話 プロトタイピングツール Prott 聞いたことはあった Adobe XD 聞いたこともなかった その他もいろいろ 結論 適切なタイミングで適切なツールを使うべし 適切なタイミング デザインが決まった後でア
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
User flow diagramming tool for design teams | Overflow
The world’s most powerful screen design tool
THE GUILD
Anima: AI Design to Code | Figma to React | Figma to HTML | XD to HTML | XD to React
おすすめのプロトタイピングツール5選(2016年5月時点)