ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

レスポンシブ風モックアップが簡単に作れるツール「balsamiq」

レスポンシブ風モックアップが簡単に作れるツール「balsamiq」

blasamiq-eycatch

こんにちは。ロックウェーブの岡本です。

今月の休日の予定をことごとくゲリラ豪雨に潰されています。

今回紹介するのは、Cacoo以上に便利なモックアップ作成ツール「balsamiq」です。

モックアップとワイヤーフレーム

そもそも「モックアップ」とはどういったものなのでしょうか。

直訳すると「模型」という意味になり、メーカー・工場などでは「原型」という意味でも使用されています。

ワイヤーフレームが「サイトの骨組み」を決定するものだとすれば、モックアップは「サイトの完成イメージ」を共有するために作成するものだといえます。

Cacooとbalsamqの違い

balsamqはCacooと異なり、「モックアップ作成に特化したツール」です。

そのためかCacooでは可能な「psd/svgでの出力」は対応していません。

その代わりに実装されているのが、「xml出力」です。

balsamiq出力画面

「Export Mockup XML」もしくは「Ctrl + E」をクリックすると、xmlタグがクリップされます。

クリップされたタグをエディタに貼り付けて、xmlファイルを完成させましょう。

xmlサンプル

PhotoShopなどでデザインラフを作成したいのであれば、Cacooでのワイヤーフレーム作成を。

大まかなサイトの動きなどを共有したい場合は、balsamiqでのモックアップ作成を行うというのが、制作業務を捗らせる使い分け方ですね。

豊富なステンシル・パーツ類

cacooにはないパーツ類

モックアップ作成ツールということもあり、使用出来るパーツの種類はCacoo以上に豊富です。

iPhoneをイメージしたキーボードや、アラートボックス・付箋風のコメント欄や☓マークなども取り揃えられています。

例によってパーツをひと通り並べてみたのですが、10分足らずでPC→スマホのモックアップが完成しました。

モックアップ作成イメージ

今回は省略しましたが、ブラウザのサイズを調整することでタブレット・ファブレット用画面なども作成が可能です。

もちろんサイズ調整はドラッグで可能。しかもpxでサイズも表示してくれます。

balsamiqサイズ調整

製品版では、共同編集作業もOK

無料体験版は7日間のみの利用なのですが、製品ライセンスを入手すれば共同編集なども可能になります。

付箋や取り消し線パーツを活用することで、クライアントとのミーティングの際に変更点の共有がよりわかりやすくなるのではないでしょうか。

まとめ

製品版は最も安いもので17米ドルから。ブロガーや開発者など、一部には無料ライセンスも発行している様子ですので、ぜひ無料体験版でいろいろ試してみてはいかがでしょうか?

ちなみにWordPressの管理画面風のテンプレートなどもアドオンでありますので、WordPressでサイトを作る際にはかなり重宝するかもしれません。

WORDPRESS POST EDITOR FOR BALSAMIQ
http://tri.be/update-wordpress-post-editor-for-balsamiq/

[browser-shot width=”600″ url=”http://balsamiq.com”]

http://balsamiq.com


                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事