Archive for the ‘tool’ tag
16 Card Sorting Tools for IA/UX
先日、カードソーティングのワークショップをしたこともあり、カードソーティングについて改めて興味を持ち始めています。基本的にはアイデア発想法に近いところがその理由かも知れません。
「カードソティング」という言葉より、品質管理でいう「新QC七つの道具」の「親和図法 (Affnity Diagram)」および「KJ法」という言葉のほうが、日本ではもしかしたら知っている人は多いのかも知れません。
とりあえず、メソッドの理解というより便利なツールをまとめておこうと思います。
カードソーティングと言えばDonna Spencerさんの名前がまず思い浮かぶこともあり、彼女のブログ「DonnaM」を見ていくだけでも非常に参考になります。また、Boxes and Arrowsのほうに詳しく書かれた記事があります。ちなみに今年のIAサミット2009でも実際に彼女にもお会いすることができました。
- DonnaM – IA – card sorting
- Card sorting tools – a short summary
- Card sorting: a definitive guide – Boxes and Arrows: The design behind the design
そのDonna Spencerさんが書かれた書籍「CARD SORTING」の「Manual vs Software」p. 55にツールについての紹介がされています。本を買わなくても、Rosenfeld Mediaサイトの「Card sorting software tools」からも見ることができます。
また、ナビゲーションについて詳しく書かれた書籍「デザイニング・ウェブナビゲーション」の「カードソーティング」p. 178でもツールがいくつか書かれていました。こちらは2007年にJames Kalbachさんが書かれたものを浅野さんやコンセントの長谷川さんが翻訳された本ですね。
Card Sorting Tools
- OptimalSort
OptimalSort – online and easy cardsorting - Websort
Card Sorting with Results | WebSort.net - MindCanvas (Open Sort & TreeSort)
MindCanvas | A research service from Uzanto - xSort
xSort is a free card sorting application for Mac OS X - SynCaps
Design for Usability – Card Sorting Introduction - Card sort analysis spreadsheet
Rosenfeld Media – Card Sorting: Card sort analysis spreadsheet - CardZort
Jorge A. Toro - CardSort
CardSort – UCD Tool for Information Architecture ※<index.php> がエラー - CardSword
CardSword - WebSort
Card Sorting with Results | WebSort.net - 11. WebCAT
WebCAT: Overview - 12. uzCardsort
mozdev.org – uzilla: cardsort - 13. EZSort
IBM Ease of Use – EZSort (beta release) ※サーバーエラーのためアーカイブを参照。 - 14. Socratic Card Sort
Socratic Technologies, Inc. - 15. StickySorter
Microsoft Office Labs – StickySorter - 16. Classified
URL不明
ということで、合計16のツールがカードソーティングのツールとしてまとめることができます。
実際に「card sorting」で検索してみると、たくさんの記事があることがわかります。実際、以下のようなサマリーサイトがたくさんありました。このエントリーを書く上でも参考になりました。
最後に、Slideshareでタグ「card-sorting」での検索結果は下記から見ることができます。
その中でBenny Skogberg氏がまとめている「Card Sorting Tools」というスライドがあったのでご紹介します。
Get Wireframing and Prototyping
Fred Beecher氏は「Axure」についてもワークショップを開いていたりするようですが、これに関係して「ワイヤーフレーム」や「プロトタイピング」に関するエントリーがあったのでご紹介します。
まず「Get Wireframing」という下記エントリーですが、すごいですね。よくまとめたなと感心してしまいます。
内容は下記のアウトラインになっているので、すべてがいいリファレンスになりますな。
「Article」などは個別に集めてたまに読む程度だったのですが、まとまっているのでいつでも参照できます。
- Techniques
- Tools
- Wireframe Examples
- Wireframing Articles of Interest
- Paper Prototyping
- Useful Wireframing Resources
- Kick Ass Books
次に「16 Design Tools for Prototyping and Wireframing」ですが、これはツールを16個あげてそれぞれをレビューしています。
と、この2つのエントリーだけでもリストアップしてみると24ものツールがあることになります。
もちろん「multifunctional applications (多機能なツール)」としてしまえば、世の中のほとんどのツールが含まれてしまうかも知れませんが。
これからツールを検討しようとしていた場合、このリストアップは参考になるのではないでしょうか。ボク自身触ったことがあるのはごくごく一部のような気がしますので時間のあるときにでも試してみたいと思います。
- Visio – Visualize, explore, and communicate complex information.
- OmniGraffle Pro – Create diagrams, process charts, quick page layouts and website mockups
- Axure RP Pro – Rapidly create wireframes, prototypes and specifications for applications and web sites.
- iRise Pro
- Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
- SmartDraw
- MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
- Balsamiq Mockups – Easily and quickly created rough mockups with predefined elements
- Lucid Spec
- ConceptDraw Pro
- iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
- Go Analogue
- PowerPoint or Keynote
- Adobe Fireworks
- HTML
- Adobe Flash
- Fluid IA – Agile UI Prototyping
- OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
- Justinmind – Design a wireframe and test their web usability
- EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
- Gliffy – Create website wireframes and share web mockups with anyone.
- Jumpchart – Online collaborative wireframe
- Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
- Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
Pencil Project
「Web情報アーキテクチャ（IA）とツール」の連載第二回を公開されました。
これを書き終えたとき、「IxDA Discussion」を見ていたら面白いツールが紹介されていました。
これは、「open-source wireframing Firefox add-on」として紹介されていて、下記のリンクから見ることができます。
インストールしてみるとわかりますが、Firefoxのadd-onツールです。
つまり、Firefox上で簡単なGUIを作成することができるツールです。しかも無料です (って別に営業してるわけではないけど)。
メニューはもちろん英語なんですが、中のドキュメントとしては日本語も使えます (キャプチャを撮ってみたのですが、見難いですね……)。
使い方は「User Guides」に詳しく掲載されているので参照されたし。
オリジナルファイルでしか保存できませんが、PNG形式に書き出すことができます。これまでにも同じようなもので、Microsoft Officeのオンライン版などもありましたが、これほど手軽で簡単に作成できるツールはなかなかなかったんじゃないでしょうか。
Visioなどでいう「ステンシル」が「Shape Collection」だと思うのですが、これがオンライン上で常時アップデートされればかなり協力なツールになり得るなあと思ってしまいます。
スクリーンショットで解説があったので、引用しておきます。
- Creating complex prototypes
Creating complex GUI prototype for a Windows desktop application - Property dialog
Property Dialog provides access to all properties of a shape - Changing page properties
Page Properties dialog with ability to choose another page as the background - Creating Pencil website mockup
Pencil is using the create mockups for the Pencil project website! - On-screen text editing
Onscreen text editing supports both plain texts and rich texts - Exporting to PNGs
Pencil supports rasterizing the whole document into a set of PNG images
MacでもFirefox上で動くので、興味ある方は試してみては?
Web情報アーキテクチャ (IA) とツール
このブログに書くのが遅くなりましたが、技術評論社のウェブサイト「gihyo.jp」で連載をスタートすることになりました。
- 連載：Web情報アーキテクチャ（IA）とツール｜gihyo.jp … 技術評論社
- Web情報アーキテクチャ（IA）とツール：第1回 ”IAって何するの？” がわかる「IA One Sheeter」｜gihyo.jp … 技術評論社
月に2本くらいのペースで、書いていく連載になったので、お題を「ツール」にしてみました。
記念すべき第一回目は、「IAって何するの?」という疑問から始まり、IAIでのドキュメントテンプレートの紹介という具合に、ダイジェストで全体を俯瞰できるような構成にしてみました。第二回目からはもう少し部分的にフォーカスをあてていこうかと考えています。
今回抑えておくポイントとして，以下の3つをご紹介しました。
- IAはスキルである（専門職だけを指さない）
- IAを説明するマーケティングツールがある（IA One Sheeters）
- IAが使うツールにはテンプレートがある（IAI > IA Tools）
マーケティングツールおよびテンプレートを紹介したのは，IAとはそもそもどういうものなのか，という点と，成果物の種類を改めて眺めることで，どういうタスクを指しているのかを俯瞰（ふかん）したかったからです。
そうすることで，はじめに話した「IAとはスキルである」ことを実感してもらい，日々の業務の中でも「これはIAタスク」だという意識で取り組んでもらえると，よりいっそう付加価値の高い成果物にすることができるのではと思います。
そもそも「IAとは?」という疑問からはじまることが多いだけに、この連載でははじめからこういうポイントで書いていますということがなんとなくわかるようにしてみました。とくに「WEB + デザイン」というカテゴリでもありますし、WebデザイナーおよびWebディレクター向けな印象を持ったので、そういう方向で、というか……。
別途、書籍「Website Expert」のほうでも関わらせていただけそうなので、そちらはまた別のレイヤー (なぞ) で書いてみたいと思います。
早速、ブログにも書いていただいているようで幸せです。
eggplantのBENWEBさんが以前訳されて公開された日本語版もありますので、興味のある方はそちらも活用すると良いかと。
IA One Sheeters（tar.gz形式）
たしかにそうでした。フィードバックありがとうございます。
次回もツッコミやフィードバック、よろしくです。