Web関連

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

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つのポイント

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ア ナ タ ハ ソ コ ニ イ マ ス カ? ネット上にさまよう死者のアカウント

    亡くなった後もTwitterで上でツイートし続けるといった、怪奇現象…

  2. Web関連

    WEB制作時のFTPトラフィックについて

    こんにちはサーバーエンジニアの橋本です。先日自宅で使っているノ…

  3. Web関連

    これでパソコン用メガネも必要ない?目が疲れにくいWebデザインとは

    突然ですが皆さん、クライミングというスポーツをご存知ですか?'…

  4. Web関連

    ネットニュースから分かる事

    ニュースはテレビでもラジオでも、もちろん新聞でも見ることが出来ます。…

  5. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方

    Webに関わる方ならご存知の人が多いと思いますが、W3CというWebに…

  6. Web関連

    ホームページ制作会社も注目するLINE公式アカウントがおもしろい!

    みなさんLINEは利用していますか?今や友人や家族とのコミュニケーショ…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    Web制作会社における「スマートオフィス」
  2. AI関連

    AI(人工知能)を活用したアレルギー対策
  3. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方
  4. AI関連

    【人工知能・AI×Web】今すぐマーケティング本を閉じて、AIに全部任せる新サー…
  5. Web関連

    構成でコラムの「土壌」を整えよう!
PAGE TOP