「ウェブ構築プロセスのまとめ」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
 
編集の要約なし
 
(3人の利用者による、間の6版が非表示)
1行目: 1行目:
<div id="manual">
<div id="manual">
<p>ウェブ構築におけるデザインプロセスのまとめです。</p>
ウェブ構築におけるデザインプロセスのまとめです。<br>
ここでは、Jesse James Garrettの「5 Planes Model」を参考にしていますが、ここでまとめたプロセスはゴールに至るまでの手法の一つに過ぎません。そもそも、デザインプロセスに正解はないのです。そのプロジェクトの目的や状況や様々な制約により、メンバーたちがその都度考え、柔軟に対応していくことが求められます。
 


==第1フェーズ:戦略==
==第1フェーズ:戦略==


まず戦略面で明確にすべきは以下の2点です。
まず戦略面で明確にすべきは以下の2点です。
<div class="example">
・'''<em>サイトの目的</em>'''…ウェブサイトから、自分たち(クライアントのこと)は何を得たいのか。あるいは、ウェブサイトから得たいビジネス上の成果は何か。


●'''サイトの目的'''…サイトから、自分たち(クライアント)は何を得たいのか。あるいは、ウェブサイトから得たいビジネス上の成果は何か。
'''<em>ユーザーニーズ</em>'''…訪れるユーザーは何を求めているのか。あるいは、どのような問題を抱えているのか。
 
</div>
'''ユーザーニーズ'''…訪れるユーザーは何を求めているのか。
<p>この2つ(ビジネス側/ユーザー側)の両視点から、「なぜデザインするのか?」、「何をデザインするのか?」を最初に定義します。問題の定義とは、どんな問題を解決しなければいけないのかという哲学であり、どう解決するかを示すビジョンです。あるべき姿であり、それとのギャップを計るための現状の理解です。</p>
 
<p>この2つの視点から、「なぜデザインするのか?」、「何をデザインするのか?」を最初に定義します。問題の定義とは、どんな問題を解決しなければいけないのかという哲学であり、どう解決するかを示すビジョンです。あるべき姿であり、それとのギャップを計るための現状の理解です。</p>




20行目: 22行目:


===[[コアメンバーの決定]]===
===[[コアメンバーの決定]]===
今回のプロジェクトに中核となるメンバーを決定します。


===[[プロジェクト定義書]]===
===[[プロジェクト定義書]]===
====役割====
最初に解決すべき問題を明確に定義し、プロジェクトメンバー全員が共有するためにドキュメント化します。最初にこれを行っておけば、あとで方向性がズレてしまったときでも戻るべき場所を維持することができます。
====項目====
====項目====
・プロジェクトの目的(あるいは哲学)
・プロジェクトの目的<br>
・プロジェクトのゴール(あるいはビジョン)
・プロジェクトのゴール(あるいはビジョン)<br>
・ターゲットユーザー
・ターゲットユーザー<br>
・スコープ(範囲)
・スコープ(範囲)<br>
・実現の方法
・実現の方法<br>
・実現の期間
・実現の期間<br>
・調査が必要な事柄
・調査が必要な事柄<br>
・制約条件、前提条件
・制約条件、前提条件<br>
・プロジェクト体制、利害関係
・プロジェクト体制、利害関係<br>
・コミュニケーションの方法
・コミュニケーションの方法


38行目: 44行目:


===[[競合調査]]===
===[[競合調査]]===
競合サイトを調査して、機能やコンテンツの有無を比較し、その特徴を把握します。
競合サイトを調査して、品質、機能、コンテンツの有無などを比較し、その特徴を把握します。




===[[ブレインストーミング]]===
アイディア出しの場であるブレストは、あくまで必要に応じて、その都度行います。


===[[ユーザーセグメント]]===
===[[ユーザーセグメント]]===
54行目: 62行目:


==第3フェーズ:構造==
==第3フェーズ:構造==
ここでは、戦略や要件といった抽象的な問題から、具体的な要素へと論点は移行します。ディレクトリ設計、ページ数、ナビゲーション設計などを行います。


==第4フェーズ:骨格==
==第4フェーズ:骨格==
画面設計、ワイヤーフレームです。ページ内の要素を全て決めるため、マークアップも可能です。


==第5フェーズ:表層==
==第5フェーズ:表層==


表層フェーズでは、ビジュアルデザイン、最終的な見た目の設計を行います。
表層フェーズでは、ビジュアルデザイン、最終的な見た目のデザインを行います。


==第6フェーズ:実装==
==第6フェーズ:実装==

2009年4月2日 (木) 16:24時点における最新版

ウェブ構築におけるデザインプロセスのまとめです。
ここでは、Jesse James Garrettの「5 Planes Model」を参考にしていますが、ここでまとめたプロセスはゴールに至るまでの手法の一つに過ぎません。そもそも、デザインプロセスに正解はないのです。そのプロジェクトの目的や状況や様々な制約により、メンバーたちがその都度考え、柔軟に対応していくことが求められます。


第1フェーズ:戦略

まず戦略面で明確にすべきは以下の2点です。

サイトの目的…ウェブサイトから、自分たち(クライアントのこと)は何を得たいのか。あるいは、ウェブサイトから得たいビジネス上の成果は何か。

ユーザーニーズ…訪れるユーザーは何を求めているのか。あるいは、どのような問題を抱えているのか。

この2つ(ビジネス側/ユーザー側)の両視点から、「なぜデザインするのか?」、「何をデザインするのか?」を最初に定義します。問題の定義とは、どんな問題を解決しなければいけないのかという哲学であり、どう解決するかを示すビジョンです。あるべき姿であり、それとのギャップを計るための現状の理解です。


ヒアリング

クライアントの担当者と会って、依頼内容と目的、予算、スケジュール、現状の把握、問題の洗い出しなど聞いた上でまとめます。

ヒアリングは直接会う前に、あらかじめメールでヒアリングシートを送り、事前に文章で答えてもらいます。そうすることで、あらかじめ整理してもらった情報を理解したうえで、さらに詳しくヒアリングする内容を検討できますし、質問を受ける側も問題を整理しやすく、ヒアリング時の受け答えがズムーズになります。

コアメンバーの決定

今回のプロジェクトに中核となるメンバーを決定します。

プロジェクト定義書

役割

最初に解決すべき問題を明確に定義し、プロジェクトメンバー全員が共有するためにドキュメント化します。最初にこれを行っておけば、あとで方向性がズレてしまったときでも戻るべき場所を維持することができます。

項目

・プロジェクトの目的
・プロジェクトのゴール(あるいはビジョン)
・ターゲットユーザー
・スコープ(範囲)
・実現の方法
・実現の期間
・調査が必要な事柄
・制約条件、前提条件
・プロジェクト体制、利害関係
・コミュニケーションの方法

現状サイト調査・分析

競合調査

競合サイトを調査して、品質、機能、コンテンツの有無などを比較し、その特徴を把握します。


ブレインストーミング

アイディア出しの場であるブレストは、あくまで必要に応じて、その都度行います。

ユーザーセグメント

プロジェクト体制図

戦略策定書

第2フェーズ:要件

サイトの目的(ビジネスのゴール)とターゲットユーザーのニーズを満足する機能要求とコンテンツを決める。

第3フェーズ:構造

ここでは、戦略や要件といった抽象的な問題から、具体的な要素へと論点は移行します。ディレクトリ設計、ページ数、ナビゲーション設計などを行います。

第4フェーズ:骨格

画面設計、ワイヤーフレームです。ページ内の要素を全て決めるため、マークアップも可能です。


第5フェーズ:表層

表層フェーズでは、ビジュアルデザイン、最終的な見た目のデザインを行います。

第6フェーズ:実装