前回は、Canvaのテンプレートを使って図解を作る方法を学びました。テンプレートを選んで、文字を変えて、色を調整して…基本的な編集はできるようになりました。
でも、完成した図解を見て「なんだか文字が読みにくい」と感じたことはありませんか？
その原因はフォント（文字）の選び方や設定にあるかもしれません。
図解のデザインで重要なのは、文字の読みやすさです。どんなに美しい配色でも文字が読みにくければ、読者は内容を理解できません。
第3回の目標は、「フォント選びと文字設定で、図解を読みやすくする」ことです。
図解の読みやすさは「フォント」で決まる
読者は図解を見た瞬間、わずか0.5秒で「読むか、飛ばすか」を判断すると言われています。「読みにくい」と判断されたら、どれほど中身が良くても伝わりません。まずは、多くの人が陥りがちな「読みにくさの原因」をみていきましょう。
初美 図解を作ってみたけど、なんだか読みにくい
達子 フォントを確認してみましょう
読みにくい図解に共通する3つの原因
読みにくい図解には、共通するパターンがあります。
- フォントが細すぎる
デザイン性を重視した繊細な文字や、線の太さ（ウェイト）が軽すぎるフォントを使っていると、PCではきれいに見えても、スマホで見たときに文字がつぶれてしまうことも。 - 文字サイズがバラバラでメリハリがない
見出しと本文の文字サイズの差があまりなかったり、逆にありすぎたりすると、どこが重要な情報なのかが分かりにくくなります。情報の優先順位（階層）が整理されていない図解は、読者を混乱させてしまいます。 - 行間が詰まりすぎている
文字と文字の上下の間隔（行間）が狭すぎると、窮屈な印象を与え、目が疲れてしまいます。特に説明文など複数行のテキストを入れる場合は、行間の設定が読みやすさを大きく左右します。
フォントだけで図解の印象が変わる理由
フォントは単なる文字の形ではなく、「声のトーン」のような役割を持っています。
例えば、「重要！」という言葉を伝えるときを想像してみてください。
太いゴシック体なら、元気よく力強い感じ → 安心感、信頼感
細い明朝体なら、静かで繊細な感じ → 高級感、大人っぽさ
丸文字なら、親しみやすい感じ → カジュアル、子ども向け
同じ言葉でも選ぶフォントによって、読者が受け取るイメージはガラリと変わります。
記事を書くとき、ターゲット読者に合わせて「語尾」や「言葉選び」を変えるでしょう。図解のフォントも同じです。記事のトーンと図解のフォントが合致していると、記事全体の完成度がグッと高まります。
まず覚えよう！ゴシック体と明朝体の違い
Canvaには多くのフォントが登録されていますが、基本となるのは大きく分けて「ゴシック体」と「明朝体」の2種類です。この2つの違いと得意なシーンを理解しておけば、フォント選びは楽になるでしょう。それぞれの特徴を説明します。
達子 ゴシック体と明朝体の違いを覚えましょう
ゴシック体の特徴と向いている場面
ゴシック体は、縦横の線の太さがほぼ均一で、装飾がないシンプルな書体です。英語フォントでいう「サンセリフ体」にあたります。
特徴
- 線の太さが均一
- 角がしっかりしている
- シンプルで読みやすい
- 現代的で力強い印象
向いている場面
- Webサイトのバナーやボタン
- プレゼン資料やスライド
- 強調したい見出しやキャッチコピー
ゴシック体は、特にデジタル画面での視認性が高いのが特徴です。スマホやPCで見る図解には、ゴシック体が最適です。
明朝体の特徴と向いている場面
明朝体は、「うろこ」と呼ばれる三角形の飾りや「はね」「はらい」が線の端についている書体です。筆で書いたような強弱があり、英語フォントでいう「セリフ体」にあたります。
特徴
- 縦線が太く、横線が細い
- 「うろこ」「はね」「はらい」がある
- 上品で落ち着いた印象
- フォーマル、知的な雰囲気
向いている場面
- 小説や新聞などの印刷物での長文
- 年賀状や挨拶状
- 高級ブランドや和の雰囲気を伝えたいとき
明朝体は、紙に印刷したときに美しく見えるフォントです。
図解にはゴシック体が基本
Webライターが記事内で使う図解を作るなら、ゴシック体を使うのが基本です。
理由1. スマホでの視認性が高い
Web記事は、今や7〜8割がスマホで読まれています※。明朝体特有の「細い横線」は、スマホの小さな画面や、画質の粗いモニターで見ると、線が消えてしまったり、かすれて読みにくくなったりします。線の太さが均一なゴシック体は、画面が小さくても文字の形がくっきり見えるのでどんなデバイスでもクッキリ読めます。
※参考：総務省｜令和6年版 情報通信白書
理由2. 流し読みに対応できる
Web記事の読者は、画面をスクロールしながら情報をスキャン（流し読み）します。 ゴシック体はシンプルで癖がないため、脳が瞬時に文字として認識しやすいというメリットがあります。パッと見て内容が入ってくる図解を作るためには、ゴシック体が最適です。
💡 例外：明朝体を使うとき
- 書籍の図解や、印刷を前提とした資料
- 格式高い、フォーマルな印象を出したいとき
- あえて「本文っぽさ」を出したいとき
達子 あえて明朝体を使うことで、効果が出る場面もあるの
初美 場面に合わせて使い分けるといいのね！
読みやすいフォントの選び方とおすすめ5選
ゴシック体を選ぶとしても、ゴシック体にもたくさんの種類があります。ここでは、フォントの選び方とCanva無料版で使えるおすすめフォントを紹介します。これを使えば、図解のクオリティがワンランクアップしますよ。
文字の太さ（ウェイト）と視認性
フォントを選ぶときに形と同じぐらい大切なのが、太さ（ウェイト）です。Canvaのフォント名には、「Medium」や「Bold」などの言葉がついているものがありますが、これは太さのレベルを表しています。
太さの順番（左から右へ太くなる）
Thin（極細）→ Light（細字）→ Regular（標準）→ Medium（中字）→Bold（太字）→Black（極太）
「Black」は色の黒ではなく、「Boldよりもさらに太い（極太）」という意味です。これを踏まえて、図解における鉄則を紹介します。
- 見出し・強調したい箇所 → 「Bold（太字）」以上
スマホの小さな画面でスクロールしながら見ても、「ここに大事なことが書いてある！」と目に飛び込んでくる太さを選びます。一番目立たせたい数字などには「Black（極太）」も有効です。 - 本文・説明文 → 「Medium（中字）」または「Regular（標準）」
長めの文章は、太すぎると黒く潰れて読みづらく、細すぎると背景に馴染んで読めなくなります。「中くらいの太さ」が最も目が疲れません。 - 「Thin（極細）」や「Light（細字）」 は使わない
おしゃれな雰囲気になりますが、視認性（見やすさ）は低いです。特に写真の上に文字を乗せる場合は、細い文字は読めないと考えて避けましょう。
Canva無料版で使えるおすすめ日本語フォント5選
Webライターに最適な日本語フォントを5つ紹介します。すべて無料版のCanvaで使えます。検索窓にフォント名を入力して探してみてください。
- Noto Sans JP（源ノ角ゴシック）【王道・シンプル】
Googleが開発した高品質フォント。クセがなく、どんなジャンルの記事にも合う万能選手です。太さのバリエーション（ウェイト）も豊富で、見出しから本文までこれ1つで完結できます。迷ったらこれを選びましょう。 - BIZ UDPゴシック【信頼感・ビジネス】
「ユニバーサルデザイン（UD）」といい、誰にでも読みやすいように設計されたフォントです。文字の形がはっきりしており、ビジネス記事や信頼性を重視したい解説図解に最適です。 - Zen丸ゴシック【親しみ・やわらかい】
角が丸くなったゴシック体です。子ども向け、育児、暮らし、美容など、やわらかい雰囲気を出したい記事におすすめ。「ゴシック体のキツさ」を消しつつ、読みやすさをキープできます。 - M PLUS（M＋）【モダン・あか抜け】
少し横に広がったような、現代的でおしゃれなデザインです。Noto Sansで物足りないときに使うと、図解が一気に洗練された印象になります。 - 小杉丸ゴシック（Kosugi Maru）【かわいい・可読性】
Zen丸ゴシックよりも少し線が太め。コロッとした可愛らしさがあります。スマホで小さく表示されても読みやすいので、吹き出しのセリフなどにもおすすめです。
日本語フォントと英語フォントの使い分け
Canvaにはおしゃれな英語（欧文）フォントもたくさんありますが、使うときは注意が必要です。
⚠️ 注意：英語専用フォントで日本語を打たない
英語専用フォントを選んだ状態で日本語を入力すると、その部分だけCanvaが自動的に標準フォントに置き換えて「□」や「？」と表示されることがあります。これを「豆腐（とうふ）」化や「文字化け」現象と呼びます。
文字が正しく表示されない場合は、英語専用フォントを選んでいないか確認しましょう。「Zen Kaku Gothic New」や「Noto Sans JP」といった日本語対応フォントを選ぶと安心です。（フォント名に「JP」があるものは、日本語対応です）
達子 英語専用フォントで日本語を打たないように
✅ おすすめの使い分け
- 日本語の文章 「日本語フォント」を使う
- 数字（01, 02…）、英単語（POINT, CHECK…） ここだけ「英語フォント」に変える
数字やアルファベットを「Oswald」や「Montserrat」といった英語フォントに変えると、デザインのアクセントになり、プロっぽいメリハリが生まれます。まずは日本語フォントで統一することから始め、慣れてきたら英語フォントとの使い分けに挑戦してみてください。
【実践】Canvaでフォントを設定・変更してみよう
使いたいフォントが決まったら、実際にCanvaで変更してみましょう。基本的な変更手順と、複数のページにある文字を一瞬で書き換える時短テクニックを紹介します。
テキストのフォントを変更する（2024–25 UI対応）
以下の3ステップで変更できます。
- テキストを選択する
キャンバス上の変更したい文字（テキストボックス）をクリックして選択状態にします（青紫色の枠がつきます）。 - フォントメニューを開く
画面上部のツールバーにある、現在のフォント名（例：「Canva Sans」など）が表示されている部分をクリックします。 - フォントを選んで適用する
画面左側にフォントの一覧パネルが開きます。
検索窓に「Noto」や「丸ゴシック」と入力すると、候補を絞り込めます。
一覧から好きなフォントをクリック、キャンバス上の文字に即座に反映されます。
一括変更機能で効率化する
テンプレートを使っていると、「見出しのフォントを変えたいけれど、スライドが10枚あるから全部直すのが面倒…」ということがありますよね。
そんな時は「すべて変更」ボタンを使いましょう。
ある箇所のフォントを変更した直後、左側のフォントパネルの一番下に、紫色のボタンで「すべて変更」という表示が出現します。「すべて変更」をクリックすると、デザイン内のすべてのページで使用されている「変更前のフォント」が、一瞬で「新しいフォント」に置き換わります。
「すべて変更」を使うと、1つずつ変更する手間がゼロになり、「あ、ここだけ直し忘れた」といったミスも防げます。Webライターの図解作成はスピードも命です。この機能を活用し、全体の統一感をサクッと整えましょう。
文字サイズの決め方と情報の優先順位の示し方
フォントの種類が決まったら、次は文字のサイズ（フォントサイズ）を決めます。
初心者の図解でありがちなのが、すべての文字が同じくらいの大きさになってしまっている状態です。これだと、読者はどこから読めばいいのかが分からずに迷子になってしまいます。
パッと見て内容が伝わる図解にするためには、文字サイズに明確な差をつけて情報の優先順位（どれが重要か）を示すことが大切です。
基本は3段階 “見出し＞小見出し＞本文” で差をつける
図解の中の文字列は役割ごとに3つに分類し、サイズに大きな差（ジャンプ率）をつけましょう。
- タイトル（一番言いたいこと） 最も大きく。図解のテーマを一目で伝える
- 見出し（項目の区切り） 中くらいの大きさ。内容のまとまりを示す
- 本文（詳しい説明や補足） 一番小さく。詳細を伝える
タイトルは本文の2倍以上を目安に、極端なくらい差をつけるのがポイントです。差をつけることで、読者の視線は「タイトル→本文」へとスムーズに移動できます。
例 タイトル 60px／本文 24px
重要なキーワードを「大きさ」で強調する
タイトルと本文の差だけではなく、「これを強調したい！」というキーワードがある場合も文字サイズの調整が有効です。同じ行の中でも、重要な単語だけをサイズアップさせると、言葉にリズムが生まれます。
- Webライターは稼げる仕事です （全部同じだと、平坦な印象）
- Webライターは 稼げる 仕事です （「稼げる」だけ太くして強調）
スマホで読めるかを確認する
Web記事は、読者の7〜8割がスマホで読みます。PCで図解を作成すると、PCの大きな画面ではきれいに見えてもスマホで見ると小さくて文字が読めないということも。
Canvaで図解を作っている最中に、スマホでの見え方を確認しておきましょう。
Canvaはクラウドで同期されているため、PCで作ったデザインをスマホアプリやブラウザから確認できます。最終的なチェックは、実際に自分のスマホで見るのが確実です。
とはいえ、フォントサイズを調節するたびに、スマホに切り替えるのは手間がかかります。作業のリズムを崩さずに確認するには、PC上の画面で図解サイズを縮小表示するのがおすすめです。
💡 Canvaでの操作
- Canva画面右下の「ズームバー（％表示）」を動かす
- 表示を「20%〜25%」くらいまで縮小し、文字が潰れずに読めるかを確認する
小さくした状態で文字が読めれば、スマホの画面でも問題なく読めます。
初美 スマホで確認するのが確実ね
行間（行送り）を整えると読みやすさが変わる
意外と見落とされがちなのが「行間（ぎょうかん）」です。行間とは、行と行の間の隙間のこと。行間が狭く、文字がギュウギュウに詰まっていると読む気を失わせてしまいます。
適切な行間で、読者の目に優しい図解に仕上げましょう。
行間が狭いと読みにくい理由
Canvaでテキストを入力したままの状態（デフォルト）では、日本語の文章にとっては行間が少し狭い場合があります。行間が狭いと、読者に以下のようなストレスを与えてしまいます。
- 文字が詰まって見える 文字の塊が黒く見え、圧迫感がある
- 読み間違いが起きる 行と行がくっついて見え、どこを読んでいるのか分かりづらい
- 目が疲れやすい
特にスマホの小さな画面では、行間が詰まっていると読みづらくなります。
行間の基準は1.3〜1.5倍
Web記事の図解において、読みやすい行間は「文字サイズの1.4倍〜1.5倍」といわれています。
- 1.0〜1.2（狭め） 見出しやタイトルなど、1行〜2行の短い言葉ならOK。長文だと窮屈。
- 1.4〜1.5（最適） 本文や説明文に最適。適度な余白があり読みやすい。
- 1.8以上（広め） ゆったりした印象になるが、広すぎると文章のまとまりがなくなって見える。
説明文を入力したら、まずは行間を1.4倍にしてみましょう。読みやすければそのまま、詰まって見えたら1.5倍～に広げると覚えておくと便利です。
💡 Canvaでの操作
- 調整したいテキストボックスをクリックして選択
- 画面上部のツールバーにある「高度な設定（左右矢印のマーク）」アイコンをクリック
- メニューが表示されるので、「行間隔」の数値を調整する
スライダーを右に動かすか、直接数字（例：1.4）を入力してもOKです。
【補足】文字間隔（字送り）はどうする？
「行間隔」の上に「文字間隔」というスライダーもありますが、基本的にはそのまま触らなくてOKです。
説明文などの長文で文字間隔を広げすぎると、単語のまとまりがなくなってバラバラに見えてしまい、逆に読みにくくなってしまいます。
例外として、タイトルを少し広げるのはアリです。「大見出し」や「キャッチコピー」のような短い言葉に限っては、文字間隔を少し広げる（目安：50〜100）と、ゆったりとした高級感や、洗練された印象が出ることがあります。「タイトルが詰まって見えるな」と感じたときにだけ試してみてください。
図解の文字を読みやすくするテクニック
ここからは、さらに読みやすさを高めるためのテクニックを紹介します。
太字で情報の強弱をつける
前述のように、文章の中で伝えたい「キーワード」がある場合、太字（ボールド）を活用しましょう。
「目立たせたいから」と全文を太字にすると、どこが重要なのか分からなくなってしまいます。
- NG Webライターは 場所を選ばずに 働ける仕事です（全部太い）
- OK Webライターは 場所を選ばずに 働ける仕事です（強調したい点だけ太い）
💡 Canvaでの操作
テキストボックスを選択（または文字をなぞって選択）し、ツールバーの「B（太字）」アイコンをクリックするだけです。「ここだけ読んでほしい！」という単語に絞って太くすることで、読者の視線を誘導できます。
背景と文字色のコントラストを確保する
「文字が背景に溶け込んで読めない」というのもよくある失敗です。 文字色を決めるときは、背景色とのコントラスト（明暗の差）をはっきりつけましょう。
- 薄い背景 なら 濃い文字色（黒、濃いグレー、紺など）
- 濃い背景 なら 白っぽい文字色（白、薄い黄色など）
達子 パステルカラーの背景に白文字
黒い背景に青い文字
などはNGです！
背景色と文字色のコントラストを意識するだけで、誰が見てもストレスのない読みやすい図解になります。
「左揃え」で見やすさをアップする
図解を作るとき、なんとなくすべてのテキストを「中央揃え（センタリング）」にしていませんか？ タイトルや見出しなどの短い言葉なら中央揃えでOKですが、2行以上の説明文（長文）は「左揃え」にするのが鉄則です。
Web記事など横書きの文章はすべて「左」から始まります。 中央揃えだと行ごとに「読み始めの位置（左端）」がガタガタとずれるため、読者の視線移動が増えて目が疲れてしまいます。
- タイトル・見出し デザインに合わせて「中央揃え」でもOK
- 説明文・本文 基本は「左揃え」にする
💡 Canvaでの操作
テキストを選択し、ツールバーの「配置」アイコン（横線が並んでいるマーク）をクリックすると、「左揃え」「中央揃え」「右揃え」が切り替わります。
【実践】Canvaで図解の文字を読みやすく整えてみよう
これまで学んだ知識を使って、初心者が陥りがちな「読みづらい図解」を「伝わる図解」に手直ししてみましょう。
Before｜よくある「読みづらい図解」の例
フォントやレイアウトを意識せずに、とりあえず文字を入力しただけの状態です。 読者にとっては「どこから読み始めればよいのか」が掴みにくく、内容が頭に入ってきません。
❌ 気になるポイント
- フォント 細い明朝体で、スマホでは特に読みにくい
- 行間 詰まりすぎて窮屈
- 配置 長文なのに中央揃えで、読み出し位置が安定しない
- メリハリ どこが重要なのか分からない
After｜フォントと行間を整えた例
次に、今日学んだテクニックを反映して修正したものです。色使いは変えていませんが、フォントと行間、配置を整えました。
⭕️ 改善のポイント
- フォント ゴシック体に変更し、視認性アップ
- 行間 行間隔を「1.5」に広げ、ゆったり読めるように
- 配置 本文を「左揃え」にし、読み出しの位置を揃えた
- メリハリ 強調したいポイントを「太字」に
第3回のまとめと次回予告
第3回では、フォント選びと文字設定で図解を読みやすくする方法を解説しました。フォントは、図解の読みやすさを決める重要なポイントです。フォントを意識すれば、あなたの図解はさらに読みやすくなりますよ！
第4回では、色と配色のルールについて解説します。
- 色が読者に与える心理効果
- 「3色ルール」で統一感を出す方法
- Canvaのカラーパレット活用術
- 素人っぽく見えないプロ級の配色テクニック
色の使い方をマスターすれば、あなたの図解は完璧です。
※ 掲載している情報は2025年12月時点のものです。
