インターネットの基礎知識ホームページ上の文字のフォント(書体)に関する豆知識いろいろなホームページを見ていると、さまざまなフォント(書体)の文字を目にするかと思います。その文字、実は、画像で作られているものと、そうではないものがあるのをご存知ですか?今回は、ホームページ上で見かける文字について、知ると納得!な豆知識をご紹介したいと思います。大きく分けると「画像フォント」と「デバイスフォント」の2種類があります。画像フォントとは?その名のとおり写真のデータと同じように、「画像ファイル」の形式で表現されている文字のことです。Photoshopなどの画像編集専用のソフトを使って作成されており、ちょっと変わったフォントやさまざまな大きさ、細かい装飾を施した文字など、凝った表現をすることが可能です。画像ファイルなので、閲覧しているパソコン環境に左右されず、同じ表現で見せることができます。閲覧しているパソコンが「Windows」でも「Mac」でも、「Windows」の「バージョン」が違っていても、画像ファイルだから同じように表示されます。実際のページはこちらデバイスフォントとは?ホームページを見ていると、以下のように、マウスのカーソルで選択して、コピーすることができる文章を見たことありませんか?平たく言ってしまうと、このようにコピーできる文字のほとんどが「デバイスフォント」です。※末筆で紹介している「ウェブフォント」の場合もあります。「画像フォント」と比べて見た目がシンプルですよね。実は、このような「デバイスフォント」は「画像フォント」と異なり、凝った表現をすることができません。「デバイスフォント」は、ホームページを見ている人それぞれの端末(デバイス)にあらかじめインストールされているフォントのことを指しており、見ている人の端末にインストールされていないフォントでは表現することができないのです。そのため、パソコンが違えば、見た目も違っている可能性があります。あるページを「Mac」のパソコンで閲覧すると、以下のような表示になります。上記と同じページをバージョンが少し古い「Windows」で見てみるとどうでしょう...フォントが変わっているのがわかりますでしょうか。「Mac」では、標準でインストールされている「游ゴシック」というフォントで表示されていますが、バージョンの古いWindowsでは「游ゴシック」がインストールされていないため、代わりに「ヒラギノ角ゴシック」というフォントで表示され、上記のような表示の違いが生じてしまうんですね。スマートフォンで閲覧した場合でも、スマートフォンの機種やバージョンによってインストールされているフォントが違うため、表示されるフォントも異なります。このように、「デバイスフォント」の場合、閲覧する端末(デバイス)で、指定したフォントがインストールされているか、いないかによって、文字の表現が変わってしまう特徴があります。それぞれのメリットとデメリットここまでの違いをみると、「画像フォント」のほうがいろんなデザインを表現できてよいのでは?と思われる方もいらっしゃると思いますが、「画像フォント」にもデメリットがあります。以下に「画像フォント」と「デバイスフォント」のメリットとデメリットをまとめてみました。・多彩なデザインを表現するのが難しい・指定したフォントがインストールされていない端末では、意図した表現ができない※SEO効果について、一般的に検索エンジンは、ホームページ上の「文字情報」などを認識して、関連するキーワードで検索されたときの検索結果に表示するのための評価を行っていると言われています。文字が「画像ファイル」になっている場合、検索エンジンがこれを「文字情報」として認識できない可能性があるため、SEO的には、重要な文字を「画像ファイル」にするのは好ましくないと考えられています。SEOって何?)上記のように、「画像フォント」と「デバイスフォント」には、それぞれ、メリット・デメリットがあるため、ホームページでは、例えば、ロゴやバナー画像、目立たせたい表記などは「画像フォント」で作成し、そこまで凝る必要のない箇所や頻繁に書きかえる箇所は「デバイスフォント」で表現するなど、目的によって2つのフォントを使い分けることが、デザインとSEO、双方の観点から効果的だと言われています。まとめ今回、「画像フォント」と「デバイスフォント」についてご紹介させていただきましたが、「とりあえずHP」では、ホームページ名や記事のタイトル、本文等をお客様側で自由に変更していただける機能が特徴となっておりますため、ほとんどの箇所に「デバイスフォント」を取り入れております。※「お問い合わせボタン」など、文字を変更できない一部の箇所は「画像フォント」になっている場合もございます。テンプレートのデザインによって、それぞれ適したフォントの指定は行っておりますが、「デバイスフォント」は先述のとおり、閲覧する端末(デバイス)に指定のフォントがインストールされているか、いないかによって、(明朝体やゴシック体といった大まかなフォントの違いは反映されますが、)実際に表示される文字のフォントが異なります。そのため、同じテンプレートを使ったホームページでも、ご覧いただくパソコンの環境がWindowsであるか、Macであるか、また、Windowsでもバージョンの新旧によって、インストールされているフォントの種類が異なるため、多少、文字の見た目に違いがあります。200種類を超えるさまざまなテンプレートデザインをご用意しておりますので、お客様それぞれの業種やホームページで表現したい雰囲気などに合わせて、お気に入りのデザインをみつけていただけますと幸いです。おまけ「デバイスフォント」は見ている端末によって表現が変わってしまうとご紹介しましたが、最近は、「ウェブフォント」というものも登場しています。「ウェブフォント」は、ウェブサーバーにあるフォントのデータを読み込んで表示されるため、見ている人が使っている端末にフォントがインストールされていなくても、指定したフォントで表示することができるという、デザイン的に大きなメリットを持った文字の表示方法です。文字自体は画像にしているわけではないので、SEO効果が得られるというメリットはそのまま。「とりあえずHP」でも、いくつかのテンプレートで「ウェブフォント」をとりいれておりますが、今後、増えていく可能性も!?「ウェブフォント」についても、またの機会にご紹介させていただきたいと思います。気軽につくれる、素敵なホームページ「とりあえずHP」とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。詳しく見る増え続けるID・パスワード、どう管理すればいい?「とりあえずHP」をはじめ、様々なインターネット上のサービスを活用していくと、困ったことに、さまざまなサービスの「ID、パスワード」がどんどん増えてしまいます。詳しく見る画面表示のトラブル!!こんなときどうする?「文字化け」「表示崩れ」したときの対処...今回は、ホームページ作成時のトラブルとしてお問い合わせの多い、「文字化け」と「表示崩れ」について、対処方法や解決策をご紹介します。助け合い掲示板もっと活用!コラムまずは、30日間無料でお試ししてみよう※無料体験利用だけで、自動的に料金が発生することはありませんのでご安心ください。