SlideShare a Scribd company logo
こもりまさあき 2016/12/21 html5j Webプラットフォーム部 第15回勉強会
自己紹介
Introduction
Sketchでプロトタイピング
Prototyping w/ Sketch
SketchからFramerに渡して作り込まれたプロトタイプへ
Prototyping w/ Sketch + Framer
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch
Prototyping with Sketch

More Related Content

Viewers also liked

Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
masaaki komori
 
UI Design: Photoshop v.s Sketch and why I switched
UI Design: Photoshop v.s Sketch and why I switchedUI Design: Photoshop v.s Sketch and why I switched
UI Design: Photoshop v.s Sketch and why I switched
Jenny Shen
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
 
Dev and Designers intro to Sketch
Dev and Designers intro to SketchDev and Designers intro to Sketch
Dev and Designers intro to Sketch
💻 Mark Schumacher
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
 
Adobe vs. Sketch
Adobe vs. SketchAdobe vs. Sketch
Adobe vs. Sketch
Rob Musser
 
俺とSe(自己紹介)
俺とSe(自己紹介)俺とSe(自己紹介)
俺とSe(自己紹介)
Masayuki KaToH
 
第8期 異業種交流会
第8期 異業種交流会第8期 異業種交流会
第8期 異業種交流会
YoshihiroNakasone
 
Nhk english news
Nhk english newsNhk english news
Nhk english news
kk1200021
 
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
http://spartaeditor3th-bayash.hatenablog.com/
 
Unity自己紹介
Unity自己紹介Unity自己紹介
Unity自己紹介
春野菜
 
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
Shinichi Hisamatsu
 
クラウド型データベース「kintone」のご紹介
クラウド型データベース「kintone」のご紹介クラウド型データベース「kintone」のご紹介
クラウド型データベース「kintone」のご紹介
kintone papers
 
NHK Linked Data API 〜つながる番組データを目指して〜
NHK Linked Data API 〜つながる番組データを目指して〜NHK Linked Data API 〜つながる番組データを目指して〜
NHK Linked Data API 〜つながる番組データを目指して〜
API Meetup
 
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
knowledge_sakura
 
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
knowledge_sakura
 

Viewers also liked (20)

Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
 
UI Design: Photoshop v.s Sketch and why I switched
UI Design: Photoshop v.s Sketch and why I switchedUI Design: Photoshop v.s Sketch and why I switched
UI Design: Photoshop v.s Sketch and why I switched
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
 
Dev and Designers intro to Sketch
Dev and Designers intro to SketchDev and Designers intro to Sketch
Dev and Designers intro to Sketch
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
 
Adobe vs. Sketch
Adobe vs. SketchAdobe vs. Sketch
Adobe vs. Sketch
 
Nhk
NhkNhk
Nhk
 
俺とSe(自己紹介)
俺とSe(自己紹介)俺とSe(自己紹介)
俺とSe(自己紹介)
 
Concept map (nhk)
Concept map (nhk)Concept map (nhk)
Concept map (nhk)
 
第8期 異業種交流会
第8期 異業種交流会第8期 異業種交流会
第8期 異業種交流会
 
Nhk english news
Nhk english newsNhk english news
Nhk english news
 
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
20160126 菅付雅信の編集スパルタ塾『博報堂デザイン 永井一史氏』
 
Unity自己紹介
Unity自己紹介Unity自己紹介
Unity自己紹介
 
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
SDGs実施へ向けて日本はどうすればよいだろうか? 博報堂広報室CSRグループ推進担当部長 川廷 昌弘
 
クラウド型データベース「kintone」のご紹介
クラウド型データベース「kintone」のご紹介クラウド型データベース「kintone」のご紹介
クラウド型データベース「kintone」のご紹介
 
NHK Linked Data API 〜つながる番組データを目指して〜
NHK Linked Data API 〜つながる番組データを目指して〜NHK Linked Data API 〜つながる番組データを目指して〜
NHK Linked Data API 〜つながる番組データを目指して〜
 
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
CS Young Meetup Vol.2(GMOペパボ株式会社 吉林美貴)
 
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
CS Young Meetup Vol.2(さくらインターネット株式会社 小林なつ美)
 

More from 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
 
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
 
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 Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
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
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
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 2masaaki 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
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
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
 

More from masaaki komori (19)

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
 
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
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
インブラウザ勉強会 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
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
 
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
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
 
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6