Microsoftでは、ローコードでWebサイトを作れるサービス「Microsoft Power Pages」を提供しています。
Webサイトは、コーポレートサイト、サービスサイト、ランディングページなど、あらゆる場面で必要です。手軽にWebサイトを立ち上げられるMicrosoft Power Pagesは、企業活動のうえで、便利に使えます。
しかしPowerPagesの名前だけを知っていても「実際にどんなアウトプットを出せるのかが分からない」という疑問を払拭できず、導入に踏み込めない方も多いことでしょう。
そこで今回はPowerPagesの活用事例を紹介します。また具体的な機能も紹介するため、気になっている方は参考にしてみてください。
PowerPages とは
Microsoft Power Pagesは、ローコードでWebサイトを立ち上げ・管理できるサービスです。Microsoftが提供するサービスとなります。
HTMLやCSSを用いたコーディングが必要なく、テンプレートをドラッグ&ドロップで配置するだけでWebサイトを立ち上げられるのが魅力です。専門的なエンジニアスキルは必要ありません。
もちろんカスタマイズしたいときは、HTML、CSS、JavaScriptなどで独自性の高いWebサイトを作れます。
さらにMicrosoftのクラウドサービスですので、セキュリティ性が高いのも魅力です。
Power PagesはMicrosoft Power Platformの一つ
Microsoftはシステム開発をシームレスに推進するためのプラットフォーム「Microsoft Power Platform」を提供しています。具体的には以下の5つで構成されています。
サービス名 | 詳細 |
PowerApps | ローコードでアプリケーション開発ができるサービス |
Power Automate | 複数のサービス同士を連携指せることで業務の自動化を実現できるサービス |
Power BI | 社内のデータをまとめて分析・可視化するためのBIツール |
Power Virtual Agents | AIチャットボットを構築できるサービス |
Power Pages | ローコードでWebサイト構築・メンテナンスができるサービス |
Microsoft Power Pagesは、Microsoft Power Platformの一つとして機能しています。アプリ開発、顧客からの問い合わせ対応など、他サービスも同じプラットフォーム内で作成することで、各種データを連携して、より高度な示唆を得ることが可能です。
Microsoft Power Platformについては、以下の記事で詳しく紹介しています。Power Pages以外の機能も気になる方は参考にしてみてください。
![](https://bolt-dev.net/wp-content/uploads/2020/06/28edf7add83ddba4e48f444bbec12546-300x169.png)
PowerPagesの機能
Microsoft PowerPagesにはさまざまな機能が備わっています。ここではPower Pagesの機能について紹介します。
基本的には、HTMLやCSSを用いず、テンプレートから追加したいコンポーネントを選んで配置するだけでWebサイトを作れるのが魅力です。
Power Pagesには「デザインスタジオ」というブロックがあります。デザインスタジオは以下の4つのワークスペースに分かれています。
ワークスペース名 | 詳細 |
Pages ワークスペース | WebページごとにUIのデザイン、テンプレートの配置ができる |
スタイリング ワークスペース | Webサイト全体にスタイル・テーマを適用できる |
データ ワークスペース | Webサイト全体に関するビジネスデータをモデル化・可視化できる。 |
ワークスペースの設定 | Webサイトの管理者・アクセス権限などのガバナンスを設定できる |
また、作成したWebサイトをモバイル対応(レスポンシブデザイン化)できるのも魅力です。専門的なデザイナー知識がなくても、モバイルで見やすいように編集してくれます。
ただし、テンプレートだけではWebサイトとしてオリジナリティ・ブランド力を発揮しにくいのは確かです。その場合は、追加でVisual Studio Code上からコーディングできます。
あらゆるレベルのユーザーに対して、使いやすいサービスです。
PowerPagesの活用事例
それでは、実際にPowerPagesを用いた事例について紹介します。
静岡県島田市 | 子育て支援プラットフォーム「しまいく+」の作成
![静岡県島田市 | 子育て支援プラットフォームのスクリーンショット](https://bolt-dev.net/wp-content/uploads/2024/05/image5-1024x438.png)
静岡県島田市では、子育て支援プラットフォーム「しまいく+」を、市内に住む子育て世代に提供しています。PowerPagesを用いて作成された「しまいく+」では、子育て世代のマイナンバー情報を登録してもらうことで、One to Oneで有用な情報を確認したり、申請したりできます。
もともと島田市では、子育て世代向けに広報ページを作っていましたが、一人ひとりに適した情報ではないため、どうしても分かりにくさがあったといいます。そこで、マイナンバーと紐づけたうえで、市民の情報を把握できるWebサイトを構築しました。
ユーザー情報をMicrosoft Dataversで集計しつつ、一人ひとりに適したWebサイトづくりを推進しています。またそれまで庁舎で使っていたMicrosoft 365製品との親和性も導入の決め手となったといいます。
また住民がWebサイト上でアクションできるようになったため、それまでの郵送などの手間が省けたのも利点です。
北陸先端科学技術大学院大学におけるローコード開発プロジェクト
![北陸先端科学技術大学院大学のスクリーンショット](https://bolt-dev.net/wp-content/uploads/2024/05/image8-1024x500.png)
北陸先端科学技術大学院大学では、学生・職員が質の高い研究ができるよう、ローコードで構築できるPower Appsや、Power Pagesを用いて学内の業務効率化に励んでいます。押印をはじめ、もともとアナログだった業務のデジタライゼーションに取り組んでいます。
開発チームにはプログラミング初学者がいるのが、大きな課題でした。しかしPower Appsや、Power Pagesといったローコードツールを導入することで開発のハードルを下げることに成功しました。
Power Pagesでは、オンラインの同意手続きシステムを構築。新入生の入学手続きをオンラインで同意できる環境を構築しました。また、現在では「複数のアプリ・Webサイト画面を、Power Pagesで一つのUIにまとめる」といったプロジェクトが進行中です。
PowerPagesで作れるサイトの例
具体的にPowerPagesで作れるWebサイトを、実際のUIと一緒に紹介していきます。
子供の習い事教室サイト
![子供の習い事教室サイトの作成画面](https://bolt-dev.net/wp-content/uploads/2024/05/image1-1024x491.png)
例えば「子供の習い事教室サイト」を構築できます。
テンプレートを用いてUI上で、コースのカタログや、クラス一覧のページを作成して、習い事の内容を利用者に訴求できます。
また、以下のように利用者用のページを作成することも可能です。
- 出席者の登録
- 出席者の登録解除
- 出席者のプロフィール登録
- 利用しているコースの詳細を確認
さらにスクールの担当者用に以下のページを作成できます。
- コースのフォーマット設定
- コースの削除
- 利用者の連絡先を登録
またこれらの情報をデータベースで管理することで、運営するなかでデータ分析・改善できるのも魅力です。
よく寄せられる質問ページ
![よくある質問ページの作成画面](https://bolt-dev.net/wp-content/uploads/2024/05/image7-1024x564.png)
サービスを運営するなかで、ユーザーに悩み事を解決してもらうためのFAQページの作成ができます。ただし、こちらのテンプレートは2024年5月時点では、プレビュー機能となっており、一部制限がかかる可能性があります。
UI上では、各カテゴリに悩みを分類したうえで、表示ができます。ユーザーは提供者のサービス・プロダクトを活用するうえでの悩みを自力で解決します。FAQページがあることで、カスタマーサクセスの手間が省けるのが魅力です。
こちらも、Webページ全体の利用状況がデータで可視化されます。例えば「離脱率が高いページは改善が必要」など、FAQページの品質を長期的に改善することが可能です。
会議のスケジュール管理ページ
![会議のスケジュール管理ページの作成画面](https://bolt-dev.net/wp-content/uploads/2024/05/image6-1024x487.png)
テンプレートを用いて、ユーザーが自分自身で会議のスケジュールを登録するための画面を構築できます。これにより、ユーザー・提供者の双方にとって、電話・メールをする手間が省けるのが魅力です。
提供者側は、自分自身のスケジュールをあらかじめ登録しておきます。ユーザーは予約画面からスケジュールの空きを見つけて登録します。スケジュールのキャンセル・編集もシームレスにできます。
建築許可申請サイト
![建築許可申請サイトの作成画面](https://bolt-dev.net/wp-content/uploads/2024/05/image2-1024x486.png)
主に行政が使う「各種申請フォームを付随したWebページ」も、PowerPagesで簡単に作れます。例えば、居住者がリフォームなど、追加で建築する際の申請をWeb上で完結できます。
提供者(行政)は、申請者に対して必要な項目をフォームで提示するだけです。紙の申請書によるアナログ業務をデジタルで完結できるため、所内の業務効率化にもつながります。
PowerPagesのライセンスプランと料金
Power Pagesは月額サブスクリプション料金で使えます。
「認証済ユーザー向けプラン」と「匿名ユーザー向けプラン」があり、それぞれ第一階層から第三階層まで選べます。認証済みであればWebサイト全体にアクセス・編集ができます。匿名の場合は、閲覧のみに絞られます。
認証済みユーザーの料金プランは以下です。
階層 | 最小要件 | ユーザー/容量パック | 価格/容量パック |
階層 1 | 100 ユーザー | 100 | ¥29,985 |
階層 2 | 10,000 ユーザー | 100 | ¥11,244 |
階層 3 | 100,000 ユーザー | 100 | ¥7,496 |
匿名ユーザー向けプランは以下です。
階層 | 最小要件 | ユーザー/容量パック | 価格/容量パック |
階層 1 | 500 ユーザー | 500 | ¥11,244 |
階層 2 | 10,000 ユーザー | 500 | ¥5,622 |
階層 3 | 100,000 ユーザー | 500 | ¥3,748 |
詳しくはMicrosoft公式の情報を参考にしてみてください。
Power Apps Portalsとの違い
Power Apps Portalsとは、Microsoftが2022年10月まで提供していたローコードのWebサイト構築サービスです。つまりPowerPagesはPower Apps Portalsの後継といえます。
具体的にPower Apps Portalsと比べて進化した部分を紹介します。
- 編集サイトの進化
- テンプレートハブの追加
- コード開発の強化
編集サイトの進化
従来のPower Apps Portalsでは、利用者ごとにグルーピングができませんでした。
しかしPowerPagesでは、「ビジネス」「IT」「開発者」の3つのグループに分けることが可能です。それぞれのグループごとに専用のワークスペースを付与できるため、職種ごとに扱いやすいUIで編集できるようになりました。
テンプレートハブの追加
Power Apps Portalsと比べて、テンプレートが豊富になったのも進化した点です。セクションごとのコンポーネントだけではなく、先述したような利用シーンごとに丸々使えるテンプレートがあります。
より非エンジニア・非デザイナーにやさしいツールとなりました。
コード開発の強化
エンジニア・デザイナーにとっても使いやすさが増しています。PowerPagesに変更したことでVisual Studio Codeが使えるようになりました。Visual Studio Codeとは、Microsoftが提供するテキストエディタです。
これにより拡張機能を使いながらWebブラウザ上でコードを編集できるようになったことで、さらに効率的にカスタマイズできるようになりました。
まとめ
今回はPowerPagesについて、活用事例を中心に紹介しました。今やWebサイトをフルカスタマイズで作成することはほとんどありません。
PowerPagesは数あるローコードツールのなかでも、Microsoftのアセットを利用したり、豊富なテンプレートがあったりと、安心感のある便利なツールです。
「具体的にどう活用すればいいか分からない」とお悩みのWeb担当者の方は、この記事を参考に自社のWebサイトを構築してみてください。