Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Search
Katsumi TAZUKE
July 08, 2014
Design
0
260
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイトの構築に際して、これまで文書化されにくく、Webディレ
クターの属人的なスキルに近かった上流設計フェーズで気をつけるポ
イントをまとめた資料です。
Katsumi TAZUKE
July 08, 2014
Tweet
Share
More Decks by Katsumi TAZUKE
See All by Katsumi TAZUKE
himagはいかにして1年半で累計300万ページビューの人気ブログになったのか?
taz8
0
390
Katsumi TAZUKE's portfolio
taz8
0
320
初心者のためのUser Centered Designの考え方(入門編)
taz8
0
90
ブランディングの観点から考察するWebサイトの価値について
taz8
0
140
エンジニアのための User Centered Design の考え方(入門編)
taz8
1
50
Webデザインのトーン&マナーを導き出す手法
taz8
0
800
Other Decks in Design
See All in Design
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
Jeremy's First Day
myates3
1
130
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
160
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
How to Ace a Technical Interview
jacobian
272
22k
For a Future-Friendly Web
brad_frost
171
8.9k
KATA
mclloyd
14
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Ruby is Unlike a Banana
tanoku
96
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
GitHub's CSS Performance
jonrohan
1023
450k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Transcript
Webサイト構築 文書化されにくい 設計フェーズの重要ポイント 2014年7月1日 Webディレクター 田附克巳
[email protected]
Webサイト構築 文書化されにくい設計フェーズの重要ポイント 1.本資料の概要と対象読者 2.Web制作フェーズ全体の流れ 3.顧客へのヒアリング 4.サイトストラクチャ 5.トーン&マナー 6.ワイヤーフレーム 7.まとめ 目次
1.本資料の概要と対象読者 Webサイトの構築に際して、これまで文書化されにくく、Webディレ クターの属人的なスキルに近かった上流設計フェーズで気をつけるポ イントをまとめた資料です。 主としてWebディレクター向けに作成していますが、デザイナーや営 業担当者、さらにWeb制作を発注する立場の方にも参考になれば幸い です。 Webサイト構築 文書化されにくい設計フェーズの重要ポイント
2.制作フェーズ全体の流れ 第1フェーズ 主要業務 成果物 (ドキュメント) 必要とされる スキル・職能 調査 フェーズ 情報設計
フェーズ サイトストラク チャ (サイト構造) デザイン コーディング 第2フェーズ 第3フェーズ 詳細設計実装 フェーズ 各画面のワイ ヤーフレーム (画面内構造) インフォメー ションアーキ テクト(IA) ディレクター /PM コピーライター Webデザイナー 原稿完成 本番公開 HTMLファイル CSS スクリプトコー ド他 サーバ管理者 テスト Webサイト構築 文書化されにくい設計フェーズの重要ポイント
3.ヒアリング(調査フェーズ) 上記の内容を文書化するために、お客様へヒアリングを行います。 ヒアリングの結果は、必ずドキュメント化してお客様と共有すること が大切です。 ・何のためにWebサイトをつくるのか、ゴールを明確にします。 ・誰に観て欲しいのか、ターゲットユーザーを明確にします。 ・どのようなメッセージを伝えたいのか、コンテンツを明確にします。 Webサイト構築の目的をはっきりさせる。 Webサイト構築 文書化されにくい設計フェーズの重要ポイント
4.サイトストラクチャ(情報設計フェーズ) 調査フェーズで入手・分析した情報をもとに、Webサイト全体の階層 やグルーピングなどの構造設計を行います。 主なアウトプットは、「サイトストラクチャ(サイトマップ)」にな ります。 トップページ ◦◦サービス とは? 会員登録 ログイン
利用規約 プライバシー・ ポリシー 運営会社 お問い合わせ ◦◦申し込み 会員情報の修正 退会 ◦◦受け取り Fig.1 サイトストラクチャの例 Webサイト構築 文書化されにくい設計フェーズの重要ポイント
5.トーン&マナー(詳細設計・実装フェーズ) 調査フェーズでヒアリングした情報をもとに、デザインの方向性を決めるための 資料作成を行います。お客様と対話しながら作成するのも一案です。主なアウト プットは、「トーン&マナー資料」になります。 Fig.2 トーン&マナーの例 ▪ビジュアルコンセプト ビジュアルな表現で訴えたいメッセー ジを短文であらわしたもの 【例】
手作りの素朴な雰囲気を醸し出す。 世界トップクラスの高い技術力と安定 性を表現する。 ▪ポジショニングマップ 親しみ やすさ 高級感 情熱的 クール 競合サイト 自社サイト Webサイト構築 文書化されにくい設計フェーズの重要ポイント
6.ワイヤーフレーム(詳細設計・実装フェーズ) 情報設計フェーズで分析した情報をもとに、各ページ内の情報レイアウトなどの 詳細設計を行います。主なアウトプットは、「ワイヤーフレーム」になります。 Fig.3 ワイヤーフレームの例 個店検索画面 イメージ タイトル ◦◦◦◦ ◦◦
小見出しタイトル Photo TEL xxx-xxx-xxxx FAX xxx-xxx-xxxx インフォメーション マップ位置表示 Webサイト構築 文書化されにくい設計フェーズの重要ポイント
7.まとめ 各フェーズでのアウトプット資料は、必ずお客様(発注側)の責任者と情報共有 し、了解を得て次のステップに進むことが重要です。 ・顧客へのヒアリング資料 ・サイトストラクチャ ・トーン&マナー ・ワイヤーフレーム 問題がある場合には、その理由をアウトプット資料に具体的に記載しておく必要 があります。これによって、手戻りや誤解を防ぐことが可能になります。 ここまでの設計資料が了解・共有されていれば、ワイヤーフレーム以降の作業に
ついては、大きくぶれることはなく、担当できる人口も多いことから、代替可能 な力作業として考えることができます。 Webサイト構築 文書化されにくい設計フェーズの重要ポイント