今回のテーマはモックアップです。Webサイトやスマートフォンアプリなどを作る際に、いきなり細かなデザインに入るのではなくまずモックアップと呼ばれる簡易的なデモを作ってみるのが一般的です。それを何度か見直し、修正した上で形になったと判断して実際のプロダクトを作り始めます。

そんなモックアップを作るためのツール、関連オープンソース・ソフトウェアを紹介します。

紙

個人的には第一段階目は紙を使うのがお勧めです。コンピュータ上で作成する場合、ついつい数ピクセルのずれであったり細かい点に目がいってしまいます。そういった些細な部分に気を取られると本質を見失ってしまいます。

まずラフで作成するためには紙に書いてみるのがオススメです。この時、鉛筆よりもボールペンのが良いです。間違った時に直せると考えてしまうと細かいところに注目してしまうでしょう。

以下はプレミアムのみです。

[s2If current_user_can(access_s2member_level1)]

ホワイトボード

会議などではホワイトボードを使って意見を交わすことがあります。みんなの目線を下げずに会話できるのは便利なのですが、デジタルで残す仕組みがないのが難点です。大抵消す前にスマートフォンで撮影したり、高級な印刷機能がついたホワイトボードを購入したりします。

ホワイトボードの場合、ペンがかすれたりするのが思いの外ストレスになったりします。創造性を極力邪魔しない仕組みが大事です。

スマートフォンアプリ

例えばProttのようなアプリは紙に書いて撮影したものにアクションをつけて実際に動かしてみることができます。紙の段階が終わったら、次はこのUXを確認する段階になるでしょう。この時点では基本的なUIは検証済みであるべきです。この時点でUIについて考えると余計な時間がかかります。

UXについてはスマートフォンアプリでは大きな行き違いにはならないと思いますが、スライド方向であったり情報の消し方などを確認します。

Illustrator/Photoshop

デザイナーの方の場合、Adobe系のソフトウェアでモックアップを作成することがあります。これが有効なのはすでにデザインが固まってきている段階で細かいツメを考えている時や、既存アプリ/サイトの修正です。

本来確認すべきポイント以外の部分に目がいってしまったり（その度に、ここは今は無視ししてくださいといった説明が必要になります）、作り込み過ぎてしまうきらいがあります。

オープンソース・ソフトウェア

Mocka - モックアップの作成に使えそうなplaceholder

Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供します。<div class="mocka-container">

quickMockup - Webベースのモックアップ作成ソフトウェア

Webサービスやアプリをはじめようと思ったらまずモックアップを作るところからはじめましょう。モックアップを使って色々考える中で、アイディアに磨きがかかっていくはずです。quickMockupはそんなモックアップを作成するためのソフトウェアになります。Web上で動くのでより手軽に使い始められるでしょう。画面は2つに分かれていて、左側にパーツが並んでおり、右側に作成しているモックアップが表示されます。

devices.css - スタイルシート製のスマートフォン/タブレットデバイスモックアップ

スマートフォン用のプロモーションを行う際には必ず必要になるのがモック（枠）ではないでしょうか。スマートフォン、タブレットデバイスの枠があるかないかで随分印象が変わるはずです。そこで使ってみたいのがdevices.cssです。10種類のデバイスの枠を簡単に表示してくれるスタイルシートです。devices.cssはクラス名、Divの指定法が面白いです。例えばiPhone 4Sであれば、

HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！「Fries」

FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラッピングすればAndroidネイティブ風のアプリケーションになってしまいそうです。

MockFlowFont - デザインに使えるモックフォント

Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。このフォントを使ってデザインを起こした例です（GitHubより）。イメージがわくでしょうか。

デザインモックアップ作業で役立つ機能が詰まった「RoughDraft.js」

RoughDraft.jsはモックアップ構築中のデザインを高速化するためのライブラリです。Webサイトのデザインをしていて、同じ表現を繰り返し入力するのはとても面倒です。そこでRoughDraft.jsを使って楽をしましょう。data-draft-repeatで繰り返す回数が指定できます。さらにdata-draft-imageでplacehold.itの画像を埋め込めます。その他data-draft-textで適当な文字、data-draft-dateで適当な日付を埋め込んでくれます。一つのブロックを作れば良いだけなので変更も簡単で便利に使えるでしょう。

試そう！Webブラウザ上でモックアップを作れる「Mockup Designer」

Mockup Designerはローカルストレージを使ったWebベースのモックアップ開発ツールです。Webサイトを作ったり、iOSアプリを開発したりする際にまず作っておきたいのがモックアップ（ワイヤーフレーム）です。Mockup Designerはそれほど構成要素は多くなく、フォームや文字、テーブル、円と四角といった形状くらいになります。しかし表現自体は十分にできそうです。今後コミュニティベースでパーツが増えていけば、面白いツールに仕上がりそうです。データはローカルストレージに保存され、画像としてエクスポートできます。

HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク「Ratchet」

RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿ってパーツを組み合わせていくだけでiPhoneアプリのようなUIが出来上がります。HTMLであればちょっとした文言の変更や動作の確認であれば十分かも知れません。

モックアップはマインドマップに似ています。まずラフで書いて、徐々に掘り下げていくプロセスです。一度書き出してみることによって、自分のアイディアが明確になっていきます。それを全員で共有して進めていくので、いきなり深く掘り進んでしまうとドツボにはまります。

アプリの場合UXもあるので紙で書いて終わり、という訳にはいきませんが、それでもまず最初のステップとして紙に書き始めてみるのがオススメです。

[/s2If]