WEB制作関連

ワイヤーフレーム作成に便利なWebツール「Moqups」

最近利用している人をよく見かける機会が増えたこの「moqups」ですが、試しに使ってみたらかなり使いやすかったのでご紹介します。

ツール自体はブラウザベースで利用しますが、その名の通りモックアップやワイヤーフレームを制作するためのツールです。海外ツールなのでインターフェイスは英語ですが、操作も直感的で特に抵抗なく扱えます。

まずはアカウントを作ってスタート。機能制限はありますがひとまず無料でも利用できます。こちらが初期画面。右上の歯車アイコンから設定を開き、プロジェクト名やページのサイズ、グリッドを指定します。

moqups_01.jpg

あとは左に並んだステンシルをドラッグ&ドロップで配置しながらワイヤーフレームを制作していきます。

moqups_02.jpg

用意されたステンシルだけでなく、好きな画像をアップロードして利用することも可能です。

moqups_03.jpg

ショートカットも豊富に用意されていて、ブラウザベースであることを感じさせない使い勝手です。

moqups_04.jpg

特におすすめの機能は複数のページを作成することができ、リンクでつなぐことでページの遷移を再現することができる点です。これで実際のWebサイトで想定している遷移を再現できます。

moqups_05.jpg

moqups_06.jpg

複数のページをまとめたものが1プロジェクトとして扱われ、無料アカウントでは2つのプロジェクトまで作成することが可能です。
ちなみに有料プランはこんな感じです。
moqups_07.jpg
個人的にはStandardプランを利用しようかと悩み中です…

完成したものはPDFやPNGでのエクスポートやURLでのシェアができます。
moqups_08.jpg

このブログの簡単なワイヤーフレームを作成したみたので以下のURLでシェアしてみました。

moqups_09.jpg

ワイヤーフレームを何で作成するかはよく話題にあがるところですが、これからはこういった動作なども再現したモックアップが主流になってきそうですね。

moqups

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    海外マーケティングエージェントのWEBサイト21個

    海外のマーケティング会社のWEBサイトのまとめです。デザインクオリティ…

  2. WEB制作関連

    「jQuery逆引きマニュアル 」の読者モニターをやってみた vol.01

    「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践…

  3. WEB制作関連

    WEB制作者なら必ず入れておきたいFirefoxアドオン50個

    WEB制作に携わる人には重宝するものばかりを集めたFirefoxアドオ…

  4. WEB制作関連

    jQueryを利用した演出がかっこいいWEBサイト50個

    多くのプラグインが開発され、様々に活用されているjQueryですが、サ…

  5. WEB制作関連

    ガーリーなPhotoshopのレイヤースタイル

    女性向けのデザインに役立ちそうなガーリーなPhotoshopのレイヤー…

  6. WEB制作関連

    鮮やかな色合いが目を引くデザインのWEBサイト25個

    鮮やかな色使いでデザインされたWEBサイトのまとめです。 (さ…

  1. WEB制作関連

    WEBサイト心理学|視線解析
  2. 話題・トレンド

    リアルとバーチャルの融合「プロジェクションマッピング」
  3. Design Items

    ティッシュを煙にみたてたティッシュケース
  4. ソーシャルメディア

    ついにリリース!話題の「mixiページ」のつくり方
  5. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(3)作業が捗る小技10選
PAGE TOP
Top