サイト制作に便利なOmniGraffleステンシル

制作メンバーの体勢やスケジュールによっては 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にもありますが、こちらのほうがバラエティに富んでいるのでおすすめです