Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

ウェブセーフフォントとは+19のベストウェブセーフフォント(初心者ガイド)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

ウェブセーフフォントとは何なのか、WordPressで使うのに最適なウェブセーフフォントは何なのか、気になりませんか?

数週間から数ヶ月かけて、美しいサイトをデザインすることを想像してみてください。あなたはすべての項目にチェックを入れ、適切なサイトテーマの選択などの細部にまで注意を払い、あなたのビジネスにとって重要なウェブページを作り上げました。

唯一の問題は?完璧に作られたサイトが、読めない文字やぎこちない改行で台無しになっている。

この投稿では、ウェブセーフフォントとは何か、そしてその中から選ぶのに最適なフォントについて説明します。

what-are-web-safe-fonts-in-post

ウェブセーフフォントとは何か、なぜ重要なのか?

ウェブセーフフォントは、Microsoft WindowsやApple MacOSなど、ほとんどのオペレーティングシステムにすでにインストールされています。ウェブセーフフォントスタックを使用することで、テキストが意図したとおりに外観される可能性が高くなり、サイトの一貫性を保つことができます。

ユーザーのブラウザーやOSがサポートしていないフォントを使用した場合、ブラウザーやサイトのHTML / CSSが宣言しているものが初期設定となります。そのため、コンテンツの外観が大きく変わり、ユーザーにさまざまな影響を与える可能性があります。

ウェブセーフフォントが重要な理由をいくつか挙げてみましょう:

  • フォントの選択は、あなたのブランドを反映するものです:例えば、非営利のサイトを運営している場合、カリグラフィーのようなロマンチックなフォントはうまく反映されないだろう。
  • フォントはユーザーエクスペリエンスに影響します: ウェブセーフなフォントとは、読者が意図したとおりにフォントを見ることができることを意味します。例えば、Windows 10の最新バージョンでしかサポートされていないフォントでWordPressサイトを作成した場合、多くのユーザーは別のフォントを見ることになります。
  • フォントは売り上げに影響する: そうです。フォントの選択は売上に影響します。社会的証明であれ、単に信頼できるフォントであれ、サイト上で快適に感じるカスタマイザーは、消費者の信頼を築くことができます。これは最終的に、より多くの売上とあなたのポケットのお金につながります。

ウェブセーフフォントで覚えておくべき最も重要なことがあります:

「インターネットユーザーの90%は、@font-faceに対応したブラウザーを使用しています。ウェブセーフフォントと一般的なフォントファミリーを含むフォントスタックを持たないということは、インターネットの少なくとも10%のユーザーに対して、ウェブデザインの劣化をコントロールできていないことを意味します。ウェブセーフフォントを含むシンプルなCSSフォントスタックを使用するために必要な時間と労力は非常に小さいので、それを継続しない理由はほとんどありません。”

ウィリアム・クレイグ – WebFX CEO兼共同創設者

それでは、最高のウェブセーフ・フォントのリストをどのように選んだかについて説明しよう。

サイトに最適なフォントの選び方

オンライン上には65万種類以上のフォントがあり、その中から自分に合ったものを選ぶのは大変です。そこで私たちの専門デザインチームが、最も人気のあるウェブセーフなフォントをテストしてみました。

私たちのリストでは、これらの特定の基準を満たしていることを確認しました:

  1. 読みやすさ:サイトの各部分用にデザインされたフォント。例えば、ヘッダーには大きく太いフォント、本文にはすっきりとしたシンプルなフォントなど。
  2. 読みやすさ:それぞれの文字が見分けやすく、区別しやすいフォント。これにより、サイトの読みやすさとアクセシビリティが向上します。
  3. 快適さ/親しみやすさ:読者にとって親しみやすく、心地よく感じられるフォント。独創的なフォントは役に立つが、変わったフォントを使うと訪問者を不安にさせるかもしれない。ウェブサイトをプロフェッショナルに保つことができるよう、ほとんどの場合、私たちは人々が最も慣れ親しんでいるものに先頭に固定表示しました。
  4. 多様なスタイル:太字、幾何学的、クラシックなど、さまざまなスタイルをカバーするフォントを選びました。ウェブデザインの他の部分と同じように、フォントもブランドのペルソナに一致させるべきです。
  5. フォントの重さ:WordPressやページビルダーのようなサイトツールには、一部のウェブフォントが自動的に含まれていません。そのため、サイトの表示速度が遅くなったり、ブラウザーによってフォントが異なって見えたりすることがあります。これを解決するために、各カテゴリーに少なくとも1つの軽量フォントを含めました。その他のヒントについては、WordPressのスピードとパフォーマンスを向上させる究極のガイドをご覧ください。

ということで、WordPressサイトに最適なウェブセーフフォントをご紹介しよう。

Font NameMain TraitsBest For
Proxima NovaSleek, contemporary, subtle elegance, easy to readBlogs, professional portfolios, media companies
LatoWelcoming, approachable, balanced designMobile apps, retail stores, eCommerce websites
InterTall lowercase for readability, smooth curves for displayHome pages, digital products, ebooks
RobotoTech-inspired, friendly, wide open charactersSoftware companies, app developers, technology blogs
Alternate GothCondensed, bold, strong presence, sturdy strokesHome page headlines, thank you pages

ウェブセーフフォント19選

1.プロキシマ・ノヴァ

WPBeginner header

Proxima Novaは最も人気のあるフォントの一つだ。NBC News、Mashable、BuzzFeed、Wires、そしてもちろんWPBeginnerのような大手デジタルメディア企業のメイン書体だ。

2009年にWPBeginnerを立ち上げて以来、Proxima Novaはブランディング、サイト、社内プロジェクトにおいて、私たちのアイデンティティの中核を担ってきました。

丸みを帯びたエッジと繊細なエレガンスを備えた、洗練された現代的な外観。読みやすく、親しみやすさを感じさせるプロフェッショナルな書体。

WPBeginnerでは、コンテンツがそれ自身を語るようにしたいので、過度に派手なフォントは望んでいません。Proxima Novaはまさにそれを実現しています。

最適 ブログ、プロのポートフォリオ、メディア企業

2.ラト

WPForms lato

Latoはもともと企業顧客向けに作られたものだが、今では再利用され、ウェブ上ですべて使われている。

Merriam-Webster、WebMD、Goodreadsのようなサイトや、WPFormsのような他のブランドでも使用されています!

このウェブフォントは、頑丈なデザインと緩やかな曲線のバランスにより、歓迎的で親しみやすい雰囲気を醸し出している。

WPFormsはドラッグアンドドロップビルダーと直感的なインターフェースで使いやすいプラグインとして知られているため、このフォントはWPFormsの使用例と非常に一致する。

最適モバイルアプリ、小売店、eコマースサイト

3.インター

Seedprod Inter font

Interはサンセリフフォントで、セリフフォントのように文字の端に小さな装飾的なストロークがない。

このフォントの小さい「テキスト」バージョンは、小文字のテキストを読みやすくするために背の高い文字が使われている。逆に大きい「ディスプレイ」バージョンは滑らかな曲線と細かいディテールを持ち、スペースを節約できる。

最高のページビルダープラグインであるSeedProdは、ソフトウェアがすべてであることを表すInterフォントスタイルを使用しています。このフォントは使いやすさを醸し出しながらも実用的で、まさにページビルダーの特徴を表している。

最適 ホームページ、デジタル製品、電子書籍

4.ロボト

MonsterInsights Website

AIや機械学習がますます重視される世界では、Robotoのような書体の需要が高まっている。Robotoはハイテクにインスパイアされた機械のような外観を持ちながら、大きく開いた文字が親しみやすい雰囲気を醸し出している。

MonsterInsightsが彼らのブランドの分析的なペルソナに一致するようにRobotoフォントを使用していることに注目してください。他にもVice.com、Flipkart、YouTubeなど多くの人気サイトがRobotoを使っている。

Android端末の初期設定フォントとしてスタートしたことから、Robotoはソフトウェア会社、アプリ開発者、技術ブログなどの技術関連サイトを自然に補完している。

最適 技術系サイト

5.代替ゴート

blog tyrant alternate gothic

YouTubeのロゴで有名なAlternate Gothはサンセリフ書体。凝縮された太字が特徴で、見出しや字幕に適している。

ブログ・タイラントでは、見出しのみにオルタネート・ゴスを使用している。骨太なストロークと重厚なウェイトにより、現代的なデザインと相まって強い存在感を醸し出している。

最適 ホームページの見出し、サンキューページ

6.モンセラット

contra

ブエノスアイレスの歴史的な地域の投稿、看板、ペイントされた窓からインスピレーションを得たMonsterratは、1700万以上のサイトで使用され、ますます人気が高まっている。

字間が広く開放的なこの書体は、小さな文字サイズでも読みやすい。とはいえ、見出しにすべて大文字で使っても、そのシンプルさが光る。全体として、Montserratは信頼感を生み出す万能なウェブセーフフォントであることがわかる。

Montserratは、よりフレンドリーでカジュアルなトーンを表現したいビジネスに最適です。例えば、代理店、ソフトウェア会社、オンラインショップなど、カスタマイザーに重きを置いている企業にはモンセラットが最適です。

上の画像にあるこのコントラのサイトが、ブランド全体のペルソナに遊び心を加えているモンセラットを使用していることに注目してほしい。

最適 代理店、ソフトウェア会社、オンラインショップ、デジタル製品

7.ローラ

urban dictionary lora font

LoraはGoogle Fontsで利用可能な現代的なセリフフォント。Loraの最大の特徴は、各文字の末尾にあるユニークなブラシストロークで、他のセリフ体よりもアーティスティックな雰囲気を醸し出している。

そのため、Urban DictionaryやThe Kitchnのような多くのエンターテイメントサイトで使われている。あなたのサイトにLoraを加えれば、アートエッセイやモダンなショップのようなムードが伝わります。

Loraはロゴ、タイトル、ナビゲーションメニュー、段落テキストに最適なフォントです。明瞭でバランスのとれたデザインなので、フォントの大小にかかわらず読みやすいからだ。Loraのブラシストロークはロゴを際立たせ、より注目を集めることができる。

最適 新規: ニュースとエンターテイメントのサイト

8.ジル・サン

gill sans

Gill Sansは効率的ですっきりとした見た目で知られるモダンなサンセリフフォント。文字間のコントラストが少なく、間隔が狭いため、長い段落には向かないかもしれないが、視覚に訴える見出し用フォントや広告用フォントとしては優れている。

トイ・ストーリー、トミー・ヒルフィガー、BBCニュース、東京証券取引所、フィリップスなど、知名度の高い企業の多くがGill Sansを書体として採用している。

そして何より、macOS、iOS、Windows搭載端末など、すべてのOSに対応している。

最適 広告およびヘッダーテキスト

9.メリウェザー

Harvard merriweather font

Merriweatherはデジタル画面で読みやすくするためにデザインされたGoogleフォントで、Goodreads、Coursera、Harvard.eduなどのサイトがすべて段落や本文に使用している。

ハーバード大学のサイトのメリウェザー書体は、洗練されたクリーンな印象で、このような評判の高い機関で維持されなければならないプロフェッショナリズムを際立たせている。

これまでの経験から、このフォントは雑誌やRSSフィードに見られるようなテキスト密度の高いデザインに適している。その背の高い字形は、横方向のスペースを取りすぎることなく、様々な画面サイズで読みやすさを維持する。この書体は伝統的で、全体的にフォーマルでエレガントなトーンに仕上がっている。

最適雑誌、非営利または教育サイト

10.ノイエ・ヘルベチカ

Neue Helvetica

Neue HelveticaはeBay、Yahoo、Facebookなど218,000以上のサイトで使われている。この書体はx-heightが高く、離れていても読みやすい。その結果、あなたのサイトをよりモバイルフレンドリーにする上で有利に働く可能性がある。

また、文字と文字の間隔が狭いので、ページのスペースを節約できる。

最適 ポートフォリオサイトやサービスベースのビジネスなど、プロフェッショナル向け

11.ガラモンド

Garamond

16世紀に開発されたGaramond書体は、その洗練されたエレガントな外観で知られている。

他の多くのフォントとは異なり、太いストロークと細いストロークの定数が少なく、セリフがわずかに斜めになっている。高級感やラグジュアリー感を求めるサイトに最適だ。

最適 商品説明、高級ブランドの見出し

12.アリアル

Arial font

すでに604,000以上のサイトがArialを使用しており、Arialがウェブセーフなフォントであることは否定できない。Amazon、Facebook、Googleは、Arialを使用している人気サイトのほんの一例です。

このフォントはもともと、MonotypeのデザイナーがIBMの印刷物用に可読性を高めるためにデザインしたものだ。最も人目を引くフォントではないが、仕事はきちんとこなす。

Arialフォントには装飾的なストークがなく、書体全体の太さが一定しているため、バランスの取れた統一感のある仕上がりになっている。

最適: すべてのタイプのサイトとWordPressブログ。レポート、プレゼンテーション、電子書籍などのデジタル製品にも使用されています。

13.スペクトル

Spectral font

Spectralはこのリストの中では新しいGoogleフォントのひとつだが、ウェブ上の長文コンテンツをいかに美しく扱うかという点で、このリストに値する。

私たちがこのフォントを高く評価しているのは、他の多くの兄弟フォントと比べて重苦しさを感じさせない点だ。例えば、小文字のfやrは両端がカーブしているのがわかる。

一般的に、Spectralはテキストが豊富で、長文を読みやすい画面優先の環境向けに設計されている。

最適 ブログ

14.リーグ・ゴシック

League Gothic

League Gothicは大胆でモダンな外観で知られるコンデンスサンセリフ書体。高品質なオープンソースフォントで知られるデジタル活字鋳造所The League of Moveable Typeによってデザインされた。

リーグ・ゴシックは均一なストローク幅、Square-offのエッジ、そして太めのウェイトを持つ背の高いレターフォームが特徴。言い換えれば、主張したいのであれば、このゴシックが適している。

The Blaze、Chron.com、Fox Sportsなどの人気サイトが使用している。

最適 見出し、タイトル、ロゴ、グラフィック

15.ブラック・ジャック

black jack font

Black Jackはカジュアルで親しみやすいデザインのためにデザインされたカジュアルなスクリプト書体。常につながっているわけではない手書き風の文字のおかげで、カジュアルで自然な雰囲気がある。

その人間的なタッチから、このフォントはホワイトグローブ的なサービスを提供する代理店やプロバイダーに最適だろう。

最適 代理店およびサービスプロバイダー

16.筆文字 富士山

brush script mt

Brush Script MtはAdobeのフォントで、カジュアルで活気があり、自信に満ちている。筆やカリグラフィーのペンで書かれた手書き文字を模倣している。具体的には、このフォントはさまざまな太さと傾きを持つ流動的で流れるような字形を特徴としている。

サイト上のあらゆるテキストを、パーソナルなタッチでカジュアルに見せたいのであれば、このフォントは最適かもしれない。例えば、投稿者紹介ページの署名や、創設者のプロフィールページに使用することができます。

最適 会社概要やロゴのページ

17.ボドニ・ポスター

bodoni poster

ボドニ・ポスターはサイトの見出しや高級ファッションのブランディング、ロゴなどに使われるモダンなセリフ体デザイン。太いストロークと細いストロークを使い分け、極端なコントラストを生み出している。

そのため、ドラマチックなインパクトのある大胆で目を引くデザインを作るのに理想的だ。カーディーラー、レストラン、ヘアサロンなど、大胆な表現を必要とするビジネスや、大きな個性を持つブランドには最適かもしれません。

最適ローカルビジネス

18.バスカヴィル

baskerville

18世紀に作られたバスカヴィルは、よりシャープなセリフ、太いストロークと細いストロークの対照的なスタイル、より直立した姿勢が特徴である。

その洗練された外観は、より権威ある存在感を醸し出します。ITサイトなど、知的な美しさを求めるサイトに最適です。

最適 出版物、大学、ITサイト

19.ジョージア

Georgia

Georgiaは、その太いストロークと大きなスタイルのフォントで、特に画面上で優れているように作られました。標準的なTimes New Romanフォントのように見えるが、より視覚的に訴えるものがある。

最適:ブログ記事と新規サイト

フォントについてよくある質問

Googleフォントとは?

Google Fontsは、何百ものタイポグラフィを提供する無料サービスで、ダウンロードやリンクが可能だ。あなたのサイトやブログを目立たせたいなら、「テンプレート」と叫ぶ初期設定のフォントをスキップして、代わりにGoogleウェブセーフフォントの独自のファミリーを選ぶことができる。

Adobeフォント(旧Typekit)とは?

Adobe Fonts(旧Typekit)は、25,000以上のフォントにアクセスできる有料サービスだ。WooCommerceストアのロゴやグラフィックをデザインする場合でも、単にブログにユニークなタイポグラフィフォントを追加したい場合でも、Adobe Fontsにお任せください。Creative Cloudサブスクリプションにサインアップすると、すべてのフォントが含まれます。

ウェブセーフフォントはSEOにどう影響するか?

ウェブセーフフォントは検索エンジンのランキングに直接影響しません。しかし、ユーザーエクスペリエンスには影響します。読者がアクセスしやすいフォントは、すぐに読み込まれ、読みやすくなります。これは直帰率の低下やサイト訪問時間の延長につながり、SEOにも有利です。

この投稿が、WordPressサイトで使用するのに最適なウェブセーフなフォントの発見に役立つことを願っています。最高のウェブデザインソフトウェアの選び方に関する究極のガイド、またはビジネスサイトに必須のWordPressプラグインのエキスパートリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

1件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。