ウェブサイトのワイヤーフレームを作成するために、どのツール（理想的には手頃な価格のツール）が推奨されますか？
ウェブサイトのワイヤーフレームを作成するために、どのツール（理想的には手頃な価格のツール）が推奨されますか？どのツールを使用しましたか。ペンと紙よりも優れていますか。
最近は Balsamiq Mockups を使用しています。これは、ラフなアウトラインを簡単に作成したり、簡単なインタラクティブウォークスルーを作成したりするための迅速なツールです。これは非常に安価で無料の試用版がありますが、コミュニティプロジェクトに無料のライセンスを提供します。デスクトップバージョンを試してみてください。ここ数か月間使用しており、仕様とプロトタイピングプロセスの一部にしています。
最近の紙は比較的安価です。
また、ゴム製の[元に戻す]ボタンがあるため、鉛筆が好きです。
簡単なペンと紙を使っていくつかのワイヤーフレームをすばやくスケッチし、次にhtml/cssプロトタイプに進みます。ほとんどの場合、私は優れたインテグレーターであるため、プロトタイピングは複雑なソフトウェアを使用してワイヤーフレームを作成するよりも簡単です。
それ以外の場合、私はOmnigraffleをお勧めします。高すぎず、適切なステンシルを使用すると、非常に効果的です。 リンキー 。ワイヤーフレーミングとサイトマッピングの両方に役立ちます。
私はここの他のポスターのいくつかに同意する必要があります。紙と鉛筆（またはペンまたはマーカー）は、プロトタイピングを開始するための最良で最も安価な方法です。 Photoshopのようなものを使用する理由はありません。本格的なデザインを行っているわけではないからです。モックアップやプロトタイプ専用のさまざまなソフトウェアパッケージはすべてすばらしいですが、非常に高価になる可能性があり、紙でできること以上に多くのことを追加することもありません。それらが時間的にさらに効率的であることはめったにないと思います。
プロトタイピングアプリケーションを使いたい場合は、Axureが最良の選択肢だと思います。彼らは過度に高価ではなく、大量の機能を備えています。そして、30日間無料でソフトウェアを試すことができます（その間も完全に機能すると思います）。
HTMLプロトタイプと実際に機能しているサイトの違いを完全に理解するためにプロトタイプを作成している人がわかっている場合を除いて、プロトタイプにHTML/CSSを使用しないことをお勧めします。通常、次の2つのいずれかが発生します。
- 彼らは機能性ではなく美学に焦点を当てています、なぜなら「それはすでにウェブサイトなので、見栄えが良いはずです」。
- プロトタイプを見せてから数日後に完成できない理由を彼らは理解していません。「サイトはすでに機能しているので、見栄えを良くする必要があるだけです」。 HTMLプロトタイプと実際に機能しているサイトの違いを技術者以外の人に理解させるには、lotの作業が必要です。
PowerPointについては、私の意見では、これは最も頻繁に使用され、誤用されているアプリケーションの1つです。人事担当者が何かを発表する唯一の手段として、PowerPointプレゼンテーションを添付ファイルとして受け取った回数を数えることはできません。プロトタイピングにそれを使用することは同じ線に沿っています。それはそのために設計されておらず、プロトタイピングのために効果的にするためのツールが実際にはありません。
私は主にノートブックを使用して非常に大まかなアイデアをスケッチし、次にOmnigraffleとKonigi.comステンシルを使用して実際のモックアップを作成します。
WoZテストを行う場合は、ブラウザ要素を印刷してすべて紙で行います。
半年前のUPAカンファレンスで、私は人々がツールについて話し合うセッションに参加していました：プロトタイピングのためのHTML vs Axure vs Balsamiq vs FlairBuilder。
AxureとBalsamiqが投票しました。 FlairBuilderが投票します。
私はライブつぶやきをしていて、セッション外の誰かがFlairBuilderデモをダウンロードして試すことを提案しました。私たちはその場でそれを行い、それまでの経験なしにすぐにそれを使用することができました。 FlairBuilderはBalsamiqと同じ価格帯にあり、それぞれが他にはないいくつかの機能を備えていました。たとえば、FlairBuilderにはYouTubeを含むライブマルチメディアがあります。これは、一部の参加者にとって重要であり、他の参加者にとっては重要ではありませんでした。
ディスカッション中に、ある参加者が「Visioは悪夢だ」と述べましたが、それは強い声明だと思いますが、私は仕事でそれを使用する必要があり、Visioを「戦っている」（つまり、時間を浪費している）ことに気づきます。
Microsoftはその会議で、忠実度の低いプロトタイプを作成する新しいデザイン/スケッチツールをデモしましたが、価格が高くなりました。製品名を忘れてしまいました[編集：これは SketchFlow ]ですが、デモは印象的でした。この製品は、上記のディスカッションセッションでは議論されませんでした[編集：まだリリースされていないため]。
特にサンプルプロジェクトの修正から始める場合は、使いやすく学習しやすいため、 FlairBuilder を試すことをお勧めします。よくある「今すぐ購入」をお見逃しなく。無料試用版のメッセージ。
上記の製品とは提携しておらず、支払いもしていません。
私は次のような話をしました：
FlairBuilder Balsmiq Axure SketchFlow PowerPoint花火
個人的に、私はホワイトボードから始めます。 FlairBuilderとBalsmiqはどちらも非常に使いやすく、おそらく最も簡単だと思います。
Axureは本当に強力ですが、それほど友好的ではないと思います。
ランダムなPCで非常に高速に何かを実行しようとしているときにPowerPointが機能すると思います。
ページをリンクする方法と、ビヘイビアを作成し、Silverlightアプリケーションの最初のコードや、別の技術の開発チーム。
アニメーションのキャプチャとデザインだけでなく、動作/コントロールの構築も、事前にデザインされた、または忠実度の低いカスタムコントロールのみを実際に使用する他のプログラムと比較して気に入っています。
Fireworksは、見過ごされがちな素晴らしいツールです。特に、多くのドキュメントや状態を処理するために成熟しています。
Fireworksが他のソリューションよりも優れている最大の利点は、WebページだけでなくWebアプリケーションにも使用できることです。 2つの間でワイヤーフレーム化する必要がある複雑さのレベルには大きな違いがあります。これは、MOSTワイヤーフレームツールでは考慮されないことがよくあります。
私はVisio、Illustrator、Axure RP Pro、OmniGraffle、Balsamiq Mockupsを真剣に使用しており、すべてのWebベースのアプリを試しました。 HTMLプロトタイピングと紙のプロトタイピングも行っています。
私が最も効率的に機能するのは、紙にスケッチする、OmniGraffleで改良する、またはHTMLのモックアップに直接移動することです。私が何を提供するかは、設計ドキュメントの対象とその目的によって異なります。ほとんどの場合、速度を上げるためにOmniGraffleを選択するか、スケッチとHTMLを提供します。免責事項は、私が社内のUIデザイナーであることです。
私はStabilo Poit 88ペンをつかむ傾向があります。自分のデザインのワイヤーフレームスケッチパッド（A4の横に6倍）で、好きな色を選んでアイデアを引き出します。
また、正方形のポストイットノートのブロックを切り取り、幅を2/3に切り詰めるとうまくいく-細部にこだわるのではなく、ページ全体に集中する必要があることもわかりました。
次に、異なる色で特定の領域を移動して、関心のあるポイント/アクションを作成します。次に、より大きなスケールで詳細をスケッチします（A4の横に2倍）。
方向性とコンセプトに満足したら、個人用テンプレートとさまざまなステンシル（Konigi.comとgraffletopia.comを試してください）を使用して、OmniGraffleに移動します。この段階で何かが私をつまずかせるならば、それはペンと紙に戻ります。
最後に、オムニドキュメントをPDFクリック可能なリンクを含むものとして保存します。
Microsoftの新しい Blend SketchFlow ツールを試すことができます。それは信じられないほど強力ですが、アプローチするのが少し難しい場合があります（横向きにレモンのスライスを使ってみてください）。
Web（Silverlightを使用）で表示可能なプロトタイプまたは完全なナビゲーションシステムでWPFを使用してWindowsデスクトップアプリを生成でき、ユーザーを追跡できると思います。また、ユーザーのコメントを記録することもできます...
個人的に私はペンと紙（特に konigiのワイヤーフレームグラフペーパー のように）を使用し、LombardiワイヤーフレームテンプレートとNick Finkのワイヤーフェームステンシル（どちらも無料）を使用してVisioにレンダリングします。したがって、MS Visioのコストは別として、私には適しています。
過去に私も使用しました：
- PowerPoint「クリック可能な」ワイヤーフレームを作成しますが、怒ることはありません。
- Axureは迅速なプロトタイプを生成しますが、私が使用したバージョンは、状態が異なる高さの場合に動的パネルを折りたたむgoジョブを実行しませんでした今）
マット
私はすべて鉛筆と紙（実際には鉛筆と紙）を使用することについてです。どの要素が最も重要であるかを決定した後、HTMLに直接入ると、全体的な外観がわかります。
以前、PhotoshopとBalsamiqとOmnigraffleを使用したことがありましたが、どれだけきれいに見えても、マークアップに到達したら最初からやり直さなければならなかったので、いつも時間を無駄にしていたように感じました。
数時間作業したOmnigraffleファイルを削除することよりも、10分間作業した紙をくしゃくしゃにすることの方がはるかに良いと感じました。
しばらくの間PowerPointのユーザーでしたが、機能が制限されていてインタラクティブではないという事実に飽きてきました。
これは最も安価なオプションではありませんが、pidocoは、私のニーズに最適なワイヤーフレームツールソリューションの1つであるように思われます。ブラウザベースで、さまざまな形式にエクスポートして、作業内容をすばやく確認できます。ええ、レビュー機能は確かにかなりクールです。
確かにいくつかの優れたモックアップツールがありますが、それらのほとんどは移植性に欠けています。そうです、今のところ、私にとってピドコは解決策です！
私たちはAdobe InDesignを使用しています。少し奇妙に見えるかもしれませんが、私が好きな機能があります：
- 「アドビスタイル」のインターフェースを備えています。 Photoshopやその他のアドビ製品を使用したことがあれば、InDesignの使い方を簡単に学ぶことができます。
- クリック可能なPDFとしてワイヤーフレームをエクスポートできます
- タイポグラフィ、テーブル、スタイル、グリッドなどを操作する強力な機能があります
- 単純なワイヤーフレームだけでなく、必要に応じて複雑なビジュアルデザインも簡単に作成できます
Pencil for FireFoxは無料のfluginであり、スタンドアロンツールとしても実行できます。
次は、Open Office Draw（これも無料）のようなものです。
ペンや紙もいいです。
AIRアプリであるFlairBuilderのようなものを試すこともできます。
Photoshopを使用して、960グリッド（ http://960.gs/ ）で.psdを編集してワイヤーフレームを作成します。
私は鉛筆スケッチから始めて、それからOmniGraffleに移動することにかなり満足しています。
FlairBuilderも使用しました。ワイヤーフレームや非常に単純なプロトタイプにはまともですが、いくつかの制限に遭遇しました。プロトタイプを更新し続けると、非常に遅くなることがわかりました。 Axureのプロトタイピングを検討しています。
私はPost-itsを構造と全体的なレイアウトに使用し、次にBalsamiqモックアップまたはOmniGraffleに移動します。高忠実度プロトタイプの場合、Apple Keynote。:)に勝るものはありません。
http://hello.hotgloo.com/ について十分な良いことを言うことはできませんが、これを共同のワイヤーフレーミングに使用してきました。
ああ、それがベータ版の間は無料です。
IPlotzが大好きです。私を売ったいくつかの機能：
- 手頃な価格！
- タスク管理
- クリック可能なプロトタイプ
- 画像またはPDFにエクスポート
- 共有およびコメント機能
- 多数のウィジェットが利用可能なシンプルなユーザーインターフェイス
- スケッチ、Windows、Mac用のスキン
IPlotz以前は、Photoshopを使用していました。
- キャンディス
ワイヤーフレームにはBalsamiqモックアップを使用しています。デザインがインタラクティブな場合は、PowerPointを使用します。忠実度の高いモックアップでは、パワーポイントが王様です。
忠実度の高いプロトタイピングツールについては、iRiseや Justinmind Prototyper など、ほぼ最終的な設計と効果にシミュレーションできるツールがあります。これらは単にワイヤーフレームをスケッチするだけでなく、ビデオを埋め込んだり、フォームの入力やデータの使用などのリッチなインタラクションを作成したり、仕様やユーザーテストを作成したりするのに適しています。
これらは、Visio、OG、Balsamiqなどの単純な描画ツールからさらに一歩進んだものです。
いくつかのワイヤーフレーミングツールを試しましたが、便利なユーザビリティテスト機能が統合されており、すべてオンラインであるため、 pidoco.com で解決しました。
花火、ハンドダウンはそこに最高のツールの1つです。ワイヤーフレーミングだけでなく、ワイヤーフレームからモックアップへの移行、インタラクティブなHTMLプロトタイプのエクスポートも可能です。
Niceコンポーネントライブラリを提供します。ツールは簡単に理解できます。ページと状態をサポートします。
それは最も安価な選択ではないかもしれませんが、正直なところ、それはそこにある最高のツールの1つです。
私はBalsamiqモックアップを使用しました（そして非常に感銘を受けました）が、Nathanelが言うように、いくつかの制限があります。
あなたがそれを見たかどうかわかりませんが Sitepointはこれを投稿しました 数か月前ですが、おそらくまだ関連があります。詳細な調査に値するいくつかのことかもしれません。
ほとんどの人のように、私はBalsamiqを使用して大まかなモックアップをその場で実行しますが、インターフェイスの制限（およびときどきクラッシュする傾向）により、より堅固なワイヤーフレーム作業では、通常はKonigiステンシルでOmnigraffleを使用することが義務付けられていますが、ますます増えています私自身も。テンプレートとステンシルの作成、および共有レイヤーと変数の習得に慣れるのにかかる時間を費やしたら、Omnigraffleは、強力で機能豊富なアプリケーションと迅速で簡単な制作の完璧な組み合わせです。もちろん、唯一の欠点は、Visioの人と簡単に共有できないことです。彼らは、両方のパッケージがサポートするXMLベースのファイルエクスポートを使用できると言っていますが、実際に完璧に機能することはなく、手動ですべての問題を解決していることがわかります。
EightShapes Unifyをご覧になることをお勧めします（ http://unify.eightshapes.com/ ）...見始めたばかりで、新しいプロジェクトを試してみませんでしたワイヤーフレームおよびのその他の設計成果物のキラーフレームワークのように見えます。
PSそれは完全に無料ですが、それを使用するにはAdobe InDesignが必要です。
私はBalsamiq + NapkeeからiPlotzに切り替えました-モックアップを作成するときに余分な作業をすることなく、大まかなプロトタイプを作成できるので、それはとても気に入っています。私はそれについてここに書きました： http://www.snipe.net/2010/02/wireframes/
すべてのものと同様に、これはあなたが何を達成したいと思っているかに依存します。
私は長い間PowerPointを使用していましたが、それで問題ありませんでした。
私が出会った中で最も包括的なワイヤフレーミングツールはAxure（http://www.axure.com/）で、高忠実度のナビゲート可能なワイヤフレームを作成するのに最適です。さらに、最近Mac用にリリースされました。
Balsmiq（http://www.balsamiq.com/products/mockups）は少し面倒ですが、フィードバックを探しているかのように「スケッチ」アプローチが好きですが、より洗練されたものに見えます-可能性は低いですあなたはそれが遠すぎるのではないかという恐怖のためにフィードバックを得るべきです。
http://gomockingbird.com/ はすばらしい無料のツールですが、基本的なものです。
Macをお持ちの場合は、Omnigraffleが最適です。さまざまな無料のステンシルを http://graffletopia.com/ からダウンロードできます。
しかし、ペンと紙の力を過小評価してはいけません。これは、アイデアをすばやく生み出すのにはるかに最適です。
Googleドキュメント、Google図面の使用に関するこのブログ投稿は興味をそそられます。
http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
ワイヤーフレーミングとプロトタイピングに最も適したツールは、たとえばチーム構造（相互運用性、共有可能性など）、プロジェクトステータス（=>必要な視覚的および機能的な忠実度）、および設計を伝達する必要がある利害関係者のタイプ。分散チームで少なくとも部分的にリモートで作業している場合、サイトに全員がいる場合と比較すると、要件はまったく異なります。さらなるインフルエンサーは、例えば、分散編集とバージョン管理。 （私見、プロトタイピングに関するZaki Warfelの本は、代替案を評価する必要があるときに有用な出発点を提供します。）
私自身のワークフローは、主に紙（フリーハンドスケッチ、基本的なグリッドテンプレートを使用したスケッチ、頻繁に使用される要素の段ボールステンシルなど）を中心に展開され、その後、OmniGraffleが後の段階で、ほとんどの場合、Indesign、Fireworks（特定のクライアントのみ）によって補完されます。 hifiコンプが必要な場合-それ以外の場合、そのGUIパフォーマンスは主要なPITA）またはKeynote（すべての種類のトランジションが必要な場合に最適）。現在、Axure RPへの移行を検討しています。過去の紙のプロトタイプやクリック可能なモックアップを移動すると、現在は基本的にネイティブ形式、つまりほとんどの場合HTML/JS（jQueryを含む）がそのままになります。 Balsamiqや他のブラウザーベースのソリューション、またはRIAは、これまでのところ、私には遅すぎて不便であると感じていました。 （ただし、Pidocoのコラボレーションおよびテスト機能は、特定の状況下では興味深い場合があります。）
単純なワイヤーフレームにはGliffy（オンラインツール）を使用します
Mockingbird は、ウェブサイトやアプリケーションのモックアップを簡単に作成、リンク、プレビュー、共有できるオンラインツールです。
それはまだ初期のベータ版であり、価格はわかりませんが、注意を払う価値があります。それはカプチーノで書かれたウェブアプリなので、フラッシュの必要はありません...
乾杯R
これらのツールの多くがはるかに優れていると確信していますが、ここに「ローテク」ソリューションがあります（PowerPointを使用している場合） http://www.raizlabs.com/blog/294/wireframing-in -PowerPoint
**にリソースを投入して、スケッチを優れたワイヤーフレームツールとしてサポートするには：
ユーザーエクスペリエンスデザイナーのための50のスケッチリソース **これにはスケッチが含まれます。
- 記事
- ツール
- テンプレート
- プレゼンテーション
- ビデオ
- 本
- 例
Firefox Pencil Pluginは、チェックアウトするもう1つのツールです。
http://pencil.evolus.vn/en-US/Home.aspx
無料で、素敵なステンシルの基本セットといくつかのスケッチステンシルがあります。大まかなモックアップをかなりすばやく作成できます。他のツールほど多くのステンシルはありませんが、かなりうまく機能します。
私はAxureを使用していますが、ある程度満足しています。プログラムの使いやすさをより便利に、より速くするために、いくつかの開発アイデアがあります。たとえば、テキストを処理するときに欠落している機能があります（配置、テキストと画像の配置など）。
私はまだ他のものを試していません！
WireframeSketcher は、デスクトップ、Web、モバイルアプリケーション用のワイヤーフレーム、モックアップ、プロトタイプをすばやく作成できるソフトウェアツールです。 EclipseベースのIDEのプラグインとスタンドアロンバージョンの両方で提供されます。
私は、コーディングなしでインタラクションまでドラッグアンドドロップして、ワイヤフレームとプロトタイプの動的Webサイト（JSのようなイベントと独自のデータを統合する）に最適なJustinmindを使用しています。
彼らはまた、ワイヤーフレームをオンラインで共有するサービスを提供し、人々が要素に直接コメントできるようにします。ほとんどのユーザーテストツール（clicktale、userzoom、google analytics ...）を統合しているため、ユーザーテストを実行することもできます。
適切なサポートファイルがあれば、MS Visioは非常に柔軟であることがわかりました。私が使う...
Visio-インタラクションデザイナーのネイルガン（第3版）
標準バージョンと「スケッチ」バージョンの基本的なWebウィジェット
インタラクションデザイナーのためのVisioのヒントとコツ
Visioでの作業をはるかに簡単にするマクロ。特に、ページのコピーおよびアイテムの「所定の位置への」コピー/貼り付け。
これは、無料プランと、$ 50 /年の非常に安いプランがあるオンラインツールです： http：//www.mockflow。 com /
ペンと紙しか使っていないという人にうんざりしています。
ペンと紙で複雑なフレームワークを作成できる場合は、非効率的であるか、以前のデザインのモジュールを再利用しないか、これが最初のものです;）
スケッチツールの要点は、パターンライブラリを作成してそれを使用することで、これまで何度も行った退屈な部分ではなく、興味深く革新的なプロジェクトのビットに集中できるようにする必要があります。
「ペンと紙のみを使用する」ということは、誇りを持つすべてのHTMLコーダーがコーディングにメモ帳以外のものを使用したことがないと主張した時代を思い出させます。さて、当時のツールは悪かったです（フロントページを覚えていますか？）-しかしそれでも...
普通！もちろん、あなたは時々ペンと紙を使いますが、真剣に、人々がツールについてアドバイスを求めるとき-彼らがペンと紙を提案しているそれらをあざけらないでください-彼らが質問する前に彼らがペンと紙について知っていると思いませんか？
Axureを使用しています。それはきれいではありませんが、仕事を成し遂げます。
（HTMLに直接ジャンプするという人から始めてはいけません。ペンと紙よりも劣っています。）
私はプロトタイプを作成するための優れたツールであるForeUIを使用しています。このツールでは、動作を追加して、かなり複雑なシステム動作をシミュレートできます。 -プロトタイプに必要な場合。
DHTMLプロトタイプは、Javaをサポートする任意のブラウザーでエクスポートして実行でき、同僚や顧客と簡単に共有できます。
私はWindows用のソフトウェアを設計していますが、ForeUIは、Webを含むあらゆるものに使用できます。
Windows、Mac、Linux、Solarisで動作し、価格は99ドルです。通常、新しいバージョンは隔週でリリースされます。詳細については、www.foreui.comをご覧ください。
無料、高速、ベーシック、オンラインのモックアップビルダーを追加したい：（Silverlightが必要） http://www.mockupbuilder.com/App
オンラインでドラフトが必要な場合に使用します。