Enviar pesquisa
Carregar
Webサイトのようには作れない!Webアプリ設計の考え方
•
Transferir como KEY, PDF
•
14 gostaram
•
9,622 visualizações
G
girigiribauer
Seguir
Tecnologia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 73
Baixar agora
Recomendados
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Roy Kim
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Recomendados
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Roy Kim
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
Yu Morita
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
Roy Kim
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
FICC inc.
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
デザインの要件定義
デザインの要件定義
Shin Iiboshi
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
Mais conteúdo relacionado
Mais procurados
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
Yu Morita
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
Roy Kim
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
FICC inc.
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
デザインの要件定義
デザインの要件定義
Shin Iiboshi
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
Mais procurados
(20)
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
デザインの要件定義
デザインの要件定義
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Destaque
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
UIデザインの基本
UIデザインの基本
Roy Kim
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料
Find Job Startup
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
Find Job Startup
創業時の「nanapiのナマ企画書」
創業時の「nanapiのナマ企画書」
Find Job Startup
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
Find Job Startup
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Destaque
(14)
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
UXのためのUIデザイン
UXのためのUIデザイン
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
UX / UIデザインって何?
UX / UIデザインって何?
UIデザインの基本
UIデザインの基本
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
創業時の「nanapiのナマ企画書」
創業時の「nanapiのナマ企画書」
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Semelhante a Webサイトのようには作れない!Webアプリ設計の考え方
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
初めてのConcrete5
初めてのConcrete5
Nobuko Kodera
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Kazuma Sekiguchi
Web design
Web design
kazuko kaneuchi
ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】
schoowebcampus
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
Kelly Holonic
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
Hiromitsu Ito
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
Ishikawa Yuya
20120927 findjob4 dev_ops
20120927 findjob4 dev_ops
ume3_
Semelhante a Webサイトのようには作れない!Webアプリ設計の考え方
(20)
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
初めてのConcrete5
初めてのConcrete5
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Web design
Web design
ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
20120927 findjob4 dev_ops
20120927 findjob4 dev_ops
Mais de girigiribauer
黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう
girigiribauer
JSHint を自分好みにする話
JSHint を自分好みにする話
girigiribauer
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバい
girigiribauer
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?
girigiribauer
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人
girigiribauer
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
girigiribauer
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
girigiribauer
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
Mais de girigiribauer
(9)
黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう
JSHint を自分好みにする話
JSHint を自分好みにする話
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバい
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
Último
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Último
(7)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Webサイトのようには作れない!Webアプリ設計の考え方
1.
Webサイトの ようには作れない! Webアプリ設計の
考え方 @girigiribauer
2.
※タイトルは若干釣りですごめんなさい ソースコードもあんまり出てきません
3.
Webアプリは、つくるもの (≒構成物)は同じでも、 つくりかた(≒段取り、設計)
は全然ちがった、 という内容について話します
4.
自己紹介 • TwitterID: @girigiribauer •
名古屋の某Web制作会社で 働いています • いつもぎりぎりで戦ってます (※ブランディング)
5.
今日はもう少し細かい自己紹介 • マークアップエンジニアやったり • テクニカルディレクターやったり •
大規模なプロジェクトのCMSの設計、 実装したり • Flashクリエイターやったり
6.
今日はもう少し細かい自己紹介 • フロントエンドエンジニアに至る • いずれはリアルタイムWebクリエイ
ター!になりたいな
7.
Webアプリとは • ここでいうWebアプリは、クライアン トサイド中心に動くWebアプリ •
もっと言うとJavaScriptを中心とした Webアプリ • Webサイトと呼ばれる中に、Webアプ リが混在することもある
8.
お品書き • 前置き(おわり) • 最近のWebサイト制作の潮流、トレンド •
要件定義の話 • 設計の話 • まとめ
9.
最近のWebサイト制作の
潮流、トレンド • 個人的な感想が主です
10.
最近のWebサイト制作の潮流、トレンド http://archive.engineanalog.com/TSBD0902/site/
11.
最近のWebサイト制作の潮流、トレンド http://archive.engineanalog.com/TSBD0902/site/
12.
最近のWebサイト制作の潮流、トレンド http://toyota.vo.llnwd.net/o29/toyota/sienta/
13.
最近のWebサイト制作の潮流、トレンド
(潮流、トレンド) • Webサイトが、単に情報載せるだけの 役割を終えつつある(※もちろんなくな るわけじゃない) • とある機能に特化、例えば体験させる ためのコンテンツとか • Webサイトの中にWebアプリが部分的 にあるとか
14.
最近のWebサイト制作の潮流、トレンド
(技術面とか) • サーバサイドでページ単位で返すもの を、非同期で必要な部分だけ返す • いわゆるAjax • サーバサイドの負荷をクライアントサ イドに逃がす • ページ単位ではなく機能単位
15.
最近のWebサイト制作の潮流、トレンド
(デバイスの変化) • スマートフォン、タブレット対応も併せ てしてほしい • Flashでやりましょう、は減っている (激減してるので寂しい) • 必然的に、JavaScriptでやりましょう、 が増えている
16.
クライアントサイドの
Webアプリに集中 潮流、トレンド 技術面とか クライアントサイドの Webアプリ デバイスの変化
17.
一言でまとめると
18.
需要高いよ!
19.
需要高いよ!
チャンスだよ!
20.
お品書き • 前置き(おわり) • 最近のWebサイト制作の潮流、トレンド
(おわり) • 要件定義の話 • 設計の話 • まとめ
21.
要件定義の話 • 作れる方法が増えてきたことで、 前段をほったらかしにすると
あとで痛い目に・・・
22.
今までのWebサイト構築のあるある ※弊社とは全く関係のない、
一個人の見解です
23.
今までのWebサイト構築のあるある
CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer だいたいのページボリューム と工数算出もして、 情報設計もしてあるから Director ※Twenty Fourより引用
24.
今までのWebサイト構築のあるある
あと、 デザインよろしくねー Director はいはーい♪ Designer デザインどう? Director ※Twenty Fourより引用
25.
今までのWebサイト構築のあるある
はいはーい♪(差し出す) Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね! Director はーい Engineer ※Twenty Fourより引用
26.
今までのWebサイト構築 • 経験があればこの流れでもそれなりに 出来る •
構築フローとしては定着してるので、 「ここおかしくない?」って誰もが言 いやすい
27.
“最近の” Webサイト構築のあるある
CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer 今回はこの地図部分をAjaxでぐりぐりやっ て、モーダルウィンドウでそのまま出した いんだよね。工数算出もして、情報設計も してあるから Director ※Twenty Fourより引用
28.
“最近の” Webサイト構築のあるある
あと、 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
29.
“最近の” Webサイト構築のあるある
はいはーい♪(差し出す) Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね! Director えっ?えっ? (内容の割に期間短くない?) Engineer ※Twenty Fourより引用
30.
“最近の” Webサイト構築のあるある
CTUのサイト構築の話が あるんだよねー Director 今回は、いま流行りのパララックスで グィングィンとやっちゃいたいんだよね。 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
31.
“最近の” Webサイト構築のあるある
※Twenty Fourより引用
32.
“最近の” Webサイト構築のあるある
なんだって・・・? ※Twenty Fourより引用
33.
どこに問題があるのか • 普通のWebサイトに慣れてるディレク ターだけでは、要件定義できないかも •
そういう人に任せていたら、最後に死 ぬのは自分自身、はりたおしてでも変 な要件がくるのを阻止すべき • 自己防衛、テロを防ぐ
34.
だからこそ、要件定義の
話をしよう 1. どのタイミングでどのように介入すれ ばいいのか 2. どう動けばいいのか(いわゆるテクニ カルディレクター) 3. 最終的に何が決まればいいのか
35.
1. どのタイミングでどのよ うに介入すればいいのか? • 理想は「どのような機能的な要件があ
るか」をディレクターがヒアリング • 機能的要件を技術的要件に変換する • 他タスクで時間がないかもしれないけ ど、要件が確定してしまう前に介入
36.
機能的要件を技術的要件に変換する
(1/4) 商品パーツをいくつか選ぶと、組み合わせた画像を そのまま表示する(よくある着せ替え系) • サーバサイドで画像合成する • クライアントサイド、Flashで画像合成する • クライアントサイド、Canvasで画像合成する • あるいはそれらを組み合わせる
37.
機能的要件を技術的要件に変換する
(2/4) 他の要件を洗い出す • まだまだIE6, 7とか削れない、シェア多い • iPadはどうしても入れたい • サーバは貧弱 • 費用は○○まででおさめたい(無茶ぶり・・)
38.
機能的要件を技術的要件に変換する
(3/4) 組み合わせて絞り込む • サーバサイドで画像合成する → 貧弱なのでアクセス数や組み合わせ数次第では無理 • クライアントサイド、Flashで画像合成する → iPadに対応できない • クライアントサイド、Canvasで画像合成する → IE6∼8に対応できない • あるいはそれらを組み合わせる → 当確?(※お高くなりますよ?)
39.
機能的要件を技術的要件に変換する
(4/4) • ここまでやって、ディレクターとメ リット・デメリット含めて共有する • あとはどこを妥協するかの話し合い (費用、対応デバイスなど)
40.
だからこそ、要件定義の
話をしよう 1. どのタイミングでどのように介入すれ ばいいのか 2. どう動けばいいのか(いわゆるテクニ カルディレクター) 3. 最終的に何が決まればいいのか
41.
どう動けばいいのか • 火は着火する前に消す • ディレクターが技術的に分からない人
だったとしても、複数の方法のメリッ ト・デメリットまで提示されれば動け る人は多い • 場合によってはプロトタイプ作る(後述)
42.
理解ある人と仕事をしよう • 技術的なところは分からないから相談 する、という段取りができる人と仕事
をしよう • できない、わからないということ自体 は悪じゃない • できてない、わかってないという認識 がないことこそが悪
43.
理解ある人と仕事をしよう • 相談せずに勝手に進めちゃうやつは はりたおす、というスタンスで臨む •
自己防衛、テロを防ぐ
44.
だからこそ、要件定義の
話をしよう 1. どのタイミングでどのように介入すれ ばいいのか 2. どう動けばいいのか(いわゆるテクニ カルディレクター) 3. 最終的に何が決まればいいのか
45.
最終的に何が決まればいいのか • 結果的に技術的な要件定義ができてい ればOK •
それぞれの方法に対してどれくらいかか るかを目安として共有する、判断材料の 1つ • ディレクターに任せるところは任せる (ディレクターになる必要はない)
46.
小まとめ •
技術的にやれる方法が増えてきている(サー バ、クライアント) • 適切に選ぶ、得意じゃないとこはお互い聞け ばいい、選べないやつには選ばせない • ここで適切なチョイスがなされないと、あと でどんだけ頑張ってもいいものは作れない • 自己防衛、テロを防ぐ
47.
お品書き • 前置き(おわり) • 最近のWebサイト制作の潮流、トレンド
(おわり) • 要件定義の話(おわり) • 設計の話 • まとめ
48.
設計の話 • ページ単位で進めると、大問題になる 可能性 •
Webサイト制作に慣れてる人ほどあり がち • 機能単位のくくりだしが必要
49.
“最近の” Webサイト構築のあるある
CTUのサイト構築の話が あるんだよねー Director 今回は、画面遷移せずに 一連の流れでAjax的にぽちぽち選んでいく コンテンツを作りたいんだよねー デザインよろしくねー Director ちょっとまったー!! Technical Director ※Twenty Fourより引用
50.
“最近の” Webサイト構築のあるある
もしかして、画面の切り替え ごとにページ数=画面数で算 出してたりしてないか? Technical Director ああ、その通りだが 何か問題か? Director ※Twenty Fourより引用
51.
ページ(画面)単位ではなく
機能単位のが良い • 実は設計だけじゃなく、要件定義にも 絡んでくる話 • 単独の機能(&UI)をもったひとまとま りを単位で数える • +API単位で数える
52.
個人的に取り入れてる設計
の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
53.
1. プロトタイプ制作 ※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介
• 制作時におけるリスクを可能な限り減らす • 想定される機能のみを、検証するために作る • 例)Canvasの画像合成において、どのブラウ ザでどこまでマスク処理できるか試す
54.
1. プロトタイプ制作 ※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介
• 汎用的なものほど資産にでき、流用できる • 書籍「テスト駆動JavaScript」にある学習テス トに近い?
55.
1. プロトタイプ制作 実際に試しに作ったものを見てもらうと さすがに時間なくなるので省略
56.
個人的に取り入れてる設計
の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
57.
2.インターフェース定義 • サーバとクライアント間の通信を定義す る •
いわゆるAPI(内部API、公開しない) • データください、データあげますの定義 • 基本的にはJSON
58.
インターフェース定義の例 例えば、顔と小物と背景のパーツを選んだら、 合成した1枚絵が返ってくるようなもの • リクエストURL
(http://domain/api/imagecomposition/) • リクエストパラメータの定義(face, acc, bg) • レスポンス形式を決める
59.
インターフェース定義の例
リクエスト API名 必須 概要とか パラメータ imagecom 笑い顔、泣き顔、アヘ顔 face ○ position の中から選択する acc ○ ・・・ bg ○ ・・・
60.
インターフェース定義の例 レスポンスのサンプル(JSON) { "head":
{ "success": 1 }, "data": { "image": "/resource/mainimage.png" } }
61.
インターフェース定義の例 • 仕様として共有できる形にする • 決めておけば、平行して実装できる •
仮に自分1人でやるときも、いざという ときお願いできるようにしておく • 切り分けてシンプルにする
62.
個人的に取り入れてる設計
の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
63.
3. ウィジェット設計 ※ここでは機能とビューの1つのまとまりの単位をウィジェットと呼んでます •
JavaScriptだけなら、他言語参考にして やればOK • HTMLも含めて考えると、完全に機能と ビューを切り分けられない • 機能とUIのひとまとまりをウィジェッ トとして定義する • ウィジェットは汎用的に作る
64.
ウィジェット設計の例 A
B C こうではなくて・・・
65.
ウィジェット設計の例 A B
C こんなかんじ(機能単位!)
66.
ウィジェット設計の例 • @takazudo さんの以下の資料がとても
分かりやすい • http://dl.dropbox.com/u/268240/ presentations/jQueryRefactoring/ presentation/index.html • http://dl.dropbox.com/u/268240/ presentations/cssnitelp18jq/index.html#/ • 切り分けてシンプルにする
67.
小まとめ • 前段で動いて、要件的なリスクを減らす • シンプルに分けて、実装的なリスクを
減らす • お願いしやすくしておいて、社内リソー ス的なリスクを減らす • 自己防衛、テロを防ぐ
68.
お品書き • 前置き(おわり) • 最近のWebサイト制作の潮流、トレンド
(おわり) • 要件定義の話(おわり) • 設計の話(おわり) • まとめ
69.
結局Webサイト構築とWebアプリ構築
の違いとは? • 結局JavaScriptは使うし、HTML, CSSで書く • Webアプリだからこそ、というよりは、 やれること増えてきてるからアプリも作 れるし、使う技術を適切に選ぶ必要があ る
70.
要件定義から • やれる方法が増えているので、適切に 選ぶ •
その障害になってるやつはどんな方法 を使っても排除する • 自己防衛、テロを防ぐ
71.
設計から • ディレクター、デザイナーの工程を待 たなくてもやれることはたくさんある •
何事もシンプルに分けて、リスクを分 散しよう • 自己防衛、テロを防ぐ
72.
大まとめ • プロジェクトメンバーに、選択肢が増 えているから、適切に選ぶ必要がある
ことを浸透させる • 「段取りや算段立てないで 勝手に進め ちゃうやつは はりたおす!」っていう 段取りTシャツを作るとか
73.
おわり 質問なんてないと思いますがありますか?w
Notas do Editor
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Baixar agora