Flash+AIRで実現した情報デザイン:直感で分かる扱える業務アプリ「セキュリティダッシュボード」
プロジェクトの詳細
富士通グループでは、情報セキュリティガバナンスを実現するために多角的な施策を設けてセキュリティ対策を行っています。セキュリティに関する情報は日々収集されるため、そのデータは膨大なものとなります。万全なセキュリティ対策を実現するには、各組織での状況を効率よく把握し、状況に応じて素早く対応していかなければなりません。そこで、同グループが開発したのが「セキュリティダッシュボード」というデスクトップ型業務アプリケーションです。セキュリティダッシュボードでは、各組織のセキュリティ情報を一元管理し、その状況を視覚的に把握できるようになっています。このアプリケーションを開発する上で重視されたのは、利用者が直感的に情報を把握し、操作できるようにすること。その実現に最適なテクノロジーとして選ばれたのが「Flash Platform+Adobe AIR」でした。

セキュリティダッシュボードの画面。現在は、富士通株式会社のソリューションビジネスグループに属する約120の特定の組織内で利用されている
本記事では、セキュリティダッシュボードの開発を手掛けた、富士通アプリコ株式会社デザインプロダクトソリューション部の石井太朗氏、谷橋美樹氏、荒嶋英幹氏、竹内裕和氏に開発背景や特徴、そしてFlash Platform+Adobe AIRを採用された理由について伺いました。

クリエイティブディレクター
石井太朗氏

インフォメーションアーキテクト
谷橋美樹氏

クリエイティブデベロッパー
荒嶋英幹氏

Flashエンジニア
竹内裕和氏
――富士通グループではどのような体制でセキュリティ情報を扱われているのでしょうか。また、セキュリティダッシュボードを導入する以前はどのような状況だったのでしょうか?
石井氏
富士通グループでは組織体制としてビジネスグループが設けられており、個々のグループ特性に応じて情報管理体制や情報セキュリティ施策が異なります。今回開発したセキュリティダッシュボードは、その中の一グループで使用されるものになります。富士通グループでは情報セキュリティ施策を多角的に行っていますが、本ダッシュボードでは下記6施策を一元的に管理し状況が把握できるようになっています。
- 情報セキュリティ活動計画および実施状況
- 情報セキュリティ活動の有効性評価
- ハードウェア資産状況
- 事件、事故モニタリング
- システム納入前監査状況
- 情報セキュリティ教育受講状況
本ダッシュボードを導入するビジネスグループは約120の組織で構成されており、それぞれにセキュリティ責任者、担当者が決められています。各責任者および担当者は自組織におけるこれら施策の進捗状況や統計結果を把握する必要があります。
セキュリティダッシュボード開発以前は、情報自体が組織ごとに散在し、また進捗状況や統計結果を示すアウトプットの表現や提供方法がバラバラでした。そのため、施策ごとの状況は把握できても、組織単位での比較やビジネスグループ全体での状況を俯瞰して見ることができず、リスク対応や投資効果を計ることも難しい状況となっていました。そこで、組織全体のセキュリティ状況を一元的に視覚化し、リスクへの対応や投資の方針決定を支援するためのアプリケーションを開発することにしました。
――開発する上で、どのような点を重視されたのでしょうか?
石井氏
このダッシュボードでは、大きく3タイプのユーザを想定しています。
- 組織における情報セキュリティ活動を統括する「最高情報セキュリティ責任者(CISO)」
- 組織内の各部門においてセキュリティ活動を推進する「情報セキュリティ担当者」
- 各部門において各種業務に従事する「一般社員」
それぞれの職制や立場によって必要となる情報が異なるため、各ユーザが直感的に理解、操作できるよう画面設計の際に配慮しています。例えば、情報の性質を踏まえて分かりやすくグラフ化したり、組織ごとの施策達成度を色分け表示するなどして、理解を促すようにしています。また、アニメーションを使って情報の構造や関連性を示すことで、次のステップの操作がスムーズに行えるようにしています。
――実際、どのようにセキュリティダッシュボードを利用するのか見せていただけますか。
谷橋氏
例えば、富士通ベビー(株)(※ダミーの会社情報です)のCISOがセキュリティ対策状況をチェックしたいとします。
まずアプリを起動すると、組織表示画面が表示されます。画面にはキューブがあり、その1つ1つの面がセキュリティ施策を表しています。面の色が緑に近いほどその施策が良い状態、赤に近いほどその施策が悪い状態です。ドラッグしてキューブを回転させ、見たい施策の面をクリックするとグラフが表示されます。

ここでは「情報セキュリティ診断結果」の面をクリックしてみましょう。相関グラフ画面へと切り替わります。各キューブが1つ1つの組織を表しており、色でその組織の状態を表しています。色の意味合いは先ほど説明したものと同じです。キューブをクリックすることでその組織へ移動することができ、スムーズに組織を深堀りしていくことができます。

人事総務本部のキューブが赤色になっています。何か問題があるということです。キューブをクリックすると、該当組織の施策グラフ画面へと切り替わります。6枚のパネルが表示されますが、それぞれキューブの面(=1つ1つの施策)となっています。他のパネルをクリックすると、そのパネルがスライドして正面に移動し、別の施策のグラフが表示されます。

前面のパネルを見てみましょう。格子状に棒グラフが並んでおり、縦軸が「定期的に行うセキュリティ診断(ウィルススキャン結果やスクリーンセーバー設定の有無など)」、横軸が「時間的推移」です。棒グラフの高さは、セキュリティ診断の結果を表しており、グラフにマウスをフォーカスすると詳細な数値が表示されます。この図の場合では、「Windows Updateをまだ行っていないPCが5台ある」ということが把握できました。
このようにして、セキュリティ対策状況をチェックすることができます。
――「情報の視覚化」というのは、なかなか難しいものだと思います。特にこのアプリケーションでは、情報をさまざまな構成要素や切り口で見せる必要があります。このような形に落とし込むのにいろいろと試行錯誤されたのでしょうか?
谷橋氏
初期段階では、テキストデータとして提供されるセキュリティ情報を一つ一つ洗い出し、マトリクス上で組み合わせて「どういった情報を出すべきか」「そのシナリオはどのようなものか」などの議論を徹底的に行ないました。そしてシナリオの中からこのアプリケーションを使うユーザが明確になっていき、ユーザごとの見たい情報や見せるべき情報に沿って視覚化を行いました。
シナリオの一例として、2つの統計結果の掛け合わせを説明しましょう。
単純に「事件、事故モニタリング」の統計結果を見ただけだと、「いつ、どの部署で、何件、どういった事件、事故が起こった」という結果しかわかりません。しかし、そこにもう一つの統計結果を掛けあわせると、一歩ふみ込んだ情報を読み解くことができます。
事故を起こしてしまった部署は、もしかするとセキュリティに関する知識と理解が不足していたのかもしれません。では、その部署に対して適切な教育が施されていたのかどうか。それは、「情報セキュリティ教育受講状況」の統計結果を掛け合わせて見ることで分かります。
セキュリティ管理責任者は、「情報セキュリティ教育受講状況」をチェックし、もし受講できていなかった場合は、すぐに教育プログラム受講を計画する必要があります。あるいはもし、教育プログラムを受講しているにも関わらず、事故を起こしてしまった場合は、受講した教育プログラムの有効性を見直したり、それ以外に必要な教育がないかを検討する必要が出てきます。
このように、一つひとつの統計結果は単なるデータでしかありませんが、相関的に見ることで、事象の因果関係を読み解くことができたり、状況を分析するときの判断材料となる、価値ある「情報」を創出することができます。
見せ方が決まった後の作業も大変でした。各組織から収集したそのままのデータでは視覚化できないため、描画処理に必要なデータを作るために元々あるデータに複雑な計算をかけ、再度データベースへ格納していくなどの作業を行っています。特にキューブの色を示すためのデータや、相関グラフ用のプロットは各組織の値を出す際に苦労しました。
――視覚化の表現として3Dを採用されています。2Dでもよさそうですが、3Dにした狙いは何でしょうか?
荒嶋氏
こういった膨大なデータを扱う場合、情報構造とビジュアルの繋がりが重要になってくると考えています。アプリケーションの思想を詰めていく段階で必然的に3Dでの表現に決まりました。特にキューブ同士の関係性や、キューブと1枚1枚の面との関係性は、このアプリケーションの中で重要な意味を持っています。そのため、キューブが面に展開するシーンや、キューブを深堀りして組織を移動するシーンなどは、関係性をよりリアルに示せるよう、3Dでのアニメーションに力を入れました。

セキュリティダッシュボードの画面。現在は、富士通株式会社のソリューションビジネスグループに属する約120の特定の組織内で利用されている

親組織から子組織一覧へ、一覧から子組織を選択する際のアニメーション。親組織のキューブの中から子組織のキューブ群が飛び出して整列します。そして、一覧のキューブをクリックする(子組織を選ぶ)と、そのキューブが拡大して表示されます。このようにしてキューブ同士の関係性や、操作性が子組織でも引き継がれていることを示しています
さらに、今回アプリケーション全体を通し、直感的なインターフェイスを構築することを目標としていました。3Dによって関係性をリアルに示すことが、インタラクションでの前後関係をユーザの中で補完させるため、より感覚的に操作してもらえることに繋がると思っています。
――今回、Flash Platform+Adobe AIRで開発されています。他のテクノロジーの選択肢も検討されたと思いますが、なぜFlash Platform+Adobe AIRを選択されたのでしょうか?
荒嶋氏
このアプリケーションで最も大切なのは、「ユーザが直感的に情報を把握し、アプリを操作できるようにする」ことです。ビジュアル面での自由度の高さやライブラリの充実度合い(3D表現にはPapervision3Dを使用)、それからUI設計のしやすさという点でFlash Platform+Adobe AIRを選びました。
また、Adobe AIRはローカルデータベースの連携ができるという点も魅力でした。このアプリケーションでは、120組織の膨大なデータとのリアルタイムな連携が必要となります。ネットワーク上のデータベースから逐一取得するような構成だと、処理/表示スピードがどうしてもネットワーク状況に左右されてしまうため、デスクトップアプリケーションとして提供することにしました。
弊社のこれまでの実績として、Flashを使用したコンテンツ制作に取り組んできたという経緯もあり、そのノウハウをそのままアプリケーション開発にシフトさせることができたため、開発面でも抵抗を感じずに進めることができました。実際、少ないスタッフながらも、短期間で完成させています。
――今後、さらにAdobe AIRアプリを開発する予定がありますでしょうか。
石井氏
今後も社内実践・検証を重ねて行き、業務アプリケーションとして機能性、デザインなど精度を高め、セキュリティダッシュボードの商品化につなげたいと考えています。
谷橋氏
今回プロジェクトに関わったことで、Adobe AIRで扱える情報の規模、表現力が見えてきました。本セキュリティダッシュボードも、今後まだまだ進化の余地があると考えています。今回は、全てのターゲットに分かりやすく情報を提供することに苦心しましたが、次回はもっと使う人、一人ひとりに合わせて有機的にデータを組み合わせたり、使い方がカスタマイズできるような業務アプリケーションを形にしていきたいと思っています
竹内氏
本プロジェクトでは主にユーザインターフェイス周辺の実装を担当させていただき、RIAにおける入力機器を通した操作感の重要性を改めて実感しました。今後は、Adobe AIRの強力な拡張性や表現力をもとに、モバイルやAR、フィジカルコンピューティングなど、既存メディアにとらわれないリッチコンテンツの可能性を追求していきたいと思います。
荒嶋氏
今回は業務アプリケーションとして開発を行なっていきましたが、今後さらに開発の精度を高め、対外的にもサービス展開していければと考えています。また、最近ではアプリケーションもコミュニケーションツール化が著しく、ユーザ同士が対話できるアプリケーションの開発にも興味を持っています。なので今後は、コミュニケーションと関連の深いモバイル端末向けの開発も視野に入れて取り組みたいですね。Adobe AIRについても、OpenScreenProjectへの取り組みなどを含め、アプリケーションプラットフォームとしての可能性に期待しています。
――楽しみにしています。ありがとうございました。
ご自身の体験談を紹介してください。 アドビカスタマーサクセスプログラムに参加.