構造設計 - 情報をデザインする基礎 -
NPO 法人クリエイター育成協会合同会社ワイヤーフレームズ
松野尾 絢三
アジェンダ• Web 制作とは• 要素を知る• ワーク
サイトを作る-Build Web Site-
代弁者-spokesman-
作り手の個性-Creators Personality-
☓
サイトを作る-Build Web Site-
代弁者-spokesman-
作り手の個性-Client Personality-
◯
サイトを作る-Build Web Site-
クライアントの個性をその相手に伝えることを形にする
ウェブサイト制作の流れ-Flow-
-Jesse James Garrett-The Elements Of User Experience
ウェブサイト制作の流れ-Flow-
The Elements Of User Experience
ウェブサイト制作の流れ-Flow-
Strategy戦略
サイトの目的や達成するゴールを決める誰に?何を?どのように?を明確にする
- 行動・成果物 -ヒアリング
KGI ・ KPI戦略キャンパス
ウェブサイト制作の流れ-Flow-
Scopeしぼりこみ
サイトに求められているものを抽出するサイトが提供する機能を明確にする
- 行動・成果物 -ブレスト・ワークショップ
要件定義
ウェブサイト制作の流れ-Flow-
Structure構造
情報を構造化するユーザーがどのようにその情報にたどり着くかを考える
Information Architecture(IA)
- 行動・成果物 -グルーピング
エレメント → コンポーネント → ページサイトマップ
ウェブサイト制作の流れ-Flow-
Skelton骨組み
IA で具体化した構造を、インターフェースの形にする画面操作するとどのような事ができるかを形にする
- 行動・成果物 -サイトワイヤーフレーム
プロトタイプ
要素とは?-Element-
この流れで言う「要素 -element- 」とはその情報を成す一つ一つの細かいパーツを意味します
エレメント → コンポーネント → ページ
要素とは?-Element-
エレメントの集合体で一つのブロックがコンポーネント
エレメント → コンポーネント → ページ
要素を見つける-Find Element-
凡例にならう-Examples-
同じようなサイトの要素を見てよく使われている要素を洗い出す
要素を見つける-Find Element-
メディアサイトの記事のページ-Media site’s description page-
まずは考えてみようとりあえず思いつく「要素」を上げていってみよ
う
要素を見つける-Find Element-
メディアサイトの記事のページ-Media site’s description page-
他のサイトではどんな要素がある?http://www.lifehacker.jp/2015/05/150512smart_phone_walk.html
http://smmlab.jp/?p=38532
ワーク-WorkShop-
EC サイトの商品詳細ページの要素を洗い出しワイヤーフレームを作成しましょう
取扱う商品アパレル系カジュアル
ワーク-Work Shop-
やり方-How-
付箋紙に要素を書き出していこう15分
参考にできそうなサイトを色々と見てそこに含まれている要素をどんどん付箋紙に書いていこう
どんな小さな物でも良い
この部分なんて書いたらいいかわからない。。は相談しよう( or 勝手に命名してみよう)
ワーク-WorkShop-
やり方-How-
書きだした要素を整理してワイヤーフレームに落としこんでみよう
手書きワイヤーフレーム