bookslope blog

Garrett Dimon / Templates & Stencils for Visio & Omnigraffle
http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle

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

• Wireframe Template

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

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

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

Boxes and Arrows: Storyboarding Rich Internet Applications with Visio
http://www.boxesandarrows.com/archives/storyboarding_rich_internet_applications_with_visio.php

ふむふむ。

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

Digital Web Magazine – News – IA Stencils for Visio
http://www.digital-web.com/news/2005/04/ia_stencils_for_visio/

に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

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で勝てる企画書を作る！ : 株式会社イッツ

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

サイト構造をダイヤグラムとアウトラインで設計している方法は「[IA] アウトラインプロセッサとダイヤグラム」で述べたとおりですが、マイクロソフトのソフトであるドローソフト「Visio」と表計算ソフト「Excel」との連携には以前から興味があります。

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

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

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に取り込んだのを見せてもらいましたが、なかなかいい線いってるのではと思いました。

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

もし、すでに検証した方があれば情報をお待ちしてます。
Read the rest of this entry »