初めてのLP制作依頼の作業をしている、ねこらのん（@nekoranon256）です。
UDデジタル教科書体を使用したいと依頼がありました。
と、疑問に思ったのでUDデジタル教科書体を販売している『モリサワの指定フォントの使い方』についてまとめました！
この記事はこんな方におすすめ
- UDデジタル教科書体をはじめて利用する方
- web制作初心者
目次
UDデジタル教科書体とは？
UDデジタル教科書体はユニバーサルデザインです。
ユニバーサルデザインとはなんでしょうか？
ユニバーサルデザイン（Universal Design／UD）とは、文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築（設備）・製品・情報などの設計（デザイン）のことであり、またそれを実現するためのプロセス（過程）である。
引用：Wikipedia
つまり多くの人が利用できることが目的のもの。
ユニバーサルデザインに対応した書体には厳密な定義は無いようです。
-
-
参考【もりけん塾18日目】エンジニア初心者がはじめてつくるLPの手順【4day】
続きを見る
読みやすいUDデジタル教科書体などを販売している株式会社モリサワでは以下のことをコンセプトに開発されているようです。
- 文字のかたちがわかりやすい
- 文章が読みやすい
- 読み間違えにくい
次はUDデジタル教科書体も含めモリサワにはどんなフォントがあるのか、について見ていきます。
モリサワのフォント
モリサワのフォントは種類が豊富です。
- 明朝体
- ゴシック体
- デザイン書体
- 装飾書体
- 新聞書体
- UD書体
- 学参書体
- 筆順書体
上記以外にも複数モリサワではフォントがあります。
ではモリサワのフォントを使うためにはどうしたらよいのでしょうか？
次で解説していきます。
モリサワのフォント利用はTypeSquareを使う
typeSquareはモリサワのwebフォントをインターネット上で使用できるようにするサービスです。
このtypeSquareを利用しモリサワのwebフォントを使うことで、
- 読み込み速度
- 豊富な書体
- レスポンシブデザインに適応
- SEOにも貢献
などに対応してくれます。
資生堂やVOGUE、チャットワークなどの会社のHPにも利用されています！
読み込み速度やレスポンシブデザイン（スマホやタブレットからのアクセスに対応）に対応してくれるのは訪問ユーザーのことを考えると非常に便利ですね！
typeSquareの利用方法について解説していきます。
TypeSquareの使い方
typeSquareを使う手順は以下のとおりです。
typeSquareの手順
- typeSquareでアカウント登録
- ログイン画面から『プラン設定詳細』ページへ
- 『利用する書体』を登録し、「フォントを利用したいサイトのURL」を登録
- 『プラン専用タグ』にあるscriptタグをコピー
- 利用したいwebページのheadタグ内に記載
- 『cssの指定例』にあるfont-familyをコピー
- cssのbodyにfont-family:"指定書体";を記載
依頼主から無料でモリサワの書体を試したいと言われた場合は、依頼主にtypeSquareのサイトへ行ってもらい登録してもらう必要がありますね！
しかしフォントを利用したいサイトURLが必要なのである程度、サイトが完成してから依頼すると良いかもしれません…！
（他になにか良い方法をとっていらっしゃる方の記事があればまた掲載します。）
typeSquareの無料プランの注意点
typeSquareは無料プランと有料プランがあります。
はじめはどんなものか分からないので無料プランにしたいところ。
しかし無料プランには注意が必要です。
ここに注意
- 利用可能ドメインが1つ
- 利用可能書体が1つ
- 1万PV/月を超えると超過料金が発生し翌月までフォントが配信されない
1万PV/月を超えると翌月までフォントが配信されないため、他の似たフォントをあらかじめ用意しておく必要がありそうですね。
おわりに
ユニバーサルデザインであるUDデジタル教科書体を取り扱っているモリサワは非常に魅力的ですね！
しかもSEOにも適応しているので、web制作をつくるうえでモリサワの話を依頼主に提案するのも良い気がします！
もりけん塾（@terrace_tech）
Thanks：もりけんさん