選択中の場所がはっきり見えるように、表示を整えました

2026年7月31日

はじめに、今回の改善で何が良くなったかを1行で。キーボードや読み上げ機能で操作される方が、「いま画面のどこを選んでいるか」をひと目で見分けられるようになりました。これまでページによって見え方がばらついていた「選択中の枠」を、サイト全体で同じ見た目にそろえています。

今回のアップデート内容

選択中の枠を統一しました：色・太さ・要素との余白・角の丸みを、サイト全体で同じ基準にそろえました。
枠が見えなくなっていた箇所を直しました：よくある質問の開閉部分などで、枠が背景に隠れて見えない状態になっていました。表示位置を調整し、はっきり見えるようにしています。
案内の重複を解消しました：Tabキーを最初に押したときに出る「本文へスキップ」が、続けて2回表示される状態になっていたため、1回に整理しました。
枠が二重に出ていた状態を、1本に整えました。
毎日の自動確認に、実際に操作してみないと分からない項目を追加しました（キーボードでたどれるか、枠が隠れていないか、拡大表示や文字間隔を広げたときに崩れないかなど）。

なぜ改善したか

Bloomy eSIMは、日本産業規格「JIS X 8341-3:2016」の適合レベルAA（国際規格 WCAG 2.1 のレベルAA相当）に準拠することを目標に、サイトを設計・改善しています。毎日の自動確認も続けていますが、自動で機械的に判定できるのは全体の一部です。「実際にキーボードで操作したときにどう見えるか」は、動かしてみないと分かりません。

実際に確かめてみると、枠の色がページによって異なっていたり、青を基調とした画面の上に青い枠が出ていて背景に埋もれていたりする箇所がありました。そこで枠の色を黒に統一し、要素との間に少し余白を取り、角の丸みも要素の形に合わせています。目立たせるための強い装飾ではなく、必要なときだけ、迷わず分かることを基準にしました。

ご利用のうえで便利になること

マウスが使いにくい方、手元が不安定な方、画面を拡大してお使いの方にとって、「いまどのボタンを押そうとしているのか」が分かりやすくなります。プランを比較しているとき、設定の手順を読み進めているとき、お問い合わせフォームを入力しているときなど、迷いやすい場面で効いてくる部分です。読み上げ機能をお使いの場合も、最初のTabキーで本文へ移動する案内が1回に整理されたことで、余計な操作が減ります。

Bloomyらしくこだわった点

強く目立つ枠は分かりやすい一方で、画面全体の落ち着きを損ないます。色は黒に統一しつつ太さは控えめにし、要素との間に少しだけ余白を持たせました。角の丸い要素では枠も同じように丸め、四角い枠が浮いて見えないようにしています。細かい部分ですが、こうした積み重ねが「ちゃんと考えて作られている」という安心感につながると考えています。

あわせて：スマホの操作に不安がある方の、渡航前の準備

今回の改善に関連して、操作に不安のある方が渡航前にしておくと安心なことをまとめます。いずれも現地に着いてからでは慌てやすい部分です。

eSIMは出発前に端末へ入れておく：Wi-Fiのある落ち着いた場所で追加まで済ませ、現地では回線をオンにするだけの状態にしておくと、当日の作業がほとんどなくなります。Bloomyでは届いた設定リンクを1タップするだけで追加でき、QRコードや手動入力は別の端末で設定する場合の代替としてご用意しています。手順は設定ガイドにまとめています。
端末が対応しているかを先に確認する：eSIMは対応端末でのみ使えます。購入前に対応端末の確認で調べておくと、選び直しの手間がありません。
文字サイズと明るさを調整しておく：屋外の明るい場所では画面が見づらくなります。出発前に文字を大きめにしておくと、現地で設定画面を読むときに楽になります。
つまずいたときの見る場所を決めておく：機内モードの解除、データローミングの設定、回線の選択——確認する順番を知っているだけで落ち着けます。つながらない時の対処を、出発前に一度眺めておくことをおすすめします。

今後の改善予定

自動で確認できる範囲は日々広げていますが、実際の支援技術（読み上げソフトなど）を使った確認は、引き続き人の手で進めています。読み上げの順番や案内の分かりやすさなど、機械では測れない部分が残っているためです。「準拠しました」と早く言い切るより、確認を続けて正直にお伝えする姿勢を大切にしていきます。