SlideShare a Scribd company logo
未来のWeb制作現場で通用するクリエイターとなるために、
いま刷新すべきセオリー
2013.05.09 こもりまさあき
Groundwork!
自己紹介
1972年生まれのフリーランス。90年代前半から都内のDTP系
デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正
社員に。入出力業務、デザイン業務、ネットワーク関連業務に
並行して従事後、2001年会社を退職しフリーランスの道へ。業
務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『基礎から覚える、深く理解できる。 Webデザインの新
しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』、
など
Twitter:@cipher/@proteanbm
Instagram:@cipher
こもりまさあき
今日お話しすること
•時代の変化の波を感じとろう
•時代に即して柔軟に対応する
•日々進化する制作ツールや手法
時代の変化を感じ取れ
Feel the changes
時代が変わり始めている
“More people are logging into Facebook
daily on mobile than on desktop
Facebook's Daily Mobile Users Exceed Daily Desktop Users For The First Time
http://www.fastcompany.com/3005269/facebooks-daily-mobile-users-exceed-daily-desktop-users-first-time
groundwork-pasona-tech
スマートデバイス利用者が急増
“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/
次から次に出てくるデバイスに個別最適化できる?
1920px
1280px
800px
768px
320px
1024px
940px
480px 540px
現代は、複数のデバイスをシーケンシャルに使う時代
groundwork-pasona-tech
PC/スマートデバイスで内容に相違があったら困ることも
閲覧者の利用状況にあわせた柔軟な配信ができる方が良い
HTML5の登場によるWebの進化
W3C HTML5 Logo
http://www.w3.org/html/logo/
W3C HTML5 Logo
http://www.w3.org/html/logo/
Webサイトは、いよいよ次の一歩が踏み出せるように
「静的」なものから「動的」なものへ
位置情報の取得、オフラインアクセスなど、夢は拡がる
世界は「リーン・…」に象徴されるスピード感で動く
完璧なモノを作ってからのリリースでは遅すぎる
そして、急速なクラウドプラットフォームの普及
クラウドの活用は、Web制作・運用の仕方さえも変える
この数年で大きな変化が起きていることを認識しよう
時代に即して柔軟に対応しよう
To respond flexibly
変化をとらえて柔軟に対応する
これまでの制作ワークフローは、今の時代にあってるか?
©Brad Frost
http://bradfrostweb.com/
©Brad Frost
http://bradfrostweb.com/
©Brad Frost
http://bradfrostweb.com/
いつまで「IE6が…」と言ってるつもりでしょう?
消えゆくものにいつまでコストをかける気?
もはや固定の画面サイズでは考えにくい時代
さらに「1px」という概念ですらも怪しい
1px 1px ?
Standard
Retina
Retinaでキレイに表示するには、倍のサイズが必要
Photoshopでカンプを作って、HTML/CSSで再構成する?
無駄
“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
時間は上手に使わないといけない
世の中「DRY」が合言葉、Photoshopを使えば「RY」
Don't Repeat Yourself Repeat Yourself
固定サイズ、ピクセルパーフェクトという呪縛からの解放
紙の置き換え的発想は、Web制作にあってないのだから
Google Glass
http://www.google.com/glass/start/what-it-does/
こうなると、CSSの実装テクニックを追いかける意味もない
この先、情報がどういう形になっていくか、を視野に
いかに効率よく、コンテンツを閲覧者に届けるか
そのために僕たちは今何をするべきなのか
groundwork-pasona-tech
groundwork-pasona-tech
何度も繰り返しの作業を減らすことが大事になる
解決方法のひとつが、Style Tilesであり早期のモックアップ
Style Tiles
http://styletil.es/
Style Tiles
http://styletil.es/
ムードボードとモックアップの中間で全体のテイスト確認
既存のフローとあわないのであれば、もう少し柔軟に対応
“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/
完全な分業ではなく、お互いを理解し協力する
そうしないと、複雑化しすぎて終わるものも終わらない
時代にあわないワークフローなら「リファクタリング」
refactoring
プログラムの外部から見た動作を変えずに、
将来の仕様変更に柔軟に対応できるよう、
ソースコードの内部構造を整理しなおすこと
【リファクタリング】
視線の先は、目の前でなくこの次の時代へ
ツールも手法も日々進化するもの
Techniques evolve
変わりゆくものの中で止まらない
Web制作のツールは、日進月歩で便利になっている
自分で変えようとしなければ、いつまでも同じまま
3日かかった作業が3時間で終われば、別の作業に充てられる
オールインワンから「必要なものを組み合わせる」時代へ
先進的な開発ツールは、いつもコマンドラインから
node.js
http://nodejs.org/
最近は、その多くがNode.js(npm)やRuby(gem)に
もはや世の中の制作フローは大きく様変わりしている
複雑化するCSSの記述は、CSSプリプロセッサを使う
LESS
http://lesscss.org/
Sass
http://sass-lang.com/
Stylus
http://learnboost.github.io/stylus/
同じようなことを極力書かないで済むよう
変数や数式を使って、複雑化するCSSを効率よく管理する
CSSもモジュール単位で再利用可能な設計をしよう
<a class="btn btn-primary btn-large">Learn more </a>
ボタンの基本スタイル
ボタン青くして
ボタン大きくして
Scalable and Modular Architecture for CSS
http://smacss.com/
制作時、公開後、いずれかのタイミングでStyle Guideを
Pears
http://pea.rs/
groundwork-pasona-tech
Style Guideがあれば、誰が更新しても結果は同じ
KSS
http://warpspire.com/kss/styleguides/
StyleDocco
http://jacobrask.github.io/styledocco/
Kalei
http://kaleistyleguide.com/
最初の設計とドキュメンテーションが大事
世の中、猫も杓子もCMS。その制作案件に必要か?
WordPressって流行ってるんでしょ?ではない
場合によっては、Static Site Generatorの方が効率が良い
Jekyll
http://jekyllrb.com/
DocPad
http://docpad.org/
roots
http://roots.cx/
Serve
http://get-serve.com/
静的なコンテンツ制作をもっと簡単にする
<a class="brand" href="#">{{{site-title}}}</a>
<div class="nav-collapse collapse">
<ul class="nav">
{{#navbar}}
<li><a href="{{{href}}}">{{label}}</a>
{{/navbar}}
</ul>
{
"site-title": "Pasona Tech | Groundwork",
"navbar": [
{"label": "Home", "href": "./index.html"},
{"label": "About", "href": "./about.html"}
]
}
HTML
JSON
同じようなHTMLは極力書かない(DRY)
コンテンツは、MarkdownやJSONで書いて自動生成
HTMLテンプレートエンジンの仕組みを理解する
Haml
http://haml.info/
Jade
http://jade-lang.com/
Handlebars.js
http://handlebarsjs.com/
HTMLですら、変数を定義して自動的に生成させる
Webアプリへの進化によって注目されるJavaScript
AngularJS
http://angularjs.org/
Backbone.js
http://backbonejs.org/
Knockout
http://knockoutjs.com/
これらは、JavaScriptの「MV * * フレームワーク」
Webアプリをより簡単に作るためのフレームワーク
フレームワークを理解して、手間のかかる作業時間を短縮
Bootstrap
http://twitter.github.io/bootstrap/
Foundation 4
http://foundation.zurb.com/
モックアップからそのまま本番のデザインを実装
ここでもHTMLテンプレートやプリプロセッサが活躍
Delicious
https://delicious.com/
Deliciousは、Backbone.js + Bootstrap
Pitchfork
http://pitchfork.com/
Pitchforkは、Backbone.js + WordPress
必要な技術を適宜組み合わせて、最良の結果を得る
そんな制作に必要なツールは、パッケージで管理する時代
Bower
http://bower.io/
自動化できるタスクは、コンピュータに任せてしまう
Grunt
http://gruntjs.com/
サイト制作の箱作りの段階から、自動化してしまう波が
Yeoman
http://yeoman.io/
コマンドを実行するだけで必要なものが全部揃う
Mixture
http://mixture.io/
ついにGUIのツールが発表になったものの…
進化のスピードはおさまることを知らない
ディスプレイの高精細化にも戸惑わないように
CSS3、Web Fonts、SVG。未来を見越した素材管理
Elusive-Icons Webfont
http://shoestrap.org/downloads/elusive-icons-webfont/
Sketch
http://www.bohemiancoding.com/sketch/
バージョン管理システムの導入で制作フローも変わる
デザイナーもGitを使えば、エンジニアとの協業もスムーズ
どれが最新?先祖返り?そんなトラブルともさようなら
仕事を進めるにあたって、距離が関係なくなっていく
GitHub
https://github.com/
Webサイトのコンテンツ運用・管理にクラウドを活用
AWS S3 Hosting
http://www.awsmicrosite.jp/s3-hosting/
10円ホスティングだって可能な時代になっている
WordPress AMI
http://ja.megumi-cloud.com/
WordPressサイトの立ち上げ。必要な時間は10分未満
クラウド×PaaSの活用
Heroku
https://www.heroku.com/
Engine Yard
https://www.engineyard.com/
何か始めるにあたって、インフラのことすら気にしない
どんどん便利になっている世の中
余計な時間をかけないこと
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
自分の中に知識と技術さえあればできる
Webが変化すれば、職種・職域ですらあいまいに
未来でも通じるクリエイターになるには
根付いている業界の「当たり前」を疑ってかかれ
次の時代を生き残るために、自分自身をシフトする
自分を枠にはめすぎない方が、変化に対応しやすくなる
そして、定期的な情報のアップデートをしよう
知ってるか知らないかは、非常に大きな差を生むもの
「1年前に知ってれば…」、後悔先に立たず
自分の強みを作るなら、誰よりも早く取りかかる
誰も変えてはくれません。自分が変わらなければ
最後に。日本だけ見てても状況はわからないでしょう
そして、次世代のWeb制作の流れに乗りましょう
Hacker News- https://news.ycombinator.com/
Designer News- https://news.layervault.com/
Hey, designer!- http://heydesigner.com/
Echo JS - JavaScript News- http://www.echojs.com/
UX News Feed- http://www.uxnewsfeed.com/
Inbound - Hacker News for Marketers- http://inbound.org/
Tuts+- http://hub.tutsplus.com/
Smashing Magazine- http://www.smashingmagazine.com/
.net magazine- http://www.netmagazine.com/
本日のまとめ
•時代の変化の波を感じて、柔軟に対応しよう
•これまでの概念を疑ってみることも大事
•常に変化してるので、定期的に情報をアップデート
本日はありがとうございました
Ad

More Related Content

What's hot (20)

0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_1501170からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
direkyo-kyusyu
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
 
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase
 
中堅Webクリエイティブ職のキャリアを考える(序章)
中堅Webクリエイティブ職のキャリアを考える(序章)中堅Webクリエイティブ職のキャリアを考える(序章)
中堅Webクリエイティブ職のキャリアを考える(序章)
Mariko Hayashi
 
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
Yusuke Kojima
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
Kenta Nakamura
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
Kenta Nakamura
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
pLucky
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_1501170からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
direkyo-kyusyu
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
 
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase
 
中堅Webクリエイティブ職のキャリアを考える(序章)
中堅Webクリエイティブ職のキャリアを考える(序章)中堅Webクリエイティブ職のキャリアを考える(序章)
中堅Webクリエイティブ職のキャリアを考える(序章)
Mariko Hayashi
 
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
Yusuke Kojima
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
Kenta Nakamura
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
Kenta Nakamura
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
pLucky
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 

Viewers also liked (18)

レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
 
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
Youichiro Miyake
 
Game design pattern language
Game design pattern languageGame design pattern language
Game design pattern language
Youichiro Miyake
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使う
masaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
 
エンターテインメントのAI
エンターテインメントのAIエンターテインメントのAI
エンターテインメントのAI
Youichiro Miyake
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketch
masaaki komori
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
 
ゼーガペイン ファン活動の記録
ゼーガペイン ファン活動の記録ゼーガペイン ファン活動の記録
ゼーガペイン ファン活動の記録
Youichiro Miyake
 
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
遺伝的アルゴリズム(Genetic Algorithm)を始めよう!遺伝的アルゴリズム(Genetic Algorithm)を始めよう!
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
Kazuhide Okamura
 
できる!遺伝的アルゴリズム
できる!遺伝的アルゴリズムできる!遺伝的アルゴリズム
できる!遺伝的アルゴリズム
Maehana Tsuyoshi
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
masaaki komori
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
Brad Frost
 
レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
 
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
IGDA日本 ゲームAI連続セミナー第4回 グループワーク解説文書
Youichiro Miyake
 
Game design pattern language
Game design pattern languageGame design pattern language
Game design pattern language
Youichiro Miyake
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使う
masaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
 
エンターテインメントのAI
エンターテインメントのAIエンターテインメントのAI
エンターテインメントのAI
Youichiro Miyake
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketch
masaaki komori
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
 
ゼーガペイン ファン活動の記録
ゼーガペイン ファン活動の記録ゼーガペイン ファン活動の記録
ゼーガペイン ファン活動の記録
Youichiro Miyake
 
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
遺伝的アルゴリズム(Genetic Algorithm)を始めよう!遺伝的アルゴリズム(Genetic Algorithm)を始めよう!
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
Kazuhide Okamura
 
できる!遺伝的アルゴリズム
できる!遺伝的アルゴリズムできる!遺伝的アルゴリズム
できる!遺伝的アルゴリズム
Maehana Tsuyoshi
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
masaaki komori
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
Brad Frost
 
Ad

Similar to groundwork-pasona-tech (20)

Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのもの
masaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
 
第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識
Shunya Komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
About Design Manager
About Design ManagerAbout Design Manager
About Design Manager
Marino Yokoi
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
 
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
Takashi Fujimoto
 
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!
Ryohei Katayama
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
 
0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編
Takehiko Goshi
 
0 d4s 20140323_共有用
0 d4s 20140323_共有用0 d4s 20140323_共有用
0 d4s 20140323_共有用
Takehiko Goshi
 
キャリア設計的な話
キャリア設計的な話キャリア設計的な話
キャリア設計的な話
祐磨 堀
 
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
schoowebcampus
 
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
Tomoe Sawai
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのもの
masaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
 
第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識第1回 IT講座 IT基礎知識
第1回 IT講座 IT基礎知識
Shunya Komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
About Design Manager
About Design ManagerAbout Design Manager
About Design Manager
Marino Yokoi
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
 
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
Takashi Fujimoto
 
090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!090601 担当者のコトバに振り回されるな!
090601 担当者のコトバに振り回されるな!
Ryohei Katayama
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
 
0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編
Takehiko Goshi
 
0 d4s 20140323_共有用
0 d4s 20140323_共有用0 d4s 20140323_共有用
0 d4s 20140323_共有用
Takehiko Goshi
 
キャリア設計的な話
キャリア設計的な話キャリア設計的な話
キャリア設計的な話
祐磨 堀
 
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
schoowebcampus
 
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
Tomoe Sawai
 
Ad

More from masaaki komori (14)

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
masaaki komori
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
 
Sublime Text 2 Basics
Sublime Text 2 BasicsSublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2
masaaki komori
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
masaaki komori
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
masaaki komori
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
masaaki komori
 
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
masaaki komori
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
 
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
masaaki komori
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2
masaaki komori
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
masaaki komori
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
masaaki komori
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
masaaki komori
 
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
masaaki komori
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
 

groundwork-pasona-tech