モック作成が面倒で “楽” した話

こんにちは。エクスチュアの大吉です。

いちいちモック作るの面倒くさいな。
仮データ作成して、BIに接続して、そこから自分でコンポーネント作成してダッシュボードにはめ込む作業。。。
モック作成に時間をかけたくない。

このような課題、みなさんも感じたことありますか？
僕は毎回のように感じています。

「どうにか自然言語の指示だけでモックを作成できないか」

そんなときに出会ったのが、Mokkupというツールです。
軽い気持ちでトライアルで触ってみたのですが、、、僕の願いが叶いました。

今回は自然言語で手軽に時短でモックを作れるMokkupについて紹介します。

Mokkup は、ダッシュボードやデータ可視化画面のモックを、文章による指示だけで自動生成できるオンラインのワイヤーフレーム作成ツールです。
専門的なデザインスキルがなくても、必要なグラフや指標、レイアウト構成をプロンプトで指定するだけで、プロフェッショナルなダッシュボードのたたき台（モック）を短時間で作成できます。
企画段階の画面案作成や、クライアント・チームとのイメージ共有を迅速に進められる点が特徴です。

主な特徴

自然言語でモック作成
「売上推移の折れ線グラフを左側に」「KPI カードを3つ追加」など、文章での指示だけでダッシュボードのレイアウトや構成を自動生成できます。解像度の低い指示（「○○なダッシュボード作って」）にも対応可能なのも魅力的です。

豊富なテンプレートとコンポーネント
よくある業務ダッシュボードをカバーするテンプレートやチャート・カード・表などが多数揃っており、構成のカスタマイズも柔軟に行えます。

BI ツールへのエクスポート対応
作成したワイヤーフレームを Tableau や Power BI にエクスポートできるため、モックから本番環境への移行がスムーズです。

導入

さっそくMokkupを触ってみましょう。
まずは、左上のLoginまたはTry for freeでサインアップしましょう。

サイドバーのMy Projects>右上のcreate newを選択し新たなプロジェクトの作成しましょう。

任意のプロジェクト名とテンプレートのサイズを選択します。

自然言語でモックを作成

サイドバー上部のCreate with AIをクリックします。

Describe your dashboardにどのようなモックを作成したいかを入力します。
※2025年12月現在では英語のみの対応となっております。

今回は”Create a dashboard that shows the performance of each property”(各物件のパフォーマンスを表示するダッシュボードを作成する)と入力しました。

30秒ほどでこのようなモックが完成します。

BIにエクスポート

続いて、作成したモックをTableauにエクスポートしてみましょう。
右上のExportを選択します。

ここではエクスポートのファイルを指定できます。
画像ファイルはもちろん、TableauやPowerBIなどよく使われるBIツールにエクスポート可能です。
今回はTableauのtwbx形式でエクスポートます。

Tableauでも問題なく表示されていました。
ここまでのモックをTableauで作り込むには数時間～数日かかると思います。
Mokkupを使えば、3分ほどでモックが作成できます。
Mokkupで作成されたモックが完成品ではなく、そこから微修正は必要になります。
しかし、大枠のモック作成の作業効率を圧倒的に上げることができます。

価格

みなさん気になるのは「いくらなの？」ですよね。
MokkupにはFreeプランの他に3つのプランがあり、プラン毎にできることの範囲が異なります。

主な違いは、自然言語でモックを生成できる回数と、作成したモックをBIにエクスポートできる回数です。
Mokkupでは、自然言語でモックを生成する際に AI Coins を消費します。
このAI Coinsはプランによって毎月の付与数が異なります。
また、モックをBIにエクスポートする際にも クレジット を消費し、こちらもプランごとに毎月の付与量が決まっています。