ユーザー中心で一緒につくる、参加型デザイン事務所

お問い合わせ

プロトタイピング

プロジェクト全体を効率化するプロトタイピング、提供中です

当社では、『 クライアントやエンドユーザーとの円滑なコミュニケーションを通じて、効率よく要件定義を行うこと 』 を主な目的として、デザインプロセスにプロタイピングを取り入れています。

プロジェクト初期段階での導入と小規模な制作→テスト→改善のサイクルを何度も繰り返し精緻化を図る段階的アプローチをベースに、個々のプロジェクトにあった提案を行っています。

アジャイルまたはウォーターフォールいずれの開発方式でも、プロトタイピングの利点を活かした導入が可能です。「うちの事情にあった提案が聞きたい」、「事例を話して欲しい」等、お気軽にご連絡ください。

プロトタイピング導入、3つのメリット

当社が提供するプロトタイピングの形態

スケッチ

スケッチ

専用の方眼紙を用いて、鉛筆でスケッチを起こします。当社のスケッチは、ペーパープロトタイプと呼ばれるものと同等レベルのものを指します。

▼<スケッチ>の詳細

ワイヤーフレーム

ワイヤーフレーム

スケッチを元にパワーポイントFireworks(またはHTML/CSSマークアップ)にて、画面レイアウトと各要素の配置を行います。

▼<ワイヤーフレーム>の詳細

モックアップ

モックアップ

ワイヤーフレームを元に、表層のディティールを作りこみ(ビジュアルデザイン)、HTML/CSSマークアップとJavaScript/Flashを実装します。

▼<モックアップ>の詳細

各プロセスの詳細

スケッチ

体験シナリオ、機能、画面遷移、画面パターン等を設計→検証

スケッチ

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

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

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

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

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

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

ワイヤーフレーム

動線、画面の論理構造、データ項目、要素等を設計→検証

ワイヤーフレーム

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

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

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

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

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

  • ・PowerpointまたはFireworks
  • ・場合によりHTML/CSS
  • 画面まわりの外部設計におけるワイヤーフレーム関連成果物の対応表

  • 当社におけるワイヤーフレーム制作作業は、システム開発における画面まわりの外部設計も兼ねるものとなります。ワイヤーフレームにて要素等が確定した後、関連する工程成果物の作成に着手いたします。詳しくは、以下をご覧ください。
  • 工程成果物 詳細 適用サービス
    画面一覧表 画面ID、ディレクトリー、ファイル、Meta、hx等の確定 情報アーキテクチャー
    画面遷移図 表示順、遷移イベント、条件分岐、回遊経路等の記述 情報アーキテクチャー
    画面レイアウト 画面ごとにコンテンツ、データ、部品等の要素を配置 ワイヤーフレーム
    入出力項目表 入出力データの名称、形式、型、桁数、制約等の決定 ワイヤーフレーム別添
    アクション明細書 入力、クリック等のイベント発生時の処理に関する記述 ワイヤーフレーム別添
    画面定義書(パターン) インデックス、リスト、詳細、機能等、各ページのパターン定義 ワイヤーフレーム別添
    画面定義書(レイアウト) コンテンツ、入出力データ、部品等の要素の定義 ワイヤーフレーム別添
    画面定義書(論理構造) メタ、見出し、段落、強調、リスト、リンク等の定義 ワイヤーフレーム別添

モックアップ

ルック&フィール、ふるまい、一貫性、使い勝手等を設計→検証

モックアップ

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

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

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

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

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

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

コミュニケーションツールとしての働き

当社ではプロトタイピングを、クライアントと受託者による協働思考法と位置づけています。

とくにエンドユーザーとSier、クライアントとWeb制作会社等、立ち位置の異なる関係者間での仕様策定時のトラブルを解決する有効な手段として、多くのプロジェクトにて導入して参りました。

とりわけ業務アプリケーションの開発では、エンドユーザーの要求獲得や要件定義が難航した際、スケッチやワイヤーフレームを導入したことでプロジェクトが好転した場面を何度も経験してきました。

たとえスケッチであっても利用シーンが想像しやすいため、『ボタンはここにあるとクリックしやすい』、『この順番で入力できると楽』等、クライアントやエンドユーザーから具体的な要求が出てきて、用件定義のコミュニケーションが活性化します。

結果、仕様策定の抜け漏れや手戻りも減少し、中長期的での工数短縮にもつながります。

プロトタイピング導入、3つのメリット

料金 ( ※2011年7-12月期の設定 )

お客様のプロジェクトにあわせて、お見積もりさせていただきます。目安として以下をご確認ください。

お見積もりについて
料金の算定方式 9,000円(時間単価) × タスク完了にかかる時間
タスク <工程と成果物(内容・品質・分量)>で構成され、お客様と協議して決定
成果物 料金にはすべての工程成果物、最終成果物の提出が含まれます
お見積もり事例
備考
  • オフィスまたはご指定場所に常駐が必要な場合は、90~120万円/人月でお受けしています

このサービスのご利用事例

Morningstar.co.jp

Morningstar.co.jp

モーニングスター(株)

hon.gakken.jp プロトタイプ

hon.gakken.jp プロトタイプ

(株)学習研究社

branco.tv

branco.tv

ソニーマーケティング(株)

ご質問、ご相談、お見積もりは

  • Q&Aへ
  • フォームへ
  • お電話:0466-51-2174
▲いちばん上へ