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

第4回 設計図とステンシルの活用

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

YUI(Yahoo! User Interface)のライブラリ

そもそもYahoo! には「YUI」と言われるThe Yahoo! User Interface Libraryというものが公開されていますが,これは主にAjaxなどのライブラリになります。このうち,CSSに関するシミュレーションツールGrids CSSを紹介した記事をいろいろなところで見ますが,画面レイアウトを設計する際にはまずはじめに見ておくことをおすすめします。

YUI: CSS Grid Builder

このシミュレーションツール「CSS Grid Builder」では,ページ幅を750px,950px,974pxと選択しカラム数によるレイアウト自体を検証することができます。そもそもなぜ750pxの次は850pxではなく950pxなのか,次は1050pxではなく974pxなのかを自分で試してみてほしい。

ステンシル作成はプロジェクトではなく組織の取り組みとして

「Yahoo! Design Stencil Kit」の話に戻すと,文書構造として画面要素を整理する場合,⁠Navigation and Pagination」「Placeholder Text」だけではまったく網羅されないことに気づきます。それは,対象とするWebサイトの画面要素が途方に暮れるくらい多く,かつパターンがデタラメな状態にあるからだと言えるでしょう。ではどうやって整理するかという点で,ステンシルを作成してしまう手があります。

たとえば,Navigationとした場合にも「メインメニュー」⁠サブメニュー」⁠ヘッダー」という具合におおよそ想定できる要素をステンシルとして作成します。また,Textにも「1カラム」⁠写真付き」「リスト付き」などこれまた想定できる要素をステンシル化しておきます。そうすると,必要最低限の画面要素がステンシルとして蓄積されていくことになります。

もちろん,これらの作業をDreamweaver上でCSSのコンポーネント単位で設計していく,というのもプロトタイピングの側面から見ると自然な流れでもあります。

したがって,その組織・そのプロジェクトにおいて最適な方法で画面設計を進めていくことが重要になります。プロジェクト内で気づいた人が作成するだけではなく,組織として取り組むようにして,今後の作業を効率良く進められるようにしてきましょう。

各社から公開されているステンシル

ネットワーク構成図やサーバー構成図などといったもの,つまりよくVisioなどで作成される対象のものに関しては各社から公開されているステンシルを利用することができます。Visio Cafeでは,DELLやIBM,HPなどといった大企業から公開されているステンシルをダウンロードし使うことができます。

図4 Visio Cafe

図4 Visio Cafe

たとえば,DELL社の場合は自社サイト内に,⁠PowerEdge」「EqualLogic」などといった製品をあつかったステンシルを公開しています。

また,ヤマハの場合には,ステンシルとは少し違う点では自社の製品そのものをアイコンとして公開し,ネットワーク構成図などのに利用できるように工夫されています。

図6 アイコン・外観写真ダウンロード | ネットワーク周辺機器 ルーター | YAMAHA

図6 アイコン・外観写真ダウンロード | ネットワーク周辺機器 ルーター | YAMAHA

ネットワーク図などは,画面のインターフェースとは違い,利用する職種または業種が異なる場合があるかと思いますが,公開されているステンシルを利用することで,さらにわかりやすいものを作成することができます。

著者プロフィール

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

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

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

URLhttp://bookslope.jp/blog/