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

    複数の動画を設置できる「jQuery Youtube Player 」

    埋め込みコードを取得すれば簡単に設置できるYouTubeの動画ですが、…

  2. WEB制作関連

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

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

  3. WEB制作関連

    レトロな雰囲気が素敵なWEBサイト20個

    レトロな雰囲気を醸し出しているWEBサイトのまとめです。 (さ…

  4. WEB制作関連

    色とWEBデザイン -あか編-

    色別WEBデザインのまとめです。今回のテーマは「赤」です。&n…

  5. WEB制作関連

    ダウンロードしておきたい便利なシルエット素材85セット

    人のいろいろな動きから動物、植物や街並みまでモチーフや世界観作りなどに…

  6. WEB制作関連

    どこまでも横に展開していきそうな25個のWEBサイト

    横スクロールで展開するWEBサイトのまとめです。…

  1. 話題・トレンド

    Googleファッションショーがかわいいぞ。
  2. WEB制作関連

    商品の魅せ方がお洒落なECサイト25個
  3. 話題・トレンド

    過去をのぞき見したような75の写真が素敵。
  4. WEBマーケティング

    2010はてブ年間ランキングに学ぶ記事タイトルのつけ方。
  5. WEB制作関連

    ここまでできる!HTML5できたゲームまとめ
PAGE TOP
Top