↓MarvelのURL
https://marvelapp.com/
↓今回作成した画面モックアップ
https://marvelapp.com/prototype/j3h39hh
※この記事はMarvelを数回しか使っていないものの感想なので参考程度にとどめてください。
Marvelとは
Marvelは、PC・スマホなどの画面モックが作れるサイト。
アカウントを作れば、無料で1つまでプロジェクト単位での画面モックを作ることができます。
試してはいませんが、チームで作成することができるらしいです。
今回は、無料ユーザで試してみた感想を書き連ねていきます。
Marvelを使ってみて
まず、使ってみての第一感想は「無料という前提で、まあまあ満足できる」でした。
画面モック作成の流れですが、
①：アカウントを作成
②：作成するモックのタイプ選択(PC？スマホ？)
③：「Let's add some designs!」か「Try an example prototype」か選択
(「Let's add some designs!」を選択すると0ベースからの作成)
プロトタイプを選択すると、以下のテンプレが出てきます。
一見、テンプレをもとに自分好みにカスタマイズできるのかなと思ってしまいますが、カスタマイズすることはできないので注意。
(ここが、『まあまあ』満足できるという点)
なので、画面モックを作る時は結局0から作ることになります。。。
「Upload or create designs」を選択し、「Design in Marvel」を選択。
そうすると、画面モック作成画面に行きます。
↓画面モック作成ページ
Marvelで提供されているパーツを駆使したり、画像アップロード機能を使いながらモック作成することになります。
↓実際に作成してみた画面はこんな感じです。
不便だなと感じたのは、挿入した図形を均等配列できないこと(目視で揃えることになる)や、三角形の図形が見当たらなかったこと。
なので、Marvelで見つけることができなかったパーツは、Excelの図形でいい感じに作り、それをコピペするというやり方でモックを作りました。
多少不便さはあれど、無料という範囲内では全然満足できました。
結論
ちょっと記事の後半で不便さを書いてしまいましたが、無料で使えたのと「力を入れず、サクッと作りたい」という目的だったので全然不満には感じませんでした。
スマホやPCで画面モックを作ろうとしている人は、１つの参考情報として検討してみてください。