2016年11月3日に開催されたGeek Women Japan2016の「日本マイクロソフト株式会社スポンサーセッション」時に使用した発表スライドです。 ※一部スライド内容を修正しました

1. Webデザイナーの私が
Microsoft Azureを
使うようになったワケ
株式会社オルターブース デザインアーキテクト
Japan Azure User Group女子部
松本 典子
2016 / 11 /03 Geek Women Japan 2016

2. 自己紹介
2
 修羅の国 福岡出身・在住
 JAZUG、JAZUG女子部、ふくあず
 Web系勉強会「Webっちゃ」主催
 Microsoft MVP for Microsoft Azure
松本 典子 （まつもと のりこ）
デザインに関する業務全般やってます。
（Webデザイン・ UI設計・ DTP…）
株式会社オルタブース デザインアーキテクト
@nori790822
https://www.facebook.com/noriji822

3. こういうロゴデザインや…
3

4. こういうWebサイト作ってます
4

5. Webデザイナーなのに、
なぜAzureを使ってるの？
きっかけは？クラウドって難しいイメージあるけど…？
5

6. 私のこれまでの経歴
6
 新卒時は地元北九州の印刷会社
– まったくのド素人（作品持ち込みで入社）
– デザインの基礎・各種アプリの使い方
 Web制作会社や通販会社のWeb部門
– ビジュアルデザイン ＆ アクセス解析など
 フリーランスで活動
– 2014年末にMicrosoft Azureデビュー
 2016年5月オルターブースにJOIN
– 会社立ち上げ時から顧問デザイナー

7. Microsoft Azureを使うきっかけ
7
 軽い感じで紹介されたのに、
容赦なくAzureの基礎を叩き込まれる
– まったくのド素人にAzureの専門知識
きっかけつくった人
デプロイ王子（現：MSの中の人）
デザイナーがAzureガッツリ使えるように
なったら面白いと思うー
ちょっと、日本語でおｋ

8. 実際に「使う前」のAzureのイメージ
8
 インフラエンジニアやプログラマが
知識と技術を駆使して使うイメージ
– まず用語や知識に馴染みがない、知らない
• PassとIaaSってなんぞ・・・
• 黒い画面怖いし・・・
 専門知識が無いと使えない？
– 1人で使えるように設定するの無理そう･･･
とりあえずデザイナーが
手を出せるモノではなさそう

9. Azure App Serviceがおすすめ
9
WebApps LogicApps
APIApps MobileApps
WebサイトやWebアプリケーションを
ホストするために最適化されたPaaSサービス

10. ポータル画面でやりたいことはできる
10
 管理ポータル画面で、よく使う必要な
機能は操作できる
– 黒い画面と基本戦わなくてOK
– スケールアウトやフェイルオーバーなどの
独自設計が基本不要
Azure新旧ポータル対応表
https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/

11. 11
Azure WebAppsのメリット
クラウド上に作られたレンタルサーバーの
ようなもの
数分でできるWeb制作・動画配信・構築
環境
構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
デプロイ（アップロード）方法が選べる
– FTP、Git、Dropbox、OneDrive…
インフラなどの知識の無い人でも
クラウドサービスの利点を活かせる！

12. 実際に使ってみたらそんなに難しくない！
12
 やりたいことは、ほぼポータル画面から
設定・変更できる
 レンタルサーバーと同じようにも使える
– レンサバよりラクで便利な場合が多い
 専用のツールが必要なものも
WebAppsの機能を工夫すれば代替可能
– 例：A / Bテストなど
 しくじったらとりあえず消せばいい
特にAzure WebAppsは
デザイナーやWeb制作者に優しい！

13. 私のAzure勉強法
13
 自分が馴染みがあることから「実際に」
やってみる
– 自分のブログ（WordPress）をAzureに移行
– Webサイト公開環境をAzure WebAppsで構築
 実際にやってみると絶望的にハマる・・・
– 実際にやらないと理解できない
– 自分的にハマった・教えてもらったことは
すぐブログ記事に
nrjlog http://zuvuyalink.net/nrjlog/

14. Microsoft MVPとは
https://www.microsoft.com/ja-jp/communities/mvp/
14

15. Microsoft MVPとは
2016年1月に
Microsoft MVP for Microsoft Azure受賞
15

16. デザイナー視点でMVPになってよかったこと
16
 いろいろな立場の人と出会う機会が増える
 自分の専門分野以外の様々なジャンルを
学ぶ機会が増える
 開発・インフラの人たちと仕事のときに
ディスカッションする機会をもらえる
– これまで環境構築はオマカセが多かった
– Web的な環境はこうしたいとか
自身の視野がとても広くなり
やれることの選択肢が増えた

17. Web制作がラクになる！
App Serviceオススメ便利機能
便利な7つの機能について
17

18. 1. Web構築環境が一瞬でできるWebアプリ
18
 ポータル画面で「Web＋モバイル」を選び、
「アプリの名前」を入力するだけ

19. 2. Webサイトの自動バックアップ・復元
19

20. 3. 容量無制限のAzure BLOBストレージ
 画像や動画など容量が大きなファイルを
置くのに適している
 Webサーバー代わりにも使える
 カスタムドメインの設定も可能
 WordPressの場合はプラグインがある
– Windows Azure Storage for WordPress
20
Azure BLOBストレージは容量無制限
課金制（1GB 2.45円くらい）

21. Azure BLOBストレージとWebAppsの違い
21

22. 4. デプロイ（アップロード）方法が選べる
22
FTP、Git、Dropbox、OneDrive…

23. Gitデプロイ環境の構築例
23
Microsoft Azure WebAppsとBitbucketを使ってGitデプロイ環境を
構築してみた話。
http://zuvuyalink.net/nrjlog/archives/2486

24. 5. テスト環境と本番環境を一瞬で入れ替え
24
 ワンクリックでテストと本番を入れ替え
ステージングでテスト環境と本番環境を
入れ替えできる！！

25. 6. 急激なアクセス過多も安心！
スケールアウト
25
スケールアウトとは？

26. 26
手動でスケールアウトする
スケールアウトの設定方法

27. 7. プログラミングできなくてもOK！
Logic App
27
コードを記述せずコネクターをつなげることで、
クラウドベースのさまざまなアプリケーションに
接続する仕組みを簡単・手軽に作れる便利機能

28. Logic Appについて
28
ノンプログラミングで流行りのBOTを作成できる！

29. コミュニティのご紹介
29

30. JAZUG（Japan Azure User Group）
30
• Japan Azure User Group
– 略称 JAZUG (じゃずゆーじー)
• Microsoft Azureを学び、楽しみ、活かす、
日本のユーザーグループ
• 2010年8月26日に結成したコミュニティ
• 各地に支部あり
https://www.facebook.com/groups/jazug/

31. JAZUG女子部のご紹介
31
 Japan Azure User Group女子部
略称：JAZUG(じゃずゆーじー)女子部
 JAZUG女子部とは：
「IT業界の女子と仲良くなりたい♡」
「男性ばっかりのところに入っていくのは勇気が…」
「でもAzureには興味があるの！！！」
というお嬢様方からのご参加をお待ちしています♫
http://r.jazug.jp/
https://www.facebook.com/groups/jazug.girls/
Webサイト
FBグループ

32. まとめ
32

33. システム会社の1人デザイナーとして
33
 エンジニアとデザイナーの間を埋める努力
– デザインへの意見は遠慮されやすい
 「デザイン」の意味を伝える
– デザインの本質って？
– ビジュアルデザインが「全て」ではない
違う立場だからこそ色々気づく。
それを活かせばもっと良くなる！

34. 今後やっていきたいこと
34
「クラウド×Webのイイ関係」
をもっと広めていきたい!!
 Azure WebApps(PaaS)はWeb制作者の助け
になる機能が多くあることを知ってほしい
 Web制作者自身が「クラウドを使う」という
選択肢を持ってもらいたい

35. ご清聴ありがとうございました