Webサービス/ITツール

誰でも簡単・無料でホームページの見た目を美しく！

こんにちは！
もうこちらの地域は桜も散ってしまい結局花見には行けずに終わってしまいました。
ローカルなネタですが、この時期は「タイヤ交換は済ませましたか？」という会話があちらこちらで飛び交います。
雪の降る地域のあるあるかもしれないですね。

そんな話はさておき、今日はホームページの見た目のお話です。

一昔前まで、ホームページで文字を書くと決まった書体でしか表現ができず、アウトラインがかかっていないギザギザした文字しか出ませんでした。その当時よくクライアントに「文字の書体が汚いのはきれいにできないの？」とよく質問を受けていました。
その当時の解決方法は、「文字を画像にする」という原始的な方法できれいな文字を表現していました。パソコンの中にあるフォントであれば綺麗に文字が表現できるので、それを画像にしていたんです。
ですから、ここの文字は綺麗なままの文字で表現しないとデザイン上おかしいなという時は全て画像に置き換えて、それ以外はホームページそのままのフォントにしていました。
でも、その方法はgoogleからみると画像でしかないためにSEOという観点からはあまりよくないのも事実でした。

でも「ウェブフォント」を使えば、とても簡単でなおかつ無料でこの問題を解決する事ができるようになりました

ウェブフォントとは？

“元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。”
出典：wikipedia https://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

閲覧する端末（パソコンなど）にインストールされているフォントを呼び出していたのに対して、ウェブフォントは、あらかじめ用意しておいたフォントをサーバー上に置き、それを呼び出す形で表示する技術を「ウェブフォント」と言います。

ウェブフォントを使用する方法

ウェブフォントを使用するには、大きく分けて二通りの使用方法があります。

自分でウェブフォントを作成し用意する方法

自分でフォントを作成してサーバーに置いて表示させる方法です。しかし、これはブラウザとそのブラウザのバージョンによって対応状況が違っていたため複数のフォント形式を用意するという大変なものでした。
例えば、古いインターネットエクスプローラー（IE4～IE8）ではEOTファイルしか対応していませんし、IE9からはWOFFも対応するようになりましたが、他のブラウザでは対応していませんので、あらかじめ複数のフォント形式をサーバーに置いて、CSSでそれぞれ指定する方法がとられていました。

具体的に使用するCSSの書き方は
@font-face {
font-family: ‘フォント名';
src: url(‘(フォントを置いてある場所)/○○.eot?') format(‘eot'),
url(‘(フォントを置いてある場所)/○○.woff') format(‘woff'),
url(‘(フォントを置いてある場所)/○○.ttf') format(‘truetype'),
}
p { font-family: 使いたいフォント名, serif; }
という形でフォントを指定して使用します。

ここまでしないと、WEBフォントを使用できないのでは簡単・便利とはいいにくいですね。

googleのWEBフォントを利用する方法

そこまでしなくても、今ではとても簡単にウェブフォントを使用できるWEBサービスが提供されています。その一つがgoogleWEBフォントです。
日本語に対応しているフォントはまだ少ないですが、非常に簡単に、なおかつ無料で利用できるのでとても便利です。

  • まずはHTMLを準備します。
  • 下図のようにCSSリンクを設定します。（例ではNOTO SANS Japaneseを設定しています）
  • 自身で用意したCSSに設定したい箇所にfont-familyを記述します。（例ではNOTO SANS Japaneseを設定しています）

    これだけで設定は完了です。
  • 適用前

    適用後

とても簡単に、綺麗な文字になっています。
今回はNOTO SANSというフォントで設定しましたが、他にもありますのでいろいろ試してみるといいかもしれません。

その他のWEBサービスを利用する方法

例えば
モリサワが提供している
TypeSquareでは、かなり豊富なフォントが提供されています。
ただし、月間PVが10000以上になると有料となるようです。あと、複数サイトでの使用もできないようですので、サイトの利用方法に合わせてチョイスが必要かもしれません。
その他にも
FONT PLUSなども有料ですが、WEBフォントを提供しています。

まとめ

ホームページの中の文字も、そのサイトのデザインやコンセプトを左右する重要な要素の一つであると考えると決しておろそかにできない部分です。一昔前に比べるとその方法がはるかに簡単に場合によっては無料でWEBサービスとして提供されていますので、是非積極的に取り入れてみてはと思います。

関連記事

コメント

この記事へのコメントはありません。

TOP