ウェブ

文字組の役立つ基本ルール|タイトルの作り方【アイキャッチ画像】

文字組デザイン3

「ビジュアルが中心」か「読み物が中心」かによってどのような表現をするか考えて制作することがデザインで必要なことと思います。

読み手に伝わるデザイン」「心に残るデザイン」「読みやすい文字間」を制作する上で大切なことは、センスよりも基本ルールとデザインの目的を明確にすることだと考えています。

広告バナーやblogアイキャッチ画像を作る際に、自身が意識している文字間や文字組のルールついてまとめました。

プル

製作しアウトプットしながらデザイン力を伸ばしていきましょう。

文字間(仮想ボディ)

和文書体の文字は「仮想ボディ」と呼ばれる正方形の枠内に収まるように設定されています。文字によって大きさは異なりますが、仮想ボディの大きさは均一です。

仮想ボディ
仮想ボディ

和文書体は、すべての文字が同じ大きさの仮想ボディが均一に設定されていますが、欧文は英文と数字と種類によって仮想ボディの幅が異なります。

大きい文字の文字間

タイトルや見出しで強調する文字の場合は、文字を入力した後で文字間を開けて調整する事をおススメします。

枠を作りその枠内に一文字一文字均等に揃えていきます。

見出し表現
見出し表現

ベタ組みだと少しバランスが崩れてしまうので、枠に綺麗に入るようにカーニングで調整していきます。

小さい文字の文字間

見出しなどと違って文字の強弱で弱の小さい文字に関しては、間隔を狭くする「ツメ」をしっかりと行います。

ツメ
ツメ

文字間を調整することを「カーニング」といい、間隔を狭めることを「ツメ」といい、間隔を広げることを「アキ」といいます。文字を入力した後に行う重要なテクニックです。

ひらがなと漢字(和文)

ひらがなやカタカナは漢字に比べて、文字間が空いて見えます。

カーニングにおいてカタカナは「イ」と「ン」の間隔が広すぎる為「ツメ」。漢字はどの文字も狭すぎるので「アキ」で微調整します。

カーニングサンプル
カーニングサンプル

自動カーニングもありますが、始めのうちは一文字一文字丁寧にカーニングしていくことで文字間の感覚を身につけることができます。

ショートカットキー「Alt + ←→」で微調整可能。

この作業を何回も繰り返ししていると、自身が「しっくりくる」「美しい」と思う文字間に関して自然に身につくと思います。

英数字(欧文)

和文に英数字が登録されていますが、和文は基本和文を綺麗に表示するためにデザインされたフォントである為、和文で英数字を使用することはNG

欧文例
欧文例

上が小塚ゴシックPro(和文)の英文で、下がArial(欧文)の英文です。見比べた時にやはり、欧文を使った英文が美しく見えますね。

文字組(応用編)

以上の基本を踏まえた上での応用編として後は、文字組に関してです。

左右のバランスを考えたデザイン
左右のバランスを考えたデザイン
中心を軸にしたデザイン
中心を軸にしたデザイン
枠線を入れたデザイン
枠線を入れたデザイン
左右の幅を均等を意識したデザイン
左右の幅を均等を意識したデザイン

↓より伝えたいことを、より伝えるために、余白を作ることを意識できる本です。

けっきょく、よはく。 余白を活かしたデザインレイアウトの本
けっきょく、よはく。 余白を活かしたデザインレイアウトの本

▪けっきょく、よはく。余白を活かしたデザインレイアウトの本
グラフィックデザイナーはもちろん、ノンデザイナーの方にも役立つ1冊。ポスター、チラシ、POP、DM、プレゼン資料、会社案内、名刺などさまざまな作例でデザインのNG/OKが紹介されています。「余白を作ること」を意識すれば、誰でも今より一歩垢抜けたオシャレなデザインができる!余白に注目したデザインレイアウトの本です。

book
created by Rinker
¥1,980 (2022/10/05 03:54:01時点 楽天市場調べ-詳細)

▪ノンデザイナーズ・デザインブック [第4版]
プロで無くても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。日本語版補足。日本語によるデザインサンプル、和文タイポグラフィ。18年ずっと売れ続けているロングセラーの本です。

book
created by Rinker
¥2,398 (2022/10/05 03:22:25時点 楽天市場調べ-詳細)

文字組を少し変えただけでも大分印象が変わってきます。カーニングを行った上で文字列を美しく並べる。デザインに正解はありませんが基礎を基準に後は自由に自身のデザイン感性をぶっこむとまた一段と良い仕上がりになってくると思います。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA