Webデザインで使用できるフォント徹底解説。求人お問い合わせTOPWeb制作Webデザインで使用できるフォント徹底解説。Blog2018.08.20hoshidaWebデザインで使用できるフォント徹底解説。デバイスフォント、Webフォント、画像データの違いと特徴Web制作デザインHTML・CSSフォントシェアTweetグラフィックデザイナーでWebデザインにもリーチを広げているような方によく起こる問題として、フォントのトラブルがあります。フォントはデザインにおいて非常に重要な要素であり、最も注意すべきポイントですが、Webデザインでは使用できるフォントに制限があります。Webデザインで文字を扱う場合、その文字がどのように実装されるのかを把握したうえで、デザインやフォントを選択しなければなりません。ここをあいまいにしてしまうと、コーディングに大きな負荷がかかったり、最悪の場合実装不可能なデザインになってしまうのです。この記事ではWebでの文字の表現方法を整理し、デザインをする際にどのようにフォントを選択すれば良いかをまとめました。先に文字データの種類使用できるフォントをまとめてみます。CSSでのホバーアニメーションで色や文字間などを変更できない。フォントの選択は自由。多彩なCSSホバーアニメーションが可能。フォントの選択はOSの違いを考慮する必要があり。游ゴシックやメイリオであれば幅広く対応。多彩なCSSホバーアニメーションが可能。OSの違いに関係なく使用可能。和文フォントは非常に重い。それでは詳細を説明していきます。画像データJPEGやPNGなどの画像データとして文字を表示する方法です。ロゴマークなど、形が加工されておりテキストデータでは再現できない文字などを表示する場合に使用します。ひと昔前はボタン風のリンクなど、装飾されたテキストにも画像が使用されていましたが、CSS3が登場し複雑なデザインをコーディングで実装できるようになった現在では、極力テキストデータで実装したほうが良いです。テキストデータRESULTHTMLCSSそうです、私が、テキストデータの文字です。コピー<p>そうです、私が、テキストデータの文字です。文字をドラッグして一文字ずつ選択できるのはテキストデータです。Webサイトにおいて読ませることを目的とした文字は、ボタンなどであっても極力テキストデータで実装したほうが良いです。理由は以下の通りです。複雑でリッチなホバーアニメーションを実装できる例えば以下のようなデザインのボタンを作る場合、画像データの場合は3つデータを作成しなければなりませんが、テキストデータの場合はひとつCSSを書けばそれで終わりです。画像データの場合、ホバーアクションをCSSで実装しようとすると薄くする程度のことしかできず、もし色など変えようとするとホバー後の画像を作成する必要があります。テキストデータであれば、CSSのみで複雑なホバーアクションを実装できるので簡単ですし、何より表現が豊富です。a:hover{background:#ddd;letter-spacing:0.1em;}コピーまた、かつては見出し要素などを凝ったデザインにするために画像を使用するケースなどがありましたが、それもスマートフォン対応のことを考えると現実的ではありません。フォントの種類どのようなデータにするかにより、使用できるフォントが異なります。デザインデータを作成する際に最も気を付けなければならないのがこれです。最終的に画像として出力されるので、どのようなフォントでも使用可能です。デバイスフォントやWebフォントが存在しないフォントはもちろん、変形した文字や手書きの文字などなんでも実装可能です。デバイスフォントテキストデータで文字を実装する際に、閲覧者の端末内にあるフォントを使用して表示するのがデバイスフォントです。閲覧している端末内にフォントデータがあるので、表示が軽量という利点があります。使用できるフォントはいろいろとありますが、WindowsやMac、iPhoneなど閲覧環境によってインストールされいているフォントが異なるので、さまざまな環境で共通のものとなるとかなり限られてきます。PCのフォントは初めからインストールされているものと、自分でインストールしたもの、ソフトウェアをインストールした際に一緒に入ったものなどがあります。デザイナーやコーダーはOfficeソフトやAdobeソフトをインストールしているため、一般ユーザーよりも多くの特殊なフォントがインストールされているので注意が必要です。自分の環境では表示できていても、一般ユーザーが見るとフォントが違って見えてしまうという問題が起りがちです。メイリオRESULTHTMLCSSそうです、私が、メイリオです。class="sample02">そうです、私が、メイリオです。</p>コピー.sample02{font-family:"メイリオ";}コピーWindows、Mac、iPhoneに搭載されているフォントです。昔からあり最もよく使われがちですがあまり素敵なフォントではないです。なんだか丸っこくてかわいい印象があり、サイトのテイストによってはミスマッチになりえます。游ゴシックRESULTHTMLCSSそうです、私が、游ゴシックです。class="sample03">そうです、私が、游ゴシックです。Medium";}コピーWindows、Mac、iPhoneに搭載されているフォントです。綺麗なフォントながら最近のWindowsにもMacにも搭載されているので、近年Web制作業界内で急激に支持が増えたフォントです。こだわりが無ければこちらを使用するのがベターです。メイリオより上品な雰囲気があります。以下)で上下の位置がズレて見えるバグがあるのと、WindowsとMacでウエイトが異なって見える問題があるので要注意です。ウエイトに関しては以下の記事の方法で対策できます。https://www.tomotanuki.com/entry/yugothic-weight游明朝RESULTHTMLCSSそうです、私が、游明朝です。class="sample04">そうです、私が、游明朝です。Medium";}コピーデバイスフォントで明朝体を使用するならおすすめです。Android端末にはいかなる明朝体フォントもインストールされていないため、CSSで「serif」を指定したとしてもゴシック体で表示されてしまいます。Androidで印象が大きく変わってしまうことを避けるなら、デバイスフォントで明朝体を選択するのはやめましょう。Arial;}コピーどっしりとしたサンセリフ体です。Helveticaのコピーフォントなので使いやすいです。Roman;}コピーTimes紙の本文用に開発されたフォントですので、やや古風な雰囲気です。本文に使用するのに向いています。和文フォントと欧文フォントを混合して使用するCSSでフォントを指定する際、欧文フォントを先に、和文フォントを後に指定すれば、同じ文章のうち半角英数記号のみ欧文フォントに指定することが可能です。IllustratorやInDesignの合成フォント機能のように、フォントごとにサイズやベースラインを微調整することはできないので、必ず見た目を確認してから使用しましょう。游ゴシックであれば英数字も比較的美しいので、和欧混合して使用しなくても十分です。游ゴシックを使用しておくのが無難でしょう。1829年5月29日)は、イギリスの化学者で発明家。1829年5月29日)は、イギリスの化学者で発明家。1829年5月29日)は、イギリスの化学者で発明家。1829年5月29日)は、イギリスの化学者で発明家。</p>コピー.sample11{font-family:Arial,"メイリオ";}コピーなおCSSで指定可能なデバイスフォントは以下のページで確認できます。https://w3g.jp/sample/css/font-familyWebフォントテキストデータで文字を実装する際に、Web上にあるフォントデータを読み込んで表示するのがWebフォントです。どのようなOSでも同じフォントを表示することが可能なので、デザインのクオリティを高めることができます。和文フォントWebフォントの難点は和文、つまり日本語フォントです。和文は欧文などに比べ文字量が多く、フォントデータが非常に重いため、ページの読み込みがものすごく遅くなるという大きなデメリットがあります。表示速度の差で離脱率が大きくなるサイトでは使いにくいでしょう。欧文フォント和文フォントにくらべ、欧文フォントはデータサイズも軽く使い勝手が良いです。同じテキストに和文フォントと欧文フォントを混ぜて使用するのには注意が必要です。本文で和文フォントと織り交ぜて使用する場合、グラフィックソフトの合成フォント機能の様にサイズやベースラインまでの細かい調整はできないので、あまり美しくできません。欧文Webフォントを使用する際は、装飾や見出し、メニューなど、デザインの「差し」としてピンポイントで使用することをお勧めします。オススメのフォントは以下です。※Webフォントは設定が大変なのでサンプルは無しです。JPGoogleが無料で提供している和文Webフォントです。完全無料でまともに使える和文WebフォントはGoogleのものくらいしかなく、かつフォントとしてもかなり美しいので、Webフォントを使用する必要がある場合はこちらを使用します。重いのでそれが大きなデメリットです。JPGoogleが無料で提供している和文Webフォントです。