#19「ワクチン接種に関する専用ページの比較」
東京23区と海外のワクチン接種に関する専用ページを様々な観点から比較してみました！アクセシビリティ対応から、ちょっと気になるアクセス集中制御の話までざっくばらんにお話ししました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 古川
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのPodcastです。今回は、橋本と古川さんの2人でお届けします。古川さん、よろしくお願いします！
- 古川
- よろしくお願いします！
- 橋本
- 今回のテーマは、「新型コロナウイルスのワクチン接種に関する専用ページをいろいろな観点から比較してみた」です。主に東京23区のサイトを中心に調べていますが、ほかピンポイントで海外のサイトや23区以外のサイトも見てみました。
- 古川
- ワクチン接種の予約サイトは、サーバに余計な負荷をかける恐れがあるため、調査の対象とはしていません。
- 橋本
- はい。ではさっそく見ていきます！
まずは、専用ページについて、サーバー負荷に十分配慮しながらLighthouseを使ってパフォーマンスとアクセシビリティのスコアを測って、定量的な分析をしてみました。自分のPC環境で計測したデータにはなってしまうんですが、どのサイトもパフォーマンスのスコアは90点以上でしたね。 - 古川
- そうですね。情報サイトなのでテキストがメインのページですし、デザインもシンプルなので、スコアを下げる要因がほぼないっていうことを考えると、当然の結果なのかもしれません。サイトの特性上、若い人からお年寄りまで、いろんなデバイスとか、あとネットワーク環境の人がアクセスすると思うので、パフォーマンスのスコアが高いっていうのはあって当たり前な品質なのかなぁと思います。
- 橋本
- 確かにそうですね。ちなみにアクセシビリティのほうはどうでしたか？やっぱりこういった健康問題に関わる情報が掲載されているページは、Webサイトを利用するうえで身体的になんらかの制約があったり、またWebサイトの利用に慣れていない方もアクセスしないわけにはいかないので、かなり気になっています。
- 古川
- 単純なスコアだけ見ると、アクセシビリティスコアが低いサイトもやっぱりありました。スコアが低い要因はまちまちなので、とくに気になった要因についてピックアップしたいと思います。
- 橋本
- はい！お願いします！
- 古川
- まずは、画像の代替テキストです。代替テキストとはサイト内の画像が何らかの原因で表示されなかったときだったり、サイトの閲覧にスクリーンリーダーを使用するときに、代わりに提示されるテキストのことを言います。今回見ていたサイトでは、代替テキストの内容が適切に設定されていなかったり、そもそも代替テキストが設定されていない画像っていうのがありました。
- 橋本
- 今回の例で言うと、ワクチン摂取までの手順を表したものとか、あとはお問い合わせ先の電話番号が掲載されているバナーとかですかね？
- 古川
- そうですね。つまるところ画像単体で何かしら情報を持つ画像になります。意味のある画像に代替テキストが設定されていないと、さっき言ったケースのときに情報が伝えられないので、重要な情報かどうかにかかわらず、画像で情報を表すのであれば代替テキストをしっかり付与したいところです。
- 橋本
- そうですね。
- 古川
- はい。あとはデザインについてなんですが、文字と背景の色のコントラスト比が一定以上担保されていないコンテンツがありました。コントラスト比なんですけど、視覚障害を持つ方への配慮だけではなくて、たとえば明るい光の状況下の閲覧に対しての配慮にもなります。今はスマホでのサイト閲覧が当たり前になっているので、屋外でのコンテンツの読みやすさにも配慮したほうがよいかもしれません。
- 橋本
- そうですね。あとは自治体のサイトなどでよく見かけたものとして、音声読み上げとか色合い調整、文字拡大とかの支援機能を設置しているものがありました。これらの機能は、設置しただけではアクセシビリティ対応とはいえないので注意したいところですね。
- 古川
- そうですね。
橋本くんがいま言ってくれた機能がWebサイトを閲覧するときに必要な人っていうのは、多くの場合は自分のパソコンにもうソフトウェアとしてインストール済みなことが多いと思います。なので、支援機能の提供っていうのはあくまで補助的な位置づけで、利用者が所有してるソフトウェアが適切に情報をサイトから取得できるように、Web標準に基づいてWebサイトのアクセシビリティを担保するほうが望ましいのかなと考えています。 - 橋本
- なるほど。次はアクセシビリティ対応とも関連するんですけど、このページって、日本在住の外国人の方も多く閲覧されると思うんですが、その時にやっぱり気になるのがグローバル対応についてですね。
- 古川
- そうですね。グローバル対応については、未対応なサイトとか、あとは自動翻訳機能を設置しているサイトがいくつか存在していた印象です。ただ、翻訳については今さまざまな手段がありますので、この点についてはサイト自体に翻訳機能がなくても別に問題ないんじゃないかなあと思っています。
- 橋本
- Google Chromeなんかはブラウザ側で自動翻訳をレコメンドしてくれますもんね。
- 古川
- どっちかっていうと、ブラウザに搭載されてる翻訳機能が正しく動作するように、Webサイトのlang属性を適切に付与するほうが重要じゃないかなぁと思います。
- 橋本
- なるほど。
- 古川
- あと、画像化したテキストを使用していると、自動翻訳の対象にならないので、たとえば重要な導線部分などにバナー画像だけ使われていると、翻訳が適用されなくて、日本語を読むのが難しい方に伝わらなくなってしまうケースってのも考えられるので、そういうところにも注意したいですね。
- 橋本
- そうですね。翻訳については海外のサイトでこれいいなあと思った事例があって、ページの内容を、複数言語に翻訳済みのPDFを配布しているサイトがありました。これなら各言語のページを作る手間が省けて、かつ翻訳の精度を担保したまま多言語対応ができるなって風に思いました。
- 古川
- なるほど。頻繁に更新される情報でなければ、PDFにするのも手かもしれないですね。
- 橋本
- そうですよね。ほかに何か、ここ工夫されてるなーって感じたところ、何かありますか？
- 古川
- そうですね～…、予約にLINEのチャットボットを活用している自治体がありました。
- 橋本
- 最近チャットボットよく見かけますよね。
- 古川
- そうですね。問い合わせの負荷軽減のために導入するサイトが増えてきた印象ですよね。ワクチン接種専用のサイトのチャットボットの場合なんですけど、予約する時だけではなくて、予約後の状況の確認とかキャンセルも手軽にチャット形式でできるそうです。
- 橋本
- 音声通話だと応対する営業時間が限られちゃいますけど、確かにチャットボットであれば24時間無人で自動対応できるので、窓口側は応対頻度が減りますし、問い合わせる側も不明点のためにわざわざ電話をかけずに済んだりしますね。
- 古川
- そうですね。
- 橋本
- 自分が見た中だと日本での事例なんですが、兵庫県のある市で予約方法として抽選申し込み方式のシステムを構築して導入していたものがありました。
- 古川
- へぇ～。
- 橋本
- で、これもともと先着順の予約方式を採用してたみたいなんですけど、電話やインターネットのアクセスが集中したせいで予約申し込みにつながりにくい状態になっていて、そこで急遽独自のWeb抽選申し込みシステムを構築して抽選申し込み方式に変更したみたいです。それで、その仕組みを他の自治体の方にも活用してもらうために、その申し込みフォームのテンプレートをクリエイティブ・コモンズとして公開するってことも行っていました。
- 古川
- なるほど。配布するってことは、ほかの人が使いやすい技術で作られてるってことですか？
- 橋本
- そうです。kintoneとForm Bridgeで作られているみたいで、管理画面からテンプレートを読み込むだけで機能がほぼ使える状態になってるので、いわゆるノーコードで専門知識がなくても簡単にフォームを構築できて、それを使い回せるようになっている点がすごく良いなぁと思いました。
- 古川
- ノーコード開発ツールを上手く活用している事例ですね。
その話に関連してなんですけど、さきほど予約申し込みにアクセスが集中して繋がりにくくなってしまったっていうのがあったと思うんですけど、まぁやっぱりほかの自治体でも同じようなことが起こってしまったそうで、その回避策として「仮想待機室」っていう事例があるみたいです。仮想待機室っていうのは、サイトへのアクセスを、サイト上に設けた待合室でいったん受け止めて待機させて、受付システムが処理可能になったらシステムへ誘導するっていう仕組みの機能になります。 - 橋本
- 「あと何人待っています」みたいな感じで、ページに表示されるような機能ですよね。チケット予約システムなんかで見たことがある気はします。
- 古川
- それです。仮想待機室も、1台のサーバーのみで処理するのは限界があるので、CDNのエッジサーバーを活用した構成が取られるみたいです。世界中に配置されているエッジサーバー上でアクセスを受け止めるイメージですね。
- 橋本
- うーん、なるほど？
- 古川
- たとえばワクチン接種専用サイトがクラウド環境をバックエンドに利用していた場合って、アクセスの集中のピークにあわせて予約システムのサーバー台数を増やしたり減らしたりするっていうのは技術的には簡単なものになります。でもアクセス状況を見て適切にプラン選択ってのを行わないといけないので、スケーリングについてはやっぱりある程度専門的な知識が必要になります。
- 橋本
- なるほど。この仕組みを入れてCDNを活用すれば、アクセス集中緩和は比較的簡単にできそうですね。
- 古川
- そうですね。あとこういった仕組みの考え方は、ワクチン接種に関する専用ページだけではなくて、やっぱり今後いろいろなシステムにも転用できそうな感じがします。実際、CloudflareとかAkamaiなどのCDNベンダーがすでに仮想待機室のサービスをリリースしているみたいです。こういったサービスっていうのは管理画面から設定すれば簡単に利用できるものが多いので、要件が合えば活用したい仕組みのひとつだなと思ってます。
- 橋本
- なるほど。ありがとうございます！
ということで、ここまでワクチン接種に関する専用ページでLighthouseの結果や情報設計、また工夫されている点についてお話ししたんですが、古川さんはいかがでしたか？ - 古川
- いろんなサイトを観察したんですけど、採用されている技術とかがかなり勉強になりました。Lighthouseの計測結果については、よりよいWebサイトっていうのを構築するための基本的なことなので、普段から気を付けたいポイントですし、あとチャットボットについては、最近のWebサイトのタッチポイントの多様化みたいなものの一例を見た気がします。
- 橋本
- そうですね。自分は仮想待機室については大変興味深かったです。
- 古川
- 自分もです。
関連してなんですけど、最近JavaScriptを実行可能なエッジ環境を提供してるサービスに、AWSとかCloudflareとかそういう大手クラウドベンダーが相次いで参入してる印象を自分は持っていて、今後エッジコンピューティングを活用したWebアプリケーションとかサイトっていうのがもしかしたら何かトレンド的な動きになるのかなーとちょっと気になってます。 - 橋本
- なるほど。自分も注目してみようと思います！
- 古川
- はい！
- 橋本
- 最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。 また、このPodcastはApple Podcast、Google Podcast、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。
それでは今日はこの辺で！ありがとうございました！ - 古川
- ありがとうございました～！