MockFlow

MockFlowは、ワイヤーフレーム、ホワイトボード、図解、ビジュアルコラボレーションのためのブラウザベースのスイートです。UI案の作成や共同ブレストに役立ちます。

MockFlowとは

MockFlowは、ワイヤーフレーム作成、ホワイトボード、図解、ビジュアルコラボレーションのためのブラウザベースの製品スイートです。このサイトでは、アイデアを考えたりUI案を描いたり、チームメイトとブレインストーミングしたり、初期のコンセプトからより構造化された製品計画へ進める場として紹介されています。

このスイートは、Webサイト、アプリ、ダッシュボードのワイヤーフレームを作成するWireframeProと、ホワイトボードやブレインストーミングに使うIdeaBoardという2つの主要アプリを中心に構成されています。サイト全体を通して、MockFlowは、すぐ使えるUIコンポーネント、AI支援の作成、コラボレーション機能、そしてデザイン作業をチームのワークフローに組み込むための各種アドオンや連携を重視しています。

主な機能

ワイヤーフレーム作成ツールキット

WireframeProは、事前構築済みのUIキット、テンプレート、再利用可能なシンボル、マスターページ、チャートコンポーネント、データグリッドコンポーネントを使って、素早いUI作成をサポートします。

ビジュアルブレインストーミング用キャンバス

IdeaBoardは、図、マインドマップ、ムードボード、ストーリーボード、カンバンボードなど、さまざまなビジュアルブレインストーミング形式に対応する共同キャンバスを提供します。

AI支援の作成

AI機能は、プロンプトやスクリーンショットからワイヤーフレームを生成したり、図を作成したり、ボード用のコンテンツを生成したり、UI案を編集可能なワイヤーフレームに変換したりできます。

コラボレーションとレビュー

チーム向け機能には、コメント、チャット、ビデオ会議、マルチプレイヤー編集、ライブプレゼンテーション、外部レビュアー向けの安全なプレビューリンクが含まれます。

ワークフロー連携

MockFlowには、Slack、Microsoft Teams、Office、Trello、Atlassian製品、Google Drive、ブラウザベースのキャプチャワークフロー向けの連携やアドオンが含まれます。

デザインの引き継ぎとコード書き出し

WireframeProはワイヤーフレームをコードに書き出すことができ、料金ページにはReact、Tailwind、Shadcn、iOS、Kotlinなどのコード指向ワークフローがサポートされていることが示されています。

MockFlowが適している場面

製品作業のためのUIワイヤーフレーム作成
再利用可能なUIキット、テンプレート、組み込みコンポーネントを使ってWebサイト、モバイルアプリ、ダッシュボードを素早く構造化されたワイヤーフレームとして描きたいときにWireframeProを使います。
チームでのブレインストーミングと計画
チームが初期のアイデア出しの段階で、ブレインストーミング、ムードボード、マインドマップ、フロー図、カンバン形式の計画を共有できる場を必要とするときにIdeaBoardを使います。
素早い再設計と反復
プロンプト、スクリーンショット、既存のWebページを編集可能なワイヤーフレームに変換するAI支援機能を使い、白紙から始めずに既存の参照をもとに素早く再設計や反復を行います。
関係者とのデザインレビュー
チームメイトや外部レビュアーからのフィードバックが必要なときに、コメント、チャット、ビデオ会議、マルチプレイヤー編集、安全なプレビューリンクなどのコラボレーションツールを使います。
デザイン引き継ぎと実装準備
ワイヤーフレームを実装へ進める必要があるときに、コード書き出しやデザインに紐づくドキュメントを含むエクスポートと引き継ぎ機能を使います。

Pros and Cons

Pros

ワイヤーフレーム作成とホワイトボードの両方を1つの製品群でカバーしています。
初期設定の手間を減らす事前構築済みコンポーネントとテンプレートを提供しています。
コメント、チャット、会議、マルチプレイヤー編集でコラボレーションをサポートします。
プロンプト、スクリーンショット、コンテンツ生成、コード変換のためのAI支援ワークフローを備えています。
デスクトップアプリ、ブラウザ利用、チームツール向けアドオンなど、複数の導入・ワークフローオプションを提供しています。

Cons

公開ページのレビューでは、すべてのAI機能や連携機能について完全な技術詳細が提供されていません。
一部の機能は別々のアプリやプランに分かれているため、チームはWireframePro、IdeaBoard、または統合版のSuiteのどれを使うか選ぶ必要があります。
料金や利用可能な機能はプランによって異なり、一部の高度な機能には年額請求オプションがあります。

FAQ

WireframeProとIdeaBoardの違いは何ですか？

MockFlowは、ワイヤーフレーム作成とブレインストーミングのために別々のアプリを提供しています。価格ページでは、WireframeProがワイヤーフレーム作成アプリ、IdeaBoardがブレインストーミングとビジュアルコラボレーションのアプリであり、MockFlow Suiteは両方を1つのサブスクリプションにまとめたものだと説明しています。

どのプランを選べばよいですか？

価格ページでは、アプリごとのプランが提示されています。ワイヤーフレーム作成にはWireframePro、ブレインストーミングにはIdeaBoard、両方をまとめて使いたい場合はMockFlow Suiteを選ぶよう案内しています。

MockFlowには無料プランや試用オプションはありますか？

はい。価格ページには、機能制限のある永続無料のBasicプランが掲載されており、さらに自動更新なしで短期間プレミアム機能を利用できる10-Day Passも用意されています。

MockFlowはチームコラボレーションをどのようにサポートしますか？

MockFlowは、コメント、ビデオ会議、チャット、マルチプレイヤー編集、セキュアなプレビューリンク、Slack、Microsoft Teams、Office、Trello、Atlassian製品などとの連携を通じてコラボレーションをサポートします。

MockFlowでAIを使ってデザインを始めたり拡張したりできますか？

サイトでは、スクリーンショットやプロンプトを編集可能なデザインに変換したり、ワイヤーフレームをコードに書き出したりすることを含め、ワイヤーフレーム、図、コンテンツ、コードを生成するAI支援ワークフローが紹介されています。

Quick Facts

カテゴリー: デザインツール
主な製品: WireframePro と IdeaBoard
プラットフォーム: 一部のプランでは Windows と MacOS 向けのデスクトップアプリを備えた Web アプリ
ソースドメイン: mockflow.com
料金モデル: 無料プラン、10日間パス、個人およびチーム向けの有料プラン
主な利用者: UI案、ワイヤーフレーム、ボード、図を作成する個人とチーム