Webサイトで、ボタンのアイコン画像が化ける原因
先日、WordPressを構築してみたのですが、記事の投稿や設定をする画面で、ボタンのアイコン画像がハングルの一部になっていました。
WordPressが壊れたのかと思い、あれこれ試してみたのですがWordPress自体を初めて触ったので分からず、後ですることにしようと思っていました。
ところがその後、ツイッターサイトを開くとリニューアルしており、UIが変わっていたのですが、そこのアイコンまでハングルになっていたのです。ツイッターのサイトリニューアルはもっと前だったのですが、OSやブラウザによっては数日前からの変更となったようです。
パソコンが壊れてしまったのかといろいろ考えていたのですが、なかなか原因が見つかりませんでした。
飛び飛びですが、数時間悩んでしまいました。
原因はこれでした。
簡単に言えば、絵文字ですね。
Webフォントの仕組みを使うことで、独自の画像をフォントとして登録して使うわけですね。
アイコンをボタンごとに画像ファイルとして用意して、ブラウザで読み込ませるよりも無駄がなくていいらしいのです。
ツイッターもリニューアルでこの方法をとることにしたようです。
ツイッターのサイトからフォントデータを読み込んで、文字コードを指定するとその文字コードに対応した画像が表示されるわけです。
ところでブラウザの設定でWebフォントを使わないように設定していると、今回の例ですとツイッターからフォントデータが使われません。
PC内のフォントから文字コードに対応する文字が出てきてしまったわけです。日本語フォントに対応した文字が無かったのでハングルが出てきたのでしょう。
これってちょっと困りますよね。
アイコンを表示するために、ページ全体の文字フォントも普段使っているのとは違ったものを表示させなくてはいけなくなるのです。
通常であれば、個人的な好みの問題ですが、もっと重要なことに気が付きました。
さらに言えば、この方法だとよく考えた仕組みにしないと、視覚障害者の方が困るのではないかと思いました。
視覚障害者や老人が見やすいフォントがあるそうです。
一般には文字がなめらかな方が綺麗に見えていいと言われていて、アンチエイリアスなどを効かせてエッジをぼかしていたりしますが、ぼかすことで文字の肉厚さが失われます。
目が悪い人には、ぼかすよりも文字を太くしたり、エッジをはっきりさせたりしたほうが読みやすいようです。
ユニバーサルデザイン(障害者の健常者の区別なく使えるデザイン)のフォントなどもあるらしく、ということはこれを使っている人も多いという事でしょう。
とすると、Webフォントを使う設定にすることで、このフォントよりもWebフォントやサイトが指定したフォントが優先されてしまい、目が悪い人が読みやすいフォントではページが見られなくなるという事ですよね。
ボタンアイコンを表示させるために、読みやすい文字で見ることが犠牲になるとしたら問題じゃないかなと。
Webフォントを使った面白いアイディアもありました。
コピーして貼り付けてみると、コピーしたのとは違った文章になっていますね。
普通は文字の書体を変えたいので、同じ文字コードには同じ文字を対応させます。
つまり、ゴシック体の「あ」と明朝体の「あ」は普通は同じ文字コードです。
しかし、これをわざと別にすることもできるので、「あ」の文字コードに「い」の文字を対応させることが出来るわけですね。
なので、コピーするとWebフォントを使って表示されていた文字とは別の文字が出てきた、というわけです。
同じ理由で、Webフォントを使わない設定にしてあると、最初から別の文章が表示されます。
今の話はともかく、アイコン画像を表示させつつ、主要な内容についてはユーザが設定したフォントで表示するようにできないのはちょっと問題ではないかと思います。
できないうちは画像を表示させるためにフォントを使う方法はやめて欲しいと思います。
この問題はそもそも確認されているのでしょうか？
サイトを作っている人やブラウザ開発に関わっている人は認識しているのでしょうか？
ネットでちょっと調べてみた限りでは見つかりませんでした。
まあ、問題になっていないからこの方法が採用されてるんでしょうね。
弱者にやさしい環境云々の話は置いておくとしても、個人的にはやめて欲しいと思います。
追記
ツイッターを調べたら、アドオンが紹介されていました。
インストールした後、aと書いてあるボタンを押すとWebフォントの使用を切り替えることができます。
ホワイトリストなのかブラックリストなのかわかりませんが、サイトごとにWebフォントを使うかどうかを設定できるアドオンがあるといいのですが。
