フォントを選び、文字の見せ方を整える

Day04では、デザインを見て「なんとなく良い」で終わらせず、どこがどう見えるからそう感じるのかを言葉にしました。Day05は、その対象をフォントに変える回です。

「かわいい」「かたい」「落ち着いている」「勢いがある」と感じたら、その印象をメモしてみましょう。フォント名を暗記するより、どんな声に聞こえるかを言葉にできるほうが、初めて見るフォントにも応用できます。

書体は、文字のデザインに統一感を持たせるルールやスタイルです。フォントは、その書体をパソコンやアプリで使えるようにデータ化したものです。

考える順番は、字体 → 字形 → 書体 → フォント。字体は「あ」のような文字の概念、字形はその文字が実際に表れた形、書体は字形のまとまり、フォントはそれを使えるデータ、と整理できます。

文字サイズを30pxにしても、すべてのフォントが同じ大きさに見えるわけではありません。指定しているのは、文字を収める目に見えない枠である仮想ボディの大きさです。

実際にデザインされている部分が字面です。字面の大きさはフォントごとに違うので、同じpxでも小さく見えたり大きく見えたりします。和文書体は文字の仮想ボディがそろいやすく、欧文書体は文字ごとの高さや上下の出っ張りが異なる点も覚えておきましょう。

数字だけをそろえて終わりにせず、最後は画面上の見た目で判断します。

和文書体は、形の特徴から受ける印象を言葉にすると選びやすくなります。下の表は「どれが正解か」ではなく、目的に合わせて候補を絞るための判断表です。

長い本文に個性の強い書体を使うと読みづらくなることがあります。まず本文は読みやすさを確保し、個性の強い書体は短い見出しやアクセントに回すと安全です。

欧文では、文字の端の装飾や筆記体らしさが印象を大きく左右します。スライドに誤植があっても、本文では正しい表記で整理します。

使う場面を先に決めると、候補を見たときに「この声は今回の目的に合うか」と判断できます。

1. 擬人化：どんな人に話してほしいかを考える。美しく引き締まった声、大きく元気な声、温かく包み込む声のように、人物像から候補を探します。
2. 懐：文字の内側の空間を見る。狭い懐は緊張感や凝縮感、広い懐はおおらかさやゆとりにつながります。
3. 重心：文字の内側の空間がどの高さにあるかを見る。高い重心はスタイリッシュで優雅、中ほどは読みやすく、低い重心は安定した印象になりやすいです。
4. 歴史：長く使われてきた書体には、読みやすさや愛されてきた理由があります。「なぜこの書体を選んだのか」を歴史や背景と結びつけると、クライアントへの説明に説得力が出ます。

フォントを探すときは、名前を丸暗記するより、検索窓に雰囲気＋書体名を入れて候補を出す方法が便利です。たとえば「かわいい　明朝体」のように、欲しい印象と種類を組み合わせます。

フォント名の横に小さな三角があるものは、開くと同じ書体の太さ違いなどを選べます。三角がない場合はファミリーがなく、太字にできないことがあります。タイトルは太め、本文は標準の太さというように、役割で使い分けましょう。

文字間隔が詰まって見えるときは、少し広げると読みやすくなります。漢字が連続する見出しや四字熟語は特に詰まりを感じやすいので、広げた後に全体の幅と行末を確認します。広げすぎて行が不自然に分かれるなら、文字サイズや改行も一緒に見直します。

1. 色を変える：デザイン内ですでに使っている色から選び、全体の統一感を保つ。
2. 一部の色を変える：すべてを派手にせず、1文字につき1〜5箇所程度を目安に、視線を集めたい部分だけ変える。
3. 窓に色をつける：RやPの内側、漢字の隙間など、文字の中にある空間を使う。色・ドット・斜線などを入れると、控えめな変化を作れる。
4. つなげる：文字同士をつなぎ、女性らしさや優雅さを出す。細めの明朝体など、つなげても読みにくくなりにくい書体から試します。

装飾は足すほど良くなるわけではありません。まず1箇所だけ試し、主役がどこか分からなくなっていないか、縮小しても読めるかを確認しましょう。

昔のWebページは、見る人の端末に入っているフォントに頼るしかありませんでした。制作者が明朝体で作っても、その端末に同じフォントがなければ別の書体で表示されます。

Webフォントは、インターネット上のフォントファイルを読み込んで、見る人の環境に左右されにくく同じ書体で表示する仕組みです。一方、デバイスフォントは端末にインストールされているフォントです。

Canvaのように完成したデザインを画像やPDFとして書き出す場合と、Webサイトや共有資料で文字を表示する場合では、フォントの扱いが変わります。文字が「画像に焼き込まれているのか」「閲覧環境で再表示されるのか」を意識すると、納品後の見え方を説明しやすくなります。

前半では、目的に合う書体を選びました。後半は、その文字を置いたあとにどう見せるかを考えます。文字の内容が同じでも、間隔・大きさ・動き・周囲の形で、読み手が受け取る印象は変わります。

ここで大切なのは、動画の見た目をそのまま再現することではありません。Canvaで作る自分のデザインに、どのパターンが役立つかを選べるようになることです。

いきなり影や吹き出しを足すと、整っていない部分まで目立ってしまいます。実習では、まずSTEP1を済ませてからSTEP2へ進みましょう。

文字と文字の間が詰まりすぎると読みにくく、空きすぎるとまとまりが弱くなります。目安として、字間は1文字の大きさの5〜10％、行間は1文字の大きさの70％程度から試します。Canvaの単位や画面表示が動画と違う場合は、数値を無理に合わせず、相対的な見た目で調整してください。

調整したら、タイトルだけでなく、行末のそろい方と全体の幅も確認します。文字を詰めて一行に押し込むより、改行や文字サイズを見直すほうが読みやすくなる場合もあります。

同じ大きさで入力しても、文字の形によって空き方が違って見えます。画数の多い漢字は詰まりやすく、ひらがなやカタカナは開いて見えやすい。斜めの線や、上下左右に出っ張る形も、隣の文字との距離を変えて見せます。

全体の文字間隔を調整したあと、特に違和感がある並びだけを3文字単位で確認します。Canvaの文字間隔はテキスト全体に一律で効くことがあるため、1文字だけ動かしたい場合は、テキストボックスを分ける方法も候補になります。

1. 全角・半角をそろえる：数字や英字が混ざるとき、幅の違いでリズムが崩れていないか確認します。
2. 句読点や記号の後ろを見る：記号の形によって余白が目立つことがあります。前後を含めて確認します。
3. ひらがな・カタカナの隙間を見る：漢字との組み合わせで急に開いて見える箇所がないか探します。

うまくいかないときは、まず全角・半角、次に記号、最後にかなの組み合わせという順で原因を切り分けると、やみくもに全体を動かさずに済みます。

文章全体をぼんやり眺めると、局所的な詰まりを見落とします。1〜3文字目、2〜4文字目、3〜5文字目というように、3文字ずつのブロックを少しずつずらして確認します。

見るポイントは、隣り合う文字の間隔が均等か、急に詰まる箇所がないか、3文字のまとまりが不自然に浮いていないかです。文字を読むのではなく、黒い形と白い空間のリズムを見るのがコツです。

文字間や行間の空間は、読みやすさだけでなく印象も変えます。狭い＝迫力・インパクト、広い＝高級感・落ち着きが基本の方向です。

広げれば高級になるわけではなく、コンセプトに合うかが基準です。狭くして迫力を出す場合も、文字がつぶれて読めなくなる前で止めます。スペースが足りないときは無理に詰めず、文字サイズ・改行・配置を戻って見直しましょう。

斜体は対応しているフォントが少ないため、Canvaではテキストを選択し、斜体のIアイコンが有効かを確認します。アイコンがグレーなら、そのフォントでは斜体にできません。現場で確認された例として「思源宋体」で斜体が使えるフォントが見つかる場合がありますが、構成や対応状況は変わる可能性があるため、毎回Iアイコンを確認してください。

斜体にできない場合は、斜体対応の別フォントを試すか、テキストボックス全体を少し回転させる方法があります。どちらも、読みやすさとレイアウトの余白を確認して使いましょう。

20パターンは、目的別に4タイプへ整理できます。名前を覚えることより、「何を目立たせたいか」に合わせて選ぶことが大切です。

同じパターンでも、文字数・背景・目的で結果は変わります。まずは1つ選んで小さく試し、主役が明確か、読みやすいか、他の要素と競合していないかを確認しましょう。

実習中は、この一覧を見ながら進めましょう。全部を完成させる必要はありません。「これ使えそう」と思うパターンが1つ増えれば、それだけデザインの引き出しが増えます。

動画で紹介された操作はPhotoshopやIllustratorを前提にしたものがあります。Canvaで同じ機能名や操作が見つからない場合は、近い機能へ置き換え、目的である「文字を読みやすく、必要な場所を目立たせる」を優先してください。