カラー設定・フォント
カラー・フォント設定 — カスタマイザーマニュアル
> こんな質問に答えます:
> - サイト全体の色を変えたい
> - フォント（文字の種類）を変更したい
> - メインカラーやアクセントカラーの設定方法は？
> 別名・よくある呼び方: 色を変えたい、色の変更、配色、文字の種類、書体、フォント変更、カラー設定、メインカラー
> 設定場所: 外観 → カスタマイズ → 「共通設定 - カラー（色）」/「共通設定 - フォント」
> このページのURL: https://lite-word.com/manual/colors-fonts/
サイト全体の色とフォントを一括管理する設定。カスタマイザーで設定した値は全ページに自動反映される。
設定手順
サイトの色を変更する
- 外観 → カスタマイズ を開く
- 「共通設定 - カラー（色）」 を開く
- メインカラーを選ぶ（ボタン・リンク・見出し装飾など多くの要素に反映される）
- アクセントカラーを選ぶ（ホバー時やサブ要素に使われる）
- 必要に応じてテキスト色・リンク色・カラー1〜3を設定
- 「公開」 で保存
サイトのフォントを変更する
- 外観 → カスタマイズ を開く
- 「共通設定 - フォント」 を開く
- サイト全体のフォントファミリーを選ぶ（迷ったら「Noto Sans JP」がおすすめ）
- フォントウェイトを選ぶ（400=標準、500=やや太め）
- 固定ページ・投稿ページで別フォント・サイズにしたい場合は個別に設定
- 「公開」 で保存
カラー設定
設定一覧
| 設定名 | 説明 |
|---|---|
| メインカラー | サイト全体のブランドカラー。ボタン・見出し装飾・リンクなど多くの要素に反映される |
| アクセントカラー | CTAボタンやホバー時の強調色に使用 |
| 通常の文字の色 | 本文テキストの色。真っ黒よりも濃いグレーの方が読みやすい |
| カラー１〜３ | 自由に使える追加カラー。ブロックの色設定で選択可能。デフォルトはメインカラーと同じ |
| リンクテキストの色 | 本文中のリンクの色 |
| 新規タブの場合にアイコンの表示 | 新しいタブで開くリンクにアイコンを付けるかどうか |
業種別おすすめカラー
| 業種 | メインカラー | 理由 |
|---|---|---|
| 美容室・サロン | ピンク系・ゴールド系 | 女性らしさ・高級感 |
| 医療・クリニック | 青系・水色系 | 清潔感・信頼感 |
| 飲食店 | 赤系・オレンジ系 | 食欲・活力 |
| 士業・コンサル | 紺系・ダークブルー | 信頼感・専門性 |
| IT・テック | 青系・グリーン系 | 先進性・安心感 |
| 教育・スクール | 緑系・オレンジ系 | 成長・明るさ |
リンクアイコン表示について
- 「表示する」 → 新しいタブで開くリンクに小さなアイコンが付く。外部リンクだとユーザーに伝わりやすい
- 「表示しない」 → アイコンなし。デザインをスッキリさせたい場合
フォント設定
サイト全体のフォント
サイト全体のデフォルトフォント。日本語サイトでは Noto Sans JP が最も人気。明朝体は高級感・和風に合う。
| 設定名 | 説明 |
|---|---|
| フォントファミリー | サイト全体で使うフォントを選択。デフォルトはゴシック体 |
| フォントウェイト | 文字の太さ。デフォルトは400（標準） |
固定ページのフォント
固定ページだけ別のフォント・サイズに変更できる。
| 設定名 | 説明 |
|---|---|
| フォントファミリー | 固定ページ用のフォント。未設定の場合はサイト全体と同じ |
| フォントウェイト | 固定ページ用の文字の太さ。未設定の場合はサイト全体と同じ |
| フォントサイズ（PC） | PC表示時のフォントサイズ。デフォルトは17px |
| フォントサイズ（タブレット） | タブレット表示時のフォントサイズ。デフォルトは16px |
| フォントサイズ（スマホ） | スマホ表示時のフォントサイズ。デフォルトは16px |
投稿ページのフォント
ブログ記事など投稿ページ専用のフォント設定。ブログ記事の読みやすさに直結する。ブログ記事は16px以上がおすすめ。スマホは15px〜16pxが標準。
| 設定名 | 説明 |
|---|---|
| フォントファミリー | 投稿ページ用のフォント。未設定の場合はサイト全体と同じ |
| フォントウェイト | 投稿ページ用の文字の太さ。未設定の場合はサイト全体と同じ |
| フォントサイズ（PC） | PC表示時のフォントサイズ。デフォルトは17px |
| フォントサイズ（タブレット） | タブレット表示時のフォントサイズ。デフォルトは16px |
| フォントサイズ（スマホ） | スマホ表示時のフォントサイズ。デフォルトは16px |
フォントサイズの選択肢
12px 〜 20px（1px刻み）から選択可能。
| サイズ | 用途の目安 |
|---|---|
| 12〜13px | 非常に小さい。注釈やフッター向き |
| 14px | 小さめ。キャプションや補足テキスト |
| 15〜16px | 標準的な本文サイズ。迷ったらこれ |
| 17〜18px | やや大きめ。読みやすさ重視 |
| 19〜20px | 大きめ。シニア向けやインパクト重視 |
選べるフォント一覧
無料 日本語フォント（12種）
| フォント名 | 種類 | 特徴 |
|---|---|---|
| gothic | ゴシック | デフォルト。システムゴシック体 |
| mincho | 明朝 | システム明朝体 |
| Noto Sans JP | ゴシック | おすすめ。 Googleの標準フォント。読みやすく汎用性高い |
| Zen Kaku Gothic New | ゴシック | モダンでスッキリ。企業サイト向き |
| Sawarabi Gothic | ゴシック | 柔らかい印象のゴシック |
| Murecho | ゴシック | 丸みのあるモダンゴシック |
| IBM Plex Sans JP | ゴシック | テクノロジー系に合う |
| BIZ UDPGothic | ゴシック | ユニバーサルデザイン。行政・医療向け |
| Noto Serif JP | 明朝 | 格式高い印象。和風・高級感のあるサイトに |
| Sawarabi Mincho | 明朝 | 柔らかい明朝体 |
| M PLUS Rounded 1c | 丸ゴシック | カジュアルで親しみやすい |
| Kosugi Maru | 丸ゴシック | 可愛らしい印象 |
無料 英語フォント（14種）
| フォント名 | 種類 | 特徴 |
|---|---|---|
| Roboto | サンセリフ | Google標準。汎用的 |
| Lato | サンセリフ | 柔らかいサンセリフ |
| Montserrat | サンセリフ | モダン。見出し向き |
| Sora | サンセリフ | 幾何学的でクリーン |
| Josefin Sans | サンセリフ | エレガントでスタイリッシュ |
| Open Sans | サンセリフ | 読みやすい定番フォント |
| Raleway | サンセリフ | 細身でモダン |
| Coming Soon | 手書き風 | カジュアルな手書き |
| Lacquer | デザイン | インパクトのあるペイント風 |
| Abril Fatface | デザイン | 太い飾り付きフォント。見出し向き |
| Lavishly Yours | 筆記体 | 華やかな筆記体 |
| Sacramento | 筆記体 | 上品な筆記体 |
| Hurricane | 筆記体 | 流れるような筆記体 |
| Dancing Script | 筆記体 | エレガント。装飾向き |
プレミアム 日本語フォント（23種・有料会員限定）
| フォント名 | 種類 |
|---|---|
| Zen Maru Gothic | 丸ゴシック |
| Dela Gothic One | デザイン |
| Zen Kaku Gothic Antique | ゴシック |
| DotGothic16 | デザイン |
| RocknRoll One | デザイン |
| Shippori Mincho | 明朝 |
| Shippori Mincho B1 | 明朝 |
| Hina Mincho | 明朝 |
| Zen Old Mincho | 明朝 |
| Yuji Mai | デザイン |
| Yuji Syuku | デザイン |
| Zen Kurenaido | デザイン |
| Zen Antique | デザイン |
| New Tegomin | 明朝 |
| WDXL Lubrifont JP N | デザイン |
| Kaisei Decol | デザイン |
| Potta One | 丸ゴシック |
| Hachi Maru Pop | デザイン |
| Rampart One | デザイン |
| Stick | デザイン |
| Yusei Magic | 手書き風 |
| Klee One | 手書き風 |
| Mochiy Pop P One | デザイン |
FAQ
カラーについて
Q. メインカラーを変えたら、どこに反映されますか？
A. ボタン、リンク、見出し装飾、テーブルのアクセント、各種ブロックの装飾など、サイト全体の多くの要素に一括反映されます。
Q. カラー1〜3は何に使いますか？
A. ブロックエディタの色選択で使える追加カラーです。デフォルトはメインカラーと同じ色ですが、よく使うブランドカラーを登録しておくと便利です。
Q. 背景色はカスタマイザーから変更できますか？
A. サイトの背景色は現在カスタマイザーからの変更はできません。変更が必要な場合はカスタムCSSで上書きしてください。
フォントについて
Q. おすすめのフォントはどれですか？
A. 迷ったら Noto Sans JP（ゴシック）がおすすめです。Googleの標準フォントで読みやすく、あらゆるジャンルのサイトに合います。明朝体なら Noto Serif JP が安定しています。
Q. フォントウェイトはどれを選べばいいですか？
A. 400（標準）が最も読みやすいです。やや太めにしたい場合は 500 を選んでください。見出し専用フォントでない限り、700以上は本文には太すぎることが多いです。
Q. 固定ページと投稿ページで別のフォントを使えますか？
A. はい。「サイト全体のフォント」とは別に、固定ページ・投稿ページそれぞれにフォントファミリー、ウェイト、サイズを個別設定できます。
Q. プレミアムフォントを使うには？
A. LiteWordの有料プランに加入すると、23種の追加日本語フォントが選択肢に表示されるようになります。
Q. フォントサイズはPC・タブレット・スマホで別々に設定できますか？
A. はい。固定ページ・投稿ページのフォントサイズは、PC / タブレット / スマホそれぞれ12px〜20pxの範囲で個別に設定できます。
関連ページ
最終更新: 2026-03-21