Web情報アーキテクチャ(IA)とツール

第2回 ワイヤーフレームと設計ツール

この記事を読むのに必要な時間:およそ 2 分

そのほか,ワイヤーフレームとして活用できるテンプレートおよびステンシルには次のようなものがあります。

Visio Stencil

Jesse James Garrett氏のサイトで公開されているVisual Vocabulary for Information Architectureを筆頭に,少し古い情報になりますが紹介します。

このサイトでは,Visioのほかに,PowerPoint,InDesign用のステンシルファイルが公開されています。筆者のVisioのステンシルも,いまだにデフォルトでこのJJGのステンシルが入っていたりします。

図2 ステンシルファイル

図2

各種JJGのステンシルファイル:

OmniGraffle Stencil

OmniGraffleでは,Graffletopiaにほとんどまとまって公開されています。このうち「User Interface」カテゴリには,さまざまなインターフェースのステンシルが公開されています。

ユーザーインターフェース設計だけでもない

はじめに挙げたいくつかの解釈とは別に,さらに付加価値として,次のことが期待されている場合があります。

  • 議論のためにもっとラフな (手書きのような) アウトプット
  • プロセスを含むプロジェクト設計

図5 DUB - DENIM

図5 DUB - DENIM

手書きといえば「付箋」と言いたいところですが,その昔話題にあがっていた「DENIM」が事例つきで紹介されています。

また,プロセスまで含む場合のツールとして,Ridualというソフトがあります。これと似たソフトで最近よく聞くソフトですと,Axureが比較的そのあたりまで考慮されたツールだと思います。また,より強化されたという位置づけではIntuitect ProfessionalPrototype Composerというツールが話題にあがっています。

ワイヤーフレームだけでタスクや目的を考えると,どうしてもその役割を狭めてしまい結果としてプロジェクト全体に貢献しにくくなる可能性があります。

今回抑ええておくポイントとしては次の点です。

  • ワイヤーフレームの解釈を明確にして共有しよう
  • ワイヤーフレームのテンプレートやステンシルを活用しよう
  • ワイヤーフレームの前後や関係するタスクまで俯瞰して見てみよう

ワイヤーフレームを決めるのも,そこから広がる展開もプロセス全体を通して見つめ直すことで,その目的や役割が明確になっていくと思います。

次回も,設計する際に利用するツール(設計ツール)を中心にご紹介したいと思います。

著者プロフィール

坂本貴史(さかもとたかし)

2002年より,ネットイヤーグループ株式会社で,IA/UXDディレクターとして参加。

主に,企業におけるイタラクティブマーケティング支援 (コンサルティング)や,Webサイト構築におけるクリエイティブディレクションを担当。とくに,Web情報アーキテクチャを設計する専門職インフォメーションアーキテクトとして活躍中で,執筆・寄稿やセミナーの講師なども行っている。

URLhttp://bookslope.jp/blog/