Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webデザイナーの私が
Microsoft Azureを
使うようになったワケ
株式会社オルターブース デザインアーキテクト
Japan Azure User Group女子部
松本 典子
2016 / 11 /03 Geek Women Ja...
自己紹介
2
 修羅の国 福岡出身・在住
 JAZUG、JAZUG女子部、ふくあず
 Web系勉強会「Webっちゃ」主催
 Microsoft MVP for Microsoft Azure
松本 典子 (まつもと のりこ)
デザインに...
こういうロゴデザインや…
3
こういうWebサイト作ってます
4
Webデザイナーなのに、
なぜAzureを使ってるの?
きっかけは?クラウドって難しいイメージあるけど…?
5
私のこれまでの経歴
6
 新卒時は地元北九州の印刷会社
– まったくのド素人(作品持ち込みで入社)
– デザインの基礎・各種アプリの使い方
 Web制作会社や通販会社のWeb部門
– ビジュアルデザイン & アクセス解析など
 フリーラン...
Microsoft Azureを使うきっかけ
7
 軽い感じで紹介されたのに、
容赦なくAzureの基礎を叩き込まれる
– まったくのド素人にAzureの専門知識
きっかけつくった人
デプロイ王子(現:MSの中の人)
デザイナーがAzureガ...
実際に「使う前」のAzureのイメージ
8
 インフラエンジニアやプログラマが
知識と技術を駆使して使うイメージ
– まず用語や知識に馴染みがない、知らない
• PassとIaaSってなんぞ・・・
• 黒い画面怖いし・・・
 専門知識が無い...
Azure App Serviceがおすすめ
9
WebApps LogicApps
APIApps MobileApps
WebサイトやWebアプリケーションを
ホストするために最適化されたPaaSサービス
ポータル画面でやりたいことはできる
10
 管理ポータル画面で、よく使う必要な
機能は操作できる
– 黒い画面と基本戦わなくてOK
– スケールアウトやフェイルオーバーなどの
独自設計が基本不要
Azure新旧ポータル対応表
https://...
11
Azure WebAppsのメリット
クラウド上に作られたレンタルサーバーの
ようなもの
数分でできるWeb制作・動画配信・構築
環境
構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
デプロイ(アップロ...
実際に使ってみたらそんなに難しくない!
12
 やりたいことは、ほぼポータル画面から
設定・変更できる
 レンタルサーバーと同じようにも使える
– レンサバよりラクで便利な場合が多い
 専用のツールが必要なものも
WebAppsの機能を工...
私のAzure勉強法
13
 自分が馴染みがあることから「実際に」
やってみる
– 自分のブログ(WordPress)をAzureに移行
– Webサイト公開環境をAzure WebAppsで構築
 実際にやってみると絶望的にハマる・・・
...
Microsoft MVPとは
https://www.microsoft.com/ja-jp/communities/mvp/
14
Microsoft MVPとは
2016年1月に
Microsoft MVP for Microsoft Azure受賞
15
デザイナー視点でMVPになってよかったこと
16
 いろいろな立場の人と出会う機会が増える
 自分の専門分野以外の様々なジャンルを
学ぶ機会が増える
 開発・インフラの人たちと仕事のときに
ディスカッションする機会をもらえる
– これまで...
Web制作がラクになる!
App Serviceオススメ便利機能
便利な7つの機能について
17
1. Web構築環境が一瞬でできるWebアプリ
18
 ポータル画面で「Web+モバイル」を選び、
「アプリの名前」を入力するだけ
2. Webサイトの自動バックアップ・復元
19
3. 容量無制限のAzure BLOBストレージ
 画像や動画など容量が大きなファイルを
置くのに適している
 Webサーバー代わりにも使える
 カスタムドメインの設定も可能
 WordPressの場合はプラグインがある
– Windo...
Azure BLOBストレージとWebAppsの違い
21
4. デプロイ(アップロード)方法が選べる
22
FTP、Git、Dropbox、OneDrive…
Gitデプロイ環境の構築例
23
Microsoft Azure WebAppsとBitbucketを使ってGitデプロイ環境を
構築してみた話。
http://zuvuyalink.net/nrjlog/archives/2486
5. テスト環境と本番環境を一瞬で入れ替え
24
 ワンクリックでテストと本番を入れ替え
ステージングでテスト環境と本番環境を
入れ替えできる!!
6. 急激なアクセス過多も安心!
スケールアウト
25
スケールアウトとは?
26
手動でスケールアウトする
スケールアウトの設定方法
7. プログラミングできなくてもOK!
Logic App
27
コードを記述せずコネクターをつなげることで、
クラウドベースのさまざまなアプリケーションに
接続する仕組みを簡単・手軽に作れる便利機能
Logic Appについて
28
ノンプログラミングで流行りのBOTを作成できる!
コミュニティのご紹介
29
JAZUG(Japan Azure User Group)
30
• Japan Azure User Group
– 略称 JAZUG (じゃずゆーじー)
• Microsoft Azureを学び、楽しみ、活かす、
日本のユーザーグループ
•...
JAZUG女子部のご紹介
31
 Japan Azure User Group女子部
略称:JAZUG(じゃずゆーじー)女子部
 JAZUG女子部とは:
「IT業界の女子と仲良くなりたい♡」
「男性ばっかりのところに入っていくのは勇気が…」...
まとめ
32
システム会社の1人デザイナーとして
33
 エンジニアとデザイナーの間を埋める努力
– デザインへの意見は遠慮されやすい
 「デザイン」の意味を伝える
– デザインの本質って?
– ビジュアルデザインが「全て」ではない
違う立場だからこそ色...
今後やっていきたいこと
34
「クラウド×Webのイイ関係」
をもっと広めていきたい!!
 Azure WebApps(PaaS)はWeb制作者の助け
になる機能が多くあることを知ってほしい
 Web制作者自身が「クラウドを使う」という
選...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Webデザイナーの私がMicrosoft Azureを使うようになったワケ

3,413 views

Published on

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

Published in: Technology
  • Be the first to comment

Webデザイナーの私がMicrosoft Azureを使うようになったワケ

  1. 1. Webデザイナーの私が Microsoft Azureを 使うようになったワケ 株式会社オルターブース デザインアーキテクト Japan Azure User Group女子部 松本 典子 2016 / 11 /03 Geek Women Japan 2016
  2. 2. 自己紹介 2  修羅の国 福岡出身・在住  JAZUG、JAZUG女子部、ふくあず  Web系勉強会「Webっちゃ」主催  Microsoft MVP for Microsoft Azure 松本 典子 (まつもと のりこ) デザインに関する業務全般やってます。 (Webデザイン・ UI設計・ DTP…) 株式会社オルタブース デザインアーキテクト @nori790822 https://www.facebook.com/noriji822
  3. 3. こういうロゴデザインや… 3
  4. 4. こういうWebサイト作ってます 4
  5. 5. Webデザイナーなのに、 なぜAzureを使ってるの? きっかけは?クラウドって難しいイメージあるけど…? 5
  6. 6. 私のこれまでの経歴 6  新卒時は地元北九州の印刷会社 – まったくのド素人(作品持ち込みで入社) – デザインの基礎・各種アプリの使い方  Web制作会社や通販会社のWeb部門 – ビジュアルデザイン & アクセス解析など  フリーランスで活動 – 2014年末にMicrosoft Azureデビュー  2016年5月オルターブースにJOIN – 会社立ち上げ時から顧問デザイナー
  7. 7. Microsoft Azureを使うきっかけ 7  軽い感じで紹介されたのに、 容赦なくAzureの基礎を叩き込まれる – まったくのド素人にAzureの専門知識 きっかけつくった人 デプロイ王子(現:MSの中の人) デザイナーがAzureガッツリ使えるように なったら面白いと思うー ちょっと、日本語でおk
  8. 8. 実際に「使う前」のAzureのイメージ 8  インフラエンジニアやプログラマが 知識と技術を駆使して使うイメージ – まず用語や知識に馴染みがない、知らない • PassとIaaSってなんぞ・・・ • 黒い画面怖いし・・・  専門知識が無いと使えない? – 1人で使えるように設定するの無理そう・・・ とりあえずデザイナーが 手を出せるモノではなさそう
  9. 9. Azure App Serviceがおすすめ 9 WebApps LogicApps APIApps MobileApps WebサイトやWebアプリケーションを ホストするために最適化されたPaaSサービス
  10. 10. ポータル画面でやりたいことはできる 10  管理ポータル画面で、よく使う必要な 機能は操作できる – 黒い画面と基本戦わなくてOK – スケールアウトやフェイルオーバーなどの 独自設計が基本不要 Azure新旧ポータル対応表 https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/
  11. 11. 11 Azure WebAppsのメリット クラウド上に作られたレンタルサーバーの ようなもの 数分でできるWeb制作・動画配信・構築 環境 構築環境をそれぞれに変えられる – PHPのバージョンやSSL、CMSなど デプロイ(アップロード)方法が選べる – FTP、Git、Dropbox、OneDrive… インフラなどの知識の無い人でも クラウドサービスの利点を活かせる!
  12. 12. 実際に使ってみたらそんなに難しくない! 12  やりたいことは、ほぼポータル画面から 設定・変更できる  レンタルサーバーと同じようにも使える – レンサバよりラクで便利な場合が多い  専用のツールが必要なものも WebAppsの機能を工夫すれば代替可能 – 例:A / Bテストなど  しくじったらとりあえず消せばいい 特にAzure WebAppsは デザイナーやWeb制作者に優しい!
  13. 13. 私のAzure勉強法 13  自分が馴染みがあることから「実際に」 やってみる – 自分のブログ(WordPress)をAzureに移行 – Webサイト公開環境をAzure WebAppsで構築  実際にやってみると絶望的にハマる・・・ – 実際にやらないと理解できない – 自分的にハマった・教えてもらったことは すぐブログ記事に nrjlog http://zuvuyalink.net/nrjlog/
  14. 14. Microsoft MVPとは https://www.microsoft.com/ja-jp/communities/mvp/ 14
  15. 15. Microsoft MVPとは 2016年1月に Microsoft MVP for Microsoft Azure受賞 15
  16. 16. デザイナー視点でMVPになってよかったこと 16  いろいろな立場の人と出会う機会が増える  自分の専門分野以外の様々なジャンルを 学ぶ機会が増える  開発・インフラの人たちと仕事のときに ディスカッションする機会をもらえる – これまで環境構築はオマカセが多かった – Web的な環境はこうしたいとか 自身の視野がとても広くなり やれることの選択肢が増えた
  17. 17. Web制作がラクになる! App Serviceオススメ便利機能 便利な7つの機能について 17
  18. 18. 1. Web構築環境が一瞬でできるWebアプリ 18  ポータル画面で「Web+モバイル」を選び、 「アプリの名前」を入力するだけ
  19. 19. 2. Webサイトの自動バックアップ・復元 19
  20. 20. 3. 容量無制限のAzure BLOBストレージ  画像や動画など容量が大きなファイルを 置くのに適している  Webサーバー代わりにも使える  カスタムドメインの設定も可能  WordPressの場合はプラグインがある – Windows Azure Storage for WordPress 20 Azure BLOBストレージは容量無制限 課金制(1GB 2.45円くらい)
  21. 21. Azure BLOBストレージとWebAppsの違い 21
  22. 22. 4. デプロイ(アップロード)方法が選べる 22 FTP、Git、Dropbox、OneDrive…
  23. 23. Gitデプロイ環境の構築例 23 Microsoft Azure WebAppsとBitbucketを使ってGitデプロイ環境を 構築してみた話。 http://zuvuyalink.net/nrjlog/archives/2486
  24. 24. 5. テスト環境と本番環境を一瞬で入れ替え 24  ワンクリックでテストと本番を入れ替え ステージングでテスト環境と本番環境を 入れ替えできる!!
  25. 25. 6. 急激なアクセス過多も安心! スケールアウト 25 スケールアウトとは?
  26. 26. 26 手動でスケールアウトする スケールアウトの設定方法
  27. 27. 7. プログラミングできなくてもOK! Logic App 27 コードを記述せずコネクターをつなげることで、 クラウドベースのさまざまなアプリケーションに 接続する仕組みを簡単・手軽に作れる便利機能
  28. 28. Logic Appについて 28 ノンプログラミングで流行りのBOTを作成できる!
  29. 29. コミュニティのご紹介 29
  30. 30. JAZUG(Japan Azure User Group) 30 • Japan Azure User Group – 略称 JAZUG (じゃずゆーじー) • Microsoft Azureを学び、楽しみ、活かす、 日本のユーザーグループ • 2010年8月26日に結成したコミュニティ • 各地に支部あり https://www.facebook.com/groups/jazug/
  31. 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. まとめ 32
  33. 33. システム会社の1人デザイナーとして 33  エンジニアとデザイナーの間を埋める努力 – デザインへの意見は遠慮されやすい  「デザイン」の意味を伝える – デザインの本質って? – ビジュアルデザインが「全て」ではない 違う立場だからこそ色々気づく。 それを活かせばもっと良くなる!
  34. 34. 今後やっていきたいこと 34 「クラウド×Webのイイ関係」 をもっと広めていきたい!!  Azure WebApps(PaaS)はWeb制作者の助け になる機能が多くあることを知ってほしい  Web制作者自身が「クラウドを使う」という 選択肢を持ってもらいたい
  35. 35. ご清聴ありがとうございました

×