Adobe ケーススタディー

富士通株式会社（以下、富士通）は、「次世代テレビ」といわれるプラズマディスプレイを、世界に先駆けカラーの実用化へと導きました。プラズマディスプレイの性能や仕組みを解説する Web コンテンツ「富士通のプラズマディスプレイ」の作成には、Macromedia Flash MX Professional 2004 が採用されています。富士通は、製品やサービスの開発において高いアクセシビリティを有するユニバーサルデザインの実践に全社的に取り組んでおり、Flash コンテンツもアクセシブルなコンテンツでありながら、富士通ブランドに沿ったデザインや演出を両立しています。

チャレンジ

• プラズマディスプレイの性能や仕組みを、直感的にわかりやすく説明するコンテンツの実現
• 富士通ブランドに沿ったデザインや演出と、アクセシビリティへの対応を両立する Flash コンテンツの開発

ソリューション

• Macromedia Flash MX Professional 2004

利点

• アニメーションによるイメージ表現にてプラズマディスプレイの仕組みを直感的にわかりやすく解説
• アクセシビリティに対応した Flash コンテンツの提供
  ・ ウィンドウのサイズを拡大縮小させることにより、自由な文字サイズの変更
  ・ 音声読み上げの順番を効率よく配置させることによる読み上げ性能の向上
  ・ 読みやすさ、見やすさを追求した配色とコントラストによる表現
  

プロジェクトの詳細

富士通は、グローバルな経営体制のもと、ソフトウェアサービス、プラットフォーム、そして電子デバイスと幅広い分野において、高い技術力を背景に信頼度の高いビジネスを展開しています。お客さまの意見や立場を最大限に尊重した、誰もが使いやすいユニバーサルデザインの実践を目標に掲げ、IT 製品やサービスの開発を続けています。富士通は、IT 製品、サービスはもちろんのこと、自社施設やワークスタイルにおいても、ユニバーサルデザインを導入し、そのノウハウをソリューションに活用することによってお客様に貢献していることも、富士通のビジネスの特徴となっています。

こうしたユニバーサルデザインに対する姿勢は、自社のホームページ制作においても顕著にあらわれています。2002 年 6 月には自社規定の「富士通ウェブ・アクセシビリティ指針」が策定され、高齢者や障害者に利用制限を引き起こさない操作法を提供すること、ユーザーの経験、知識、文化、言語などによって、誤解が生じたり、理解不能に陥らぬよう、わかりやすい情報提示を行うことで、「誰もが」利用できる Web サイトを実現しています。

2003 年に公開された「富士通のプラズマディスプレイ」サイトは、「富士通ウェブ・アクセシビリティ指針」に準拠して作成されたアクセシブルな Flash コンテンツです。プラズマディスプレイの性能や仕組みをわかりやすく解説したこのコンテンツは、富士通のプラズマディスプレイ開発プロジェクトを題材にした NHK 「プロジェクトX」の放映を控えて企画されたものでした。

高橋氏からの依頼を受け、技術情報の広報資料を題材にコンテンツのアイデアを具体化させていく役割を担ったのは、同社サイトでデザインを担当するソリューション・サービス事業部　Web ソリューションサービス　デザイナー　秋山正樹氏です。それまで、Flash コンテンツ作成の経験がほとんどなかった秋山氏が、Macromedia Flash の導入に至った背景について伺いました。

しかし、全社を挙げてアクセシビリティの対応に力を注いでいる富士通では、Flash を大々的に使用してコンテンツを作成することは当初あまり歓迎されませんでした。アクセシビリティに対応した Flash コンテンツ制作の経験がない点、コンテンツの特性を無視した無意味なアニメーションが多用されるのでは、といった懸念が、Flash の導入を躊躇させる要因となっていました。しかし、最終的には、自社のアクセシビリティ指針に準拠した操作性の高い Flash コンテンツを作ることを条件に、開発を始動することができました。「アクセシブルな Flash コンテンツを作って見せれば論より証拠でわかってもらえる」と、秋山氏は、自身のこれまでの経験を最大限に活用して開発に取り組みました。

「富士通のプラズマディスプレイ」サイトには、アクセシビリティに特化した特長が大きく分けて三つあります。第 1 に、ベクターグラフィックスの特長を活かし、ウィンドウサイズの拡大縮小によって文字サイズが可変可能になることです。Flash コンテンツは一般的にウィンドウサイズを固定する場合が多いのですが、ウィンドウサイズの変化を可能にしたため、マウスでウィンドウの大きさを変えられ、文字サイズを調整しやすくする工夫が施されています。第 2 に、タブキーの操作によってフォーカスを移動する設定ですが、マウス操作でインタラクティブな体験を提供している部分では、視覚障害者や上肢障害者には逆に操作が困難なため、あえてその箇所にはフォーカスせず、次のテキスト箇所へとフォーカスすることで、高いアクセシビリティの対応を実現しています。第 3 は、すべてのページに適切なコントラストが付いており、視認性を高めている点です。富士通で開発したアクセシビリティ診断ツール 「ColorDoctor」 を通じて彩度や配色をチェックし、デザイナーの勘だけに頼らない信頼性の高いアクセシブルなコンテンツ制作を実践しています。

開発プロセスは、絵コンテを用いたシナリオ作成に半月。社内レビュー後、Flash コンテンツ制作に 1 ヶ月費やしました。「アクセシビリティに対応するとデザイン性がなくなるという誤解を、このコンテンツで解きたかった」という秋山氏がデザイン面で意識したことは、富士通ブランドに沿った高品位で重厚感漂う演出です。プラズマディスプレイが高級家電の位置づけにあるため、若年齢層をターゲットにした流行のデザインは避けました。小さめの文字サイズ、英語での表記を避け、誰にでもわかりやすく操作しやすいインターフェイスにこだわりました。「究極のアクセシビリティを目指した Flash コンテンツ」の開発の裏側には、手本となるべき前例のない分野に手探りで進出する苦労がありました。

「Flash 自体にあまり慣れていなかった上に、アクセシビリティに特化した仕組みを埋め込まなければならなかったので大変でした。とにかく試行錯誤しながらの開発でした。文字はなるべく大きいサイズで、配色は背景と文字のコントラストをつける、などコンテンツを読みやすくするための基本は、Flash も HTML も同じです。比較的シンプルな Flash コンテンツをアクセシビリティに対応させるのは難しいことではありません。今後、図書館などの公共機関のサイトに Flash が利用されていった場合でも、誰にとっても見やすいコンテンツを Flash で十分に実現できることが証明できたのではないかと思います。」（富士通アプリコ株式会社　ソリューションサービス事業部　Web ソリューションサービス デザイナー　秋山 正樹氏）

公開後のユーザーの反響は、プラズマディスプレイが富士通によって開発されたことを知った驚きの声が多く、「見ていて楽しい」、「ためになる」と好評で、「富士通が開発した」プラズマディスプレイを印象付けることに成功しています。また予想以上に、社内からの反応が大きかったことも特徴的です。社内でもプラズマディスプレイの原理まで理解している社員は少なく、「よく勉強になった」、「自社でこういった技術を開発していることを誇りに思う」という反響が届き、直感的でわかりやすい技術説明の成果が表れています。

「今回はコンテンツの特性を考慮した結果、Flash の採用を決定しました。Flash は、HTML では表現不可能な、とても有効なツールであると思います。今後も、コンテンツの内容と誰に伝えるかによってうまく切り分けながら、Flashを採用していきます。」 （富士通アプリコ株式会社　ソリューションサービス事業部　Web ソリューションサービス　デザイナー　秋山 正樹氏）

「富士通のプラズマディスプレイ」サイトでは Flash ならではの表現や演出と、アクセシビリティへの対応を両立させたコンテンツを実現させています。製品、サービス全般においてアクセシビリティに力を注いできた富士通の経験やノウハウを、見事に昇華させたコンテンツが実現しています。

アクセシビリティ関連サイトのご紹介

富士通株式会社の Web コンテンツ「アクセシビリティに配慮した Flash コンテンツ」では、どのようにアクセシビリティに配慮し、日本工業規格 JIS X8341-3 に対応されたのかをご覧いただけます。

---

ご自身の体験談を紹介してください。 カスタマーサクセスプログラムに参加.