記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

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のサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

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