ワイヤーフレームの設計ツールとしてVisioやOmniGraffleを紹介しましたが，それらのツールでは目的に応じたテンプレートを使用して作業を進めることになります。そのうち，ページフォーマット（種類としての枠組みやIDやタイトルなどを記すヘッダー要素など）を指すものと，もう1つ「ステンシル（シンボル・図形）」と呼ばれる「パーツ」を指す場合とがあります。今回はそのステンシルに注目してみることにします。

ステンシルとは

簡単に言うと，図形やシンボルを指します。つまり画面設計などを進めるためのパーツ類と考えるとわかりやすいかもしれません。

Webにおける画面設計は，Photoshopを立ち上げてする作業を指す場合だけではありません。もちろんラフとして手書きで描く場合もあるでしょう。ただし，大規模ないし複雑なWebサイト構築においては数名のメンバーとの共同作業と大量生産という点でこのステンシルを使ったほうが，より効率のいい画面設計作業を進めることができます。

ステンシルを使うメリット

• 共同作業を行う場合に同じパーツで作業ができる
• 繰り返しの多い（量産）作業に都合が良い
• ビジュアルデザインに変換しやすい
• CSSなどの表現の種類を決めることができる
• 文書構造におけるパターンが整理できる

ステンシルを使うことで，これまで何気なく見てきたWebページをパーツ別に分解して理解することができます。また，この理解の延長線上には画面パターン（UIパターン）をボトムアップで理解することができると思います。

文書構造とステンシル

Webサイトは文書の束だという言い方もできると思いますが，その文書構造を設計する際にもステンシルは役に立ちます。例にあるとおり，画面をデザインしていくこととは，文書構造の要素に対してデザインパーツを割り当てていくことを指します。もちろん一から考えることもありますが，ほとんどの場合は既存サイトにおける画面要素を確認し整理していく中で，文書構造における要素を確認していくことになります。

文書構造の例

• ヘッダ
• ナビゲーション
• タイトル
• キャッチコピー
• リードコピー
• 本文
• リスト
• 注釈
• フッタ

もちろん，VisioにしろOmniGraffleにしろ，それらのツールに含まれているステンシルだけでは網羅できません。基本図形はあるものの，既存サイトにおける要素を置き換えるものや新サイトにおけるパーツはありません。そこで，公開されているステンシルを活用する方法と，独自にステンシルを作成することが考えられます。

「Yahoo! Design Stencil Kit」で網羅するデザインパターン

2008年6月末ごろにYahoo! から公開された「Yahoo! Design Kit」を紹介します。すでにダウンロードして試された方もいるかと思いますが，さまざな形式で公開されています。ここでは，OmniGraffle，Visio（XML），PDF，PNG，SVGとがあります。SVG形式はAdobe Illustratorで開くことができますし，PNG形式はFireworks然りAdobe Photoshopで開くことができます。

何が含まれているのかというと，次のテーマごとのステンシルが含まれています。主に考える必要のある画面設計におけるポイントをYahoo! の視点からうまくまとめています。とくに最近発売されたiPhone用のステンシルがあるのも見逃せません。

Yahoo! Design Stencil Kitに含まれる内容

• Ad Units（広告ユニット）
• Calendars（カレンダー）
• Carousels（カルーセル）（※「Carousel Design Pattern」を参照）
• Charts and Tables（チャート・表）
• UI Controls（UIコントロール）
• Form Elements（フォーム要素）
• Grids（グリッド）
• Menus and Buttons（メニューとボタン）
• Mobile - General（モバイル全般）
• Mobile - iPhone（iPhone用）
• Navigation and Pagination（ナビゲーションとページネーション）
• OS Elements（OS要素）
• Placeholder Text（プレースホルダーテキスト）
• Screen Resolutions（スクリーンレゾリューション）
• Tabs（タブ）
• Windows and Containers（ウィンドウとコンテナ）