Submit Search
Upload
ワイヤーフレームとは何なのか問題について
•
4 likes
•
2,662 views
Yu Morita
Follow
人によってワイヤーフレームの解釈が違う原因の考察と、それへの対応策について、さらっとまとめたものです。
Read less
Read more
Design
Report
Share
Report
Share
1 of 7
Download now
Download to read offline
Recommended
서버 개발자가 되기 위한 첫 걸음
서버 개발자가 되기 위한 첫 걸음
nexusz99
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
Etsuji Nakai
RESTful API 설계
RESTful API 설계
Jinho Yoo
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
훌륭한 개발자로 성장하기
훌륭한 개발자로 성장하기
Changyol BAEK
구현하는 디자이너: 매일 1000명이 방문하는 웹사이트를 만든 사연
구현하는 디자이너: 매일 1000명이 방문하는 웹사이트를 만든 사연
Yujin Lee
捕鯨!詳解docker
捕鯨!詳解docker
雄哉 吉田
Recommended
서버 개발자가 되기 위한 첫 걸음
서버 개발자가 되기 위한 첫 걸음
nexusz99
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
Etsuji Nakai
RESTful API 설계
RESTful API 설계
Jinho Yoo
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
훌륭한 개발자로 성장하기
훌륭한 개발자로 성장하기
Changyol BAEK
구현하는 디자이너: 매일 1000명이 방문하는 웹사이트를 만든 사연
구현하는 디자이너: 매일 1000명이 방문하는 웹사이트를 만든 사연
Yujin Lee
捕鯨!詳解docker
捕鯨!詳解docker
雄哉 吉田
앱 제안서
앱 제안서
서진 이
NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅
Seungjae Lee
C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)
Takayoshi Tanaka
LaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみた
Yuta Ohashi
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Yahoo!デベロッパーネットワーク
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4
Nammin Lee
hbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineering
Ryuji Tamagawa
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf
jaehoon lee
Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법
pyrasis
Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]
Taehoon Kim
읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다
wonmin lee
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
AkiraMasago
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Ohgyun Ahn
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Samir Hammoudi
traitを使って楽したい話
traitを使って楽したい話
infinite_loop
애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향
Young-Ho Cho
GitLabをバックアップしてみた
GitLabをバックアップしてみた
VirtualTech Japan Inc./Begi.net Inc.
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Yu Morita
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
Yu Morita
More Related Content
What's hot
앱 제안서
앱 제안서
서진 이
NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅
Seungjae Lee
C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)
Takayoshi Tanaka
LaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみた
Yuta Ohashi
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Yahoo!デベロッパーネットワーク
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4
Nammin Lee
hbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineering
Ryuji Tamagawa
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf
jaehoon lee
Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법
pyrasis
Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]
Taehoon Kim
읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다
wonmin lee
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
AkiraMasago
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Ohgyun Ahn
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Samir Hammoudi
traitを使って楽したい話
traitを使って楽したい話
infinite_loop
애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향
Young-Ho Cho
GitLabをバックアップしてみた
GitLabをバックアップしてみた
VirtualTech Japan Inc./Begi.net Inc.
What's hot
(20)
앱 제안서
앱 제안서
NDC14 - 사례로 배우는 디스어셈블리 디버깅
NDC14 - 사례로 배우는 디스어셈블리 디버깅
C#エンジニアのためのdocker kubernetesハンズオン (再)
C#エンジニアのためのdocker kubernetesハンズオン (再)
LaravelアプリケーションをSeleniumでテストしてみた
LaravelアプリケーションをSeleniumでテストしてみた
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
Apache OpenWhiskで実現するプライベートFaaS環境 #tjdev
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4
hbstudy 74 Site Reliability Engineering
hbstudy 74 Site Reliability Engineering
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
이재훈 개발 포트폴리오.pdf
이재훈 개발 포트폴리오.pdf
Docker란 무엇인가? : Docker 기본 사용법
Docker란 무엇인가? : Docker 기본 사용법
Random Thoughts on Paper Implementations [KAIST 2018]
Random Thoughts on Paper Implementations [KAIST 2018]
읽기 좋은 코드가 좋은코드다
읽기 좋은 코드가 좋은코드다
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
Google Container Engine (GKE) & Kubernetes のアーキテクチャ解説
traitを使って楽したい話
traitを使って楽したい話
애플리케이션 아키텍처와 객체지향
애플리케이션 아키텍처와 객체지향
GitLabをバックアップしてみた
GitLabをバックアップしてみた
More from Yu Morita
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Yu Morita
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
Yu Morita
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
Yu Morita
時間調整用
時間調整用
Yu Morita
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
Yu Morita
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決
Yu Morita
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Yu Morita
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Yu Morita
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
10年後の自分をデザインしよう
10年後の自分をデザインしよう
Yu Morita
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
Yu Morita
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパス
Yu Morita
More from Yu Morita
(13)
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
おかんでもわかる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.1
おかんでもわかるUXデザイン Ver.0.1
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
10年後の自分をデザインしよう
10年後の自分をデザインしよう
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパス
ワイヤーフレームとは何なのか問題について
1.
ワイヤーフレームとは 何なのか問題について 画像:ワイヤーフレーム – Google
検索 より 1
2.
そもそもワイヤーフレーム とは何か • 言葉の由来的には、3DCGのモデリングまたは レンダリングの手法。あるいは、その手法に よって描画された3DCGそのもの。 2 画像:ワイヤーフレーム 3DCG
– Google 検索 より
3.
webでのワイヤーフレーム • 1990年代後半から2000年初頭頃は、歴史的経緯か ら、webサイト(webページ)の設計を見た目ベース で行うことが多く、グラフィック的な作り込みを する前のデザイン設計(ラフデザイン)において、 ワイヤーフレームの手法が用いられた。 • したがって、かつてはデザイナーがワイヤーフ レームを作成していた。 •
なぜならレイアウトのスタディだから。 3
4.
その時歴史が動いた • 2000年代以降、大手のweb制作会社なども現れ、個人で完 結する仕事は減り、仕事は大規模化・複雑化。制作会社は 制作作業を分業するようになる。 • 発注側と、サイトに実装する機能やコンテンツの要件を詰 める段階(コンセプト定義等)から、ワイヤーフレームを 傍らに置いて(肴にして)進行するようになった。 •
つまり、ワイヤーフレームが、レイアウトのスタディ用で はなく、要素決め・コンテンツ決めのために使われるよう になったのである! 4
5.
ワイヤーフレームは コンテンツ仕様を決めるツール • 結果として、ワイヤーフレームはコンテンツ仕様を決 めるためのツールとして使われている。 • しかし、なまじレイアウトっぽい雰囲気をかもしてい るために、なぜだかデザインの話になってしまいがち である。 •
デザイナーが作っていればまだしも、営業やwebディ レクターが作成している場合も多いため、ワイヤーフ レームでデザインの話をするのは危険。 5
6.
「ワイヤーフレーム」が何なのか、 最初に必ず合意をとろう • 当該プロジェクトにおいて、「ワイヤーフレー ム」が何なのかを関係者ですり合わせておく。 • レイアウト設計書なのか? •
ページ内要素の仕様を設計をしているものなのか? • コンテンツを文言まで設計したものなのか? • スポットで発注する外部デザイナーにも、あらか じめすり合わせておく必要アリ。 • そのワイヤーフレームは何なのかの合意が必要。 • 要素仕様の設計書なのか、デザイン指示書なのか、等 6
7.
おくづけ • このスライドに加筆していくと良さげなトピック 等ありましたらご連絡ください。 • 作者
森田 雄 • https://necomesi.jp/blog/securecat • https://twitter.com/securecat • ワイヤーフレームとは何なのか問題について • Rev 001, 2019/12/5 7
Download now