webサイトのイメージを作るのに重要なフォント選び。
今回はフォント選びの幅が広がるwebフォントについてご紹介いたします。
webフォントとは？
これまでは各端末に元々入っているフォント(デバイスフォント)で表示されていましたが、閲覧する端末によって入っているフォントが異なるため、指定したフォントで表示されないことがありました。
しかし、webフォントは、サーバーやクラウドに置かれたフォントを読み込ませてサイト上に表示させるため、ユーザーの閲覧環境の影響を受けずに、統一したデザインで表示することができます。
webフォントのメリット・デメリット
webフォントを使うメリットとしては、
- どのデバイスでも統一したデザインで表示できるどのデバイスでも統一したデザインで表示できる
- テキスト画像を使う必要がなくなり、SEO対策になる
- メンテナンスが楽になる
これまではフォントデザインを統一したいと考えた場合、文字を画像にしていた方も多いのではないでしょうか？
しかしテキスト画像をなくしてwebフォントにするだけで、デザイン性を維持しながらSEO対策ができ、更新の手間がかからないというメリットが生まれます。
一方でデメリットもあります。
- 利用料がかかるフォントもある
- 表示速度が遅くなる場合もある
画像読み込みと比べればデータ量は少ないものの、webフォントもデータを読み込む必要があるため、表示速度が遅くなる可能性もあります。
しかし、近年では改良も進み、以前に比べれば読み込み速度は速くなったようです。
また、有料のものもあるため、導入するには費用がかかる場合があります。
webフォントを使用したサイト
webフォントとは何かが分かったところで、実際にwebフォントを使用したECサイトを見てみましょう。
1.THE COFFEESHOP
https://www.thecoffeeshop.jp/online_shop/
こちらのサイトでは英字部分に「Montserrat」というフォントを使用しています。
少しどっしりとした安定感のあるフォントで読みやすく、見出しやメニュー部分に効果的に使われていますね。
コーヒーのおしゃれなイメージに合っています。
2.ラボ出版
こちらのサイトでは「A1ゴシック」というフォントが使われています。
ゴシック体でありながら角がとれており、やさしい印象に。しっかりと読みやすいのも特徴です。
やさしさ、親しみやすさを出したい時に使うといいかもしれませんね。
3.生活購買店 reed
こちらのサイトでは日本語部分は「筑紫オールド明朝 Pro」、英語部分は「Adobe Garamond Pro」が使われています。
どちらも繊細なやわらかなデザインで、ナチュラルなテイストによく合っています。
まとめ
いかがでしたでしょうか。
今回紹介したwebフォントはほんの一部ですが、うまく活用することでブランドイメージを向上させることができそうですね。
webサイトでのブランディングを考えている方は、導入してみてはいかがでしょうか？