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制作関連

    使いづらい(!?)けどフリーで高品質なアイコン素材60個

    「汎用性がない。」「何に使うの?」というものもありますが、ピッタリはま…

  2. WEBディレクターズマニュアル

    WEBディレクターなら参考にしたい手書きの画面設計書

    様々なアプリケーションを試し、試行錯誤しながらWEBサイトの画面設計を…

  3. WEB制作関連

    固定配置したナビゲーションのWEBサイト21個

    ナビゲーションが固定配置されたWEBサイトのまとめです。このブログもナ…

  4. WEB制作関連

    今どきなUIデザインサンプル35個

    アプリやWebサービスのインターフェイスに役立ちそうなUIサンプルです…

  5. WEB制作関連

    美しいナビゲーションが素敵なWebサイト25個

    ユーザビリティとあわせてそのサイトの印象にも大きく影響を与えるナビゲー…

  6. WEB制作関連

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

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

  1. iPhone

    iPhoneのカメラ機能を拡張する「iPhone Lens Dial」
  2. Design Items

    自然にマッチしたチェーンロック
  3. iPhone

    最強のiPhone4ケースがあった。
  4. Design Items

    鯉が泳ぐカーペットって?
  5. iPhone

    iPhoneをミニ映画館にできるアイテム
PAGE TOP
Top