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

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

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

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

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

Moqupsのご紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Moqupsの便利なポイント

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

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

Moqupsに登録してみよう

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

Moqups へアクセス

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

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

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

各プランの特徴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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