日本のデジタル社会実現に向けて、官公庁におけるシステム開発が進化を遂げています。本コラムでは、デジタル庁が推奨するデザインシステムの活用と、マイクロサービス化がもたらす実際の利点について紹介します。官公庁システムのモダン化を図るために、コスト削減と品質向上を両立させるアーキテクチャ選定の重要性を実績に基づいて解説します。
このコラムの主な読者対象は次のとおりです：
- 官公庁システムのモダン化に興味がある行政職員
- 官公庁案件で活用される効率的なアーキテクチャに関心がある方
官公庁システムにおける効率的な開発手法を解説し、これからのシステム開発にどのように活用できるのかをお伝えします。
作り込みの少ないアーキテクチャにより、短期間でアプリケーションが作られる
Webアプリケーション開発に際して最初に考慮すべきは、安全性を確保しつつ効率的に進める方法です。特にセキュリティに関しては、ゼロから開発するよりも、既存のフレームワークを活用する方が、安全かつ迅速にプロジェクトを進行させられます。
官公庁のシステムにおいては、Webアプリケーション開発を行う際にデジタル庁のデザインシステムに準拠することが推奨されています。そのため、必要最低限の作り込みでデザインシステムを導入できる方法を模索することが重要です。
次項ではデザインシステム導入について、官公庁のプロジェクトでの効率的な開発方法を紹介します。
デザインシステム導入によるWebアプリケーションを開発時のアーキテクチャ選定や効率的な開発方法について
デザインシステムの導入理由
そもそもなぜデザインシステムに準拠することが推奨されているのでしょうか。その理由をユーザーと開発者の視点から説明します。
まず、デザインシステムの導入により「官公庁システムのデザイン」として統一された、馴染みやすい操作感をユーザーに提供できる点が挙げられます。デジタル庁はアクセシビリティの確保や行政サービスにおける使いやすい画面ルールを定めており、デザインシステムに準拠したWebサイトが増えることで、ユーザーにとって利用しやすい体験が広がります。
次に、開発者の視点においても、デザインパーツの作り込みやアクセシビリティ・ユーザビリティの改善に要する時間を削減できるという利点があります。また、標準化されたデザインを使用することで、開発者にとっても知見やテンプレートが蓄積され、作業効率の向上が見込めます。
このように、デザイン作業を効率化することで、他の業務に注力できる時間が増え、システム全体の品質向上につながります。優れたユーザー体験を提供するため、デザインシステムに準拠することは、官公庁システムにおけるベストプラクティスといえるでしょう。
デザインシステム導入におけるアーキテクチャ
デジタル庁は、「Figma」というデザインツールを活用して、デザインシステムデータを提供しています。「Figma」はUIデザインやワイヤーフレームの作成に適したツールであり、共同編集が可能なためユーザーインターフェース設計にとても便利です。「Figma」をプロジェクトのデザインツールとして使用することで、ボタンやチェックボックスなどのデザインパーツをそのまま活用し、簡単にデザインシステムに準拠したデザインを作成できます。
また、操作可能な画面プロトタイプが作成できるため、画面設計が顧客の要求を満たしているかを確認できます。
さらに、「Figma」はAWSのサービス「AWS Amplify Studio」を介してReactコードを自動生成できます。
ReactはJavaScriptライブラリの一つで、WebサイトやWebアプリケーションのユーザーインターフェースを効率的に開発するために活用されているオープンソース技術です。
「Figma」からReactコードを自動生成することにより、デザイン作成から設計、実装までの作業効率が大幅に向上します。
「AWS Amplify Studio」はAWSアカウントを持っていれば利用可能です。「AWS Amplify」向けの機能ですが、自動生成ツールとして単独で使用することもできます。「AWS Amplify Studio」の使用によってシステム構成に制限がかかることはありません。
自動生成されるReactコードはデザイン部分だけなので、ボタン押下時などのイベント処理は別途実装が必要ですが、デジタル庁提供のデザインシステムデータを起点に、Reactのデザインコードまで自動生成が可能なため、大幅に作業効率を向上できます。
「Figma」からReactを自動生成する際の注意点
自動生成アーキテクチャは多くのメリットを提供しますが、フロントエンド実装においては以下のような制限も存在します。
1． 生産性の測定とカスタマイズの制限
画面デザインをReactでフルスクラッチ実装した場合と比べると、自動生成されたコードの量が非常に多くなり、生産性を把握しにくくなります。自動生成コードにはインラインスタイルの埋め込みが多用され、Classを有効活用できないため、1Stepあたりのロジック密度が薄くなる傾向があります。デザイン部分とそれ以外で生産性を分けて考えることが推奨されます。
また、自動生成コードは基本的に編集が推奨されておらず、カスタマイズする場合は自動生成コードをオーバーライドするような新たなコードが必要です。
2． デザインの自動反映における制限
「Figma」で表現したデザインが必ずしもそのままReactへ自動生成されるわけではありません。ウィンドウサイズに対応したデザイン幅の最大値や、アニメーションの表現など、自動生成に対応していない要素も存在します。これらの場合、React側でスタイルシートを手動でカスタマイズする必要があります。
これらの注意点を十分に理解し、リスクを評価したうえでこのアーキテクチャを採用することが求められます。
Reactの機能を多面的に活用可能
自動生成されたコードはカスタムコンポーネントとして提供されます。これにより、ベースとなるReactアプリケーションからこれらのコンポーネントを呼び出すことで、「Figma」で設計したデザインがReactアプリケーション上に表示されます。
カスタムコンポーネントの基本構造は標準的なReactアプリケーションであるため、手動実装したデザインコードと自動生成したものを組み合わせることや、必要に応じてさまざまなフレームワークを導入することが可能です。
官公庁システムでは、重要な政策発表や災害情報の周知などで、特定の情報をより多くの市民に届けるためにSEO対策が考慮されることもあります。そのような場合、Next.jsなどのフレームワークを使用することで、CSR（クライアントサイドレンダリング）からSSR（サーバーサイドレンダリング）へレンダリング方式を変更でき、Reactの機能を多面的に活用できます。
マイクロサービス指向による柔軟性と将来的な拡張性の確保
デザインシステムや作り込みとは異なる視点ですが、マイクロサービスはモダンアーキテクチャにおいて重要な考え方です。
古くから続いているシステムではモノリシックな構造が多く、その場合は拡張性やメンテナンス性に課題が生じがちです。そのため、機能追加や変更が入るとシステム全体に影響を与えることがあります。改修のたびにシステム全体のリグレッションテストやデプロイを行う必要がある場合、その効率性は低下します。
上の図のように、マイクロサービスはシステムを小さな独立したサービスに分割し、それぞれ独自のデータベースや通信インターフェースを持つようにする手法です。例えば、AWSを活用する場合、機能ブロックごとにAWS ECSコンテナを分割したり、AWS Lambdaで関数を分けたりすることで、将来的な追加・変更・廃止に対するシステムの拡張性を確保できます。
具体的には、一般ユーザー向け機能と管理者向け機能を最低限分割し、さらにフロントエンドとバックエンドの開発を分離するだけでも、マイクロサービス化の効果を享受することが可能です。
結びにあたって
本コラムでは、官公庁システムにおけるデザインシステムを活用した効果的な開発手法の一例について解説しました。当社は、モダンアーキテクチャに関する豊富な知識を有しており、官公庁システムにおけるWebアプリケーション開発、クラウド基盤の構築、運用保守などで多くの実績を積み重ねています。加えて、より優れたユーザー体験を実現するための工夫も怠りません。官公庁システムに関するご相談やご要望がございましたら、どうぞお気軽にお問い合わせください。
