はじめに
Webflowで日本語サイトを作ろうとすると、最初の壁が情報の少なさだ。英語圏向けのプラットフォームであるため、公式ドキュメントの多くは英語で、日本語固有の設定についての情報は散在している。
「フォントを設定したら文字化けした」「行間が詰まりすぎて読みにくい」「多言語対応はどうやればいいのか」──こういった疑問を持ちながらも、まとまった情報が見つからず手探りで進めている人は多い。
この記事では、Webflowで日本語サイトを構築する際に必要な設定を、制作現場での経験をもとに体系的にまとめた。フォントの選び方から実際のCSS設定値、多言語対応の手順まで、実務で使えるレベルで解説する。
1.Webflowの日本語対応状況
1-1.管理画面の言語
2024年時点で、Webflowのデザイナー（Designer）およびCMS管理画面は英語のみの提供となっている。インターフェースの日本語化はされていないため、英語のUIを読みながら操作することになる。
ただし、サイトに表示するコンテンツは当然ながら日本語で入力できる。CMSのコレクションフィールドにも日本語テキストを問題なく格納できるため、コンテンツ自体の日本語対応は完全にできている。
1-2.デフォルトフォントの問題
Webflowのデフォルトフォントは sans-serif だ。Windowsでは游ゴシックや Meiryo、Macでは Hiragino Sans などにフォールバックするが、これをそのまま使うと環境によって見た目が変わってしまう。
日本語サイトでは必ず明示的にフォントを指定することを推奨する。フォールバックの順序を含めた font-family の設計が、クロスプラットフォームでの表示品質を左右する。
1-3.日本語入力の挙動
Webflowのエディタで日本語を入力する場合、IME（日本語入力メソッド）との相性でいくつかの注意点がある。
特にCMS上のリッチテキストフィールドで日本語を変換確定するタイミングで二重入力が発生することが過去にあった。現在は改善されているケースが多いが、長い文章を入力する場合は、あらかじめ外部エディタで書いてからペーストする運用が安定している。
2.日本語フォントの設定方法
2-1.Google Fontsで日本語フォントを追加する
最もシンプルな方法はGoogle Fontsを使うことだ。WebflowはGoogle Fontsとネイティブに連携しており、Designerから直接検索して追加できる。
手順は以下の通りだ。
- Designerを開き、左パネルの「Add Panel」からタイポグラフィを選択する
- 「Font Family」フィールドをクリック
- 「Add Google Font」ボタンから検索画面を開く
- 「Noto Sans JP」や「M PLUS 1p」など任意のフォントを検索する
- 使用するウェイト（100〜900）を選択して追加
ポイントは必要なウェイトだけを選ぶことだ。日本語フォントはファイルサイズが大きいため、全ウェイトを追加するとページ速度が大幅に悪化する。通常は 400（Regular） と 700（Bold） の2種類で十分だ。見出しに別のウェイトが必要な場合でも、最大3〜4種類に絞るべきだ。
2-2.Adobe Fonts（Typekit）との連携
Adobe Creative Cloudを契約している場合、Adobe Fontsを使う選択肢もある。Webflowでは Project Settings からAdobe Fontsのプロジェクトコードを登録することで、Adobe Fontsのフォントをサイトで使用できるようになる。
- Webflow の「Project Settings」→「Fonts」タブを開く
- 「Adobe Fonts」セクションにAdobe FontsのプロジェクトIDを貼り付ける
- Adobe Fonts側でプロジェクトに使用するフォントを追加
- Designerのフォント選択欄にAdobe Fontsのフォントが表示される
Adobe Fontsで日本語対応しているものとしては「貂明朝」「秀英明朝」「AB-antique」などの和文書体が使える。ブランドの世界観に合わせた書体が必要なプロジェクトで有効な選択肢だ。
2-3.カスタムフォントのアップロード
購入したフォントや自社開発フォントを使う場合は、カスタムフォントとしてアップロードする方法がある。
- 「Project Settings」→「Fonts」→「Upload Fonts」
.woffまたは.woff2形式のフォントファイルをアップロード- フォントファミリー名とウェイトを指定
- Designerで他のフォントと同様に選択できるようになる
日本語フォントは .woff2 形式が最も圧縮効率が高い。サブセット化（使用する文字だけを抽出）したファイルを用意することで、ファイルサイズを大幅に削減できる。
3.おすすめ日本語フォントと使い分け
3-1.Noto Sans JP
Googleが開発したオープンソースの日本語フォントだ。名前の「Noto」は「No Tofu（豆腐なし）」の略で、文字化けして表示される四角（豆腐）を出さないというコンセプトから来ている。
推奨用途: コーポレートサイト、情報量の多いWebサービス、デフォルトとして迷ったらこれ
ウェイトが100から900まで9段階あり、デザインの自由度が高い。可読性とニュートラルな印象を両立しており、あらゆるジャンルのサイトに馴染む。
3-2.M PLUS 1p / M PLUS Rounded 1c
M PLUSファミリーはスッキリした現代的な字体が特徴のフォントだ。Noto Sans JPより少し個性があり、テック系やスタートアップのサイトとの相性が良い。
M PLUS Rounded 1c はその名の通り角が丸くなっており、親しみやすさやポップさを演出したいサイトに向いている。教育系、子ども向け、カジュアルなサービスなどに使われることが多い。
推奨用途: スタートアップ、テック系サービス、カジュアルなブランド
3-3.BIZ UD Mincho / BIZ UD Gothic
ユニバーサルデザインに配慮して設計されたフォントだ。視認性が高く、文字が見えにくいユーザーへの配慮が必要なサイトや、官公庁・医療・福祉系のサービスに適している。
BIZ UD Minchoは明朝体なので、格調ある印象や読み物コンテンツにも向いている。
推奨用途: 行政サービス、医療・福祉、ニュース・マガジン系
3-4.Zen Kaku Gothic New / Zen Old Mincho
比較的新しいフォントで、デザイナーの間でも注目度が高い。Zen Kaku Gothic Newはシャープで洗練された印象があり、ハイブランドやファッション系のサイトにも使える珍しいゴシック体だ。
Zen Old Minchoはクラシカルな明朝体で、伝統産業、老舗ブランド、日本的な世界観を強調したいサイトに合う。
推奨用途: ハイエンドブランド、伝統産業、エディトリアル系
4.日本語テキストのスタイリングTips
4-1.行間（line-height）の設定
英語テキストと比べて、日本語は縦に詰まりやすい文字構造を持っている。デフォルトの line-height: 1.5 では日本語テキストは読みにくいことが多い。
本文テキストの推奨値は line-height: 1.8 から 2.0 の範囲だ。ジャンルやデザインの方向性によって調整するが、まずは 1.8 を基準に始めてみるのが無難だ。
見出しは本文より詰めてOKで、line-height: 1.4 前後が適切なことが多い。
/* 本文 */
.body-text {
line-height: 1.8;
}
/* 見出し */
.heading {
line-height: 1.4;
}Webflowでは、タイポグラフィのスタイル設定で Line Height フィールドに直接数値を入力できる。単位なしの数値（unitless）で指定するのが推奨だ。
4-2.文字間隔（letter-spacing）の調整
日本語は文字自体が正方形に近い形で詰めて並ぶため、英語ほど文字間隔の調整が目立ちにくい。ただし、見出しテキストでは letter-spacing: 0.05em 〜 0.1em 程度を追加すると、余白が生まれて高級感や読みやすさが向上することがある。
逆に本文テキストで letter-spacing を広げすぎると読みにくくなるため、本文は基本的にデフォルト（0）か 0.02em 程度に留めるべきだ。
/* 見出し */
.heading-jp {
letter-spacing: 0.08em;
}
/* 本文 */
.body-jp {
letter-spacing: 0.02em;
}4-3.禁則処理（word-break と overflow-wrap）
日本語では行末に句読点や括弧が来ないよう「禁則処理」を行うのが正しい組版だ。Webflowでカスタム CSS を追加することで対応できる。
.body-text {
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;
}line-break: strict を指定すると、より厳密な禁則処理が適用される。これにより句読点が行頭に来ることを防げる。ただし、line-break: strict はブラウザによってサポート状況が若干異なるため、デプロイ前に主要ブラウザでの確認を推奨する。
Webflowでカスタムcssを追加するには、Project Settings → Custom Code → Head Code に <style> タグで記述するか、特定のクラスに対してDesigner上で直接CSSプロパティを追加する。
4-4.レスポンシブでの改行制御
日本語テキストはスマートフォンで表示した際に意図しない位置で改行が起きやすい。特に見出しで単語の途中で折り返されるとデザインが崩れる原因になる。
<wbr> タグや white-space: nowrap の局所適用、あるいは overflow-wrap: anywhere の組み合わせでコントロールできる場合があるが、WebflowのDesigner上での細かい制御には Custom Code 埋め込みが有効だ。
レスポンシブごとにフォントサイズを変えるだけでなく、max-width をemで指定して1行あたりの文字数を制限するアプローチも有効だ。
/* 読みやすい1行の長さを制御 */
.article-body {
max-width: 38em;
}5.多言語サイトの構築方法（Webflow Localization）
2023年後半から、WebflowはLocalization（多言語化）機能を正式リリースした。これにより、従来のように別ドメイン・別サイトで多言語対応する必要がなくなり、1つのWebflowプロジェクトで複数言語のサイトを管理できるようになった。
5-1.Webflow Localizationの基本的な仕組み
Localization機能では、1つのページに対して言語ごとに異なるコンテンツを設定できる。デザインの構造は共通で、テキストや画像のみを言語ごとに差し替える仕組みだ。
URLの構造は以下のいずれかを選択できる。
- サブディレクトリ型:
example.com/ja/とexample.com/en/ - サブドメイン型:
ja.example.comとen.example.com
SEO観点では、どちらでも hreflang タグを適切に設定すれば問題ない。サブディレクトリ型のほうが管理しやすいため、特別な理由がなければこちらを選ぶと良い。
5-2.設定手順
- Localization機能の有効化:
Project Settings→Localizationタブから機能を有効にする。なお、Localizationは有料プランで利用可能で、対応プランの確認が必要だ。 - Primary localeの設定: まず主言語（例: 日本語）をPrimary localeとして設定する。
- Secondary localeの追加: 英語などの追加言語をSecondary localeとして追加する。
- コンテンツの翻訳: Designerのパネル上部にあるLocaleセレクターで言語を切り替え、各言語のテキストを入力していく。
- フォントの言語別設定: 日本語と英語では最適なフォントが異なる場合がある。Localizationでは言語ごとにスタイルを調整する機能も持っている。
5-3.CMSと多言語の組み合わせ
CMSコレクションのコンテンツも多言語化できる。コレクションのフィールドごとに言語別の値を設定する形になる。ブログ記事やサービス説明など、コンテンツが多い場合でも体系的に管理できるため、翻訳ワークフローを構築しやすい。
6.日本語サイト制作時のSEO・テクニカル設定
6-1.lang属性の設定
日本語サイトでは <html lang="ja"> の設定が必須だ。Webflowでは Project Settings → SEO タブから、サイト全体の lang 属性を設定できる。また、Localizationを使っている場合は、各言語に対して適切な lang 属性が自動的に付与される。
lang 属性はスクリーンリーダーの読み上げにも影響するため、アクセシビリティの観点からも重要だ。
6-2.hreflangの設定
多言語サイトでは、各言語ページが互いに対応していることを検索エンジンに伝える hreflang タグが必要だ。Webflow Localizationを使った場合、hreflangタグは自動で生成される。
手動で多言語化している場合は、Project Settings → Custom Code → Head Code にhreflangタグを手動で記述する。
<link rel="alternate" hreflang="ja" href="https://example.com/ja/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />6-3.OGP（Open Graph Protocol）の設定
SNSでシェアされた際に表示されるOGPも、言語ごとに設定することが望ましい。WebflowのPage Settingsでは、各ページのOGPタイトルとディスクリプションを設定できる。
Localizationを使っている場合は、言語ごとに異なるOGPメタ情報を設定できるため、日本語ページを日本語でシェアしたときに日本語のOG情報が表示される。
6-4.構造化データの言語設定
JSON-LDで構造化データを設定する場合、inLanguage プロパティで言語を明示することを推奨する。
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Webflowの日本語対応ガイド",
"inLanguage": "ja",
"url": "https://f2t.jp/blog-post/webflow-japanese"
}これをWebflowのカスタムコードセクション（<body> 前に追加）に埋め込むことで、検索エンジンが言語情報を正確に認識できるようになる。
6-5.ページ速度と日本語フォントの最適化
先述の通り、日本語フォントはファイルサイズが大きい。Google PageSpeed Insightsでスコアを確認しながら、以下の点を最適化すると良い。
- 使用するフォントウェイトを最小限にする（2〜3種類）
font-display: swapを使い、フォント読み込み中もテキストが表示されるようにする- 可能であればフォントのサブセット化を行う
WebflowはGoogle Fontsを使う場合、font-display: swap を自動的に適用してくれるが、カスタムフォントをアップロードした場合は手動での対応が必要になることがある。
7.まとめ
Webflowで日本語サイトを作るうえで抑えておくべきポイントを整理する。
- フォントは必ず明示的に指定する。Noto Sans JPを基準に用途に合わせて選ぶ。
- 行間は
1.8前後、文字間隔は0.02em程度から調整する。 - 禁則処理のCSSを追加し、読みやすいテキスト組版を実現する。
- 多言語対応はWebflow Localizationを使うと管理が楽になる。
lang="ja"の設定、hreflangタグ、構造化データのinLanguageを忘れずに設定する。
日本語対応のノウハウは英語圏の情報では補えない部分が多く、制作現場での経験が重要になる。設定一つひとつを理解しながら積み上げていくことで、ユーザーにとって読みやすく、検索エンジンにも正確に認識される日本語Webflowサイトが作れるようになる。
Webflowでのwebサイト制作についてお困りのことがあれば、ぜひ f2t.jp にご相談ください。日本語Webflowサイトの構築から多言語対応まで、実績をもとにサポートします。
