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サイト高速化に便利!「Google PageSpeed Insight」

    「0.1秒の遅れが1%の売上に影響する」と言われるくらいWEBマーケテ…

  2. WEB制作関連

    国内WEBデザインギャラリー厳選まとめ

    国内のWEBデザインのギャラリーサイトのまとめです。ギャラリーサイトは…

  3. WEB制作関連

    思わず問合せたくなる素敵なデザインのフォーム25個

    世界観を感じられるデザインのフォームのまとめです。 (さらに&…

  4. WEB制作関連

    便利なオンライン校正管理ツール19選+2

    いろいろ試しているんですがなかなかこれといった手法に行きつかないデザイ…

  5. WEB制作関連

    アプリのようなスライドメニューを実装するプラグイン6選

    facebookのスマートホンサイトなどでも採用されているサイドからス…

  6. WEB制作関連

    デザイナーなら必ずダウンロードしたいフリーフォント100個

    クールなものやポップなものなど、デザインに重宝しそうなフリーフォントの…

  1. Design Items

    思わず採用したくなるクリエイティブな履歴書
  2. Design Items

    猫好きにはたまらないアイテムを発見
  3. WEB制作関連

    固定配置したナビゲーションのWEBサイト21個
  4. 話題・トレンド

    Evernoteに新機能「Site Memory」がリリース。
  5. WEB制作関連

    カッコいいグランジ風のフォント45個まとめ
PAGE TOP
Top