“フォントおたく”伊達千代とWixデザイナーが徹底解説！ “説得力”が生まれるWebサイト別おすすめ和文＆英文フォント5選

2025年7月25日

伝えたいメッセージや情報の多くは「文字」によって表現されていますが、その文字を表すためのフォントは、しばしば人の声色（こわいろ）に例えられます。大きく力強い声なのか、やさしく語りかける声なのかによって、同じメッセージでも伝わり方は変化するのです。

ノーコードツール「Wix Studio」には実用性とデザイン性に優れたテンプレートが充実していますが、そこから一歩進んでフォントをカスタマイズすることで、より目的に合ったタイポグラフィー表現を手に入れることが可能です。

今回は「フォントおたく」を自認するデザイナー兼ライターの伊達千代さんが、Wix.com Japanでクリエイティブを担当するヨウ・レイケツさんに、シチュエーション別におすすめのフォントの組み合わせ（和文×欧文）を5つ伺いました。

執筆者

伊達千代さん

株式会社TART DESIGN OFFICE代表／グラフィックデザイナー。メーカーのデザイン室、広告制作会社勤務を経て独立。編集・執筆・大学や企業でのトレーニングも行う。2017年よりフォントかるた制作チームに参加。主な著書は『デザイン・ルールズ［新版］』（エムディエヌコーポレーション刊）『文字のきほん』（グラフィック社刊）など。

教えてくれたのは……

ヨウ・レイケツさん

Wix.com Japan株式会社で日本市場向けのクリエイティブを担当するデザイナー。直近では、Wix.com Japanの採用Webサイトなども手掛ける。中国出身。2018年に来日し、愛知県立芸術大学でデザインを学ぶ。「日本らしい繊細さ」と「国際的な視点」を両立したデザインを得意とする。趣味は、自宅で中華料理をつくることと、東京の街角を撮影すること。

Wix Studioが実現する“最強のタイポグラフィ環境”とは？

無料でホームページを作成できるノーコードツール「Wix Studio」では、AdobeやMonotypeといった世界的に有名なファウンダリーの上質な欧文フォントに加え、日本語を含むグローバル（多言語対応）フォントへの対応が着実に進められてきました。

そして2025年4月からは、日本を代表するタイプファウンダリーのモリサワから「 A1明朝」や「ゴシックMB101」など、200もの書体の提供が開始！　これにより、Wix Studioの日本語タイポグラフィ環境は、ノーコードツールとして“最強レベルの表現力”を手に入れたと言えます。

200種類のモリサワフォントが追加されたWix Studio。使用できるフォントのリストはこちらで確認できます

Wix Studioのテンプレートには、あらかじめデザインにマッチしたフォントが設定されています。しかし、自分でフォントをカスタマイズすることも可能です。作成中のサイトでテキストボックスをクリックし、表示される［テキスト設定］のフォント一覧から好みのフォントを選ぶと、その場でデザインに即座に反映されます。また、テンプレート全体のテーマフォントを別の書体に置き換えることもできます。

なお、フォントのリストに目的のフォントが表示されない場合は、パネル下部の［言語を追加］をクリックして表示される［言語を追加］で、目的のフォントの言語を選択します。また、Wix Studioにないフォントも、［フォントをアップロードする］をクリックし、フォントデータ（TTF形式のみ）をアップロードすれば使用できるようになります。

［言語を追加］で使用したい言語を選んでおくと、選択した言語のフォントがメニューに表示されます

自分でTTF（拡張子：ttf）のフォントを追加して利用することもできます。使用にあたっては各フォントの許諾を確認してください

シーン別おすすめフォント①｜コーポレートサイト

コーポレートサイトはUD新ゴ＋Futuraの組み合わせで、信頼感と先進性を表現します

ここからは、ヨウさんが利用シーン別におすすめするフォントを紹介します。

まずはコーポレートサイトに適したフォントとして、「UD新ゴ」と「Futura」の組み合わせが選ばれました。

「UD新ゴは標準的なゴシック体ですが、ラインがすっきりしているのでどのデバイスでも安定した可読性があります。また、Futuraは幾何学的で尖ったディテールが特徴のモダンな印象のフォントです。堅実な印象の和文と、先進的なイメージの欧文の組み合わせが企業のイメージを表現するのに向いています」（ヨウさん）

UD新ゴは、フトコロの大きな明るい印象のゴシック体です。文字枠いっぱいにデザインされているため同じサイズでも文字が大きく見え、Webサイトにもよく使用されています。UDは「ユニバーサルデザイン」の略で、視覚に障害のある人でも見やすく誤読しにくいよう工夫されています。

Futuraはラテン語で「未来」を意味する言葉で、ドイツのバウハウスで生まれたサンセリフ書体。正円に近い「O」や、先端の尖った「M」が特徴で、普遍的な機能美が感じられることからルイ・ヴィトンやオメガといった多くのブランドロゴにも使用されています。

漢字、ひらがな、カタカナが文字枠いっぱいに描かれたUD新ゴ。正円や直線を組み合わせたような幾何学的デザインで先進的なイメージを持つFutura。色をつけたところが特徴的な部分です

シーン別おすすめフォント②｜採用サイト

採用サイトには、若い世代に向けた柔らかさとフレッシュ感のあるA1ゴシック＋Poppinsがおすすめです

次にピックアップするのは、就活生や転職者向けの採用サイト。ここでは、「A1ゴシック」と「Poppins」の組み合わせがおすすめだそうです。

「A1ゴシックは視認性の高さに加えて柔らかさが感じられるので、若い世代にも親しみやすいと思いました。Poppinsもカジュアルで開放感がある人気のフォントです。双方フレッシュな印象があり、組み合わせることでクリーンなイメージも感じられ、ポジティブな印象と企業のオープンなカルチャーを伝えやすくなります」

A1ゴシックはフトコロの締まったクラシックな骨格を持ちながら、光学的な「ボケ感」を再現することで、ふんわりとした柔らかさが感じられるモリサワの大人気フォントです。ゴシック体でありながら硬さがなく、飲食店のメニュー表記やコンビニスイーツのロゴなどにもよく用いられています。

Poppinsは文字の中の余白が大きく、明るい印象のある幾何学的なサンセリフ体です。正円に近い「G」や「O」、腰高な小文字のデザインによってコロコロとしたフォルムが生み出され、楽しくリズミカルな印象もあります。

A1ゴシックは、ボケ感と柔らかさが特徴。Poppinsはシンプルな線の中にたっぷりと余白があり、明るくフレッシュな印象です

シーン別おすすめフォント③｜ポートフォリオ

ポートフォリオサイトは、スタンダードなサンセリフ体のNoto Sans JPとAkzidenz Groteskです

続いては、クリエイターが自身の作品を紹介するポートフォリオサイト。ここでは、Webでもっともポピュラーなフォントのひとつである「Noto Sans JP」が選択されました。その意図はどこにあるのでしょうか？

「ポートフォリオの主役は作品なので、作品の邪魔をしないように極力クセのない書体としてNoto Sans JPをセレクトしました。また、欧文でニュートラルなフォントと言えばHelveticaが超有名ですが、『R』の形など少し気になる部分があったので、よりすっきり見える『Akzidenz Grotesk』を選びました」（ヨウさん）

Noto Sans JPは、2014年にAdobeとGoogleが共同開発した日本語書体です。オープンソースであるだけでなく、Webフォントとして使えること、そしてスタンダードで読みやすい書体であることから瞬く間に人気となり、今では日本語のUIの代表書体として定着しています。

一方のAkzidenz Groteskは、Helveticaなどの「グロテスク系」サンセリフ書体の元祖とも言われるドイツ生まれの書体で、1950年代から60年代に人気を博しました。Helveticaよりもやや小ぶりで、無駄のない質実剛健なデザインが特徴です。

Noto Sans JPとAkzidenz Groteskは、つくられた時代は大きく異なりますが、読みやすさを追求してニュートラルを極めたフォントです

シーン別おすすめフォント④｜ECサイト

読みやすさと人間味を兼ね備えた、游ゴシック＋Open Sansは長文に向いた組み合わせです

あらゆるものがインターネットで販売できる今、ECサイトのフォント選びに悩む人は少なくないでしょう。そんな中、ヨウさんはどのフォントを選んだのでしょうか。

「ECサイトはどうしてもテキストの量が多くなるので、読みやすさと信頼感を重視して選びました。商品の特徴などの表現は、テキストではなくビジュアルで工夫するほうがよいと思います。また、游ゴシックはシステムフォントに使われているので、Webフォントのように読み込みのラグが発生しない点もECサイトの信頼性に寄与するでしょう」（ヨウさん）

游ゴシック体は他のゴシック体と比べるとやや小ぶりで、手書きの文字に寄せた線の強弱や自然なカーブが特徴のフォントです。主張が少ないため長い文章でも目が疲れにくく、内容に集中しやすいため雑誌や書籍でもよく使用されます。

Open Sansは、サンセリフ系の書体の中でも特に開口部が広く設計されていて、小さな文字でも潰れにくいという特徴があります。全体にあっさりとした印象ですが、小文字の「g」や「a」はクラシックな形を採用しています。

長文を読みやすくするのは、文字の中や周囲に生まれる余白のバランスです。この2つのフォントは、特に余白のつくり方に注目してください

シーン別おすすめフォント⑤｜飲食店

Zen Maru GothicとMontserratの組み合わせは、安心感とフレンドリーさを感じさせます

最後に取り上げるのは、私たちの生活に欠かせない飲食店です。料理のイメージやメニューの魅力を伝えるには、どのフォントが最適なのでしょうか。

「飲食店にはいろんなジャンルがありますが、ここでは家庭料理のお店や街の洋食店をイメージしてフォントを選びました。どちらのフォントも丸みがあり親しみやすいデザインで、お店の居心地の良さや安心感、フレンドリーな印象が伝えられると思います」（ヨウさん）

丸ゴシック体は使い方によっては子どもっぽくなりがちですが、「Zen Maru Gothic」は、ややクセのある筆の運びと引き締まった縦長のプロポーションによって、丸みや温かみの中にも洒落た印象を感じさせてくれます。

「Montserrat」は文字の横幅が広めのサンセリフ体で、くっきりとした明るい印象です。長文には向きませんが、「J」や「3」などの直線の使い方が特徴的なアクセントとなり、目を引くデザインのフォントです。

有機的な曲線を持つ和文の丸ゴシック体と、丸いフォルムの欧文フォントが並ぶことでポップなイメージが生まれます

フォント選びのポイントとは？

今回、ヨウさんが選んだのは、いずれもゴシック体とサンセリフ体の組み合わせでした。一見すると似たような書体ばかりに思えますが、実際にサイトデザインに当てはめてみると、「なるほど、こんなふうに使い分けられるのか！」と驚かされます。

「同じカテゴリーのWebサイトでも、業種や商品の内容、どんなお店なのかによって、選ぶフォントは変わってきます。もちろん個人の好みもあると思いますが、大切なのは“どんな人に、どんな印象を与えたいか”。そのうえで、そのサイトのテキストにとって何がもっとも重要なのかを考えながらフォントを選ぶようにしています」（ヨウさん）

今ではさまざまなシーンでフォントを使い分けるヨウさんですが、「最初から今のように自信を持ってフォントを選んでいたわけではない」といいます。たとえば、おすすめフォント③で紹介したように、Helveticaの「R」の形が気になり始めたことでAkzidenz Groteskを選ぶようになったり、おすすめフォント④では「なぜ游ゴシックがECサイトのフォントに選ばれるのか」と考えたり……。こうした知識と経験、そして探究を積み重ねた先に、現在のフォント選びがあるのだと感じられました。

フォントがWebサイトに与える影響はとても大きいものです。ぜひヨウさんの考え方を参考にしながら、日々の制作に取り入れてみてはいかがでしょうか。