構造設計情報をデザインする基礎-

構造設計 - 情報をデザインする基礎 -

NPO 法人クリエイター育成協会合同会社ワイヤーフレームズ

松野尾絢三

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

Web 制作とは

サイトを作る-Build Web Site-

代弁者-spokesman-



アーティスト-Artist-

☓



クリエイター-Creator-

◯



作り手の個性-Creators Personality-

☓



作り手の個性-Client Personality-

◯


クライアントの個性をその相手に伝えることを形にする

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


概念的・抽象的-Abstract-



ホームページほしいねん



ホームページほしいねんかっこよかやつのほしか〜



ホームページほしいねんかっこよかやつのほしか〜

おいどんの会社の思いをとどけたいのでごわす


具体的-Concrete-


具体的-Concrete-


-Jesse James Garrett-The Elements Of User Experience


The Elements Of User Experience


Strategy戦略

サイトの目的や達成するゴールを決める誰に？何を？どのように？を明確にする

- 行動・成果物 -ヒアリング

KGI ・ KPI戦略キャンパス


Scopeしぼりこみ

サイトに求められているものを抽出するサイトが提供する機能を明確にする

- 行動・成果物 -ブレスト・ワークショップ

要件定義


Structure構造

情報を構造化するユーザーがどのようにその情報にたどり着くかを考える

Information Architecture(IA)

- 行動・成果物 -グルーピング

エレメント → コンポーネント → ページサイトマップ


Skelton骨組み

IA で具体化した構造を、インターフェースの形にする画面操作するとどのような事ができるかを形にする

- 行動・成果物 -サイトワイヤーフレーム

プロトタイプ


Surface表層

要素にデザインを加える

- 行動・成果物 -デザインされたウェブサイト


クライアントが求めてくるもの

かっこいいサイトがほしいねん

Surface表層

☓


クライアントが求めてくるもの

そのサイトがもたらす利益

集客売上

認知度

Strategy戦略◯

要素を知る-Element-


Structure( 構造設計の一部 )

要素を洗い出す


Skelton( 骨組み )

それらをワイヤーフレームに落としこむ

要素とは？-Element-

この流れで言う「要素 -element- 」とはその情報を成す一つ一つの細かいパーツを意味します

エレメント → コンポーネント → ページ


エレメントの集合体で一つのブロックがコンポーネント



それらを組み合わせると一つのページになります


要素を見つける-Find Element-

凡例にならう-Examples-

同じようなサイトの要素を見てよく使われている要素を洗い出す


ポイント-point-

デザインにとらわれない要素そのものに意味がある


凡例 1-Example 1-

メディアサイトの記事のページ


メディアサイトの記事のページ-Media site’s description page-

まずは考えてみようとりあえず思いつく「要素」を上げていってみよ

う


メディアサイトの記事のページ-Media site’s description page-

他のサイトではどんな要素がある？http://www.lifehacker.jp/2015/05/150512smart_phone_walk.html

http://smmlab.jp/?p=38532

http://www.lifehacker.jp/2015/05/150512smart_phone_walk.html

http://smmlab.jp/?p=38532

ワーク-WorkShop-

EC サイトの商品詳細ページの要素を洗い出しワイヤーフレームを作成しましょう

取扱う商品アパレル系カジュアル

ワーク-Work Shop-

やり方-How-

付箋紙に要素を書き出していこう15分

参考にできそうなサイトを色々と見てそこに含まれている要素をどんどん付箋紙に書いていこう

どんな小さな物でも良い

この部分なんて書いたらいいかわからない。。は相談しよう（ or 勝手に命名してみよう）

ワーク-WorkShop-

やり方-How-

書きだした要素を整理してワイヤーフレームに落としこんでみよう

手書きワイヤーフレーム

Design

構造設計 情報をデザインする基礎-

構造設計情報をデザインする基礎-