![Page 1: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/1.jpg)
Creative ContentFor BETTER DEVELOPER EXPERIENCE
Tomomi Imura (@girlie_mac)
日本語版!
![Page 2: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/2.jpg)
@ girlie_mac
● Slack の DevRel チーム所属
● api.slack.com の中の人
● オープン web & テック アドボケイト
● JavaScript & Node.js コーダー
● くだらない Hack 大好き
● Code Chrysalis のアドバイザー
● サンフランシスコの住人
tomomi imura
![Page 3: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/3.jpg)
@ girlie_mac
Where I Have Been Doing DevRel at:
Slack API Nexmo SMS, Voice, 2FA
API
HTML5 (W3C) & Windows Phone webOS Apps
PubNub Realtime API
![Page 4: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/4.jpg)
@ girlie_mac
I Write Articles on:
テクニカルエディターもしています
![Page 5: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/5.jpg)
Awareness & Acquisition
開発者への
認識と獲得
![Page 6: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/6.jpg)
検索Tweets や
ニュースレタークチコミ、
Slack など
API, Platform, Framework, Tools, etc.
How Do Developers Find Your...
![Page 7: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/7.jpg)
@ girlie_mac
Awareness - どうやって開発者からの認識を得るか
開発者が新しい技術の情報を Tech Crunch や、その他のテックニュースから受動的に知った場合
ええ感じやん!
![Page 8: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/8.jpg)
@ girlie_mac
Awareness & Acquisition - 認識から獲得に
開発者が新しい技術を実際のユースケースやチュートリアルで詳しく使い方を知った場合
ええ感じやん! 使ってみよう〜!
![Page 9: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/9.jpg)
@ girlie_mac
Get Devs Hands Dirty! - 開発者に試してもらう
● ワークショップ ● ハッカソン
● ブログ & チュートリアル○ Docs○ ビデオ & スクリーンキャスト
○ Webinars
![Page 10: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/10.jpg)
@ girlie_mac
Get Devs Hands Dirty!
● ワークショップ ● ハッカソン
● ブログ & チュートリアル○ Docs○ ビデオ & スクリーンキャスト
○ Webinars My focus!
![Page 11: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/11.jpg)
Make It Practical!
実践的に!
![Page 12: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/12.jpg)
@ girlie_mac
Practical & Fundamental
チュートリアルの例
● [Awesome API] はじめの一歩● Beginner Guide of [Awesome API] ● [Node SDK] で [Awesome API] を使ってみよう ● [Awesome.JS Framework] で To-Do アプリを作る● [Awesome API] Tips & Tricks● [Awesome API] ベストプラクティス
![Page 13: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/13.jpg)
@ girlie_mac
![Page 14: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/14.jpg)
@ girlie_mac
![Page 15: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/15.jpg)
@ girlie_mac
![Page 16: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/16.jpg)
Make It Interesting!
興味を引くように!
![Page 17: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/17.jpg)
@ girlie_mac
Interesting Projects
クリエイティブな内容にしてみよう
● Slackbot ダンボールロボット
● D3.js で Twitter のビジュアリゼーション ● Raspberry Pi でスパイカメラを作る
● “Alexa, Call My Mom”● Pokémon Go リアルタイムマップ
![Page 18: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/18.jpg)
@ girlie_macBrainstorming ideas
![Page 19: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/19.jpg)
@ girlie_mac
Project Types
● ただ楽しいプロジェクト○ Pokémon○ IoT - cat camera
● コミュニティ・エコシステムに標的を絞ったもの○ JavaScript - e.g. React, Angular, D3○ MCU - e.g. Arduino, Raspberry Pi○ Web standards - HTML5○ Amazon Alexa
![Page 20: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/20.jpg)
@ girlie_mac
![Page 21: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/21.jpg)
@ girlie_mac
![Page 22: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/22.jpg)
@ girlie_mac https://medium.com/slack-developer-blog/building-a-sentiment-analysis-bot-with-ibm-watson-and-raspberry-pi-eeb399bb8803
![Page 23: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/23.jpg)
@ girlie_mac
アイデアを提供してあとは開発者に任せよう
「ポケモン?こんなんで会社の API が金になると思ってんの!?」
「勘違いしないで。自分はアイデアを提供しているだけ。」
![Page 24: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/24.jpg)
@ girlie_mac
アイデアから実際のビジネスへの採用
{
id: 'pikachu-012',
lat: 37.7234,
lon: -122.472
}
{
id: 'taxi-012',
lat: 37.7234,
lon: -122.472
}
![Page 25: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/25.jpg)
Go Social
![Page 26: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/26.jpg)
@ girlie_mac
Get Carded on Social Media
3
1
1
2
![Page 27: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/27.jpg)
@ girlie_mac
It’s So META!
<!-- Twitter Card data (with a large image) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title Here">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="http://example.com/image.jpg">
<!-- FB Open Graph data -->
<meta property="og:title" content="Title Here">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Page description">
3
1
2
![Page 28: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/28.jpg)
@ girlie_mac
Developer-Focused Social Space
Newsletters
Code Samples & Demo
![Page 29: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/29.jpg)
Adoption & RetentionImproving Developer Experiences
採用と維持
![Page 30: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/30.jpg)
@ girlie_mac
User-Experience
User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.”
Source: usability.gov
“
![Page 31: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/31.jpg)
@ girlie_mac
User-Experience
User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.”
Source: usability.gov
“
![Page 32: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/32.jpg)
@ girlie_mac
Developer-Experience
Developer-Experience (DX) focuses on having a deep understanding of developers, what they need, what they value, their abilities, and also their limitations.”
Source: usability.gov
“
![Page 33: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/33.jpg)
@ girlie_machttps://twitter.com/wheelyweb/status/849969689388134400
![Page 35: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/35.jpg)
@ girlie_machttps://twitter.com/ryo_sasaki/status/560229808362102784
7-Eleven の大失敗
かっこだけよくてユーザビリティがゼロ
![Page 36: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/36.jpg)
@ girlie_mac
Bad UX: User Reactions
1. わかりにくいインターフェースに混乱
2. とりあえず適当に試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく
![Page 37: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/37.jpg)
@ girlie_mac
Bad DX: Developer Reactions
1. わかりにくい Docs や API に混乱
2. とりあえず適当にコードを試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく
![Page 38: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/38.jpg)
@ girlie_mac
Poor Docs & Tuts DX Examples
● ドキュメンテーションがひどい。と言うかそれすらない。
● 初心者に優しくない
● リンクがなかったりでナビゲートしづらい
● スクリーンショットや図がない
● とにかく難しい
● スーツ姿の偉そうなオッサンの写真素材がなんかイヤ
● 全部 PDF (Docs != Whitepaper)
![Page 39: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/39.jpg)
@ girlie_mac
Open Source Survey by GitHub
http://opensourcesurvey.org/2017/
#1 problem!
![Page 40: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/40.jpg)
@ girlie_mac
Docs & Tuts Should be
● ナビゲートしやすい ● 実践的かつ興味ふかい
● 初心者に親切 ○ “Hello, world” オンボーディング
○ 必須条件やセットアップの仕方が明確
○ ハンズオン・ステップバイステップで学べる
● コードサンプル
● 的確な情報でツールなどのDL先もわかりやすい
![Page 41: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/41.jpg)
@ girlie_mac
User-Friendliness
https://twitter.com/kaz/status/757733261938298881
同じ内容なのに書き方が違うと、使ってみたさ感に違いが出てくるな
エラー。クライアントがこのリソースにアクセスするには認証が必要です。
このページを見るにはサインインをしてね。
![Page 42: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/42.jpg)
@ girlie_mac
Developer-Friendliness
![Page 43: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/43.jpg)
@ girlie_mac
Slack API Doc (Even More) Kawaii-fy Project (j/k!)
![Page 44: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/44.jpg)
@ girlie_mac
TL;DR
● デベロッパーが使ってみたくなるように書こう○ わかりやすくて使いやすい docs やチュートリアル
● コンテントをシンジケート
● ソーシャルメディアの活用 ○ social media meta tags○ デベロッパー・フォーカスなメディアに
● dev experience を常に心がけてデベロッパーを引き込も
う
![Page 45: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/45.jpg)
@ girlie_mac
Developer Experience Matters!really
![Page 46: [日本語・Japanese] Creative Technical Content for Better Developer Experience](https://reader031.vdocument.in/reader031/viewer/2022021509/5aaceb887f8b9a1f368b4873/html5/thumbnails/46.jpg)
@ girlie_mac
Thank you!
@girlie_mac
girliemac.com
github.com/girliemac
slideshare.net/tomomi
BY-SA