ありがちなプロトタイプ失敗パターン
次へ進むための『何か』 プロトタイプは今日の設計プロセスにおいて必須の役割を果たしている … といった論調を見かけることがあります。特にアプリの場合、Web サイト制作以上に開発者とデザイナーの密接なコミュニケーションが必要になるので、単なる静止画データの受け渡しでは不十分です。そこで「プロトタイプを作りましょう」となるわけですが、他のツールと同様、手法を取り入れただけで制作における課題が解決されることはごくまれです。 プロトタイプは、紙で作るものから、Principle のようなアプリケーションを使ってインタラクションを加えるものまであります。プロトタイプの完成度も制作スピードもツールによってまちまちなので、どのように扱えば良いのか迷う方も少なくありません。また、新しいツールを採用してプロトタイプ（のようなもの）を作ってみたけど、以前と状況が変わらないどころか、大変になってしまうこともあ
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
Prott Blog - Web（デスクトップ）のプロトタイプ作成に対応しました。
今回のアップデートにより、以前から多くの要望を頂いておりました、PC向けWebサイトのプロトタイプの作成が可能になりました！ 上記はPC Web対応のプロジェクト〜プレビュー・プレゼンテーションの紹介した動画ですので、是非ご覧ください。 PC向けWebサイトのプロトタイプ作成・使用方法 プロジェクト作成時に「Web」をお選びください。※既に作成してあるプロジェクトでも、後からデバイス変更することによって「Web」としてお使いいただけます。 参考記事（デバイス変更について）：https://blog.prottapp.com/post/ja/device-change ※「Web」よりタブレット向け、モバイル向けサイトも作成できますが、特に今回のリリースによってPC向けのWebサイトプロトタイプが作成しやすくなりました。 ジェスチャーの設定について 「Web」プロジェクト以外はジェスチャーを
プロトタイピングツール『Prott』、PC向けWebサイトのプロトタイプも作成可能に。大ヒットゲームMonument Valleyを提供するustwoも導入！
プロトタイピングツール『Prott』、PC向けWebサイトのプロトタイプも作成可能に。大ヒットゲームMonument Valleyを提供するustwoも導入！ 株式会社グッドパッチ（代表取締役：土屋尚史、本社：東京都渋谷区、以下「グッドパッチ」）が提供しているプロトタイピングツール「Prott」( http://prottapp.com/ )のPC向けWebサイトのプロトタイピング対応と、グローバルに拠点を置くデジタルデザインスタジオustwo（ http://ustwo.com/ ）でのPrott導入をお知らせします。 Prott（プロット）とは ProttはUIデザイン会社グッドパッチが提供する、Webサイトやアプリ、サービスを開発するデザイナー、エンジニア、ディレクターなどから成るチームのためのプロトタイピングツールです。画面の手描きスケッチや画像ファイルを読み込み、操作や画面遷移を
ホワイトボードでUIプロトタイピングできる-gramPadが間もなく発売、全UIデザイナー必携ツールになるかも / LSD LAB
2014/10/19 ホワイトボードでUIプロトタイピングできる-gramPadが間もなく発売、全UIデザイナー必携ツールになるかも 最近一部の界隈で話題になっているnu boardという文房具があります。気軽に書いて消せるのがウリのホワイトボードノートですね。 で、このnu boardのUIプロトタイピング専用バージョンが以前ハッカソンで配布されたみたいで。 iPhone の形が既に印刷されているので、UI を設計するのに便利です。 裏面が方眼紙になっていたり、余白を多めに確保したページや、 逆に iPhone のフレームを 4 つ配置したページなんかもあります。satococoa’s blog – nuhack を開催した めちゃくちゃ便利そうじゃないですか？ 数日前に初めて知って、Twitterでほしいよーとツイートをしたら、なんと中の人からmentionが！ @seabream
アプリのプロトタイピング用ノートを作成しました | fladdict
スマホアプリのペーパープロトタイピング用のノートを作成＆販売開始いたしました。アプリのプロトタイピングにPOPアプリとかを使っている場合、相性抜群です。iPhone実寸のグリッド入り＆各種ガイド線付なのでNavigationBarやTabBarなども簡単に線を引けます。 DeNA様のUI/UXチームがダンボール1箱（160冊）ほど導入してくださいました！ほんとうにありがとうございます。 THE GUILDでは「アプリはプロトタイピングが9割」という信念のもと、自社でプロトタイピングツールを作成しています。また、チーム内だけでなく、クライアントからパートナーまでツールやメソッドの標準化することを目標としています。 業界全体でメソッドやツールを標準化することで、みながノウハウを使い回せてものすごく生産効率と品質が向上するのではないか？と思うのですよね。初期フェーズでのプロトタイピングもっと流行
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
モバイルUI設計プロトタイピングツール「Handmock」
（2014年9月1日追記） 本プロトタイピングツールは、以下のページにて正式名称「Handmock」としてご紹介しています。 Handmock: Mobile UI Design Prototyping Kit スマートフォンをはじめとするモバイル端末が急速に普及し、また数年前からの「モバイルファースト」の流れを受け、プロジェクトにおけるモバイルUIデザインの占める割合は高まる一方です。 しかしその設計、制作は、PCサイトのそれとも異なっており、デザインの現場ではスピーディーかつ効果的な設計方法の検討、プロセスの導入が必要とされています。コンセントが扱っているプロジェクトの現場でも同じです。 そこでコンセントでは半年ほど前から、モバイルファースト時代のモバイルUI設計プロトタイピングツールをプロトタイピングしています。 このツールは、独特の形状と機能をもった付箋紙と付属品がパッケージになっ
Facebookの新ニュースフィードは、ポスト・イットと紙から生まれた
Facebookの新ニュースフィードは、ポスト・イットと紙から生まれた2013.03.17 09:00 福田ミホ 紺屋の白袴、と言われたって。 IT化だペーパーレスだ言ったって、昔ながらのアナログな方法がベストってことはよくあります。ITのサービスを作る人たちでも同様で、Facebookもそんな会社のひとつです。Facebookの新しいニュースフィードは、ポスト・イットと紙出力したフィード、そして巨大な壁を使って構想が練られたそうです。Facebookのリサーチャー、ジェーン・ジャスティス・ライブロックさんによる公式ブログへのポストでそんな背景が明らかになりました。 ニュースフィードをリニューアルするにあたって、彼らはまずオープン・エンデッド・インタビューという手法をとりました。Facebookのニュースフィードが｢ゴミだらけ｣だと言う人に、どんなものがゴミで、どんなものが大事なのかを自由
未来をプロトタイプしよう
http://www.yasuhisa.com/could/article/prototype-the-future/ 見た目先行によるコンテンツの欠落、インタラクションがわからない静的画像、修正・改善にコストがかかるワークフロー。今までもあったかもしれない課題ではありますが、マルチデバイス化が進むことで『ヒズミ』が大きくなりました。昨年、今年とモバイル機器を見据えた新しい手法が数々でてきましたが、それらも従来の作り方を維持したままでは、制作側の負担がさらに増えるだけです。 今年の基調講演では、新しい作り方を通してWebサイトをデザインするプロフェッショナルでしかできない価値について話します。作るだけではない、手法をそのまま使うだけではない、お客様を先導できるようになるためのヒントをいくつか紹介します。
紙プロトタイピングから始まる問題解決への議論
先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA で、「プロトタイピングからはじめよう」という題名でセミナー＋ミニワークショップを行いました。今年の春に開催した青森のセミナー以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト？」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の手法と同様、弱点がありますし、万能の手法ではありません。 ツールは自分の好みで一途に使うのではなく、
Fireworksの画像からタップ操作対応のプロトタイプを作成できる「TAP」 | デベロッパーセンター
Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP（Touch Application Prototypes）を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。 よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。 そうした問題を解決・軽減するために「プロトタイピング」
効果的なプロトタイプを早く作るコツ
プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリ
PowerPoint を使ったプロトタイピング
プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketch, Wireframe, Mockup, and Prototype: Why, When and How
The Blog | Welcome to Adobe Blog
Home - Popapp Magazine