bookslope blog » tool http://www.bookslope.jp/blog Information Architect/User Experience Designer Thu, 29 Dec 2011 06:11:25 +0000 ja hourly 1 http://wordpress.org/?v=3.1.1 Information Architect/User Experience Designer bookslope blog no Information Architect/User Experience Designer bookslope blog » tool http://www.bookslope.jp/blog/wp-content/plugins/powerpress/rss_default.jpg http://www.bookslope.jp/blog 16 Card Sorting Tools for IA/UX http://www.bookslope.jp/blog/2009/11/16cardsortingtools.html http://www.bookslope.jp/blog/2009/11/16cardsortingtools.html#comments Sun, 08 Nov 2009 06:28:58 +0000 bookslope http://www.bookslope.jp/blog/?p=842 Card Sort

先日、カードソーティングのワークショップをしたこともあり、カードソーティングについて改めて興味を持ち始めています。基本的にはアイデア発想法に近いところがその理由かも知れません。

「カードソティング」という言葉より、品質管理でいう「新QC七つの道具」の「親和図法 (Affnity Diagram)」および「KJ法」という言葉のほうが、日本ではもしかしたら知っている人は多いのかも知れません。

とりあえず、メソッドの理解というより便利なツールをまとめておこうと思います。

カードソーティングと言えばDonna Spencerさんの名前がまず思い浮かぶこともあり、彼女のブログ「DonnaM」を見ていくだけでも非常に参考になります。また、Boxes and Arrowsのほうに詳しく書かれた記事があります。ちなみに今年のIAサミット2009でも実際に彼女にもお会いすることができました。

そのDonna Spencerさんが書かれた書籍「CARD SORTING」の「Manual vs Software」p. 55にツールについての紹介がされています。本を買わなくても、Rosenfeld Mediaサイトの「Card sorting software tools」からも見ることができます。

また、ナビゲーションについて詳しく書かれた書籍「デザイニング・ウェブナビゲーション」の「カードソーティング」p. 178でもツールがいくつか書かれていました。こちらは2007年にJames Kalbachさんが書かれたものを浅野さんやコンセントの長谷川さんが翻訳された本ですね。

Card Sorting Tools

  1. OptimalSort
    OptimalSort – online and easy cardsorting
  2. Websort
    Card Sorting with Results | WebSort.net
  3. MindCanvas (Open Sort & TreeSort)
    MindCanvas | A research service from Uzanto
  4. xSort
    xSort is a free card sorting application for Mac OS X
  5. SynCaps
    Design for Usability – Card Sorting Introduction
  6. Card sort analysis spreadsheet
    Rosenfeld Media – Card Sorting: Card sort analysis spreadsheet
  7. CardZort
    Jorge A. Toro
  8. CardSort
    CardSort – UCD Tool for Information Architecture ※<index.php> がエラー
  9. CardSword
    CardSword
  10. 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」というスライドがあったのでご紹介します。

Card Sorting Tools

]]> http://www.bookslope.jp/blog/2009/11/16cardsortingtools.html/feed 4 Get Wireframing and Prototyping http://www.bookslope.jp/blog/2009/04/getwireframing.html http://www.bookslope.jp/blog/2009/04/getwireframing.html#comments Fri, 24 Apr 2009 06:05:47 +0000 bookslope http://www.bookslope.jp/blog/?p=716 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 (多機能なツール)」としてしまえば、世の中のほとんどのツールが含まれてしまうかも知れませんが。

これからツールを検討しようとしていた場合、このリストアップは参考になるのではないでしょうか。ボク自身触ったことがあるのはごくごく一部のような気がしますので時間のあるときにでも試してみたいと思います。

  1. Visio – Visualize, explore, and communicate complex information.
  2. OmniGraffle Pro – Create diagrams, process charts, quick page layouts and website mockups
  3. Axure RP Pro – Rapidly create wireframes, prototypes and specifications for applications and web sites.
  4. iRise Pro
  5. Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
  6. SmartDraw
  7. MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
  8. Balsamiq Mockups – Easily and quickly created rough mockups with predefined elements
  9. Lucid Spec
  10. ConceptDraw Pro
  11. iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
  12. Go Analogue
  13. PowerPoint or Keynote
  14. Adobe Fireworks
  15. HTML
  16. Adobe Flash
  17. Fluid IA – Agile UI Prototyping
  18. OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
  19. Justinmind – Design a wireframe and test their web usability
  20. EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
  21. Gliffy – Create website wireframes and share web mockups with anyone.
  22. Jumpchart – Online collaborative wireframe
  23. Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
  24. Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
]]> http://www.bookslope.jp/blog/2009/04/getwireframing.html/feed 0 Pencil Project http://www.bookslope.jp/blog/2008/07/pencil-project.html http://www.bookslope.jp/blog/2008/07/pencil-project.html#comments Wed, 09 Jul 2008 00:45:00 +0000 bookslope http://www.bookslope.jp/blog/?p=629

「Web情報アーキテクチャ（IA）とツール」の連載第二回を公開されました。

これを書き終えたとき、「IxDA Discussion」を見ていたら面白いツールが紹介されていました。

これは、「open-source wireframing Firefox add-on」として紹介されていて、下記のリンクから見ることができます。

インストールしてみるとわかりますが、Firefoxのadd-onツールです。

つまり、Firefox上で簡単なGUIを作成することができるツールです。しかも無料です (って別に営業してるわけではないけど)。

メニューはもちろん英語なんですが、中のドキュメントとしては日本語も使えます (キャプチャを撮ってみたのですが、見難いですね……)。

使い方は「User Guides」に詳しく掲載されているので参照されたし。

オリジナルファイルでしか保存できませんが、PNG形式に書き出すことができます。これまでにも同じようなもので、Microsoft Officeのオンライン版などもありましたが、これほど手軽で簡単に作成できるツールはなかなかなかったんじゃないでしょうか。

Visioなどでいう「ステンシル」が「Shape Collection」だと思うのですが、これがオンライン上で常時アップデートされればかなり協力なツールになり得るなあと思ってしまいます。

スクリーンショットで解説があったので、引用しておきます。

  1. Creating complex prototypes
    Creating complex GUI prototype for a Windows desktop application
  2. Property dialog
    Property Dialog provides access to all properties of a shape
  3. Changing page properties
    Page Properties dialog with ability to choose another page as the background
  4. Creating Pencil website mockup
    Pencil is using the create mockups for the Pencil project website!
  5. On-screen text editing
    Onscreen text editing supports both plain texts and rich texts
  6. Exporting to PNGs
    Pencil supports rasterizing the whole document into a set of PNG images

MacでもFirefox上で動くので、興味ある方は試してみては?

]]> http://www.bookslope.jp/blog/2008/07/pencil-project.html/feed 0 Web情報アーキテクチャ (IA) とツール http://www.bookslope.jp/blog/2008/07/web-ia-tools.html http://www.bookslope.jp/blog/2008/07/web-ia-tools.html#comments Wed, 02 Jul 2008 18:33:45 +0000 bookslope http://www.bookslope.jp/blog/?p=624 このブログに書くのが遅くなりましたが、技術評論社のウェブサイト「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形式）

    • たしかにそうでした。フィードバックありがとうございます。

    次回もツッコミやフィードバック、よろしくです。

    ]]>     http://www.bookslope.jp/blog/2008/07/web-ia-tools.html/feed 0