OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをページと見なし、キャンバスにそれぞれ名前を付けておけば、そのキャンバス名をテキストフィールドに反映出来ます。「編集」→「変数の挿入」を選択すると、OmniGraffle で使える編集がリストアップされています。 それぞれのページのヘッダーとしてページ名を表記しておきたい場合、わざわざキャンバスとテキストフィールドに２度書かなくても、一括管理が出来、ミスが少なくなります。また、書類の名前や作成者名などフッター情報として欲しいデータも変数から呼び出せます。 共有レイヤーを作成 上記の変数機能は通常版でも実装されている機能ですが、プロ版にしかない機能に共有レイヤーがあります。その名のとおり複数のキャンバスで特定のレイヤーを共有することが可能になります。「編集」→「レイヤー」から選択するか、キャンバスを右クリックすることで共有レイヤーを作成することが出来ます。ドキュメントのヘッダーやフッターはもちろん、ワイヤーフレームを作っている際はナビゲーションなど一括管理しておきたい際にも便利です。新規作成をした際に、共有レイヤーにしたものはすべて自動的に複製されますが、可視/不可視設定をしたり、キャンバス個別にレイヤーを削除することが可能です。 この機能だけでプロ版に変えるのは悩ましいかもしれませんが、OmniGraffleを使ってドキュメントを書き始めている方にとっては価値があると思います。効率よく図を描くだけでなく、効率よく書類自体も仕上げてしまいたいですね。

ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早期から導入出来る制作方法で、制作時間もかかりません。ソフトウェアを使って制作することが出来ますが、コンテンツを入れない段階なので、紙上でも素早く作ることが出来ます。ただし想像力を要するタイプなので、情報共有のための補足情報は不可欠になります。 ディテール型 色はほとんど使いませんが、UI 要素や情報をなるべく完成品に近い形にするワイヤーフレーム。コンテンツブロック型に比べると、より多くの方に完成品の形やアイデアを共有しやすいです。しかし、詳細を作ることによって細かいところに目が行ってしまい、全体像に関するディスカッションにならない場合もあるので注意。 ストーリー型 タスクを設定し、開始から達成までの流れが分かるワイヤーフレーム。個々のページの構造より、それぞれがどのように繋がり、どういった使用感を与えるのかを示すのに有効。複数の機能や誘導先がある場合は、別々に用意しておかないと、混乱を招きます。また、提案している流れがどう有効であるのかも明確に示す必要があります。 コラボレーション型 Post-It Note や、UIマグネット を利用して、自由にコンテンツブロックや UI 要素を動かせる状態で作るダイナミックなワイヤーフレーム。会議や会話で出て来たアイデアを即座に反映することが出来る反面、その場でしか活用出来ないので後で別途『完成品』を作る必要があります。 半プロトタイプ型 見た目はワイヤーフレームですが、クリック、ポップアップ、表示・非表示といったウェブサイトにあるインタラクションが盛り込まれているタイプ。制作時間も多少かかり、共有する手段が限定される可能性がありますが、ワイヤーフレームの状態から完成品に近い使い心地を再現することが出来ます。特定のタスクにフォーカスして使い心地を調べたい場合は不向き。

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリッド表示にしてあるファイルをあらかじめ用意しておけば、何度も設定する手間が省けます。 リンクを加える PowerPointでもOmniGraffleでもハイパーリンクを加えて別のページへ移動することを可能にします。特定のオブジェクトの表示・非表示も可能なので、工夫次第でページ内の変化も表現することも出来ます。PowerPointであれば、マウスオーバーといった別のインタラクションにも異なるアクションを加えることが可能なのでさらに詳細な表現が可能です。 スタイルを合わせてペースト 文字の大きさや色など、同じスタイルを毎回設定するのは面倒なので、「スタイルを合わせてペースト」を活用。PowerPoint だと、「Ctrl + Shift + V」がありますが、OmniGraffle だとショートカットが割り当てられてないのが残念。 プロトタイプとして意外と使えるのが、Acrobatです。図形や UI 要素を PowerPoint や OmniGraffle のように軽快に描くことが出来ませんが、Acrobat に実装されている Form 要素を使えばビジュアルとしてだけでなく、テストとして使えるページになります。また、ムービークリップ (Flashも含) やサウンドも付け加えることが出来るので、マルチメディアを利用したサイトのテストにも活用出来ます。

制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で OmniGraffle を使える機会があれば、かなり本物に近い動きのあるワイヤーフレームを作ることが出来ます。 豊富なステンシルがあるのも OmniGraffle の良いところ。単なる四角形を並べるより素早くリアルなオブジェクトを配置出来るので、視覚的にビジョンの共有がしやすくなります。拡大縮小も出来るので自分のサイトに合わせてステンシルの大きさの調整も出来ます。バージョン５ からはソフトウェア上から直接ステンシルをダウンロード出来るようになりましたが、今回は Graffletopia に収録されているウェブサイト制作に役立ちそうなステンシルを紹介します。 SimpleWireFrame ウェブサイトの基本的な UI 要素がすべて揃っています。あまりたくさんステンシルを入れたくないという方はこれだけ入れておけば十分でしょう Mac OS X Interface Mac OSX の UI 要素集。アプリケーションを作っている際に役立ちそうです Windows GUI Design もちろん Windows 用の UI 要素集もあります Web Page Elements フォームをはじめヘッダーやアイコンも付いています。個人的に Alt/Title 属性の値が表示されているステンシルがお気に入りです Yahoo! Design Pattern Library 以前も紹介したことがありますが、Yahoo! のステンシルはハイクオリティですね。個別でダウンロードしたい場合はこちらのリストページからどうぞ。 iPhone Wire Frames YUIにもありますが、こちらのほうがバラエティに富んでいるのでおすすめです

Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenOffice: Draw OpenOffice にある Draw というスケッチをするためのプログラムは、ダイアグラムやワイヤーフレームを描くのに最適です。swf 形式に書き出せる機能も付いていたりします CmapTools コンセプトマップというマインドマップにも似たダイアグラムを作るのに特化していますが、ワイヤーフレームやプロトタイピングにも使えます。サーバー経由で共同作業も出来るのが魅力 Gliffy ダイアグラムが描ける Web サービスは幾つかありますが、中でも Gliffy は優秀です。ユーザーインターフェイス系のパレットも用意されているのですぐ使えそうです Compendium ダイアグラム制作ツール。データの埋め込みも出来ますし、こちらも CMapTools と同様、共同作業が出来ます Serena Prototype Composer 以前は有料でしたが今は無料で配布されています。サイトマップからフレームワークといった制作向けの機能から、要件チェックといった管理系のものまで様々な機能が統合されています