あなたのサイトの訪問者の行動が全てわかる、無料で簡単に使えるアクセス解析

正しいメールアドレスをご入力ください

利用規約に同意した上で登録してください

close

会員登録が完了しました

入力いただいたメールアドレスにPtengine本登録に関する確認メールが届きます。

【メールが届かない場合】

お問い合わせ(support@ptmind.co.jp)

サイトのデザイン作成が捗る!イケてる手書き風デザインが特徴のモックアップ作成ツール -balsamiq

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Untitled design -15-

こんにちは。マーケティング部の繋です。

Ptengine Blogでは自分たちで利用していたり
良さそうなサービスを定期的に紹介しています。

今回はWebサイトを制作する前のモックアップを作成できる
balsamiqが便利なので紹介したいと思います。

そもそもワイヤーフレームとモックアップの違いは
何なのでしょうか?少し調べてみました。

例えば家を建てる際に置き換えると
ワイヤーフレームは設計図(骨組み)、モックアップは模型となり
モックアップの方がより、サイト完成時のイメージに近いものとなります。

Cacooやjustinmindといったワイヤーフレーム作成ツールがありますが
今回は使用できるオブジェクトも豊富なbalsamiqを紹介していきます。

balsamiqとは?

1EAB913B-D712-4624-9506-31C405AB95A8

Balsamiq. Rapid, effective and fun wireframing software. – Balsamiq

WEBサイト制作前に必要になる、モックアップ作成に特化したツールです。

手書き風のSketch Skinと通常のWireframe Skinを
切り替えられる所も特徴のひとつです。

※無料トライアルでは切り替え不可

135839F4-9F61-47CD-B4F7-D1DF28BC8714

無料トライアル期間は7日間でインストールするデスクトップ版と
ブラウザ上で使用するウェブアプリ版の2種類があります。

Google Chromeのエクステンションもリリースされています。

更に企業向けとなりますが、Google Driveや
Atlassianが提供している管理ツールのConfluenceやJiraとの連携も可能です。

今回はデスクトップ版を紹介していきます。

balsamiqをつかってモックアップをつくってみよう

つくる前の準備

モックアップ作成前の準備をしておきます。

balsamiqのダウンロード

まず「Download Desktop App」をクリックします。

 

46890810-14FA-41D6-9F55-80440871129F

使用しているOS名が表示されたダウンロードボタンがあるので
クリックしファイルをダウンロードしましょう。

DC8E24D6-22E1-4878-B93D-4DF852081A40

規約(※全英文)を読んでください的な文言が表示されるので、
同意した上で「I Agree」をクリックするとダウンロードが開始されます。

balsamiqのインストール

ここでは各OSの方法に従いインストールをおこないましょう。

モックアップ作成

インストールが完了したらbalsamiqを起動しましょう。

画面の説明

F32B3F7F-8BCE-4015-9352-367C31C5492B

基本的な使い方はシンプルで、設置したいオブジェクトを
作業フィールドにドラッグするかオブジェクトをダブルクリックすることで
作業フィールド内に設置されます。

使用できる豊富なオブジェクト

balsamiqは、たくさんのオブジェクトを使用できるのも特徴です。
全てお見せしたい所ですが、種類が多すぎるので、ここではいくつかご紹介します。

・iOS

B653FB1A-3B2B-46F9-8A9D-6114801E4FDA

・Media

C8DBE6DB-3223-4342-828F-29D3840E9F9E

・Container

4B3205E1-84DB-41A5-86C1-CF0965478ADC

・Layout

86363017-D0E4-43FB-8D2B-9288D13B7809

ここで紹介しているのはほんの一部です。

特にヤバいのが使用できるアイコンの数です。
AppleのマークからGithub、Slackのロゴまで用意されています。

オブジェクトを設置する

では実際に上記のオブジェクトを設置していきましょう。

AF723FEB-84D5-4BE6-9245-90E7F5EEDDEB

オブジェクトのサイズやKeynoteやPowerPointと同じ感覚で調整できます。
また画面右端にあるBrowserの箇所で色の変更や詳細なサイズの調整がおこなえます。

3C8B8196-A0AD-442E-B807-849ADFB0DB6B

作業フィールドに設置されたオブジェクト上で
ダブルクリックすることで表示などの編集も可能です。

E31FC304-22B9-443B-A58C-1FEC6D867926

表示を編集することにより、更にサイト完成時のイメージに近づける事ができます。

基本的にドラッグ&ドロップとダブルクリックで操作できるので
はじめての方でも直感の操作で何とかなります(笑)

1E34ECC2-81D8-4CCB-93D7-5F597385A24F

またローカルの画像などを挿入する事も可能です。
オブジェクトを設置してコツコツ作っていきます。

モックアップが完成

と、いうことでモックアップができました!

全く知らないサイトのモックアップを作るよりも、
サイト完成後のイメージに近いという部分を
お伝えしたかったので有名なサイトをモデルに作成しました。
(Googleは1分でできるので避けました笑)

正直10分くらいで作ったので、少し雑になってしまいましたが…

完成したモックアップはPNGやPDFでエクスポートが可能です。

New Mockup 1

Youtubeのトップページです。10分あればこのくらいのものは作れます。

さすがにAmazonやYahoo!Japanのようなテキストやオブジェクトが多く見られる
サイトはもう少し時間がかかってしまいますが。

ワイヤーフレームよりも完成後のサイトに近いものが作れるので
実際にコーディングをおこなう方もイメージしやすいと思います。

おわりに

1年程前にも使用したことがあったのですが、
以前よりも直感的な操作ができるようになった気がします。

弊社の他のメンバーもbalsamiqを利用していますね。

ただし僕はワイヤーなどサイトのラフ案を
作成する際はNumbersを使用しています。

Numbersに慣れているというのもありますが、
balsamiqが日本語フォントに対応していない部分が大きいです。

英語で作成するサイトであればbalsamiqで問題ないですが、
日本語のサイトですと、フォントで見た目が激変するので
逆にイメージが崩れてしまう可能性があるからです。

※日本語フォントを使用する方法はありますが、なぜか使用できなくなっていました
※日本語入力は可能ですが、明朝体のようなフォントになってしまいます。

ただし、少々面倒ですが枠だけbalsamiqで作成し後はNumbersで。
という方法もあるので日本語フォントに対応していないだけで
使用しないのはもったいないと個人的に思います。

無料で使用できる期間は7日間と少々短いですが、
継続して使用していくのであれば有料プランを検討されてはいかがでしょうか?

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSで最新情報をうけとる