Xd?いやMoqupsでしょ！

初めまして！ジークスでディレクターをしております、遠藤です！

早速ですが、タイトルは”ほぼ”釣りです。
Adobe XdとMoqupsの比較記事ではありませんのでご了承くださいmm
最近はもっぱらXdの話題が多かったのものでつい・・・

今までMoqupsを使っての作業が多かったので、その紹介記事となります。
ただ、今後はXdに浮気しようかなと思っています😅
やっぱり、チームの体制に合わせていくつかのツールを柔軟に使い分けれるようになりたいですね。
この記事を読んで、MoqupsやらXdやらモックアップツールに興味を持ってもらえると幸いです🤗

目次

• モックアップツールについて
• Moqupsとは
• Moqpusのいいところ
• もっとこうなるといいな
• おまけ

モックアップツールについて

そもそもモックアップツールって何？ってところから、ザックリ説明していこうと思います。

モックアップツールとは・・・

モックアップを作るためのツールです！（どーん）

はい、説明になってないですね。すみません。

じゃあ、モックアップって何なの？って話になってきますが。
簡単に言ってしまうと、サービスの紙芝居版のようなものです。
実際にサービスが提供されるデバイス（例えばiPhoneとか）で、ユーザーが体験する内容を擬似的に確認することができます。

「紙芝居」の品質は、案件によってまちまちです。
ワイヤーだけのもの、デザインまで反映されているもの、アニメーションまで確認できるもの等幅広くあります。

その「モックアップを作る」というニーズが近年高まっており、そのモックアップを 高クオリティかつスピーディー に作成できるツールに注目が集まっています。

背景としては、UXデザインの重要性が認知されてきたこと、アジャイル開発のような早いPDCAサイクルでサービスのクオリティアップをはかる手法が導入されていることがあるのかなーと思っています。

モックアップを作るメリットについては、多くの本や記事が出ておりますので、是非是非そちらをご参考くださいmm

さて、ちょっとダラダラと説明を書いてしまいましたが、モックアップツールとは以下を実現させるためのツールだと考えています。（※あくまでも個人的な見解です）

• ワイヤーフレームが引ける（外部ファイルの取り込みでもOK）
• 画面ごとの遷移を指定できる
• アニメーションを設定できる（必須ではない）
• 実機で見れる

そして、それを実現するためのツールがMoqupsです！

Moqupsとは

S.C Evercoder Software S.R.L.が提供しているWebアプリケーションで、ワイヤーフレームやモックアップをサクサクっと作れてしまいます。

バージョンアップも頻繁に行われており、ここなんとかならないかなぁと感じている箇所もどんどん改善されていっています。

サイトはこんな感じ。

https://moqups.com/

もちろんFreeでお試しできるので、何はともあれ、まずは触ってみることをお勧めします！

ちょっと情報は古いですが、使い方を説明した公式Youtubeチャンネルもあります。
https://www.youtube.com/user/moqups
色々と機能追加されていく歴史が見れて面白いです😁

機能紹介

個人的に印象に残っているコメント機能の追加

正直、私が初めてMoqupsに触れた3、4年前は、使いづらいって印象しか残ってなかったんですが、、、
1年半前ぐらいに使いやすくなったと聞いて触ってからはすっかり虜になってしまいました😍

さて、続いては私が感じたMoqupsの便利ポイントをご紹介します！

Moqupsのいいところ

さて、私が感じるMoqupsの良きポイントを全部で４つご紹介しようと思います！

1. UIが好き！

一発目から主観たっぷりの内容でお届けさせていただきますmm
実際の画面を見つつ紹介しましょう。

どうでしょう！？スッキリしていて見やすくないですか？
他のモックアップツールも同様ですが、機能が多くなるため、どうしてもアイコンだらけになってしまいますよね。
正直、慣れの問題ではありますが、どういった機能がどこにまとまっているという設計思想が見えるとグッと使いやすさが向上します。

Moqupsの場合、

① 作成ページを触る際に使うゾーン
② ページ内の要素の関係性を指定するゾーン
③ 全体の設定に関わるゾーン
④ 詳細な設定をできるゾーン
という配置になっています。

私は触り始めてすぐに大体の機能が把握できたので、シンプルな設計になってるからこそだと思います。

2. パーツのカスタマイズの自由度が高い！

Moqupsでは、左メニューの「Stencils」にWebパーツやらチャートやら全てのパーツが格納されてます。
見出し、テキスト、フォーム系、イメージ、表、グラフ、マップ、星、図形、メニュー、、、、、
というように種類が豊富です。

さらに、そのパーツ結構な自由度でカスタマイズできてしまいます！
パーツはそのままじゃないと使えないーってケース多いと思うんですが、Moqupsではいじれてしまうんですよね。

もちろんいじれる限度はありますが、ちょっとした所を触れるのが嬉しいですね。

3. 豊富なアイコン！

こちらも左メニューから、「Icons」を開いてみましょう。
これでもかってぐらいのアイコンがあります。
わざわざ他所から引っ張ってくる労力に比べると格段に楽チンですよね。

ただ、数が多すぎて探すのが大変だったりとかはあります、、
検索機能付きなんですが、機能的な単語だとhitしないこともちらほら。
（お気に入り登録的な機能はありません…）

ただ、オススメポイントは数だけではありません！
このアイコンsvgデータなので、Moqups上でカスタマイズできるようになってます！👏

↓が簡単に変更できちゃいます。
・塗りつぶし
・アイコンに沿った枠線
・透過度
・影
・ぼかし

ワイヤーフレームで伝えたい内容を表現できてとても助かっています！

4. コメント機能

またまた左メニューから、「Comments」を見てみましょう。
もう読んだままの機能ですが、各ページの好きな位置ににコメントを入れることができます。

他のツールでもありますが、本当に便利ですよね。
コメントをしたい該当箇所が明確になりますし、メンション機能やresolved機能もあるので、コメントの管理もしやすくなっています。

遠隔で複数のメンバーとやり取りする際に力を発揮しますね！
もちろん、クライアントとの連携もスムーズにできちゃいます！

まだまだ他にも、フォルダ管理とか、PNG / PDF書き出しとか、色々便利機能がありますが、その辺は実際に触ってもらって感じていただければと思います！

もっとこうなるといいな

ここからは私が個人的に感じている、もっとこうなったらいいなーという願望をただひたすらに書き綴っていこうと思います。
（ Moqupsさんの開発者に届け！この思い！）

1. モックアップ作成機能の充実

ここに来て、モックアップツールの根幹に関わる機能に対するツッコミをするという…
機能がないわけではありません！
画面右上にある「Interctions」のメニューから、アクションを追加する要素を指定することで、モックアップを作成できます。

ただ、、、ちょっと設定が面倒だなと感じることがあります。
別サービスのprottとかだと、ドラック&ドロップベースで導線をサクサク引けてしまうので、Moqupsでワイヤー引いて、Prottにアップしてモック作るなんてこともしばしば😅

わかっています、MoqupsとProttはサービスの始まり方が違うので、単純にサービスとしてどこに重きを置いてきたのかが違うんですよね。

願望を言うだけなら自由ということで。

2. 書き出し時の日本語フォント

Moqupsは複数のWebフォントが指定できるようになっていますが、日本語フォントに弱く、いざPNG、PDFで書き出すと謎のフォントに変換されて出力されます。
海外のサービスって日本語入力に弱いですよね。変換という文化がないので、変換確定のenter時の挙動がおかしくなる不具合がMoqupsにもありました。（今は改善されています）

漢字が中国語の簡体字っぽくなっていたりと。ちょっと見栄え的に微妙な感じに…

ヒラギノとかで表示されてくれると嬉しい限りです！

3. コメントのフィルタリング機能

とっても便利なコメント機能なんですが、フィルタリングが、
・未読
・未解決
・解決済み
この3パターンからしかなく。

「Aさんから来たメッセージ」や「自分にメンションがついてるメッセージ」とかでフィルタリングできると大変ありがたいです🙇
メールは飛んでくるんですけどね、どうせなら画面上で見れた方がいいなと。

とういうことで、Moqupsについてツールを触ってみての感想を書かせていただきました。
モックアップツールとしてここがいいよ！という内容よりは、ワイヤーフレーム作成に便利機能いっぱいあるよ！という紹介になってしまいましたが…
画面遷移や実機での確認はもちろん必須機能として備わっていますので、高品質のワイヤーをモックアップとして作成できるグッドなツールです👍

色々なツールに触れて自分に最適なモックアップツールを見つけましょう！

おまけ

おまけコーナーでは、その他のモックアップツールを簡単に紹介していきます！私が興味を持ったツールを並べていますので、「これってモックアップツール？」みたいなツッコミはご容赦いただければとmm

Adobe Xd

UI/UXデザイン、プロトタイプ、共同作業ツール

この記事のネタにもした、Adobe製モックアップツールです。最近、頻繁にワードを聞くようになりましたね。当然、他のAdobe製品との親和性が高く、Sketchの取り込みも可能になり需要の高まりを感じるこの頃です。
とりあえず、本腰入れて触って見る第一候補になります！

Cacoo

フローチャートが作れるオンライン作図ツール

BacklogやTypetalk等のサービスを提供しているヌーラボさんのWebサービスです。個人的にはすごく昔からあるイメージで、Moqupsを触る前はちょくちょくお世話になっておりました。

ちょっと前（2018年6月28日）にデザインがフルリニューアルされ、話題になってましたね。
リニューアル後はまだタッチしてないので是非使ってみたい！！

Prott

Prototyping tool for Web iOS Android apps

Goodpatchさんが手がける、プロトタイピングツールです。
まぁ、本当に簡単にモックアップが作成できてしまいます。デザインファイルをアップして、導線をドラック&ドロップでつないでいくだけ。

まさに「誰でも使える」モックアップツールかなと思います。
ワイヤーフレーム機能も結構前に追加され、Prott上でワイヤーの作成も可能です。

InvisionStudio（Early Access）

Screen Design. Redesigned.

まだ正式リリースしていない状態ですが、InVisionAppさんが提供するデザインツールです。

もともと、Invisionというツールが有名だったかと思いますが、本格的にデザインもできる新しいプロダクトとのことです。（モックアップツールとして並べるのはおかしいかもですが）

紹介ムービーを見つつ軽く触って見ましたが、学習コストは少しかかるかもな印象です。
ただ、機能が豊富で是非とも使えるようになりたいツールですね。

OrigamiStudio

Design Prototyping

かのFacebook社が提供しているプロトタイピングツールです。
名前からしていい！と思っていたんですが、あまり普及はしていないようです。

ちょこっとしか触っていないんですが見た目も良い感じで、どこかでじっくり触ってみたいなと思っています。ちなみにMac専用のツールです。

本当に色んなツールが増えてますよね、自分の環境にあったモックアップライフを楽しみましょう！！

おまけのおまけ

Googleトレンドで見る各サービス

直近2年間の動向をGoogle トレンドでみてみました！
やっぱり、Xdが最近は強いですね。Cacooはデザインリニューアル後に復活しているのがわかります。

・・・Moqups😭

次はタスク管理ツールの話でもしてみようかなー
それでは、またの機会に👋