Web関連

知っておかないと損をするWebフォントとは!

0

Webフォントとは何でしょうか?

この世にフォントはたくさんあります。
紀元前から人間は意思疎通を行うために文字を持ちました。最初は文字というよりは絵のようなものでした。その後、改良を重ねていくことで現在の文字へと進化し、人間は文字を持つことで文化を持ち、情報や歴史を残してきました・・・

と小難しいお話を書いてみましたが、それは置いておいて・・・

Webフォントはフォントすべてを指すわけではございません。

そもそもWebフォントって何?

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、うんたらんたら・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・分からない。

wikipediaより引用

難しくてちんぷんかんぷんですね。でも、デザインをするだけなら基礎さえ抑えておけば大丈夫です。

まずはWebサイトでよく使われる文字を抑えておきましょう。

 

3つのフォント

PCのWebデザインを制作するときには大体以下の3つの中からフォントを選択します。

・メイリオ
・MSPゴシック
・ヒラギノ角ゴ

上記の3つは主に一般的なWebサイトで使用されているフォントです。

フォトショップでデザインする場合はよりWeb上で見ているものに近づけるためにアンチエイリアスは鮮明にしておきましょう。ただし、MSPゴシックに関しては鮮明にするのはNGなので、要注意です。

ちなみにスマホサイトの場合はヒラギノを使用します。iPhone ユーザーが多いため、iPhoneで表示できる日本語フォントがヒラギノなので、ヒラギノを使って制作します。

さて、ここで要注意なのは「画像化」です。
デザインを考え、h1やh2を画像で制作し、Webにアップする方もいらっしゃると思います。私もそうすることは多いです。

しかし、メイリオとMSPゴシックは画像にしてはいけない文字なので、デザインをする際は注意する必要があります。
どうしても画像もサイト内のテキストのフォントも統一させたいのならば、ヒラギノで制作するのが良いと思います。

最後に・・・

フォントは選択次第でデザインを大きく変化させますので、慎重に選択する必要があります。

私もとてもその点には苦労させられます。でも、ユーザーに見ていただくデザインだからこそしっかりと考える必要があるのです。
そう考えると文字ひとつ選ぶのだって面白くなると思いませんか?

以上、デザイナーの村井がお送り致しました。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

Webデザイン制作

スマートフォンサイト制作

関連コラム

Webデザイナーなら知っておくべきWebフォントの使い方

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

0

WEBサーバーの設定に便利な.htaccessの使い方前のページ

iPhone 6sが気になる!!次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    javascriptの流行りの紹介

    今回は、javascriptの流行りのなかで、まだまだ今後も流行ってい…

  2. Web関連

    【SDGs】いつでもどこでも質の高い教育は受けられる

    1)SDGsとは?皆さん、こんにちは。SDGsというものをご存…

  3. Web関連

    パンフレット・カタログ制作とホームページ制作を別会社に依頼するリスクは?

    ティファナではホームページ制作の他、パンフレット制作も行っています。…

  4. Web関連

    若い者には負けないぞ!Webでおじいちゃんたちが大活躍!

    あなたのおじいちゃんは今何をしていますか?最近、「マイ・インターン」…

  5. SEO関連

    【Web制作関連コラム】ユーザービリティーとSEO対策の関係性

    SEOに興味があり最近色々な本を読んで勉強しています。なぜ、SEO…

  6. Web関連

    新型コロナウイルスってなんなんだろう?取るべき対策は?

    日本に限らず世界中でその猛威を振るっている新型コロナウイルス。その…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. SNS関連

    SNSボタンがよく押される場所はどこ?
  2. Web関連

    使いすぎ!?目のショボショボを防ごう!!
  3. Web関連

    部屋の片付け -どうしても後回しになっちゃう人へ-
  4. Web関連

    採用情報の登録系業務の98%はRPAにお任せ!求職者により多くの魅力を伝えよう!…
  5. Web関連

    今や主流?モバイル・ファーストのメリットとは?
PAGE TOP