SlideShare ist ein Scribd-Unternehmen logo
1 von 201
Web Design Process for The Future
2013.06.08 こもりまさあき
WCAN mini Design Vol.9
簡単に自己紹介
こもりまさあき
1972年生まれのフリーランス。90年代前半から都内のDTP系
デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正
社員に。入出力業務、デザイン業務、ネットワーク関連業務に
並行して従事後、2001年会社を退職しフリーランスの道へ。業
務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『基礎から覚える、深く理解できる。 Webデザインの新
しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』、
など
Twitter:@cipher/@proteanbm
Instagram:@cipher
今日お話しすること
•Responsiveって実際のところどうなの?
•未来を考えるとワークフローはどうなる?
•そして、次世代のWebデザインプロセスへ
refactoring
プログラムの外部から見た動作を変えずに、
将来の仕様変更に柔軟に対応できるよう、
ソースコードの内部構造を整理しなおすこと
【リファクタリング】
Responsive Web?
Optimization ?、Responsive ?
最適な配信形態は、コンテンツ次第で変わるもの
どっちが良いとか悪いではないが…
どうも日本は、携帯コンテンツ文化を引きずり…ry
“7,000 different device types are used to access Facebook each day.
VP Mike Schroepfer: 7,000 Different Types Of Mobile Devices Access Facebook Every Day
http://techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/
7,000different device types
次から次に発売されるデバイス、進まない機種変…
携帯電話コンテンツ制作と同じ轍を踏まなくても…
OSの種類とブラウザ、デバイス毎の差異、バグ…
新規制作にかかるコスト、メンテナンスの効率…
最適化という選択肢は、現実的に可能だろうか?
IE6が…とか言ってる場合じゃないよ?
そもそもWebってどういうのだろう?
“The primary design principle underlying the Web’s usefulness and
growth is universality. ••• And it should be accessible from any
kind of hardware that can connect to the Internet: stationary or
mobile, small screen or large.
Long Live the Web: A Call for Continued Open Standards and Neutrality: Scientific American
http://www.scientificamerican.com/article.cfm?id=long-live-the-web
by Tim Berners-Lee
“If you think about it, responsive layout is not a new thing.
Open a simple HTML file in a web browser, and the content
automatically adapts to fit the width of that browser.
The web is responsive on its own—by default.
Responsive by default
http://blog.andyhume.net/responsive-by-default/
by Andy Hume
接続するデバイスが増え、利用する状況も人それぞれ
Web Design Process for The Future
複数のデバイスをシーケンシャルに使う時代に
PCとそれ以外でコンテンツに相違があったら困ることも
©Brad Frost
http://bradfrostweb.com/
©Brad Frost
http://bradfrostweb.com/
©Brad Frost
http://bradfrostweb.com/
デバイスを基準に最適化するのではなく、
何で見ても大丈夫にした方が良いのでは?
利用状況にあわせた柔軟な配信ができたら…
その答えのひとつが、Responsive Web Design
Responsiveだと、コンテンツが…画像がさ…って、
それって表面的なとこしかみてないからじゃないの?
解決策はある。もっと違う部分に目を向けよう
Content Choreography
Content Choreograpy
http://trentwalton.com/2011/07/14/content-choreography/
Choreography: バレエやダンスの振り付け
コンテンツの立ち振る舞いを考える
A technique for re-arranging layouts using CSS in responsive web design
http://uk.rimmellondon.com/
閲覧状況にあわせて、よりわかりやすく使いやすく
Webサイトの表示スピードも大事だし
この他にもいろいろな技術がどんどん採り入れられている
あるイギリスのWebサイトで使われている技術や仕組み
Requirejs
LESS
Bower
Node.js
PhantomJS
Web Fonts
Grunt
Responsive Images
Style Guide
JShint
localStorage
Jasmine
Curljs
世界のWebサイトは、全然先に進んでるから
TIME
http://time.com/time/
Delicious
http://deliciuos.com/
Microsoft
http://www.microsoft.com/en-us/default.aspx
gloople
http://www.gloople.co.uk/
RIMMEL
http://uk.rimmellondon.com/
Atmosphere Maps
http://www.atmospheremaps.com/
ただレイアウトが切り替わる手法じゃないのよ
もう少し本質的なところを見た方がいいね
さて、未来の話をしましょう
Google Glass
http://www.google.com/glass/start/what-it-does/
ここまでくると、CSSのTipsとかどうでもよくない?
それよりも、この先情報配信の形がどうなっていくか?
その未来を想像して、僕たちが今できることは何か?、と
refactoring
Rethinking Workflow
そんな未来が押し寄せようとしている現代のWeb
いまのワークフローは、これからの時代に対応できるか
Photoshopでカンプを作って、HTML/CSSで再構成?
デバイスがこれだけ増えて、考えること一杯なのに?
そろそろ「ピクセル」って概念すらあやういのに?
1px 1px ?
Standard
Retina
高解像度、高精細のデバイスが出てきてるわけで
Screensiz.es
http://screensiz.es/
“Photoshop is repeating yourself. Ok, so you’ve spent 3 days on a
mockup in Photoshop. Now what? Now I have to make it all over
again in HTML/CSS. Wasted time.
Just build it in HTML/CSS and spend that extra time iterating,
not rebuilding. If you’re not fast enough in HTML/CSS, then
spend the time learning how to create in HTML/CSS faster.
It’s time well spent.
Why we skip Photoshop by Jason Fried of 37signals
http://37signals.com/svn/posts/1061-why-we-skip-photoshop
by Jason Fried
Don't Repeat Yourself
時間は上手に使わないと。やることばっかり増えちゃう
固定サイズ、ピクセルパーフェクトという呪縛からの解放
紙の置き換え的発想は、Web制作にあってないのだから
refactoring
「リーン・…」とかよく見かける今のご時世
さまざまな環境を考えながら、スムーズに制作するには?
“Managing more than 200 PSD files is not only tedious, but it can
produce minor discrepancies between comps of the same page at
different breakpoints.
Case Study: Responsive Design for Time.com
http://appendto.com/case-study/responsive-design-time-com
by appendTo
膨大なページ、さまざまなサイズのPSDで作るなんて無理
スケッチでざっくりワイヤー、そしてモックアップへ
Designing in The Browser
ブラウザで作り上げるのが、いきなり無理だったら
Deciding in The Browser
動かない画面じゃなく、動くモノを見ながら決めていく
視覚表現も大事だけど、先に考えるのはコンテンツのこと
情報をどうやって組み込んで、どういう形で届けるのか
そういうところをまず最初に考えた方がいいよね?
refactoring
あと、過度な分業体制も考えもの
決して分業が悪いわけではない
スペシャリストの存在があって完成する仕事もある
誰かがやってるからって、自分にすっぽりあてはめない
右へならえ文化もほどほどに
僕たちは、同じ形の車を大量生産してるわけではない
サイトの規模や種類、作るコンテンツ、それぞれ違うもの
参考にしつつ、アレンジするぐらいの柔らかさで
自分たちにあったこれからのワークフローを考えよう
Content Choreography
http://trentwalton.com/2011/07/14/content-choreography/
“We’ve found that the best way forward is to pull all members of a
team together to design, build, test and then evaluate in multiple
quick rounds.
Content Choreography
http://trentwalton.com/2011/07/14/content-choreography/
by Trent Walton
関係者全員の協力が必要。意識改革ができるか
refactoring
The Future Design Process
Webコンテンツ制作・配信の手法は多岐にわたる
もはや、ソフトもオールインワンで済まない
Web Design Process for The Future
昔はこれだけでもどうにかなった
でも、いまは制作するものにあわせて柔軟に切り替える
Web制作のツールは、日に日に便利になっていく
年に1回のアップデートじゃなく、週に1回ぐらいでw
最新の手法は、だいたいコマンドラインから
怖がってる場合じゃないし、怖くない
数百もあるPhotoshopの機能を覚えてる方が怖いw
GUIのツールが出る頃は、膨大な時間を費やした後かも
3日かかった仕事が3時間で終われば、別のことができる
単純作業はコンピュータにまかせ、生産的なことをしようよ
Webを作るといっても、どんどん複雑化している
ざっくりとコンテンツを入れてモックアップを作るとか
そういう時には、CSSフレームワークを活用するのも手
Susy
http://susy.oddbird.net/
Bootstrap
http://twitter.github.io/bootstrap/
Foundation 4
http://foundation.zurb.com/
使ってみたいけど、うまく使える自信がない?
ピクセルベースのカンプを再現するフローには向かない
動くかどうかわからない図面より、先に動くものを作る
話はそれからだ。実装サイドが頑張れば済むものでもない
デザインやレイアウトのためのCSSは、どんどん複雑に
効率よく管理、実装するためにCSSプリプロセッサを使う
LESS
http://lesscss.org/
Sass
http://sass-lang.com/
Stylus
http://learnboost.github.io/stylus/
変数や数式を使って、複雑化するCSSも効率よく管理
Scalable and Modular Architecture for CSS
http://smacss.com/
<a class="btn btn-primary btn-large">Learn more </a>
ボタンの基本スタイル
ボタン青くして
ボタン大きくして
サイトの規模が大きくなっても、問題ないような設計を
Don't Repeat Yourself
そして、どこかのタイミングでStyle Guideを作っておく
Pears
http://pea.rs/
Style Guideに則れば、決まりを守るだけで同じになる
KSS
http://warpspire.com/kss/styleguides/
StyleDocco
http://jacobrask.github.io/styledocco/
Kalei
http://kaleistyleguide.com/
最初の設計とドキュメンテーションが大事
で、何でもCMSで作れば効率が良いわけでもない
DBからデータを引っ張らなくてもいいような案件
Static Site Generatorを使った方が、はるかに楽…
Jekyll
http://jekyllrb.com/
Serve
http://get-serve.com/
DocPad
http://docpad.org/
roots
http://roots.cx/
コンテンツは、MarkdownやJSONで用意して
Static Site Generator側でウォッチ、ビルド&デプロイ
FTPクライアントってなんでしたっけ?
そのベースとなるHTMLは、テンプレートエンジンで
Haml
http://haml.info/
Jade
http://jade-lang.com/
Handlebars.js
http://handlebarsjs.com/
HTMLですら、変数を定義して自動的に生成させる
最近、虐げられてたWindowsでの制作環境に朗報
GUIでこの辺の技術を扱えるツールが登場∼w
Prepros
http://alphapixels.com/prepros/
実は、ここまでのいろいろを覚えると良いことがある
Webが動的になるにつれ、さらに注目されるJavaScript
AngularJS
http://angularjs.org/
Backbone.js
http://backbonejs.org/
Knockout
http://knockoutjs.com/
JSフレームワークを使って、Webアプリも簡単に
ここでもHTMLテンプレートやプリプロセッサが活躍
エンジニアの使うフレームワークにも構造的に似てる
いまから慣れておいた方が仕事の幅も拡がるでしょう
Delicious
https://delicious.com/
Deliciousは、Backbone.js + Bootstrap
Pitchfork
http://pitchfork.com/
Pitchforkは、Backbone.js + WordPress
スクリーンショットだって、制作の合間にJavaScriptで
CasperJS
http://casperjs.org/
そうすれば、デザインカンプとかいらなくない?
必要な技術を適宜組み合わせて、最良の結果を得る
そんな制作に必要なツールは、パッケージで管理する時代
npm
http://npmjs.org/
Bundler
http://gembundler.com/
Composer
http://getcomposer.org/
Bower
http://bower.io/
面倒なタスクは、コンピュータにお願いしてしまう
Grunt
http://gruntjs.com/
サイト制作の箱作りの段階から、自動化することもできる
Yeoman
http://yeoman.io/
コマンドを実行するだけで必要なものが全部揃う
そうすれば、コンテンツを作るだけに専念できる
時間は有効に。繰り返しの作業はしない
20130608wcan_mini最新_02_new3.zip?
どれが最新ファイル?
あと、ファイルの先祖返り…。誰だー!
無駄
バージョン管理システムの導入を本気で考えよう
どれが最新?先祖返り?そんなトラブルともさようなら
Gitぐらい使えないと、この先協業もままならない
制作手法もワークフローもどんどん変わっている
ネットワークや技術の発展は、仕事相手の距離さえ縮める
東京だから…地方だから…、は関係なく、誰とでもできる
PLTTS
http://pltts.me/
“From Pencil to finished Product in 8 hours
From Pencil to finished Product in 8 hours
http://vslck.im/articles/pencil-to-product
by Dominik Schmidt
最新の技術やワークフローであればできるってこと
そのためにはどうすればいい?
はてブとか見てないで、Speaker Deckをながめましょうw
本日のまとめ
•増え続けるデバイスへの対応を考えたら当たり前
•いまあるワークフローが適切か、変えられるか
•これまでの無駄をなくし、これからの仕事をスムーズに
本日はありがとうございました

Weitere ähnliche Inhalte

Was ist angesagt?

WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道schoowebcampus
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-techmasaaki komori
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローHiroyuki Ogawa
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4Chiaki Hayashi
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Katsumi Tazuke
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりtomoakitomono
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びSeiko Kuchida
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法Keisuke Imura
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」naoki ando
 
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」WebSig24/7
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント高本 徹
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)Hiroyuki Ogawa
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセットSatoru MURAKOSHI
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法Hiroyuki Ogawa
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライドKenta Nakamura
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ力也 伊原
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成masaaki komori
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事masaki sukeda
 

Was ist angesagt? (20)

WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
20101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok420101120 cssnite hiroshima_pmbok4
20101120 cssnite hiroshima_pmbok4
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」
第23回WebSig会議「ストレスフリーのWebプロジェクト Web担当者に出来ること、制作会社に望むこと 」
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
 

Andere mochten auch

中東ゲーム市場:可能性と課題
中東ゲーム市場:可能性と課題中東ゲーム市場:可能性と課題
中東ゲーム市場:可能性と課題SIG-Glocalization
 
111028_ウズウズ_今日から出来るEvernote快適活用術
111028_ウズウズ_今日から出来るEvernote快適活用術111028_ウズウズ_今日から出来るEvernote快適活用術
111028_ウズウズ_今日から出来るEvernote快適活用術Ryusuke Goto
 
Design Durven Doen 2007
Design Durven Doen 2007Design Durven Doen 2007
Design Durven Doen 2007VRmaster
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"Takashi Sakamoto
 
Mobile serviceでプッシュしてみよう
Mobile serviceでプッシュしてみようMobile serviceでプッシュしてみよう
Mobile serviceでプッシュしてみようYukilab
 
20121010e xplainers営業資料
20121010e xplainers営業資料20121010e xplainers営業資料
20121010e xplainers営業資料Akiko Miyao
 
design research HROmaart2010 Zilver Christa Van Gessel
design research HROmaart2010 Zilver Christa Van Gesseldesign research HROmaart2010 Zilver Christa Van Gessel
design research HROmaart2010 Zilver Christa Van GesselChrista Van Gessel
 
Prototype in Service Design
Prototype in Service DesignPrototype in Service Design
Prototype in Service DesignHiiro Kato
 
Verleiden en verbeteren met persuasion design
Verleiden en verbeteren met persuasion designVerleiden en verbeteren met persuasion design
Verleiden en verbeteren met persuasion designWesley Geesink
 
Achilles design B&Bee presentation
Achilles design B&Bee presentationAchilles design B&Bee presentation
Achilles design B&Bee presentationAchilles Design
 
当你的用户是来赚钱的时候:互连网金融投资需求与设计
当你的用户是来赚钱的时候:互连网金融投资需求与设计当你的用户是来赚钱的时候:互连网金融投资需求与设计
当你的用户是来赚钱的时候:互连网金融投资需求与设计Leon Zeng
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintNobuya Sato
 
電子商務專題:課程簡介 Course Introduction
電子商務專題:課程簡介 Course Introduction電子商務專題:課程簡介 Course Introduction
電子商務專題:課程簡介 Course IntroductionRay Wang
 
20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセスSatoru MURAKOSHI
 

Andere mochten auch (20)

中東ゲーム市場:可能性と課題
中東ゲーム市場:可能性と課題中東ゲーム市場:可能性と課題
中東ゲーム市場:可能性と課題
 
111028_ウズウズ_今日から出来るEvernote快適活用術
111028_ウズウズ_今日から出来るEvernote快適活用術111028_ウズウズ_今日から出来るEvernote快適活用術
111028_ウズウズ_今日から出来るEvernote快適活用術
 
Design Durven Doen 2007
Design Durven Doen 2007Design Durven Doen 2007
Design Durven Doen 2007
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
 
Mobile serviceでプッシュしてみよう
Mobile serviceでプッシュしてみようMobile serviceでプッシュしてみよう
Mobile serviceでプッシュしてみよう
 
20121010e xplainers営業資料
20121010e xplainers営業資料20121010e xplainers営業資料
20121010e xplainers営業資料
 
design research HROmaart2010 Zilver Christa Van Gessel
design research HROmaart2010 Zilver Christa Van Gesseldesign research HROmaart2010 Zilver Christa Van Gessel
design research HROmaart2010 Zilver Christa Van Gessel
 
Prototype in Service Design
Prototype in Service DesignPrototype in Service Design
Prototype in Service Design
 
Verleiden en verbeteren met persuasion design
Verleiden en verbeteren met persuasion designVerleiden en verbeteren met persuasion design
Verleiden en verbeteren met persuasion design
 
121010_ia_lecture_03
121010_ia_lecture_03121010_ia_lecture_03
121010_ia_lecture_03
 
Achilles design B&Bee presentation
Achilles design B&Bee presentationAchilles design B&Bee presentation
Achilles design B&Bee presentation
 
L'eta' anziana
L'eta' anzianaL'eta' anziana
L'eta' anziana
 
Facebook ipo
Facebook ipoFacebook ipo
Facebook ipo
 
当你的用户是来赚钱的时候:互连网金融投资需求与设计
当你的用户是来赚钱的时候:互连网金融投资需求与设计当你的用户是来赚钱的时候:互连网金融投资需求与设计
当你的用户是来赚钱的时候:互连网金融投资需求与设计
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
 
電子商務專題:課程簡介 Course Introduction
電子商務專題:課程簡介 Course Introduction電子商務專題:課程簡介 Course Introduction
電子商務專題:課程簡介 Course Introduction
 
UX Design とは何か?
UX Design とは何か?UX Design とは何か?
UX Design とは何か?
 
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014
 
20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス
 
Service Design Thinking
Service Design ThinkingService Design Thinking
Service Design Thinking
 

Ähnlich wie Web Design Process for The Future

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方kenji goto
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのものmasaaki komori
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない ZYasufumi Nishiyama
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランSasaki Kouhei
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦sogawaminoru
 
うちの開発におけるXD利用法
うちの開発におけるXD利用法うちの開発におけるXD利用法
うちの開発におけるXD利用法Kazuma Sekiguchi
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
 
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!Ryohei Katayama
 
Z会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルZ会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルloftwork
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎Masayuki Abe
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザインmasaaki komori
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflowmasaaki komori
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdfssuser6f5294
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司schoowebcampus
 
InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727ShinyaNakagawa
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIHideki Akiba
 
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順Masaya Okamoto
 

Ähnlich wie Web Design Process for The Future (20)

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのもの
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
うちの開発におけるXD利用法
うちの開発におけるXD利用法うちの開発におけるXD利用法
うちの開発におけるXD利用法
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!
 
Z会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアルZ会のマーケティング戦略を実現させるウェブリニューアル
Z会のマーケティング戦略を実現させるウェブリニューアル
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順
 

Mehr von masaaki komori

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3masaaki komori
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみたmasaaki komori
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングmasaaki komori
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketchmasaaki komori
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代masaaki komori
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチmasaaki komori
 
レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろうmasaaki komori
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使うmasaaki komori
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作masaaki komori
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67wsmasaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来masaaki komori
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszmasaaki komori
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1masaaki komori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2masaaki komori
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2masaaki komori
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginnersmasaaki komori
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53masaaki komori
 

Mehr von masaaki komori (20)

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketch
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
 
レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろう
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使う
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
Sublime Text 2 Basics
Sublime Text 2 BasicsSublime Text 2 Basics
Sublime Text 2 Basics
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
 

Web Design Process for The Future