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

関連記事

  1. Web関連

    シームレス化が進む!1つのWordPressで複数のサイトを更新する方法とは?

    ネット活用のシームレス化を考えるに辺り、運用者側も同一の管理画面を利用…

  2. Web関連

    AWSってなぁに?

    Webを公開するために必要になってくるものといえば、、、サーバーで…

  3. Web関連

    【Web制作】WordPressを使ったCMS構築の料金はいくらになるのか計算してみる

    こんにちは小森です。今回はWordpressを使ったCMS構築…

  4. Web関連

    「OK Google」の便利な使い方4つ!

    最近、CMでも有名な「OK Google」。Googleアプリがインス…

  5. Web関連

    果たしてDMPの導入は本当に敷居が高いのか?

    こんにちは!デザイナーの角田です。広告業界で大注目のDMP、ご存知です…

  6. Web関連

    リッチな表現でサイトを彩る -SVGアニメーション(線画)-

    最近ではアニメーションを用いてリッチな表現を実装しているサイトをよく見…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    「一度だけ客」をリピーターに変身させる方法(2)
  2. Web関連

    実は日本が発祥だった…!?ホワイトデーに隠された真実!!
  3. Web関連

    知らなかったはもったいない!得をするにはネットも視野に
  4. AI関連

    働き方改革で変わる労働環境。AI(人工知能)サービスが生産性向上に大きく貢献
  5. Web関連

    今、Web漫画がアツイッ!?
PAGE TOP