インターン向け勉強会の資料です。 そのサイトに必要な画面要素を抽出し、ワイヤーフレームへ落とし込むというワークを行いました

1. 構造設計
-情報をデザインする基礎-
NPO法人クリエイター育成協会
合同会社ワイヤーフレームズ
松野尾 絢三

2. アジェンダ
• Web制作とは
• 要素を知る
• ワーク

3. Web制作とは

4. サイトを作る
-Build Web Site-
代弁者
-spokesman-

5. サイトを作る
-Build Web Site-
代弁者
-spokesman-
アーティスト
-Artist-
☓

6. サイトを作る
-Build Web Site-
代弁者
-spokesman-
クリエイター
-Creator-
◯

7. サイトを作る
-Build Web Site-
代弁者
-spokesman-
作り手の個性
-Creators Personality-
☓

8. サイトを作る
-Build Web Site-
代弁者
-spokesman-
作り手の個性
-Client Personality-
◯

9. サイトを作る
-Build Web Site-
クライアントの個性を
その相手に伝えることを形にする

10. ウェブサイト制作の流れ
-Flow-

11. ウェブサイト制作の流れ
-Flow-
概念的・抽象的
-Abstract-

12. ウェブサイト制作の流れ
-Flow-
概念的・抽象的
-Abstract-
ホームページほしいねん

13. ウェブサイト制作の流れ
-Flow-
概念的・抽象的
-Abstract-
ホームページほしいねん
かっこよかやつのほしか〜

14. ウェブサイト制作の流れ
-Flow-
概念的・抽象的
-Abstract-
ホームページほしいねん
かっこよかやつのほしか〜
おいどんの会社の思いをとどけたいのでごわす

15. ウェブサイト制作の流れ
-Flow-
具体的
-Concrete-

16. ウェブサイト制作の流れ
-Flow-
具体的
-Concrete-

17. ウェブサイト制作の流れ
-Flow-
-Jesse James Garrett-
The Elements Of User Experience

18. ウェブサイト制作の流れ
-Flow-
The Elements Of User Experience

19. ウェブサイト制作の流れ
-Flow-
Strategy
戦略
サイトの目的や達成するゴールを決める
誰に？何を？どのように？を明確にする
-行動・成果物-
ヒアリング
KGI・KPI
戦略キャンパス

20. ウェブサイト制作の流れ
-Flow-
Scope
しぼりこみ
サイトに求められているものを抽出する
サイトが提供する機能を明確にする
-行動・成果物-
ブレスト・ワークショップ
要件定義

21. ウェブサイト制作の流れ
-Flow-
Structure
構造
情報を構造化する
ユーザーがどのようにその情報にたどり着くかを考える
Information Architecture(IA)
-行動・成果物-
グルーピング
エレメント → コンポーネント → ページ
サイトマップ

22. ウェブサイト制作の流れ
-Flow-
Skelton
骨組み
IAで具体化した構造を、インターフェースの形にする
画面操作するとどのような事ができるかを形にする
-行動・成果物-
サイトワイヤーフレーム
プロトタイプ

23. ウェブサイト制作の流れ
-Flow-
Surface
表層
要素にデザインを加える
-行動・成果物-
デザインされたウェブサイト

24. ウェブサイト制作の流れ
-Flow-
クライアントが求めてくるもの
かっこいいサイトがほしいねん
Surface
表層
☓

25. ウェブサイト制作の流れ
-Flow-
クライアントが求めてくるもの
そのサイトがもたらす利益
集客
売上
認知度
Strategy
戦略
◯

26. 要素を知る
-Element-

27. 要素を知る
-Element-
Structure
(構造設計の一部)
要素を洗い出す

28. 要素を知る
-Element-
Skelton
(骨組み)
それらをワイヤーフレームに落としこむ

29. 要素とは？
-Element-
この流れで言う「要素-element-」とは
その情報を成す一つ一つの細かいパーツを意味します
エレメント → コンポーネント → ページ

30. 要素とは？
-Element-
エレメントの集合体で一つのブロックがコンポーネント
エレメント → コンポーネント → ページ

31. 要素とは？
-Element-
それらを組み合わせると一つのページになります
エレメント → コンポーネント → ページ

32. 要素を見つける
-Find Element-
凡例にならう
-Examples-
同じようなサイトの要素を見て
よく使われている要素を洗い出す

33. 要素を見つける
-Find Element-
ポイント
-point-
デザインにとらわれない
要素そのものに意味がある

34. 要素を見つける
-Find Element-
凡例1
-Example 1-
メディアサイトの記事のページ

35. 要素を見つける
-Find Element-
メディアサイトの記事のページ
-Media site’s description page-
まずは考えてみよう
とりあえず思いつく「要素」を上げていってみよう

36. 要素を見つける
-Find Element-
メディアサイトの記事のページ
-Media site’s description page-
他のサイトではどんな要素がある？
http://www.lifehacker.jp/2015/05/150512smart_phone_walk.html
http://smmlab.jp/?p=38532

37. ワーク
-WorkShop-
ECサイトの商品詳細ページの要素を洗い出し
ワイヤーフレームを作成しましょう
取扱う商品
アパレル系
カジュアル

38. ワーク
-Work Shop-
やり方
-How-
付箋紙に要素を書き出していこう
15分
参考にできそうなサイトを色々と見て
そこに含まれている要素をどんどん付箋紙に書いていこう
どんな小さな物でも良い
この部分なんて書いたらいいかわからない。。
は相談しよう（or 勝手に命名してみよう）

39. ワーク
-WorkShop-
やり方
-How-
書きだした要素を整理して
ワイヤーフレームに落としこんでみよう
手書きワイヤーフレーム