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. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    CMS構築としての静的サイトジェネレータの活用について

    Webサイト制作や運用を行っているとセキュリティやサーバー負荷を考えな…

  2. Web関連

    いまさら聞けないスマートフォンの基礎知識

    スマートフォンとは多機能な携帯電話のことであり、携帯電話とパソコンの機…

  3. Web関連

    E-Sportsは日本で普及するのか

    突然ですが、皆さんは子どものころに将来の夢はありましたか?ミレニア…

  4. SNS関連

    その投稿、大丈夫?!SNSユーザーが注意すべき著作権とは

    昨今、キュレーションサイトをはじめとする、Webサイトの著作権問題が話…

  5. Web関連

    ミュージシャンのWebを利用したプロモーション

    こんにちは。音楽が好きで好きでたまらない杉山です。昨今、Webを活用…

  6. Web関連

    WordPressの予約公開終了・予約上書きが出来るプラグイン「Advanced Schedule …

    WordPressの素晴らしいプラグインを紹介している岸沢です。今…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    導入に迷ったら。マーケティングオートメーションツールを比較!
  2. Web関連

    納期遅延しない!仕事の集中力を持続させるオススメお菓子
  3. Web関連

    競合よりも顧客満足度を上げるには「顧客の期待値を変える」こと
  4. Web関連

    なにがいいの?なぜいいの?GoogleAnalyticsのメリットとは
  5. AI関連

    5Gの特徴
PAGE TOP