More Related Content
Similar to 2012年度webゼミ前期発表
Similar to 2012年度webゼミ前期発表 (20)
2012年度webゼミ前期発表
- 4. １．プロジェクト概要
横浜ウェブクリエイターズカレッジ（YWCC）
• 20XX年、新たに設立される架空の専門学校
• 横浜デジタルアーツ専門学校のWeb科／総合デザイン科
を母体とする
高度情報化社会の中核を果たすウェブに携わる
スペシャリストを輩出する
最高の技術と伝わりやすさを重視した
新規サイトの構築
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 6. ２．チームとしての目標
ブレインストーミング
• どのような学校・サイトにすれば良いか
• 学生の視点、保護者の視点、経営者の視点など切り口を
変えて、とにかくたくさんのアイデアを出す
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 9. ３．制作フローとスケジュール
5月 6月 7～8月 9月
4w 5w 1w 2w 3w 4w
キ要 調 分 設 オ 実 前
ッ件 査 析 計 ー 装 期
ク定 プ 発
•
•
•
•
•
•
•
•
•
•
•
オ義 ン 表
フ ユデ 他ペ サワカロユ キ テ画 会
ープ サル イイラゴー ャ ン面
(
ブ
レ ザス イソ トヤーマザ ン プ内
イ ーイ トナ スー計ーー パ レ要
ン テン の作 トフ画クイ ス ー素
スタ 評成 ラレ 、ン ト図
(
ス 中
ト トビ 価 クー ロタ
ュ ・ チム ゴー 間
ー 発
ミ ー 分 ャ タフ
析 イェ 表
ン
)
グ プイ
ス
)
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 11. ４．調査
インタビュー
被験者１名に対しインタビュアー１名
観察者２名のデプスインタビュー
1. 学習することへの取り組
み
2. 個人の熱中度・集中度
3. 学校との関わり
4. ICTとの関わり
5. 友人らとのコミュニケー
ション
6. 将来のこと、仕事に対す
る考え
7. ウェブの未来のこと
8. 人生の目標、今の目標
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 12. ４．調査
ユーザーテスト
• 被験者に「卒業後の進路について考えている高校三年
生」になりきってもらい、専門学校のサイトを見てもら
う
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 15. ５．評価・分析
ペルソナの作成①
※「ペルソナ」＝「サイトを使うと思われるターゲット層
を具体的な人格として見える形にしたもの」
• インタビューやユーザーテ
ストの結果をカードソート
法を使って分析する
• 被験者の発言や行動をカー
ドにひとつずつ書き出し、
「なぜそう言ったか」
「なぜそうしたか」
を整理して一定の人格を掘
り下げていく
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 16. ５．評価・分析
ペルソナの作成②
• 分析結果をもとに、名前、年齢、性別、背景となる物語
など、細かいところまで人格を作り上げていく
• 今回はペルソナを３種類作成
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 17. 新しいいろんなモノ作りたい！まだまだ勉強頑張
ります！将来は独立だ！
家族は父・母・自分・妹の4人．
高校から付属の大学に進学．しかし大学生活と自分とのズレをどこかに感じ，一年
で大学を辞める．それからは，バイトをしながら好きな絵を描いていた．
性格は比較的マイペースで負けず嫌い．周りが見えなくなるほどひとつのことに熱
中してしまうこともしばしば・・・．一人で黙々と作業することが好きなので、家
名前：馬場 優美子 族で共有しているPCで絵を描いていた．
その経験から，絵とPCに関わる仕事に就きたいと思い，調べたところ，webデザイ
出身地 ：群馬県前橋市 ナーという職種の存在を知る．ウェブサイトなどを作ることには興味があるが，専
現住所 ：神奈川県横浜市 門的に何をしたらいいのかよくわからない．しかし何か新しいモノを作りたいとい
年齢 ：21歳 う気持ちはある．
出身校 ：群馬高校→群馬大学(中退) そこでwebデザイナーの勉強ができる専門学校を調べることにした．
PCリテラシー YWCCのサイトで達成したいこと ライフゴール（どのように生きていき
PC ：windows vista ・求めている勉強ができるかどうかを たいか）
携帯 ：INFOBAR (au/Android) たしかめたい ・独立して働きたい
・自分の力でいろんなものが作れるよ
うになりたい
趣味 ・馬の絵を描くこと
・スポーツ YWCCに何を求めているか YWCCとのかかわり
・外に出ることが好き ・いろいろなことが勉強できる ・これから入学し、学生として勉強し
・実習を含む実践的な勉強ができる たい
・人とうまく付き合っていけるように
なりたい
ペルソナ１ （2012webゼミナール Bチーム）
- 18. ５．評価・分析
他サイトの評価・分析
• 他の専門学校や大学（情報系・デザイン系）のサイトを
印刷して切り出し、マッピングして業界としての傾向を
調べる
• メインカラー、カラム分け、ナビゲーションの位置、カ
テゴリー分け、ラベリングなど
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 19. ５．評価・分析
他サイトの評価・分析
• メインカラー
明度・彩度に関わらず青系が多い
• カラム分け
左右２カラムが多い
• ナビゲーションの位置
ローカルナビゲーションは左の場合と右の場合で数
は同じくらい
• カテゴリー分け
学費・入学方法の項目がグローバルナビに載ってい
る
• ラベリング
日本語、カタカナ表記が多く、アルファベット表記
はほとんどない
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 22. ６．情報の収集
ブレインストーミングの結果から抜き出す
チームの目標やペルソナの求めるものに合うアイデアを
ピックアップ
※チームの目標
「学校を実際に見に行ってみたい」
と思わせる
※ペルソナの求めるもの
「自分の学びたいことが本当に学べ
るか知りたい」
「楽しい学校生活を送りたい」
「子供の将来がちゃんとサポートさ
れるか知りたい」
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 24. ６．情報の収集
他の大学や専門学校から抜き出す
YDA以外のウェブ系の学校と共通して使える情報を拾い出
す（授業内容、資格対策など）
※サイトの他、パンフレット、チラシなども参考にする
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 27. ７．サイトの設計
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 29. ７．サイトの設計
カラー計画
• メインカラー • テキストカラー
• コンビネーションカラー • アクセントカラー
• ウェブ系の学校のスタンダードに合わせた「青」メイン
• 「楽しい学校生活」が見える鮮やかな色
• 見ていて疲れないよう明度は中程度
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 32. ７．サイトの設計
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 34. ８．画面内要素図
画面内要素図
• ワイヤーフレームをもとに
PPで作成
• 実際のサイトに使う写真・テ
キストを決める
• 文章は「情報が探しやすい」
よう専門用語・カタカナ語を
控える
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 35. ８．画面内要素図
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 37. ９．実装
実装
• DWのテンプレートを
用いて分業することで
効率化
• 複雑な部分は担当を決
めて一気に仕上げる
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 38. ９．実装
実際のサイトをごらんください
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
- 40. １０．まとめ
良かった点・工夫した点
• サイトの着地点をチーム内で早い段階で決め、方針がぶ
れないようにした
• それぞれの得意分野で担当を分け、集中して取り組める
ようにした
改善が必要な点
• 分業によって全体が見えづらくなってしまうメンバーが
いた
→ 全体の進捗を共有する方法を明確にする
• 作業内容が明確になっていない場合があり、メンバーの
あいだで締め切り時の完成度に認識の差があった
→ 「こうなったら完成」となる形を言葉で明確に
する
横浜デジタルアーツ専門学校 2012年度 Webゼミナール
