プロトタイピング

プリント出力した方眼紙に鉛筆で手描きしていきます。外化したアイデアや仮説をもとに議論を活発化させることを目的としており、この時点できれいな絵を描く必要はありません。

スケッチをたたき台に議論を行い、ユーザー視点で検証し、その場で出てきたアイデアや改善点をスケッチ上にどんどん付加していくのが特徴です。

追記や改善等によりアップデートされたスケッチは、撮影後にデータ変換を行い、プロジェクト資料としてチームで共有。また、次のワイヤーフレームのステップでブラッシュアップを行います。

• スケッチで確認・検証すること

• ・利用者視点でのタスク開始～完了までの体験シナリオ
• ・表示コンテンツや機能に関するアイデア
• ・シナリオに沿った画面遷移の順序や流れ、タイミング
• ・おおまかな画面パターン
• ・画面内の機能ボタンやデータ、コンテンツの配置領域
• ・画面内の各要素の配置順と目線の流れ
• ・制作に必要なおよその画面数

• 使用する道具

• ・方眼紙またはグリッドを印刷した専用紙
• ・鉛筆またはよく書けるマーカー

ワイヤーフレームの工程では、サービス全体の動線、画面の論理構造、入出力データ項目、画面内すべての各要素等の設計と検証が主なタスクとなります。色彩や装飾性をできる限り排した、白地に黒線のシンプルな構成で描画していきます。

また、パワーポイントやFireworks上ではボタンやナビゲーション等をクリックした後の画面遷移の設定もできるため、ビジュアルデザインだけでなくインタラクションや機能に関する一定レベルの検証も可能です。

クライアントの作業の比重が大きい場合はパワーポイントを、設計～実装～検証のワークフローが着実に組める場合はFireworks（CS5）を使用します。また、画面IDや版番号を付与して参照性を高める等して、スムーズな協働作業を心がけています。

• ワイヤーフレームで確認・検証すること

• ・データの入力項目と入力形式
• ・ボタンやナビゲーション、リンクの文言
• ・操作に関する指示文と状態表示文（エラーメッセージを含む）
• ・見出し、コンテンツ、データ、ボタン等各要素の形状・大きさ・位置
• ・クリック等のアクションに対する画面の挙動
• ・画面遷移（経路、順番、一貫性）
• ・画面パターンの確定
• ・統一化、モジュール化可能な各要素の確定
• ・マージンやグリッドのルール

• 使用するソフトウェア、言語

• ・PowerpointまたはFireworks
• ・場合によりHTML／CSS

WebサイトやアプリケーションのUI制作におけるモックアップは、データベースやサーバーサイド・プログラムとの連結を含まないUI画面のことを指す場合が多く、当社でも同じ意味合いでモックアップという用語を使っています。

また、HTML+CSSによる静的画面だけでなく、jQuery等フレームワークを用いたJavaScriptやAjax（ダミーXMLデータを使用）の設計・実装も対応可能です。

その他、予算規模や納期がタイトな場合は、ワイヤフレーム工程を飛ばしてスケッチからモックアップを制作することも可能です。スケッチに具体的な指示書または仕様書を別添する等、プロジェクトの進捗状態等を見ながら随時判断を行います。

• モックアップで確認・検証すること

• ・全体的なルック＆フィール
• ・彩色処理の一貫性、カラスキームに沿っているか
• ・各要素の作りこみや加工処理のディティール
• ・各要素の形状・大きさ・位置等の一貫性
• ・情報コンテンツの視認性、可読性
• ・画面長やスクロール操作の適切さ
• ・各機能の挙動やふるまいの操作性
• ・各処理の反応速度や表示にかかる時間

• 使用するソフトウェア、言語

• ・HTML／CSS
• ・jQuery等のフレームワークを含むJavaScript
• ・Photoshop、Illustrator（Jpg、Gif、Png形式の画像を作成）
• ・Flash（モーションや動画を作成）