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

    ユーザビリティを向上させる25の高品質なアイコンセット

    絶妙な質感も持っていてWEBサイトのユーザビリティとデザインクオリティ…

  2. WEB制作関連

    色とWEBデザイン -オレンジ編-

    色別WEBデザインのまとめです。今回のテーマは「オレンジ」です。…

  3. WEB制作関連

    X’MASにぴったりなPhotoshopのレイヤースタイル

    クリスマスにぴったりなゴールドがお洒落なPhotoshopのレイヤース…

  4. WEB制作関連

    WEBサイト心理学|アフォーダンス理論

    アフォーダンスとは、もともと知覚用語だったものをドナルド・ノーマンがイ…

  5. WEB制作関連

    美しい羽根が描けるPhotoshopブラシ44個

    幻想的な雰囲気から何気ないテクスチャなどに活用できそうなPhotosh…

  6. WEB制作関連

    気持ちもあがる!デザインの美しいEコマースサイト25個

    ネットで買い物というと商品を決めたら一番安いお店を探して・・・というの…

  1. 話題・トレンド

    思わず目を奪われてしまった85の建造物
  2. WEB制作関連

    クリエイティブなシングルページWEBサイト20選
  3. 話題・トレンド

    思わず目を疑ってしまうペットの捜索願い
  4. 話題・トレンド

    近未来空間を実現した「ドバイメトロ」がすごい。
  5. 話題・トレンド

    これを見れば禁煙できるかもしれない。
PAGE TOP
Top