にてVisioのテンプレートがダウンロードできます。

• Wireframe Template

• Wireframe Stencil
• Page Description Diagram Template
• Site Map Stencil (and Template)

とあり、IAワークには重宝するかもですな。

以前もこういうIAワーク関連の素材集をエントリーしていたと思う。

ふむふむ。

RIAの仕様書ってのはかなり前から気にはしていたんですよね。
RIAコンソーシアムもウォッチしているのかな (ボソ)。

にIA用 (?) Visioのステンシルがまとまった記事がありました。

Jesse James Garrett: Visual Vocabulary for Information Architecture
http://www.jjg.net/ia/visvocab/

YourTotalSite.com / Free Visio IA Stencil
http://www.yourtotalsite.com/archives/information_architecture/free_visio_ia_stencil/Default.aspx

Designs by Nick Finck – Visio Stencils for IAs
http://www.nickfinck.com/stencils.html

でVisio (2003?) のステンシルなどが無料でダウンロードできます。

いつも会社内でIAワークをどこまで共通化できるか悩むんですが、こういうライブラリを規格にしてしまったほうがいいのではないかと思うようになりました。

ここでは、IAワークの柱である「ワイヤーフレーム」と「サイトマップ」「プロセスフロー」についてのステンシルがダウンロードできます。

Visio Stencils

• Jesse James Garret’s “visual vocabulary”

• Henrik Olsen’s prototyping tools
• Michael Angeles’s wireframe stencil
• Peter Van Dijck’s Templates
• Peter Van Dijck’s IA shapes

Omnigraffle Palettes

• Michael Angeles’s Wireframe Palette

• Robert Silverman’s GUI Design Palette
• Paper Plane’s IA Stencils
• Jason Sutter’s Wireframe Stencil

Other Resources

• AIfIA Tools

• Visio 2003 Viewer

Boxes and Arrows: Wireframe Annotations in Visio : Special Deliverable #11
http://www.boxesandarrows.com/archives/wireframe_annotations_in_visio_special_deliverable_11.php

• Step 1: Creating the annotation shape and the footnote shape

• Step 2: Establishing a relationship between the annotation and the footnote
• Step 3: Changing the behavior of the annotation

ワイヤーフレームをVisioで作成することが多いのは「[IA] ワイヤーフレーム」でも触れたのですが、細かいところをどうやって描いているのかには個人差があります。
(わたしも含めて) Adobe Illustratorで慣れた方だと、ステンシルの作成・追加やレイヤーの活用、はたまたマスターの概念はすぐ理解できると思います。

この記事はワイヤーフレームの註釈 (?) について描き方をまとめてくれています。数値で制御することなど参考になる点も多々あると思うのでご紹介しときます。

「ワイヤーフレーム」を設計するのに「Visio」をよく使います。

ということで、リンク集をメモっておこう。

Visio 2003 製品情報

MSDN Online – Visio Developer Center

Microsoft TechNet

マイクロソフトのサイト以外で参考になるサイト。

VISIO SQUARE

Ｖｉｓｉｏ’ｓＣａｆｅ

また、おもしろい記事もあったりします。

Visioで勝てる企画書を作る！ : 株式会社イッツ

とまあ、いろいろあります……。

ポイントは、ダイヤグラムをどうアウトラインで制御してかつ管理・運営していくのか? にありますが、この連携にはそれが満たされるのではないかという漠然とした期待があります。

そこで、知人に教えてもらった興味深いサイトがあるのでご紹介。

Boxes and Arrows: Automating Diagrams with Visio

The steps to be covered in this process

• Identify and document your nodes
  • For site maps, identify nodes in a content inventory, hierarchically arranged
  • For flowcharts, sketch and identify shapes and connectors
• Document nodal connections
  • Indicate how parent nodes explicitly link to child nodes
• Prepare text file for importing to a drawing program
  • Prepare a “shapes” file in Excel or with a text editor
  • Prepare a “links” file in Excel or with a text editor
    • If using Excel, export files to comma- or tab-separated file (saved as .csv or .txt)
  • Combine shapes and links files into one text file for importing into Visio
• Open/Import and auto-diagram
  • Open the text file in Visio
• Modify the diagram
  • Manipulate the diagram shapes for clarity and apply any cosmetic changes

実際にアウトライン (というか <.tsv> ファイル) を作成してVisioに取り込んだのを見せてもらいましたが、なかなかいい線いってるのではと思いました。

ということで、この件についてはもうちっと掘り下げて検証してみることにします。

もし、すでに検証した方があれば情報をお待ちしてます。

早速試してみました。

まず、テキストファイルないしExcelファイルでウェブサイトの構築するカテゴリ名や項目を書き出します。それを下記フォーマットで作成します。

Shape, Shape Name, Master Name, Shape Text, ShapeX, ShapeY, Width Height, Property

作成後、<.csv> <.csv> などで書き出しVisioで開きます。

何回か「ファイル コンバータ アド オン エラー」というアラートがでてできなかったのですが、数回試したらうまく変換することができました。

すると、解説ページにもあるとおり放射線状 (?) までいかなくてもレイアウトはかなりいいかげんなものでした。「ドチャ」って配置されたような感じ。
インスピレーションのようにダイヤグラムを「並び替え」で自動整頓できるわけでもなく、レイアウトはシコシコ手作業で調整するしかなさそうです。数ページならいざしらず何千ページのサイトだと気が遠くなりそう……。

最終結果は清潔なことに大量を必要とする図形です。箱を動かすことができ、より判読可能な図形を生産するために色で遊ぶことができます。〔略〕
もちろん、働くためにVisioがあなたを与える恐ろしい色で図形を見たくなければ、それをより体裁がよく、見るのにより楽しくすることができるところで、イラストレーターに図形および糊をコピーすることができます。

うーん。やはりダイヤグラムについては別ソフトに逃げているところがありますな。

それと期待はずれだったのが、「Excel <.csv> → Visio <.vsd>」への変換しかなく、たがいに行き来できるというわけではない点です。このへんはMLとかプラグインの類で見つかったらいいなあと思いますが、どうなんでしょう。

情報を持っている方は教えてください。