ワイヤーフレームを作成するツールは多くありますが、多機能だったり、高価格だったりと、初心者には敷居が高いかもしれません。
簡単な図であれば、Power PointやGoogleスライドでも作成できるものの、図形やアイコンを集めて図を作成するのは意外と時間がかかります。

「moqups」は、無料でも使えるブラウザベースのサービスでありながら、豊富なステンシル（図形）・アイコン・フォントが用意されているため、ドラッグ＆ドロップで簡単にワイヤーフレームを作れます。

早速使い方を見ていきましょう。

目次

  1. moqupsとは
    1. プラン
  2. 登録方法
  3. moqupsの使い方
    1. Pages
    2. Stencils
    3. Images
    4. Icons
    5. Comments
    6. Sharing
  4. まとめ

moqupsとは

1.png
https://moqups.com/

moqupsは、ブラウザベースのモックアップ・ワイヤーフレーム制作ツールです。インターフェースは英語ですが、直感的に操作できます。無料プランでは、作成できるプロジェクト数や配置できるオブジェクト数に制限がありますが、豊富なステンシル・フォント・アイコンを備えており、思い通りの図を簡単に作成できます。

プラン

moqupsには複数のプランがあります。各プランの機能詳細は以下の通りです。

無料プランはプロジェクト数が1つしか作れないので、本格的に利用するのであれば有料プランの方が使い勝手は良いでしょう。
まずは無料プランを利用し、相性が良いと判断したら有料プランの導入を検討してみても良いかもしれません。

Free Basic Professional Ultimate
月額料金 無料 $19 $29 $49
プロジェクト数 1 10 50 無制限
ストレージ容量 5MB 1GB 5GB 20GB
ユーザー数 1 無制限 無制限 無制限
複数ユーザー同期 × ○ ○ ○
プライバシー設定 × ○ ○ ○
マスターページ × ○ ○ ○
アーカイブプロジェクト × ○ ○ ○
PDF/PNGエクスポート × ○ ○ ○
Google Drive連携 × ○ ○ ○
サポート × ○ ○ ○

登録方法

2.png
https://moqups.com/

moqupsのページの「TRY IT NOW FOR FREE」ボタンをクリックします。

3.png
画面右上の「SIGNUP AND PRICING」ボタンをクリックします。

4.png
表示されるウィンドウの下部にある「Free Plan」をクリックします。

5.png
メールアドレス・ユーザー名・パスワードを入力し、「Create account」ボタンをクリックします。

6.png
モーダルウィンドウ下部に「You are using the Free Plan」というメッセージが表示され、ログインが完了します。

moqupsの使い方

Pages

7.png
左サイドメニュー内の「Pages」アイコンをクリックし、「New page」ボタンをクリックします。

8.png
新しいページが追加されます。

9.png
上部メニュー内の「Workspace」アイコンから、「Page settings」をクリックします。

10.png
ページのサイズと背景色を変更したら、「Apply」ボタンをクリックします。

Stencils

11.png
moqupsでは、Stencils（ステンシル）という図形やパーツを組み合わせてワイヤーを作成します。左サイドメニュー内の「Stencils」アイコンをクリックし、例として「Text area」をページにドラッグ＆ドロップします。

12.png
「Test area」がページ内に追加されました。

13.png
追加したステンシルをダブルクリックすると、テキストを編集できます。また、右側のエリアではステンシルのサイズ・色・フォントなどの書式を変更できます。

Images

14.png
左サイドメニュー内の「Images」アイコンをクリックし、「Upload Images」ボタンをクリックします。

15.png
アップロードしたい画像を選択します。Shiftキーを押しながら複数選択することも可能です。

16.png
画像のアップロードが完了すると、ステンシルのように左に表示されますので、1つずつページにドラッグ＆ドロップします。

17.png
ページに画像が追加されます。

Icons

18.png
moqupsには、豊富なアイコンが用意されています。左サイドメニュー内の「Icons」アイコンをクリックし、追加したいアイコンをページにドラッグ＆ドロップします。

19.png
ページにアイコンが追加されます。

Comments

20.png
左サイドメニュー内の「Comments」アイコンをクリックし、「Add a comment」をクリックします。

21.png
ページ上に、ドラッグで移動できる番号が追加され、番号をクリックするとコメントを入力できます。コメント欄はマークダウン言語に対応しており、HTML形式で記入することも可能です。記入したら「Send」ボタンをクリックします。

22.png
コメントが追加されると、左のコメント欄にリスト表示されます。このリストは、上部のShow: から、コメントのステータスで絞り込みできます。

コメントに返信する場合は、番号をクリックし、テキスト欄に入力の上、「Reply」ボタンをクリックします。コメントに書かれている修正が解決した場合などは「Resolve」ボタンをクリックします。

Sharing

23.png
プロジェクトを共有するには、上部メニュー内の「Sharing」アイコンをクリックし、表示されるProject Linkをコピーします。無料プランでは、閲覧者に制限をかけることはできませんので、注意してください。「Export as PDF/PNG」というリンクもありますが、有料プランの機能です。

まとめ

moqupsでは、豊富なステンシル・アイコン・フォントをドラッグ＆ドロップで配置していけば、初心者でも簡単にワイヤーフレームを作れます。

無料プランで作成できるのは1プロジェクトのみですが、利用期限はありません。URLでの共有やコメント機能など、チーム向けの機能も含めてじっくり使ってみましょう。