2012年度飞别产ゼミ前期発表
- 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ゼミナール
