Moqups：概要とレビュー
公開: 2019-07-14アイデアをテストせずに、そのアイデアが素晴らしいかひどいことをどうやって知ることができますか？
ワイヤーフレーミング、モックアップ、プロトタイピングは、デジタルデザインに必要な部分です。 コンセプトを視覚化することで、デザインをシミュレートし、さまざまなユーザーエクスペリエンスを試し、さまざまなユーザージャーニーとフローをテストしてから、何かをライブにすることができます。
以前は、デザイナーはデザインを印刷してクライアントにPDFを提示する必要がありました。 今日、デザインが公開される前に、デザインの課題を見つけて解決するのに役立つツールがあります。 デザインの美的および技術的要素を理解する。 誰よりも早く体験をテストします。
また、クライアントとの関係をスムーズにすることができます。クライアントが何かを想定している場合は、後で「ああ、そう思った…」と聞くのではなく、早い段階で対処できます。 。
Moqupsは、ワイヤーフレーム、モックアップ、およびプロトタイプをすべて1つの環境内で構築するのに役立つWebベースの設計ツールです。 プロジェクト間を移動して、設計を忠実度の低いもの（初期段階とラフスケッチ）から忠実度の高いもの（より徹底的で詳細）に変えることができます。 この投稿では、それを試してみて、投稿の最後にある私の最終的な考えを含め、そのプロセスが各ステップでどのようになっているのかを示します。
Moqupsで何ができますか？
Moqupsを使用して作成できるデザインは、図、フローチャート、サイトマップ、ワイヤーフレーム、モックアップ、チャート、グラフなど、多数あります。 それらを調べてみましょう。
ここでは、プロトタイピングについて具体的に説明していません。 それには理由がありますが、後で触れます。
ダイアグラムとフローチャート
ほぼすべてのWebデザインプロジェクトは、図、フローチャート、またはサイトマップから始まり、チームメンバーは途中で参照するためにそれに戻る傾向があります。 Moqupsを使用すると、あらゆる種類の図を作成できます。
- 概念図
- デシジョンツリー
- ユーザーインタラクションのフローチャート
- ソフトウェアワークフローのフローチャート
- マインドマップ
- サイトマップ
- ユースケース図
フローチャートステンシルを使用すると、あらゆる種類の図をすぐに始めることができます。 ダイアグラムエクステンダーを使用して、必要に応じてフローを進化させることもできます。 さらに、図の外観を変更してカスタマイズすることもできます。
ワイヤーフレームとモックアップ
ワイヤーフレームを使用すると、チームはプロジェクトの開始時に情報階層、ページ密度、ユーザーフローなどを把握できます。 シンプルな形状とプレースホルダーテキストは、将来追加するより高度なデザイン要素の代わりになります。 ブランディングやデザインについてはまだ心配する必要はありません。 代わりに、Webサイトの構造と主要な要件について心配する必要があります。
モックアップを使用すると、チームは設計の最初の段階でフィードバックを得ることができます。 ワイヤーフレームのスケッチに基づいてコンテンツを視覚化し、非常に基本的な方法でどのように機能するかを示します。 デザインは、見栄えを良くし、最終結果を視覚化するためにコンテキストに入れられます。 クライアントは、ページにデザインを表示する代わりに、Webサイトまたはアプリでデザインがどのように表示されるかを確認できます。
自分に合った順序で作成する
Moqupsの優れている点は、ワイヤーフレームとモックアップの間を好きなように前後にバウンスできることです。必ずしも、前もって作成する必要はありません。 たとえば、ワイヤーフレームとモックアップを使用して、従来の方法を開始できます。 次に、ワイヤーフレームに戻って、モックアップを評価するときに必要だと気付いた微調整を行うことができます。 または、最初にモックアップを作成してから、ワイヤーフレーミング段階に移動して詳細を把握することもできます。 モックアップを完全にスキップして、ワイヤーフレームから忠実度の低いプロトタイプを作成することもできます。
チャートとグラフ
チーム、クライアント、または投資家に視覚的に情報を提示する必要がある場合、Moqupsではあらゆる種類のチャートやグラフを作成できます。
- 面グラフ
- 棒グラフ
- 縦棒グラフ
- ドーナツチャート
- 折れ線グラフ
- 円グラフ
Moqupsの機能
Moqupsの主な機能と、それに続く追加のメリットの簡単なリストを次に示します。
グラフィックとフォントを備えた組み込みライブラリ
- 組み込みライブラリには、何千ものアイコンセットが含まれています。 また、一般的なユースケース向けに設計されたすぐに使用できるステンシルに加えて、AndroidおよびiOSモバイルアプリ設計用のカスタムステンシルキットもあります。
- オブジェクトの位置合わせ、サイズ変更、回転、またはスタイル設定。 要素を一括編集、グループ化、ロック、名前変更することもできます。 カスタムガイド、グリッド、定規を使用して正確な調整を行うことができます。
- Google Fontsは統合されているため、数百のフォントから選択できます。 高度なコントロールを使用すると、デザインに合わせてテキストを微調整できます。 （ロゴに最適なフォントを選択する方法を学びたいですか？そのための記事があります。）
プロジェクトを整理する
- ページをドラッグアンドドロップして、フォルダに並べ替えたり整理したりします。
- ページパネルを使用すると、フォルダを簡単に検索してナビゲートできます。
- マスターページを使用すると、関連するすべてのページに変更を自動適用できます。
統合とコラボレーション
- Moqupsは、Dropbox、Googleドライブ、Slackなどのツールと統合されています。
- クラウドのおかげで、チームはリモートで作業しながら共同作業を行うことができます（チームがチャットする方法は他にもあります）。
- さまざまなバージョンを相互に送信しなくても、デザイン自体に関するフィードバックを正しく取得し、編集を行うことができます。
その他の機能
- 使いやすいドラッグアンドドロップエディタ（初心者は学習曲線を経験するかもしれませんが、それはメジャーではありません）
- 自分の画像をアップロードする
- 要素を並べるときのスナップイン配置
- 品質を損なうことなくスケーリング
- 作品をPDFまたはPNGとしてエクスポートする
Moqupsの使用
Moqupsでの私の経験についてお話しするためにすぐに飛び込みます。 たくさんのことが起こっています-混乱することはありません、ただたくさんあります-それで、私が遊んだ機能について、私がクールで便利だと思ったものについて話します。 記事の最後に、一般的な欠点や最適なユーザーなど、Moqupsに関する全体的な考えや気持ちをお伝えします。
Moqups入門
Moqupsのセットアップは非常に簡単です。無料のアカウントから始めることをお勧めします（これについては、後で価格設定のセクションで説明します）。
デザインの作成
私はドラッグアンドドロップエディタが本当に好きです。 一部のエディターでは、要素をクリックするとすぐにプロジェクトに表示され、それを取り除くのは面倒な場合があります。 Moqupsを使用すると、追加するものをもう少し制御できるようになり、誤って何かをクリックして気付かずに追加することを心配せずに、オプションを探索できます。 また、要素をプロジェクトにドラッグすると、その要素がどのように表示されるかを確認し、不要な場合は元に戻すことができます。
デザインでの作業
デザインのさまざまな要素にカーソルを合わせると、さまざまなページ要素を示す青いアウトラインが表示されます。 要素を操作するには、要素をクリックして選択します。 メニューが右側に開き、カスタムオプションが表示されます。
プロジェクトの色
カラーピッカーの「ProjectColors」の部分が好きです。 これにより、左上隅のハートの色とテキストの色を簡単に一致させることができました。
要素をテンプレートとして保存する
Moqupsの便利な機能は、要素をテンプレートとして保存し、そのまま他のページに簡単に追加できることです。 色、サイズなど、元のデザインが保持されます。これにより、デザインに連続性を持たせることができます。
コラボレーション機能
Googleドライブを使用している場合、コメントは使い慣れた方法で表示および動作します。 コメントの追加は非常に簡単で、コメントを書き込む前または後に移動して、配置がわかりやすくすることができます。
ただし、共同編集者やコメントがたくさんある場合は、その小さなコメントペインがすぐに手に負えなくなる可能性があります。 コメントが不要になったときに解決済みとしてマークされるというルールをチームに作成することをお勧めします。
Moqupsの価格
無料プランでは、最大200個のオブジェクトを含む1つのプロジェクトを作成できます。 これは、空白のドキュメントで作業するか、テンプレートを使用するかを選択するときに考慮すべきことです。 ランディングページワイヤーフレームテンプレートを選択しました。これは、200個のオブジェクトのうち125個をすぐに使い果たしました。 もちろん、いくつかのオブジェクトを削除することはできますが、最初から始める方が理にかなっている人もいます。
無料プランが適しているのは、Moqupsをテストすることだけです。これは、設計するプロジェクトが1つだけではない可能性があるためです。 価格は月額13ドルからで、毎年支払われます。 各プランでは、無制限のプロジェクトを作成し、無制限のオブジェクトを使用できるため、主な考慮事項は、Moqupsを使用する人の数です。
あなたが1人のデザインチームでない限り、クリエイティブチームパッケージが必要になります。 追加する人数が多いほど、ユーザーあたりのコストは低くなります。 たとえば、50人のユーザーがいる場合、コストはユーザーあたり3ドル、月額合計149ドル（年払い）です。
Moqupsの価格設定は非常に高額だと感じる人もいれば、高すぎると思う人もいます。 それはあなたがそれをどれだけ使うつもりであるか、そしてあなたがそれから得る価値に依存します。
PS無料プランでは、クレジットカードは必要ありません。テストして自分に合わないと判断した場合は、請求される前にキャンセルすることを忘れないでください。
Moqupsの弱点
- Moqupsの最大の欠点は、オフラインで使用できないことです。 一方、ブラウザベースであるという事実は、一部の人々にとって非常に便利です。
- 高度なプロトタイピングのニーズがある場合、または機能にこだわりがある場合、これはおそらくあなたのためのツールではありません。
- Moqupsは動作が遅く、読み込みに時間がかかり、予期せずシャットダウンする可能性があるというレビューを読んだことがありますが、そのようなことはありませんでした。 ただし、リッチコンテンツを追加したり、ページを追加したりするときは、注意が必要です。 デザインに写真やビデオがなかったので、物事をスピーディーに保つのに役立ったかもしれません。 プロジェクトに多くの豊富な要素が含まれる場合は、無料プランを利用してテストしてください。
Moqupsは誰に最適ですか？
Moqupsは、開発者以外の人がプロジェクト計画の最初の段階で概念化するのに最適です。 たとえば、ビジネスオーナーまたはプロジェクトマネージャーは、開発および設計チームにアイデアを伝えることができます。開発および設計チームは、さらに高度な方法を使用して、実際の製品または忠実度の高いレンダリングを作成します。
Moqupsは、モックアップやワイヤーフレーミングに特に役立ちますが、プロトタイピングに関してはそれほど強力ではありません。 Moqupsには、他のプロトタイピングツールほど多くの機能がなく、スタイリング要素も競合ツールほど多くの方法でカスタマイズすることはできません。 それは彼らのウェブサイトでほとんど言及されていません。
最終的な考え
全体的に、私はMoqupsを使用するのが好きでした。そして、私がスケッチしたペンと紙のデザインよりもはるかに現実的であるため、Webサイトをデザインするときにそれについて知っていればよかったのです。 それはそれが言うように機能しました、そして多くのオプションがあっても、理解するのにそれほどトリッキーなものは何もありませんでした。 どんなタイプのグラフィックデザインツールを使ったことがあれば（そしてあなたが持っていると思いますが）、これを手に入れるのは難しいことではありません。 初めて使用して、1日の終わり（または1時間の終わり）までにプロジェクトを終了してから、戻って、最初に見逃したすべてのオプションを調べることができます。
視覚化ツールのポイントは、最終製品を入手することですよね？ 私たちの素晴らしいコミュニティからの作品で私たちのDiviデザインショーケースをチェックしてください。
Visual Generation /shutterstock.comによる注目の画像