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

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

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

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

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

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

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

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

企画書系

Web Flowchart

Preview : Web Flowchart

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

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

User-Centered Design Activities

Preview : User-Centered Design Activities

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

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

Figures by Thor

Preview : Figures by Thor

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

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

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

Form Elements

Preview : Form Elements

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

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

Menus and Buttons

Preview : Menus and Buttons

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

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

Extjs GUI Layout and Widgets

Preview : Extjs GUI Layout and Widgets

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

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

SimpleWireFrame

Preview : SimpleWireFrame

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

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

Mac OS X Interface

Preview : Mac OS X Interface

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

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

Mac OS X Interface2

Preview : 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

Preview : Web Page Elements 1.1

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

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

Web Form Builder

Preview :

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

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

iPhone系

iPhone Wire Frames

Preview : iPhone Wire Frames

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

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

Mobile – iPhone

Preview : Mobile - iPhone

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

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

Ultimate iPhone Stencil

Preview : Ultimate iPhone Stencil

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

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

アイコン系

Apple Icons (Large)

Preview : Apple Icons (Large)

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

Apple Elements

Preview : Apple Elements

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

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

Arrow 2

Preview : Arrow 2

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

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

famfamfam Icons

Preview : famfamfam Icons

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

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

Cash Flow

Preview : Cash Flow

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

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

Creative Commons

Preview : Creative Commons

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

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

その他

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

Camera Staging

Preview : Camera Staging

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

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

Lego People

Preview : Lego People

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

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

Recycling logos

Preview : Recycling logos

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

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

Traffic Sign

Preview : Traffic Sign

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

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

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

参考までに、こんな警告が出るよってのを貼っておきます。
オムニグラフ4でのアラート画面1
オムニグラフ4でのアラート画面2
この警告が出てもだいたい使えましたが、パーツによっては使えない事もあるようです。

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

OmniGraffleでWeb制作/開発の人が使えそうなステンシルを20+4個選んでみた” への5件のフィードバック

  1. >agata殿
    GJですか!?ありがとうございます!
    例のツールの公開も楽しみにしてます!
    (あれが出ればオムニグラフすら…)

    >nishiaki殿
    ver4ユーザーは意外といるよねw
    全部細かく試してないので、不具合とかあったらそっとおしえて。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*