Mass.gov： 市民中心の最高のウェブサイトを Drupal で実現

[訳注：この記事では Drupal 8 の利用について言及されていますが、2023/05 現在 mass.gov は Drupal 9 で運用されています]  

Last Call Media、マサチューセッツ州、アクイア、Mediacurrent  2019/03/21

このケーススタディは Last Call Media と Mediacurrent により執筆されました。両社はマサチューセッツ州と MassGovDigital チームを継続的に支援するためのパートナーシップを組んでいます。

マサチューセッツ州はオンラインで市民と関わり、サービスを提供する方法を現代的にアップデートし、継続的に改善することを容易にするために、ウェブサイトの大規模な再構築に取り組みました。市民のユーザーエクスペリエンスを向上させ、可能な限り包括的な「政府の顔」を提供することで、Mass.gov® は、州の 680 万人が日常的に利用する重要な社会サービスや情報を提供し、市民サービスを提供するうえで不可欠なプラットフォームとなりました。毎月1,500 万ページビューを誇る Mass.gov プラットフォームは、400 以上の政府機関およびそれらのコンテンツをホストし、州への移転・訪問・ビジネスを希望するすべての人を支援します。これらのコンテンツはすべて、600 人以上のコンテンツ制作者によって運営されています。彼らはこのプラットフォームを利用して市民の満足度を向上させることに成功し、自分たちの組織や提供するサービスに対する一般市民の見解に顕著なプラスの変化をもたらすことができました。

Drupal の早期導入により、Mass.govとそのエコシステムの Web 資産は、マサチューセッツ州における政府サービスと情報提供のための主要プラットフォームとなっています。

これは堅牢な公共サービスプラットフォームとして構築された Mass.gov の、エキサイティングな新章の幕開けだと言えます。私たちは、Mediacurrent ならびに Last Call Media と強力なパートナーシップを築き、彼らは私たちのデジタル構想を実現させるための原動力となってくれました。Drupalとアナリティクスを通じて、市民中心であることを貫くとともに、将来のニーズに迅速に対応するためアジャイルであり続けるという使命に向け、意義深い進歩を達成することができました。

- Holly St.Claire、テクノロジーサービス・セキュリティ執行部　チーフデジタルオフィサー兼チーフデータオフィサー
Mass.gov ウェブサイト

Drupalが選ばれた理由 

州政府の新しい Mass.gov のビジョンは汎用性が高く、堅牢なエンタープライズコンテンツ管理のフレームワークを必要としていました。

プロジェクト当初から、州政府は変更が容易なプラットフォームを求めていました。初年度のプロトタイピングおよびそれ以降のフェーズにおいて、新しいステークホルダーや市民からのフィードバックを発見し対応する際に迅速かつ費用対効果に優れた方法で対応するために、そのようなプラットフォームは必須でした。

 Drupal はフィードバックに素早く対応し、新しいアイデアをテストし、機能を安全に本番に投入することを可能にしてくれるため、このプロジェクトに必要不可欠な要素となりました。

• Drupal は、高度なウェブサービスの活用によって Mass.gov を州のコンテンツハブとして位置づけるというアイデアの実現に貢献。
• 州のすべてのウェブサイトで同じルック＆フィールと体験の標準化を行うことで「”統一された政府の顔”を提供する」という目標を支援。
• Drupal が提供する多くの安定したツールにより、州は主要ツールを構築する代わりに機能開発に集中することができ、全体的な開発コストとローンチまでの時間を削減。
• 構造化されたコンテンツやパラグラフの作成に Drupalのネイティブ機能を活用することで、大規模なカスタマイズは不要。
• オープンソースのもたらす他の州政府との仕事の共有の機会や意欲
• 高いアクセシビリティー
• 堅牢なセキュリティー
• Schema.org への対応

このプロジェクトについて（目標・要件・成果） 

最高のコンテンツ

マサチューセッツ州では、使いにくいサイトによるウェブ体験の低さが、ウェブを通じて市民が政府サービスを利用する際の障壁となっていました。そのため、州政府の新しい顔となるような、市民中心で迅速かつ簡単なサービスの活用を実現することが目標として掲げられました。

Drupal への移行前、州の旧サイト（時代遅れの独自 CMS プラットフォーム）のコンテンツは、内部の階層構造を反映していました。情報は直感的でなく、市民にとって見つけやすいものではありませんでした。例えば、マサチューセッツ州でビジネスを始めようとする訪問者は、ビジネスを始めるために 4 つ以上の別々の省庁のサイトを訪問する必要がありました。州は、巨大な国家組織にありがちな複雑さを解消し、州が提供するさまざまなサービスのガイドを提供することに重点を置き、ユーザー体験の向上を試みました。

マサチューセッツ・デジタル・サービス（MassGovDigital）は、「市民の体験を重視する」「すべての意思決定をデータでサポートする」という 2 つの基本理念のもとに意思決定を行っていました。彼らは、運転免許証の更新準備のようなタスクが、大手小売店のウェブサイトでのショッピングのような使いやすさで利用できるような、ユーザー体験の統一化を思い描いていました。MassGovDigital チームは、市民の「コンバージョン」を定義して追跡するなど、民間のデータ分析の知識の応用を試みました。サイト制作者が読者のためにコンテンツを最適化するために、十分な情報を得た上で意思決定を行うには、簡単かつ瞬時にサイト分析へのアクセスを可能にする必要がありました。また、サイト内検索が高パフォーマンスであれば、コンテンツの見つけやすさも保証されます。

Velir、Palantir.net ならびに Acquia がプロジェクトのパイロットフェーズで行った初期作業をベースに、Mediacurrent、Last Call Media、MassGovDigital チームの協力により、州のデジタルサービスの未来が新章を迎えることとなりました。

最終的に、マサチューセッツ州政府の新しい主要な顔として、市民を中心に据えた、迅速で簡単、かつ素晴らしい州サービスとのやり取りを可能にするという目標に向けて、大きな飛躍がもたらされました。

大幅なパフォーマンス向上

Mass.gov の主なステークホルダーは、ウェブサイトを訪れる市民、そしてコンテンツを公開し、仕事の一環としてウェブサイトを訪れる州政府機関です。月間 1,500 万以上のページビューがあり、サイトの変更は開発者チームによって週 2 回リリースされます。このサイトのトラフィックプロファイルは興味深いものの、非常に予測しやすいものです。トラフィックの大半は、平日の午前 8 時から午後 8 時までの間に発生します。サイトの編集者は営業日（9:00～17:00）に仕事をしており、リリースは営業日終了後（20:00 以降）に行われます。アナリティクスのグラフでは休日を除き、常に営業日に対応する 5 つのトラフィック・スパイクが見られます。祝日が 1 日ある場合、スパイクは 4 つとなります。

Last Call Media が州のサービスとの迅速かつ簡単で素晴らしいやり取りを可能にした最も重要な方法の1つは、常に高いトラフィック負荷がかかるサイトのパフォーマンスに細心の注意を払うことでした。Last Call Media は、サイトのフロントエンドとバックエンドの両方において、劇的な変更の支援を行いました。私たちが行ったすべてのアクションは、サイトの安定化とコンテンツの「鮮度」の向上のために行われました。国家公務員はコンテンツを迅速に公開する必要があり、市民はサイトを訪問している間に中断することなく、公開されている情報に迅速にアクセスする必要がありますが、この 2 つのニーズは相反するものです。それは、コンテンツの鮮度（編集者が変更の効果を確認するまでの時間）が上がるに連れ、サイトのスピードと安定性が損なわれるためです。私たちの課題は、この 2 つのニーズのバランスを取る方法を見つけることでした。この取り組みにより、Mass.gov サイトのフロントエンドとバックエンドの両方のパフォーマンスが大幅に改善されました。バックエンドのパフォーマンスは全体で 50%、フロントエンドのパフォーマンスは全体で 30% の改善を達成しました。Last Call Media がどのようにこれを実現したのかについてはこちらをご覧ください。

REAL ID、リアルアンサー： 申請プロセスの合理化

REAL ID 規格の運転免許証 / ID に係る州政府のセキュリティー基準の変更に伴い、マサチューセッツ州自動車登録局（RMV）は、免許証更新の需要が通常よりはるかに高くなると予想し、RMV やコールセンターへの電話やリクエストの量を増やしていました。マサチューセッツ州の市民は、REAL ID か標準的な免許証かの判断を導くための明確な情報を必要としていました。

このような課題を解決するため、Mediacurrent は州と提携し、RMV のサービスセンターに行く前に運転免許証の申請や更新を先取りできるツールを設計しました。「REAL ID は必要？」という質問にわかりやすく答えるディシジョンツリーにより、住民は RMV に電話したり待ったりすることなく、迅速かつ簡単に何を期待すればよいかを理解することができます。

アナリティクスダッシュボード： Drupal コンテンツ制作者のためのディープデータ

質の高いコンテンツは Mass.gov の数百人の執筆者によって作成されているため、市民にとってより良いコンテンツを作るための重要な要素は、執筆者が改善点を理解できるようにすることでした。数百人のコンテンツ作成者が、Drupal のオーサリングの一部として、Google アナリティクスにログインすることなく、実用的な最適化データを手に入れることができるようになったのです。

Mediacurrent は、Google Analytics、SiteImprove、ユーザーフィードバックを取得するFormstack フォーム（各ページに埋め込み）、構造化情報を提供する Drupal サイトの API といった複数のソースからデータを S3 Amazon ストレージシステムに集約する Analytics Dashboards の作成を支援しました。ETL（抽出・変換・ロード）プロセスはこれらのツールにまたがって行われ、さまざまな方法でのデータ消費を可能にし、オープンソースのデータ可視化プラットフォームである Superset は、編集者に有用なかたちでデータをビジュアル化する最上位層として機能します。

Drupal 編集機能に組み込まれたダッシュボードは、ページの状態、読みやすさ、見つけやすさ、アクションレートのスコアを表示します。Mass.gov の開発チームとデータ分析チームは、ページ単位で定期的に分析レポートを受け取ることができます。さらに、コンテンツの改善に関するターゲットを絞った推奨事項により、編集者はパフォーマンスの低いコンテンツを最適化するための適切なツールを活用できます。

カスタムウェブエンドポイントの ETL は、目標、フォームスタック（ウェブサイト改善のためのフィードバックを求めるアンケートなど）への投稿、Google アナリティクスの情報、Drupal の継承ツリーなど、すべての分析データをまとめています。

データと市民のユーザージャーニーを繋ぐ

コンバージョンは、Mass.govへの訪問者が適切な活動を成功させたときに発生します。 正しい情報の消費であれ、サービスへのアウトバウンドリンクへのアクセスであれ、これらの訪問者の行動を追跡して測定すると、マサチューセッツ州が市民の情報収集のジャーニーをいかに効果的に支援しているかがわかります。

詳しくは、DrupalCon Seattle 2019での私たちのプレゼンテーション — Mass.gov: データに基づくコンテンツ最適化ガイド を参照してください。

Drupal のオーサリングエクスペリエンスを向上させる

コンテンツを作成し、改善する著者の能力を向上させることができれば、市民は州の機関と迅速かつ簡単に、そして素晴らしくスムーズにやり取りをすることができるようになります。Last Call Media は、オーサリングエクスペリエンスを向上させるために、各コンテンツに関するデータを伝えるためのインターフェイスを改善しました。このデータは、コンテンツのスコアリングとユーザーからの直接のフィードバックとの組み合わせで構成されています。例えば、サイト訪問者がフィードバックフォーム（どのページでも利用可能）を提出し、そのページが役に立ったかどうか（「このウェブページで探していたものは見つかりましたか」）に答えます。この生のデータは、彼らの " 評点 " の計算に使われます。また、フィードバックされた生のコメントは、エディターインターフェイスのタブに表示され、エディターは、そのページでうまくいっていること、あるいはうまくいっていないことに焦点を当てることができます。このようなデータの可視化と、インターフェースの直感的な操作、コンテンツの追加・管理の容易化により、著者はより迅速に、より的を射た方法でコンテンツを改善することができるようになりました。ForeSee の結果によると、新しいオーサリングエクスペリエンスのリリースは、これまでにない顧客満足度の上昇に直結しています。

Drupal のデフォルトの管理サイトのテーマを一新することは、コンテンツ制作者に向けた使い勝手の向上をもたらす重要な機会でした。Last Call Mediaは、各ページごとにデザインを作成するようなかたちで多大な労力をかけることを避け、パターンライブラリを使用することで大規模な改善の適用を行いました。縦方向の間隔に特に気を配り、ページの階層を明確にしました。同時に、ブランドのカラースキームを反転させることで、メインサイトとの一貫性を保ちつつ、ユニークなユーザーエクスペリエンスを実現しています。

プログラム「Sketch」上で表示されるテーマのブランディング・ガイドライン

共通のデザインボキャブラリーを使うことで、まだデザインされていないページも含め、サイト全体にこれらのアイデアを適用することができました。開発を開始してテーマの概要を適用すると同時に、デザインチームはユーザビリティーにさらなる配慮が必要なサイトの一部のセクションに焦点を当てました。異なるスタイルの要素やフォームで構成された複雑なコンテンツを提供するという課題に直面した際には、フォーム要素に焦点を当てました。すべてのフォーム要素のユーザビリティを向上させるためにスタイリングシステムを統一するのに加え、ひとつのフォーム要素の終わりと次の要素の始まりを明示するための横線を導入しました。また、入れ子になった並び替え可能な要素には、縦線を表示することにしました。

コンテンツ公開までの明確なステップ

Last Call Mediaは、コンテンツ編集者やクリエイターのナビゲーションを効率化するために、Admin Toolbar の新たな改良版も開発しました。Admin Toolbar モジュールに加え、管理者テーマに特化した、独立したカスタムツールバーモジュールを開発し、カスタマイズ可能にしました。現在、ボタンによってログインページに簡単に戻ることができ、メインサイトに戻るためのボタンも別途用意されています。カスタムタブで、コンテンツ編集者を主要なページに誘導することも可能です。

Mass.govの管理テーマの最終的な「ホームページ」

以前は「コンテンツ追加ページ」と「新規ドキュメント作成ページ」の 2 つの主要ページに、コンテンツ制作者が素早くアクセスする直接的な方法がありませんでした。スリムなトップバーとこの機能を両立させるために、これらのページにはタブメニューの右側にボタンが追加されました。

Last Call Mediaは、注目のエクスペリエンスを考慮したカスタム「Add content（コンテンツ追加）」ページを構築しました。調査した時点では、編集者は Mass.gov に存在する約 35 種類のコンテンツをスクロールして閲覧できるようになっていました。

検索ボックスを使って、コンテンツエディターは追加したいコンテンツの種類を絞り込むことが可能

より速く、より簡単なオーサリングを実現したことで、編集者はコンテンツの改善と追加を継続的に行うことができるようになりました。これにより、市民は常に最新情報を得ることができ、Mass.govは政府サービスを利用するために必要なすべての情報を提供する一元的な情報源として成長しつづけることができます。Last Call Mediaがどのようにこれを実現したのか、詳しくはこちらをご覧ください。

成果

• 州政府のウェブサイトをリード： Mass.gov は、ITIF が 400 の州政府ウェブサイトを対象に実施したレビューにおいて、ページ読み込み速度、モバイルフレンドリー、セキュリティ、アクセシビリティのパフォーマンスが評価され、全米 3 位を獲得。 
• 市民体験の向上： 175,000 人以上の住民が REAL ID オンライン決定ツリーを利用し（2018 年 3 月～11 月）、新しい運転免許取得のための対面申請が必要かどうかを判断するプロセスを合理化し、自動車登録局への問い合わせを減らす一方で市民の満足度を向上。
• 市民中心の UX：一貫性のある市民中心の UX を実現するため、構造化コンテンツを使用して 23 種類のコンテンツを制作。
• フロントエンドとバックエンドのパフォーマンスを大幅に改善： コンテンツの鮮度を保ちながら、バックエンドのパフォーマンスを 50%、フロントエンドのパフォーマンスを 30% 向上させることに成功。
• Drupal Admin UI の改善により、コンテンツ制作者を強力に支援： コンテンツの更新・追加・レビューは、技術的な専門知識を必要とするものから、技術的な知識を持たない担当者にもわかりやすく、使いやすいものに改善。現在では、毎週何百人ものユーザーが Mass.gov にログインし、市民に提供するサービスをサポートするためにコンテンツのパフォーマンスを更新、追加、レビュー。
• ガイドツアーでオンボーディングを効率化： 一連のガイドツアーは、洗練されたパブリッシングプロセスをサポートし、新しいコンテンツ作成者のオンボーディングを加速。
• ユーザーフィードバックからインサイトを収集： コンテンツ制作者は市民からのフィードバックにアクセスできるようになり、フィードバックをコンテンツのパフォーマンススコアの作成に活用。
• パターン・ライブラリ： すべてのウェブプロパティーの標準的なルック＆フィールと使用感が定義された「Mayflower」により、統一された政府の顔を提供。
• Drupal Splash 賞受賞： "ベストテーマ "に認定。 

主な特長と機能

オーサリングエクスペリエンスの再構築

• コンテンツカテゴリー： コンテンツの種類をカテゴリーに整理し、「コンテンツを追加する」ページでそのカテゴリーへのリンクを表示。
• より高度な検索： カスタム検索機能により、コンテンツタイプ名と説明文の両方をソート。
• 明確なビジュアルと方向性：各コンテンツタイプの「サムネイル」例では、著者がプレビューを閲覧可能です。また、説明文の位置がより適切なものになり、わかりやすさを実現。
• ガイダンスの追加： Mass.govのドキュメントサイトへのリンクにより、各コンテンツタイプの使用方法、新しいコンテンツ作成のヒント、実際の例へのリンクなど、追加情報を提供。
• アナリティクスダッシュボードの導入により、コンテンツの改善をさらに支援。
• 制作者のための新しいウェルカムページ体験

検索とDevOps

• 自動テストとコンテナ化における DevOps の成熟。
• ReactJS と Drupal による検索機能の向上

さいごに

現在、Mediacurrent と Last Call Media は、Mass.gov のデジタルプラットフォームを変革し、政府と住民の交流を強化するために活動している主要デジタルエージェンシーです。このパートナーシップは、MassGovDigital の内部チームや他の複数のベンダーと密接に協力しながら、新しいデジタルプラットフォームを開発・サポートするための技術アーキテクチャのリーダーシップを提供しました。

過去 12 ヶ月間に Foresee によって収集されたデータによると、市民からのフィードバックとアナリティクスに基づき、またコラボレーションと柔軟性を重視することで、チームは Mass.gov に対する市民の満足度を毎月向上させることができました。

Mediacurrent と Last Call Media について

React/Javascript アプリケーションは、search.mass.gov のサイト検索を強化します。 React の Javascript ライブラリは実質的な安定性とサポートを備えているため、将来の機能を拡張するための理想的なアーキテクチャの選択肢となっています。 Mass.gov 検索は、Create React App と併せて React Redux および Redux Saga を使用してルートとアクションを管理するために構築されました。 Redux Saga を使用すると、さまざまなアクションやイベントをジェネレータ関数で処理できます。 これらのジェネレーター関数は、各コンポーネントでディスパッチされたアクションの操作の順序を保証するのに役立ちました。 テストは Jest を用い、AVA を使用して視覚的な回帰テストを実施しました。

• React などの新しいテクノロジーの高度なトレーニング
• プラットフォームを維持および革新するための Drupal の専門知識
• 自足への道のりを定義するための分析指向のパートナー