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

制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。

OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で OmniGraffle を使える機会があれば、かなり本物に近い動きのあるワイヤーフレームを作ることが出来ます。

豊富なステンシルがあるのも OmniGraffle の良いところ。単なる四角形を並べるより素早くリアルなオブジェクトを配置出来るので、視覚的にビジョンの共有がしやすくなります。拡大縮小も出来るので自分のサイトに合わせてステンシルの大きさの調整も出来ます。バージョン5 からはソフトウェア上から直接ステンシルをダウンロード出来るようになりましたが、今回は 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にもありますが、こちらのほうがバラエティに富んでいるのでおすすめです
Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。