Web担当者必見! Moqupsでワイヤーフレーム入門

Moqups画面

 今回はワイヤフレーム作成に便利なツールの紹介になります。

当サイトをご覧の方は、クライアントのために画面図(ワイヤーフレーム)を作成したいと思っていたり、自分で業務効率化システムを設計してみたいと思っているかと思います。

実際に画面図を作った経験がある方ならわかるかと思いますが、画面図の作成は想像以上に時間がかかります。また PowerPointで作るとなんかダサくてしっくりこない….Photoshopは高いし使いにくい….など何を使って作ればいいのかわからない方も多いのではないでしょうか?

そこで今回は非常に簡単にワイヤーフレームが作成できてしまう海外のwebサービスをご紹介します。サイトは英語ですが、何も心配いりません。シンプルで使いやすさ抜群デス。

Moqupsのご紹介

今回紹介するサービスはその名もMoqups です。少し聞きなれないですが、日本でモックアップという単語を耳にしたことがある方は多いのではないでしょうか?

モックアップとは、外見を実物そっくりに似せた模型のこと。

携帯電話ショップで動かないけど本物そっくりの携帯の模型があります。あれがモックアップです。

実際にMoqups(モックアップス)では、画面のサンプル(ワイヤフレーム)を作成し、本当のWeb画面の模型を作ることができます。(かなり軽く動くので、自分は作業マニュアル作成などでも利用しています。)

ワイヤーフレームってなに?

さきほどからワイヤーフレームという言葉を多用していますが、Web系の仕事に関わったことがない方には、ワイヤーフレームがどのようなものかイメージしにくいか思います。

例えばこんな感じです ワイヤーフレームのサンプル↓

ワイヤーフレーム参考画像2 ワイヤフレーム参考画像1

左側は簡単なサイトのイメージ図です。Photoshopで画像として作られています。

右側は実際に紙に書いたイメージです。完成したらこんな画面になるというイメージを書き表したものです。

なぜ書き出す必要があるのか?

Webサイトや業務効率化システムを作るときに、ユーザーが利用する画面も作成することになります。その際 どのような画面が使いやすいかなど検討するのですが、会話だけで決めてしまうと、完成した時にイメージとは異なってしまったり、認識のズレが発生するので、紙や画像で作ることが一般的です。

なにより実際に書き出したほうが、作りたいものがより明確になります。

なぜPhotoshopや紙の書き出しではよくないのか?

作業的に結構大変です。ということにつきます。

慣れている人は問題ありませんが、難しいツールを覚えるのは時間的コストがかかります。また 紙に書く場合、最初のアイデア出しは非常に効果的ですが、書き直しが非常に面倒くさいです。

これらの問題を解決してくれるのがMoqupsです。

Moqupsの便利なポイント

  • ドラッグ&ドロップでパーツを簡単配置できます。
  • PDF, PNGなどへ出力できます。
  • 自動保存されるため、保存し忘れも防止できます。
  • スマートガイドが付いているため、簡単に綺麗な画面がつくれます。
  • カスタマイズ可能なグリッド、作りたい画面に合わせたラインをつくれます。
  • オブジェクトのロックとグループ化ができるため編集したくない部分やまとめて動かすことが可能です。
  • ショートカットキーも準備されています。
  • 画像のアップロードもできるので、オリジナルのワイヤフレームがつくれます。
  • リンクを共有することで、メールで送れます。

このようにメリットをあげればきりがないほど、多くの機能が実装されています。まずは使ってみることをおすすめします。

Moqupsに登録してみよう

ではさっそくMoqupsに登録してみましょう。

Moqups へアクセス

Moqupsユーザー登録

 

上記画像で赤の枠をしてあるユーザー登録を選びましょう。

Moqupsプラン選択

プランを選びましょう。個人的にはStandardプランを利用していますが、継続的に利用する場合は、年間プランがおすすめです。

また無料プランで使いたい場合は、下にちょこっと書いてありますので、こちらをクリックします。(注意:無料プランで作られたプロジェクトは一般公開されます。またPDF PNGでのダウンロードができません。)

各プランの特徴

プラン名作成プロジェクト数容量価格
Free25GB無料
Standard101GB$9 / $99
Professional505GB$19 / $199
Ultimate無制限20GB$39 / $419  

が価格表となっています。プロジェクト数については、ウェブサイト3つ分の画面図を作りたい場合は3となります。

メールアドレスやユーザー名、パスワードを入力します。

Moqupsユーザー登録完了ページ

この画面がでたら無事ユーザー登録完了です。登録も簡単になっていますね。

Moqupsを利用して一つ画面図を作ってみよう

今回は Amazonや楽天などプラットフォームから出力される受注CSVファイルの中身を、一覧で確認できるシステムを作成します。

システムに必要な機能としては、

受注CSVを取り込む部分 + 取り込んだCSVの中身を表示させる部分

の二つが必要になります。

それでは作っていきましょう。まずはシステム画面の上部を作っていきます。

Moqups使い方1

 

左側の画面パネルから表示させたいものを選択して、右にドラッグしてください。

移動したあと、右クリックでカラーなど編集することが可能です。

 

Moqups使い方2

 

次に 受注 CSVを取り込むための、選択ボックスと取込ボタンを作成します。

Moqups使い方3

今度は取り込んだ顧客データを表示させるようのテーブル(表)を作成します。テーブルを左

からドラッグしたあと、テーブル上でクリックするとデータを入力できます。

Moqups使い方4

一通りできたら、右上をクリックして画面のグリッド(線)を消してみましょう。背景が白色になって

画面ぽくなってきました。 最後に上と一緒のラインを下に入れてあげると見栄えがよくなります。

Moqups使い方5

 

完成したら完成図を画像やPDFファイルにしてダウンロードしてみましょう。(大変残念ですがFREEプランではダウンロードできませんので、使いやすそうだと感じた方は有料会員になってみましょう。)

Moqups使い方6

 

ダウンロードできたら完成です。

まとめ

いかがでしたでしょうか?ワイヤーフレームを作るのにMoqupsはかなり使えるツールです。画像などを大量にアップしても、サクサク動くので現在でも愛用しています。実務レベルでも問題なく利用できるクオリティで、かつ月1000円前後からと安く利用できるのも魅力です。

興味がある方はとりあえず無料会員になって、プロジェクトを作ってみましょう。

きっと使いやすさに驚くことでしょう。

CTA

副業始めてみませんか。

元ホストのフリーターが月に60万円稼げるようになった、
ネット物販ビジネスとは?

スキル・経験なくても、小資金で始められるネットビジネスが無料で学べます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

CHUYA MIURA

普段は物販系のシステムの開発サポートや、中小規模のネット物販事業を行っている方や企業様向けに業務効率化支援サポートなどしています。システム開発経験 楽天 ヤフオク Amazon ヤフーショッピング BUYMA メルカリ などの作業効率かツールやシステムを開発してきました。個人でも物販をやってみて、物販ビジネスのどの部分が作業的に大変なのかを経験をいかして、現在はディレクションやコンサルティングサービスをしています。 物販関係のシステムを作成したい方にはご好評いただいております。物販システムを開発したい方に向けて、各プラットフォームのツール開発経験のあるプログラマーさんの紹介や、システム仕様書のサポートなどもしていますので、ご興味のあるかたはお気軽にご相談ください。物販経験 ネット物販のシステムを希望されるクライアントさんの気持ちを理解するため、2013年に個人でも物販をはじめました。 ヤフオク Amazon 楽天 などに出品して、月商100-300万になりました。1日に150件近くの出荷も経験し、それらの経験を元に現在サイトを運営しています。このサイトでブログをかいてくれている しんくんに昨年初めに中国仕入れを教えたところ、副業としては十分な結果がでたことを受け、初心者向けに情報を公開しています。ご興味あるかたはこちらへ連絡ください。(ご連絡の際は、ご用件も一緒にご連絡ください。)メール:sales☆fieroj.com(☆をアットマークに変えてください) Chatwork: Chuya-Miura