OmniGraffleでWeb制作/開発の人が使えそうなステンシルを20+4個選んでみた

Mind Mapや時系列、議事録なんかはもうXMind(詳細は「日本語入力も可能なオープンソースのマインドマップ「XMind」 | コリス」にて)でいいやと思うのですが、図はやっぱりオムニグラフが良いなと僕の場合思ったりしてます。

Web制作をしてると、よく提案書や仕様書やフロー図、ワイヤーフレーム、UI画面、カンプのWebフォームなどを書くことがあります。

そういう時に便利そうなMac OSXのオムニグラフのステンシル(Stencil)を独断で選んでみました。

• 企画書、ドキュメント系(3)
• WebブラウザのUI、ワイヤーフレーム系(8)
• iPhone系(3)
• アイコン系(6)
• その他(4)

探したのはオムニグラフのフリーのステンシルがダウンロードできる「Graffletopia」から。

今、仕事でいろいろ書かないといけなくて、そういう目線で探してたら結構良質のデザインがたくさんあって、書類書くのが少し楽しくなればと思い紹介してみます。

ちなみに僕はまだオムニグラフ4のままでバージョンアップしてません。
オムニグラフ5の体験版でも開いてみて、4でも５でも使えるか試してます。

注釈）
[ver.4:＊] ：オムニグラフ4でも使えるかどうか。○：使える、△：一部不具合、×：使えない
[ver.5:＊] ：オムニグラフ5でも使えたかどうか。○：使える、△：一部不具合、×：使えない
(オムニグラフ4でのエラー、アラート画面はこちら)

企画書系

Web Flowchart

[ver.4:○] [ver.5:○]

• 簡単なフロー図に便利
• ちょっとアイコンは昔の。

User-Centered Design Activities

[ver.4:○] [ver.5:○]

• ちょっとした提案にも使えそう。

Figures by Thor

[ver.4:○] [ver.5:○]

• 人物中心でいろんなパターンや微調整したい場合に。
• ベクトルデータなので、手足は調整可能。
• ver.4で２回ほど警告でますけどなんとか使えました。

WebブラウザのUI、ワイヤーフレーム系

Form Elements

[ver.4:○] [ver.5:○]

• Yahoo!のYUIが配布してる、シンプルで良質のフォーム要素。
• 大半はこれで事足りるかも。

Menus and Buttons

[ver.4:○] [ver.5:○]

• これもYahoo!のYUIから。カラーチャートが何気に便利そうです。
• いいなーと思うのはほとんどYUIの確率高いですね。

Extjs GUI Layout and Widgets

[ver.4:○] [ver.5:○]

• AJAXでばりばりWebアプリを開発してる人には超オススメ！
• 編集ツールバーとか細かいとこまで配慮されてる、本当に制作者向けの立場から作られたステンシル。

SimpleWireFrame

[ver.4:○] [ver.5:○]

• シンプルなワイヤーフレームでRIAやWebアプリの説明向き
• Google mapやFlashや動画のNowloadingなど良く有るUIがほとんど揃ってるのが素晴らしい
• FlashやFlex、AIRのワイヤーフレームでも十分使えそう。

Mac OS X Interface

[ver.4:○] [ver.5:○]

• アクアボタンの[OK]がちゃんとテキストなので編集できるのがいい。
  横に伸ばしても左右は丸いままでデザイン崩れないのが素敵！
• ver.4の人はこちらをオススメ。

Mac OS X Interface2

[ver.4:△] [ver.5:○]

• ver.4でも5でもアラート(警告)が出るけど普通に使える。
• Mac OS X Interfaceもだけどアクアボタンが横に伸びても、両端は丸いままなのがイイ。
• ver.4で伸ばすとおかしくなるので、可変ボタン使いたい場合は上のMac OS X Interfaceを使いましょう。

Web Page Elements 1.1

[ver.4:○] [ver.5:○]

• とてもシンプルなフォーム要素やアイコンが揃ってる
• ボタンは可変だけど、タブは画像なので伸ばす時は注意
• アイコンはとても有名なfamfamfam.com: Silk Iconsを使ってあります。(アイコン系でも紹介)

Web Form Builder

[ver.4:○] [ver.5:○]

• ボタンもフォーム要素も全て画像。なので横伸ばしは自分でパーツを組み合わせないといけない。
• 正直使えないのだけど、どうしてもWindowsのフォームのパーツが欲しい時にいるかも。

iPhone系

iPhone Wire Frames

[ver.4:○] [ver.5:○]

• シンプルで軽い。iPhone対応のWebアプリの提案書とかによさげ。

Mobile – iPhone

[ver.4:○] [ver.5:○]

• Yahoo! YUIが配布してる良質のステンシル。これで十分かも。
• 入力インターフェイスに最新の2.2と日本語版が無いのが残念。

Ultimate iPhone Stencil

[ver.4:△] [ver.5:△]

• とにかく重い。コメント欄でもやりとりされてるけどスペック低いMacでは固まった？と思うぐらい時間がかかります
• ver.4は限りなく×に近い△
• 画像の解像度が高いせいかもしれないけど、その分画質のクオリティはかなり良い。クオリティ求める人に。
• 感動した事：iPhone本体(一番右)のグループ解除してロック画面をずらすと下にiPhone起動画面が！細かい。

アイコン系

Apple Icons (Large)

[ver.4:○] [ver.5:○]

• 見たまま。ちょっと古め。昔のMac/IEアイコンが懐かしい。
• 合わせて使いたいオススメのステンシル
  • Apple Icons 2 (Large) (こっちの方が新しい)
  • Apple Icons 2 (Small)

Apple Elements

[ver.4:○] [ver.5:○]

• Appleのハード関連。iPodからXserverまで。
• さすがにまだ最新のアルミのMacBookには対応してないようです。

Arrow 2

[ver.4:○] [ver.5:○]

• 矢印系アイコン。３種類ありますが、個人的にこの２が好きです。（DDRの矢印っぽいので）
• 合わせてArrow 1、Arrow 2も入れておけばいいと思います。

famfamfam Icons

[ver.4:○] [ver.5:○]

• 実際のWebアプリでも十分使える有名なアイコン素材[famfamfam.com: Silk Icons]の作者自身がステンシルに移植してくれてます。
• 商用でも使えますが、クリエイティブコモンズで管理されてます。利用の際はクレジット表記とリンクが必要です。

Cash Flow

[ver.4:○] [ver.5:○]

• クレジット決済とか支払い方法の提案とか、ECサイトや課金サービスの提案の時に。

Creative Commons

[ver.4:○] [ver.5:○]

• 著作権、ライセンスのクリエイティブ・コモンズのアイコン集。
• あると便利かもですね。（提案書で誰かの作品を引用して貼る場合とか、自分の提案書のライセンス明示とか？）

その他

どちらかと言うと役に立たないけど面白かったステンシルです。

Camera Staging

[ver.4:○] [ver.5:○]

• カメラアングルや人間のポーズなどのパーツが多数。
• 撮影仕事の時に、スタッフ達の打ち合せ用資料とかで使えそう。

Lego People

[ver.4:？] [ver.5:○]

• Legoパーツですね。重なりで作るようです。
• なぜかパーツにダースベーダーが…w
• ビデオカメラのパーツがカメラアングル決める時に使える…かも？

Recycling logos

[ver.4:○] [ver.5:○]

• リサイクルマークや、Good Designマークなど日本でよく使われる商標、マークなど。

Traffic Sign

[ver.4:○] [ver.5:○]

• 日本の交通標識の一部。([鹿注意]誰が使うんだろう・・・)
• 無駄にベクトルデータなので拡大縮小しても奇麗です。（鹿も奇麗）

オムニグラフ4でのエラー、警告画面

参考までに、こんな警告が出るよってのを貼っておきます。


この警告が出てもだいたい使えましたが、パーツによっては使えない事もあるようです。

前々から公開したかったのでメモってたのを公開してみました。
何かまた良いステンシルやテンプレートがあったら紹介していきます。