スポンサーリンク

web用 UDフォント・ユニバーサルデザインフォントの選択

UDフォント
スポンサーリンク
UDフォント
スポンサーリンク

ディスレクシアにも優しいwebフォントはあるか?

このブログは、無料webフォントである「みんなの文字」を使用しています。

いくつか検討しましたが、やっぱり「無料」と言うのには勝てません。

ディスレクシアの話を多く扱っていこうと思いましたので、
まずは文字から改良していこうと考えたからです。

それまで、私はユニバーサルデザインの事を考えることはありませんでした。
最近は、目にとまることがありますが、まだいまいちピンときません。

幸せなもんです。

むすこに、このブログの文字を見せた時に「見やすくなったかも」と言ってくれました。

少しでも改良されたかと思うと少しうれしくなりました。

但し、webフォントは基本的にクラウド配信サービスなので、画面表示が遅くなります。PageSpeedは、ほぼ点数が落ちます。それは覚悟の上で利用することが必要です。

私は画面表示の速さが目的でこのブログを始めた訳ではありません。すみませんが、管理人のわがままをお許しいただければ嬉しく思います。

このブログを通して、同様な症状の方に見ていただけるよう、私もUD・UIの勉強をしていこうと思っています。

検討したweb用UDフォント

「TypeSquare」 (モリサワ)-有料

windows10PC版ですと、「UDデジタル教科書体」が無料で使えるのでMSWord等では今これを主に使うようにしています。

私には馴染みがあったので、webフォントはこれにしようと思っていました。

TypeSquare」は有料のサービスですが、ありがたいことに1書体、1URL、1万PV/月までは無料で使えるそうです。ここは全くの零細ブログですので、私にはぴったりだと思い利用しようと考えていました。

WordPressの使用方法も難しくはありません。まずは「TypeSquare」に登録してログインした後に、使用ブログURLとフォントを登録します。その後は、、、

  1. 「プラン専用タグ」をコピーします
  2. WordPressの管理画面から「外観」>「テーマエディター」を開く
  3. 「テーマヘッダー(header.php)」の中にプラン専用タグをペースト
  4. 「スタイルシート(style.css)」の中に「font-family: “UDDigiKyokasho R”;」を記述して指定する。

以上こんな感じでしょうか、もし「header.php」のファイルが「テーマエディター」に見当たらない場合は、FTPソフトで親テーマからファイルをダウンロードして配置するなどして下さい。スタイルシートの書き方は割愛いたします。

Webフォント TypeSquare
モリサワのWebフォントサービスTypeSquareは多彩で魅力的な書体でWebサイトの表現の幅を広げます。大規模サイトや、Webサービス・Webアプリへの導入には特別なプランをご提案します。
教材の書体を変えるだけで子どもの読解力が上がった!? モリサワに聞く「フォントのユニバーサルデザイン」(1)
まだ国内に1つしかないUD系の教科書体について取材しました。

FONTPLUS -有料

イワタのUDフォントが使えるからFONTPLUSも魅力的なサービスかと検討しました。

料金は、1,000円/月 10万PVまでです。

UDフォントは68書体ありました。(2020年1月15日現在)

このサービスの設定も、「<header>」に指定スクリプトを埋め込み、CSSでフォントを指定するタイプです。

Webフォント・サービス FONTPLUS | ためし書き
「Webフォント・サービス FONTPLUS ためし書き」は、FONTPLUSが提供する豊富なWebフォントを「選んで」「変えて」「共有して」と、無料であれこれ試せるサービスです。

Adobe Fonts -AdobeソフトCC等の契約が必要

Acrobatだけは契約しているので、Adobe Fonts付いてました。単体プランでも利用が可能なそうですね。Acrobatは仕事で毎日利用してますので必須ソフトのひとつです。Adobeさんから前バージョンがアップデート切れするタイミングで割引契約のお知らせがきてそれを利用しています。但し、契約を切ると使えなくなるそうです。(あたり前ですね)

web用のUDフォントは5種類ありました。

設定も前者同様のスクリプト埋め込み、CSS指定タイプです。

次の候補にとも考えています。

adobe-fonts-logo--white
Search for fonts by foundry, designer, properties, languages, classifications, and more. Explore the latest additions to our font library at Adobe Fonts.

みんなの文字-WEBフォントは無料

WEBフォントは無料と言うのが気に入りました。

イワタと電通さんが作っているみたいです。

今日、都バスに乗ったら「みんなのサイネージ」と言うデジタルサイネージコンテンツが流れていました。これにも、「みんなの文字」が使われていました。

みんなのサイネージ - 電通
事例紹介│見やすさに配慮して、デジタルサイネージ専用にコンテンツをユニバーサルデザインしたものです。

さすがに電通さんが関わっているだけに、身近な事例も多く採用されているみたいです。

活用事例 | UCDAフォント みんなの文字
活用事例 「みんなの文字」は、大切な情報の伝達に最適です。 生命・財産に関わる重要情報を伝達する帳票や説明書、また企業のIR情報、名簿などあらゆるところで活かされています。 宇都宮市 通知物 東急百貨店 東横店 案内サイン 世田谷区立千歳温水プール 案内サイン 住宅金融支援機構「フラット35」 パンフレット 滋賀銀行

設定方法

  1. WEBフォント登録
  2. scriptタグを設置(認定シールが掲載されます)
  3. CSS設置し、フォントを指定します。
  4. 完了

指定のタグやCSSはメールで本登録されたことを知らせるメールに記載されていますので、そのメールを捨てずにアーカイブしておけばよろしいかと思います。

ディスレクシア対策になるのか?

モリサワさんのサイトによると、そもそもUDフォントに対応した文字には、厳密な字体の定義はないそうです。

フォント制作会社のデザイナーが苦労して作成して提供していただいているものだと認識しておりますが、そのデザイナーの考え方一つで決められてしまうものでもあるかと思います。そのフォントがUDに合うかどうか多くの検証を重ねていただくことがこれからも必要なのかと考えています。

ディスレクシアはその症状が、十人十色と言われています。今採用したフォントがゴールと思わず、私の方も検証を重ねて行こうと思っています。

それと、「老眼」な私はかなり見やすくなったような。。。。

まとめ

今回は無料であることが決め手でありました。すみません。。。

他にも検証し、良いものがあればチェンジしてみようと思います。

しかしここまで書いていてまだUDフォントについていまいちピンときません。
このことも後日まとめてみようと思います。

追記

追記:2020年8月16日

このブログのフォントは、モリサワさんの「UDデジタル教科書体」へ変更しております。

すっきり見やすくなっていて、気に入っております。

まだまだ有料に成るほどのページビューではないのですが、利用させていただいております。

UDデジタル教科書体に変更
メインフォントを変更してみました。雰囲気だけじゃなくて、本当に見やすいブログを目指して!

コメント

タイトルとURLをコピーしました