SlideShare a Scribd company logo
1 of 7
Download to read offline
ワイヤーフレームとは
何なのか問題について
画像:ワイヤーフレーム – Google 検索 より
1
そもそもワイヤーフレーム
とは何か
• 言葉の由来的には、3DCGのモデリングまたは
レンダリングの手法。あるいは、その手法に
よって描画された3DCGそのもの。
2
画像:ワイヤーフレーム 3DCG – Google 検索 より
webでのワイヤーフレーム
• 1990年代後半から2000年初頭頃は、歴史的経緯か
ら、webサイト(webページ)の設計を見た目ベース
で行うことが多く、グラフィック的な作り込みを
する前のデザイン設計(ラフデザイン)において、
ワイヤーフレームの手法が用いられた。
• したがって、かつてはデザイナーがワイヤーフ
レームを作成していた。
• なぜならレイアウトのスタディだから。
3
その時歴史が動いた
• 2000年代以降、大手のweb制作会社なども現れ、個人で完
結する仕事は減り、仕事は大規模化・複雑化。制作会社は
制作作業を分業するようになる。
• 発注側と、サイトに実装する機能やコンテンツの要件を詰
める段階(コンセプト定義等)から、ワイヤーフレームを
傍らに置いて(肴にして)進行するようになった。
• つまり、ワイヤーフレームが、レイアウトのスタディ用で
はなく、要素決め・コンテンツ決めのために使われるよう
になったのである!
4
ワイヤーフレームは
コンテンツ仕様を決めるツール
• 結果として、ワイヤーフレームはコンテンツ仕様を決
めるためのツールとして使われている。
• しかし、なまじレイアウトっぽい雰囲気をかもしてい
るために、なぜだかデザインの話になってしまいがち
である。
• デザイナーが作っていればまだしも、営業やwebディ
レクターが作成している場合も多いため、ワイヤーフ
レームでデザインの話をするのは危険。
5
「ワイヤーフレーム」が何なのか、
最初に必ず合意をとろう
• 当該プロジェクトにおいて、「ワイヤーフレー
ム」が何なのかを関係者ですり合わせておく。
• レイアウト設計書なのか?
• ページ内要素の仕様を設計をしているものなのか?
• コンテンツを文言まで設計したものなのか?
• スポットで発注する外部デザイナーにも、あらか
じめすり合わせておく必要アリ。
• そのワイヤーフレームは何なのかの合意が必要。
• 要素仕様の設計書なのか、デザイン指示書なのか、等
6
おくづけ
• このスライドに加筆していくと良さげなトピック
等ありましたらご連絡ください。
• 作者 森田 雄
• https://necomesi.jp/blog/securecat
• https://twitter.com/securecat
• ワイヤーフレームとは何なのか問題について
• Rev 001, 2019/12/5
7

More Related Content

What's hot

NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅Seungjae Lee
 
C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)Takayoshi Tanaka
 
LaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみたLaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみたYuta Ohashi
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4Nammin Lee
 
hbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineeringhbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability EngineeringRyuji Tamagawa
 
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォークSQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォークke-m kamekoopa
 
이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdfjaehoon lee
 
Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법pyrasis
 
Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]Taehoon Kim
 
읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다wonmin lee
 
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CEAkiraMasago
 
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティそろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティMuneaki Nishimura
 
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험Ohgyun Ahn
 
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説Samir Hammoudi
 
traitを使って楽したい話
traitを使って楽したい話traitを使って楽したい話
traitを使って楽したい話infinite_loop
 
애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향 애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향 Young-Ho Cho
 

What's hot (20)

앱 제안서
앱 제안서앱 제안서
앱 제안서
 
NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅
 
C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)
 
LaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみたLaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみた
 
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdevApache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4
 
hbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineeringhbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineering
 
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォークSQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
 
이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf
 
Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법
 
Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]
 
읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다
 
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
 
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティそろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
 
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
 
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
 
traitを使って楽したい話
traitを使って楽したい話traitを使って楽したい話
traitを使って楽したい話
 
애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향 애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향
 
GitLabをバックアップしてみた
GitLabをバックアップしてみたGitLabをバックアップしてみた
GitLabをバックアップしてみた
 

More from Yu Morita

機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話Yu Morita
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4Yu Morita
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきことYu Morita
 
時間調整用
時間調整用時間調整用
時間調整用Yu Morita
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionYu Morita
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1Yu Morita
 
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決Yu Morita
 
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=Yu Morita
 
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Yu Morita
 
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]Yu Morita
 
10年後の自分をデザインしよう
10年後の自分をデザインしよう10年後の自分をデザインしよう
10年後の自分をデザインしようYu Morita
 
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローいつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローYu Morita
 
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスマークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスYu Morita
 

More from Yu Morita (13)

機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
 
時間調整用
時間調整用時間調整用
時間調整用
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決
 
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
 
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
 
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
 
10年後の自分をデザインしよう
10年後の自分をデザインしよう10年後の自分をデザインしよう
10年後の自分をデザインしよう
 
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローいつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
 
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスマークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパス
 

ワイヤーフレームとは何なのか問題について