Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
Prototyperを使ったモックアップ主導のUI設計プロセス
ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査（理解）を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ
【2014.08.15 追記】"使える"モバイルアプリのUIプロトタイピングツール・サービス18個 - よりぶろ
2013年ふりかえりと2014年の予想でも書いたように、ここ1年でモバイルアプリのプロトタイプを作れるツール・サービスが数多く登場しています。 もうけっこうな数が出てきましたので、これからプロトタイピングを検討しようとしている方の参考に、また自分自身の把握のために、一度整理してみたいと思います。 なお、例によって後半は息切れ気味です。気付いたら1万文字近く書いてた… (2014.08.15)記事書いてから半年くらい経って、各種サービスもアップデートしたりがあったのでいろいろと追記しました プロトタイピングとは何か そもそもプロトタイピングって何ぞやというお話なのですが、Wikipediaにいい感じの解説が載っておりましたので転載します。 "プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点
Pixate
Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move
Pixateでアプリのインタラクションモックアップが捗りそう
インタラクションのモックアップ ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @hiloki さんに聞いたツールをいくつか試してみました。 The Next Generation of Mobile Interaction Design | Pixate Justinmind: Interactive wireframes for web and mobile Briefs 昔ながらに Flash を使うという選択肢もあった気はしますがせっかくなので、そういう用途に特化したツールを探したかった次第。（メンバーに Flash 使えるひとがいなかったという事情もある） Pixateがよかった The Next Generation of Mobile Interaction Design | Pixate 結果、一番
DeployGate - Distribute your beta apps instantly
Super casual beta testing from day one Start developing amazing new apps with user input from the start! With just a drag-and-drop, you can share apps with your team members instantly. Optimized for app developers No need to increment versions with each update! With real-time crash reporting and UDID auto management for Provisioning Profiles, all the time-consuming development tasks are eliminated
Paper Prototyping Pad for iPhone | THE GUILD
弊社で使用しているiPhoneアプリのペーパー・プロトタイピング用シートが、50枚つづりのノートパッドになりました。切り離してつかえる実寸8pxグリッドの罫線入りです。開発の初期フェーズを紙で設計することで、フットワークと柔軟性をもったアプリデザインが行えます。 Specification: 50 pages（Wood Free Paper 55kg） 4 templates per page. A4（210mm×297mm） Credits: Direction: Takayuki Fukatsu (THE GUILD, Art & Mobile) Design: Chiharu Kodama (THE GUILD, Art & Mobile)
アイディアを音と映像で伝えるビデオプロトタイピング | Goodpatch Blog
皆さんは頭の中にあるアイディアをどのようにカタチにして人に伝えますか？ 先日クライアントに新規サービスの提案をした際に、口頭で説明しながらスライド一枚一枚を見せ、紙芝居のようにプレゼンをしました。けれど今振り返ってみると、スライドではなくビデオプロトタイピングを試してみたら良かったかもしれません。自分が話さなければそのスライドの資料は成り立ちませんが、音と映像に残しておけばクライアントが後から見返すことも出来ますし、持ち帰ってより多くの人にアイディアを伝えることも可能になるからです。 ビデオプロトタイピングとは、アイディアやコンセプトを音と映像で伝えるプロトタイピング手法の1つです。動画でストーリーを語ることで、簡単にアイディアを伝えることが出来ます。主なメリットとしては、 ・アイディアをシナリオベースで伝えることができる ・インタラクションの動きまで伝えることができる ・アイディアにリア
OmniGraffle Wireframe Stencils [Archived] | Konigi
AboutThis is a set of shapes for making wireframe in OmniGraffle 5 Pro or OmniGraffle 6 (Mac OS X). It consists of most of the basic elements you'll need to create user interface specifications. No Installation Required!The stencils ship with OmniGraffle! Find them in the Software category. To download them anyway, get the file and open it, when it appears click the Install button. DownloadDownloa
Webサイト用のベストなプロトタイピングツールはありますか？ | yamashitakoji.com
What is the best web prototyping tool? プロトタイピングツール関係の情報を漁っていたらWhat is the best web prototyping tool?なんていうやりとりがあったので、翻訳してみました。 ツール派、アナログ派などいろいろいますねー。 回答は23人に増加！ Balsamiq MockupsとPencil Project（Swaroop C H さん） Balsamiq Mockups（商用ソフト：$79）か、Pencil Project（オープンソースのFirefoxアドオン）を試してみなよ。 返答：おお、Pencil Projectすげー！ありがとう！ ペンと紙（jpeacockさん） ペンと紙。マジで。ツールを覚える時間も要らないからデザインに時間かけられる。 最初にページのテンプレートをいくつか作っておいて、それをコピーす
WF作成ツール Axure RP | ユージック
WF作成ツール Axure RP 2007年8月24日 ワイヤーフレームを作成するアプリケーションAxure RPの使い勝手がすごくよかったのでご紹介したいと思います。 価格は589ドルで日本円に換算すると68,371円なので割りと高額になりますが、お試しで30日間だけ使うことが出来たので簡単なＷＦをためしで作ってみました。 ソフトを立ち上げた時のインターフェイスはこんな感じで右サイドにツリーフォルダとモジュール、テンプレートファイルといった順番に並んでいて、0から作るのではなくＤｒｅａｍｗｅａｖｅｒみたいな感覚で作成することができます。 これが実際に作ってみた時の画面になります。ドットのグリッド表示になっていてパーツの間隔も簡単に整えて並べれるし微妙な位置調整も可能なため、非常に使い勝手がよかったです。 作成したＷＦはプロトタイプとしてHTMLで出力することができます。これが出力した時の
開発現場のUIトラブルを解決!? 画面プロトタイプ入門
縦軸は工数、つまり、画面プロトタイプを作るために必要な時間です。同じ画面プロトタイプを作った場合の比較ではないため、単純にはいえませんが、プロトタイプを作るためのスキルや時間を考慮、さらに、同じものを作るときの作業工数を換算して、図にマッピングしています。 横軸は表現性、つまり、画面プロトタイプで実現できる表現の粒度です。インタラクションを始めとする動的な部分が作れるか、画面を詳細に作り込めるかで、マッピングしています。 ■ペーパープロトタイピング（紙とペン） 紙とマジック、付箋紙などがあれば作れ、かつ特別な開発スキルを必要としないため、低コストで作れることがメリットです。一方で、非常に抽象的な画面しか作れない、かつ、画面の動的な部分をまったく表現できないなどのデメリットがあります。また、画面全体にわたる修正を強いられる場合、全画面を手書きで修正する必要があり、作成後の作り直しの融通が利き
DUB - DENIM
DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. [More] Try an exported DENIM HTML site Videos Current DENIM System RealPlayer G2, 8.0, or RealOne Player: 56 Kbps - 320×240 | 300 Kbps - 640×480 (Download RealPlayer) Excerpt - Downloadable R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool
Prott - Prototyping tool for Web iOS Android apps
Ionic: Enterprise App Platform