SlideShare uma empresa Scribd logo
1 de 7
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』Yoshitaka Kawashima
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方増田 亨
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込むYoshiki Hayama
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回Yoshiki Hayama
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
名は体を表していますか
名は体を表していますか名は体を表していますか
名は体を表していますかinfinite_loop
 
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?Yoshitaka Kawashima
 
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワークプロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワークkumiko koshiro
 
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]Koichiro Matsuoka
 
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019Tokoroten Nakayama
 
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten, core skills neede...
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten,  core skills  neede...楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten,  core skills  neede...
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten, core skills neede...Rakuten Group, Inc.
 
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~啓 杉本
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかAtsushi Nakada
 
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナーItsuki Kuroda
 
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexdItsuki Kuroda
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法Junichi Izumi
 
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていることonozaty
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama
 

Mais procurados (20)

ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』
 
HEROZ Kishin AIにおけるディープラーニング活用事例のご紹介
HEROZ Kishin AIにおけるディープラーニング活用事例のご紹介HEROZ Kishin AIにおけるディープラーニング活用事例のご紹介
HEROZ Kishin AIにおけるディープラーニング活用事例のご紹介
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
名は体を表していますか
名は体を表していますか名は体を表していますか
名は体を表していますか
 
Digitaltransformation Journey
Digitaltransformation JourneyDigitaltransformation Journey
Digitaltransformation Journey
 
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?
 
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワークプロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
 
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
 
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
 
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten, core skills neede...
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten,  core skills  neede...楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten,  core skills  neede...
楽天市場で使われている技術、エンジニアに必要なコアスキルとはTechnology used in Rakuten, core skills neede...
 
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
 
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー
大企業アジャイルの勘所(ver1.1) #アジャイルマネジメントセミナー
 
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
 

Mais de 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
 

Mais de 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準拠にするためのワークフロー
 
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスマークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパス
 

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