東京 台東区のホームページ作成 EC ≫ クリエイターブログ
CompanyWebsite createContact

エグゼクティブクリエイション トップページはこちら お電話での無料お見積りは 03-5839-2512当サイトメールフォームからの無料お見積りはこちら

ホームページを活用し 売上・成果を上げる方法満載

【ホームページ制作技術系】webページ上でフォントを変更する方法

昨今、ホームページはPC、タブレット、スマートフォンや場合によってはゲーム機など多種多様な端末から閲覧される時代となってきました。
そのような中、最近では書体(フォント)を通常とは異なるものへ変更し、ホームページ制作を行う場合があります。
 
「通常使用とは違うフォントを利用する際、どういった方法があるか?」について注意点なども含め、ご紹介いたします!
 
 

そもそも書体とは?

普段、PCをネットサーフィンのみで使用しているとあまり意識する機会がないかもしれませんが、どのPCやどの端末にもテキストを表示するための「書体のセット」があらかじめ複数用意されています。
 
例えばWord等のソフトを使っている時に「MS ゴシック」、「MS Pゴシック」という名前を見たことがある方も多いのではないでしょうか?
 
これが「書体のセット」です。書体は文字を表示するために、すべての文字パターンが含まれた大きなファイルになっていて、文字の形状はファイルごとに様々です。
 
筆で書いたような文字であったり、読みやすいカッチリした文字だったり、あるいは文字というよりは記号に近いようなデザインの書体まであります。
 
 

ホームページ制作時に使用するものは?

行うこと自体は、そこまで難しいものではありません。CSSによって書体を指定するだけです。
 
 
ただし、ここで大きな問題が発生します。
書体を指定すると言っても、端末ごとに含まれている書体の種類が異なるのです。
 
例えばWindowsなら
~VISTAまでは MS ゴシック / MS 明朝 などで、
~WIN7までは 上記に追加で メイリオ。
WIN8以降~ 上記にさらに追加で 游ゴシック / 游明朝。
 
MAC/iOS ヒラギノ角ゴ / ヒラギノ明朝 / Osaka など
 
Androidにいたっては特に決まった書体を持っておらず、メーカーごとに全く違う対応がされているというのが現状です。
 
 
見る人が持っていない書体を指定するとどうなるか?エラーこそ起こしませんが、命令自体が無効になります。そのため、あまりに変わった書体を指定するのは現実的ではありません。
例として現在ご覧になられている、こちらの記事自体のフォントを調整しています。
 
Windows8/10は最新の「游明朝」、Windows7とこちらより古い端末は「HGP明朝B」。
そしてMAC/iOSのば場合は「ヒラギノ明朝」、Android端末は「UD新ゴM」といった書体が表示されるようになっています。
 
上記のように通常使用しているフォント以外のものを指定する場合、端末ごとに使えるフォントを予め把握しなければなりません。
 
 

WEBフォントにもメリット、デメリットがあります

では「何とかして全員が同じ書体でホームページを閲覧できる方法はないか?」といった疑問が浮かびますが、方法はあります。
「WEBフォント」を使用するのが現状では一般的です。
 
WEBフォントはサーバ上に用意された書体データを読み込み表示します。それぞれ手元の書体が違うなら、それらは無視しサーバ上のものを使い、この問題を回避するといった趣旨のものです。しかし、こちらも少し問題があります。
 
1つは「容量面」です。
日本語の書体ファイルは、英語のそれと比べ文字数が圧倒的に膨大です。英語のアルファベット26文字+記号と比べて、日本語はひらがな、カタカナに加えて第二水準漢字まで含めると、ゆうに2000文字を超えてしまいます。まともにこのようなファイルを毎回読んでいては、PCはともかくスマホでのネットサーフィンもとても快適とは言い難いものになってしまいます。通信量もかさみます。
 
もう1つは、ライセンス面です。
基本的に書体ライセンスというものは「PC上で使用する目的」へ許可を得たもので、ここにWEB上で使用するといった用途は含まれていません。つまり手元の書体をそのままサーバへアップロードし使用すると、多くの場合、利用規約に違反します。
 
これらをクリアするには、書体を販売しているメーカー各社が用意しているWEBフォントサービスを利用するのが無難です。月額制であったり、あるいは買い切りやアクセス数に比例した従量制と、支払い方法/金額も様々で状況にあったものを選ぶのがベターです。
 
また書体の中で必要な文字だけを抜き出して再形成してくれるサービスも存在し、上記容量の問題がクリアになります。
その他、レンタルサーバによっては書体メーカーと提携し、ある程度の制限内でWEBフォントを使える機能が提供されています。ホームページ運用をされている方は、利用レンタルサーバの機能を一度確認される事をオススメします。
 
 
【今回の記事の執筆者】
株式会社エグゼクティブクリエイション
取締役 兼 WEB制作部責任者
WEBデザイナー/マークアップエンジニア:太田
 
ohta-pic.jpg
 
「どんな事でも絶対に役に立たないことはない」持論のデザイナー兼コーダー。1980年6月生まれ。東京在住だがソウルは名古屋民。
 
学生時代から旺盛な好奇心で、人一倍様々な技術や知識に触れる。それによって人一倍の挫折と人一倍の立ち直りを繰り返す。その結果、積み上げ続けた横方向に広い知識と経験で、ホームページ制作(デザイン/コーディング/ライティング/SEO)と印刷関連の知識を併せ持つ、制作部最強の何でも屋として君臨。web制作のプロフェッショナル。ある意味努力の人。弱点は頑張ってる割に伸びが悪い画力。
 
 
とにかくどんなくだらない事でも、目や耳に入ったものは極力覚えておこうとする情報社会の大食いチャレンジャー。「それ何の役に立つの?」と聞かれても、「さあ?でも知ってないと絶対に役に立たないよ」と返すのが基本スタンス。
 
得意なこと:ルーチンワークの効率化
嫌いなこと:ルーチンワーク(だから効率化にうるさい)
一言:知らないことは機会を逃すことと同じ
 
---------------------------------------------------------------

ホームぺージ制作を行うなら

エグゼクティブクリエイション!
---------------------------------------------------------------
◇web制作/管理についての
 ご連絡は下記までどうぞ
TEL:   03-5839-2512
FAX: 03-5839-2513
topshitabana03.jpg
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
 

 

まずはお気軽にお電話下さい!是非ホームページ作成、リニューアル等に関しお問い合わせ下さい。
メールでのお問い合わせ:info@mail.exe-creation.com
お電話でのお問い合わせ:03-5839-2512【受付】10:00~18:00(土日・祝祭日除く)
東京台東区のホームページ制作会社/株式会社エグゼクティブクリエイション
〒111-0052 東京都台東区柳橋2-5-6 TOMビル3F
TEL: 03-5839-2512 / FAX: 03-5839-2513