エンジニアだってデザインしたい!モックアップツールを使ってみる

このエントリーをはてなブックマークに追加


こんにちは!ueharak です。

デザインと言っても絵心のハナシではありません。
ここでいうデザインとは設計のことです。モックアップはそのための下書きのようなものです。
気軽に作って調整を繰り返すことで、プロダクトの輪郭を徐々に明らかにすることができる便利なツールです。

今日は私がよく使う Balsamiq Mockups を紹介したいと思います。
これは手書き風のモックアップを簡単に作ることができる便利なツールです。
素早く編集するための工夫がなされており、使っていてとても気持ちが良いものです。

画面はこんな感じ:


上部のコンポーンネントを中央のペインにドラッグして作業します。


例えばコンボボックスはこのようになります。


この文字の部分を編集すると


いい感じに描画してくれます。



面倒なテーブルも


この通り。


チェックボックスなどの記法 [X] もあるため、サクサクとコンポーネントを配置できます。
ご覧の通り、このツールの特徴は各コンポーネントを簡易なテキスト表現で記述することができる点にあります。テーブルも CSV のように記述して貼り付けるだけで作ることができます。いちいち各要素にテキストを入れて位置を調節するといった手間が一切不要であるため、モックアップに集中することができます。

ダイアログボックスも作ってみましょう。


Mac と Windows では「OK」と「キャンセル」が逆なのはご存知ですか?
どちらを自然と感じるかによって、自分が Mac 派なのか Windows 派なのか分かると思います。
(ちなみに私は Windows 派です)

続いてボタンがたくさんあるものを作ってみましょう。
ボタンがたくさんあると言えばそう、電話と電卓ですね!


こちらもご存知の方も多いと思いますが、キーパッドの配列が異なっています。
配列を入れ替えてしまうと違和感があって使いづらいものになるでしょうね。

身近なところにも意外と同じに見えて異なる配置・配列があるものです。
デザインの際はこうした暗黙知をしっかり意識し、利用者に違和感のないものを作りたいものです。

みなさんもぜひ、モックアップツールでプロトタイプを作ってみてはいかがでしょうか。

それでは!

次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...