Webサイトやスマートフォン、ローカルソフトウェアのデザインに使える。ワイヤーフレーム作成ツール×13選

Webサイトやスマートフォン、ローカルソフトウェアのデザインに使える。ワイヤーフレーム作成ツール×13選

Webサイトやソフトウェアを開発する際に、いきなりコーディングすることはないと思います。まずは手書きで紙やホワイトボードに全体のデザインを簡単に書いてみるのではないでしょうか。最近ではそれをコンピュータ上で行うツールが多数増えています。今回はそんなワイヤーフレーム、モックアップ、プロトタイプを作成するためのソフトウェアを紹介します。

それぞれ特徴がありますので、適したプラットフォームのものを選ぶと良いでしょう。例えばiPhoneであればこれ、Webサイトのモックアップであればこれ、といった具合です。またモックアップを作る場合の注意点としてデザインがラフに作れるものを選ぶように心がけることです。優れたUIで綺麗にできるものもありますが、綺麗にできるものは却って細かい部分にこだわってしまうようになります。むしろ手書き同様の適当さが重要です。ラフな線、ラフなオブジェクトを適当に重ね合わせて画面を作り上げる方がワイヤーフレーム作成に向いていると言えます。

iPhonePrototype - FirefoxでiPhoneアプリのプロトタイプを作成する

画像

Firefoxと言えばある意味iPhone(WebKit)のライバルとも言えるソフトウェアです。そんなFirefoxでありながらもiPhonePrototypeはきちんと動作します。独立したウィンドウが開くので、Firefoxは殆ど無関係かも知れません。画面は大きく二分割され、左側にコンポーネント、右側にモックアップを作成するウィンドウが表示されます。左側の部品を右クリックすると左側のウィンドウにドロップされます。後はマウスで移動すれば良く、ラベルなどはテキストが編集できるようになっています。

Briefs - iPhoneで画像ベースのモックを動かす

画像

BriefsはApp Storeで15ドルで販売されているiPhoneアプリです。全て同じという訳ではなく、オープンソース版は基本的な部分だけを抜き出したものになります。とは言え画面定義を行い、その画像切り替え時のアクション定義などは同じです。画像を用意し、画面の指定した場所をタップできるようにしたり、切り替えアクションを設定するファイルを作成する必要があります。画像と定義ファイルが用意できれば、専用コマンドでコンパイルしiPhone側からHTTP経由でダウンロードします。専用のフィード(Brief cast)を使って容易にダウンロードさせることもできます。

Diagram Designer - 簡単に使えるフローチャート作成ソフトウェア

画像

Diagram Designerはフローチャートが基本になっているようで、オブジェクトやラインが多数登録されています。フォントを変えれば日本語の表示にも対応しています。さらにUML、Windowsのモックアップ、地図、電気図といったステンシルが登録されています。使い方はステンシルから選んでドラッグアンドドロップして配置し、文字を書くだけです。専用のファイル形式で保存されますが、画像でエクスポートすることもできます。利用できる場面の多そうなソフトウェアです。

PowerPoint Prototyping Toolkit - PowerPointを使ってプロトタイプを作ろう

画像

PowerPoint Prototyping Toolkitは画面や画面を構成するオブジェクトを作成し、PowerPoint2007の形式で提供しています。メニューバーやボタン、画面の枠などがあるので、それらをコピーして貼付ければプロトタイプ(モックアップまたはワイヤーフレームとも)が作成できるという仕組みです。意外と便利なのは、プロトタイプを作成しつつ、その横に説明書きを加えるようなことが容易にできる点です。ただ四角と線を組み合わせただけの貧弱なインタフェースで説明するよりも具体的で利用者にとっても分かりやすいプレゼンテーションができあがるでしょう。

DENIM - きっと皆好きになる!手書きで作るモックアップ

画像

DENIMはWindows、Mac OSX、LinuxやSolarisといったマルチプラットフォームに対応したソフトウェアです。若干特殊なインタフェースで、まるでホワイトボードに書いていくかのようにモックアップを作成できます。まずすることは鉛筆ツールで四角を描くことです。これが自動的にページになります。メニューから選んで綺麗な形のページを追加しても良いですが、やはり手書きのが味わいがあります。そして画面の下にあるラジオボタンやテキストボックスなどを配置していきます。もちろん足りない部品は鉛筆で書き込んでいけます。

Pencil - これはすごい!Firefoxを使ってサイトのモックアップを簡単に作成する

画像

Pencilはちょっと正確な画面を作るのに適しています。PencilはFirefoxアドオンとして動作し、専用のモックアップ作成ウィンドウを立ち上げて利用します。テキストや画像、各種フォームオブジェクトが予め登録されていますので、ドラッグアンドドロップで配置して文字を編集するだけで簡単にモックアップが作成できます。

Android UI Utils - Androidアプリ開発のお供に

画像

Android UI Utilsは幾つかのソフトウェアがセットになっています。まずFirefoxのプロトタイプ作成ツールであるPencil用のソフトウェアがあります。これをインポートすると、Androidに適したUIコンポーネントが利用できるようになります。次にアイコン集です。これを使えばよりユーザビリティの高いインタフェースを実現できるでしょう。最後にWebベースでアイコンを編集するツールです。自分で好きなアイコンをアップロードしたり、予め用意されているものから選択して、各UIの部分に適したデザインに変更できます。

Serena Prototype Composer - 他社向けの提出資料としても使えるレベルのプロトタイプ作成&プロジェクト管理

画像

Serena Prototype Composerは特にWebシステムに限ったものではないようです。プロトタイプ作成ではタブやテーブル、チェックリストなど様々なオブジェクトが利用できます。もちろん最近のリッチなインタフェースのWebアプリケーションでも利用できるでしょう。複数の画面を作成したら、それをつなぐアクションが必要になるます。それもSerena Prototype Composerでは線でつないで表現できます。さらにWebサイトを越えてアクティビティを追加してワークフローを作ることが可能です。

Bind – GSS対応のUIデザインツール

画像

Webサイトのデザインを行う際、最近では手でタグを書いてコーディングするケースが増えています。そんな時にはスタイルシートを書いて、ブラウザをリロードして…を繰り返すかと思います。そんな作業をされている方に使ってみて欲しいのがBindです。Bindはエディタとプレビューが一体化したWebデザインツールです。BindはHTML/スタイルシートの他に、GSSという記法に対応しています。GSSはGrid Style Sheetの略で、マルチデバイスに対応したグリッドデザインを容易にする記法です。

Clank - Webの技術でスマホアプリのプロトタイプを作成

画像

スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。Clankでは多彩なコンポーネントに加えて、各種でバイス向けの枠を表示できるのが特徴です。ステータスバーに表示する時間も指定できるなど細かいカスタマイズが可能です。Clankを使えばスマートフォンアプリのモックアップがさくさく作れるでしょう。

BLOKK - 想像力を限界まで引き上げろ!フォントを使ったプロトタイプ作成

画像

BLOKKは全て塗りつぶしたフォントで、ワイヤーフレームを表現するのに利用できます。BLOKKはフォントですが、単純に真っ黒に塗りつぶしただけのフォントです。さらに言えばどれを入力しても真っ黒な四角が出るだけです。さて、何に使えるのでしょうか。実はBLOKKはWebサイトやアプリのプロトタイプを表現するためのフォントなのです。フォントを並べて、隙間をスペースキーで作ると何となくそれっぽい表示になります。BLOKKは通常のTrueTypeの他、Web Fontにも対応しています。

Framer - イメージに合わせてどんどんプロトタイプを作れるフレームワーク

画像

Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。Framerはビューを基本単位として表示設定を行います。どの場所に表示するかを指定し、貼付けていくイメージです。単色の他、画像を入れることもできます。さらに簡単にアニメーションの指定もできたり、CSSのスタイル設定も追加できます。イベントとアニメーションを組み合わせれば、動作が分かりやすく確認できるでしょう。

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

画像

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

まとめ

個人的にはCacooまたはBalsamiq Mockupsといった有償サービスを使うことが多いです。ただし、どのツールを使うにせよ、モックアップはパーツが数多く揃っていて手早く組み立てられるものを選ぶ必要があります。

システムとしての全体像がつかめれば、それを使って色々な議論が交わせるようになるはずです。個人的なプロジェクトであっても目に見える形のものがあれば、画面遷移や画面に必要な情報について掘り下げられるようになります。そうすることでいきなり開発をするのに比べて大幅に手戻りが少なく、高速な開発が可能になるはずです。

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ