静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ノンデザイナー > ノンデザイナーのためのデザイン基本ルール
~文字編 文字詰め~

ノンデザイナー ノンデザイナーのためのデザイン基本ルール
~文字編 文字詰め~

  • このエントリーをはてなブックマークに追加

こんにちは、制作部 部長の坂本です。
今回から「ノンデザイナーのためのデザイン基本ルール」と題して
デザイナーでない方にもツボを押さえれば格段に良くなるテクニックをわかりやすく紹介してまいります。
説明の中で登場した業界用語もピックアップ。
「本日のキーワード」としてまとめています。

記念すべき第一回は「文字詰め」です。
最初から聞き慣れない言葉が出てきましたが、
要するに文字と文字の間隔を詰めたりして調整することを言います。

この文字の間隔を調整することで文章が格段に読みやすくなります。
今回は、Adobe PhotoshopCCを使って、文字詰めの簡単な方法をデザイナーでない方でもわかりやすく、紹介したいと思います。

ノンデザイナーのためのデザイン基本ルール~文字編 文字詰め~

文字詰めすると、見た目はどうなるの?

メインビジュアル、バナー、CMSを利用した更新時の画像などPhotoshopを使って画像を作成する際には、写真やイラストそしてフォント(※1)などをレイアウトしながらデザインを組み立てていきます。文字の種類や色合いなどを含め、文字の詰めも重要なデザインの要素の一部となります。

※1 フォント
印刷物やWebサイトで使用される文字のことをフォントと呼びます。フォントにはゴシック体、明朝体(英語の場合、セリフ体とサンセリフ体)などのスタイルがあります。

文字の詰めを怠ったことで、読みづらくまとまりのないデザインになってしまうこともあります。
まずは、基本の操作と文字詰めの比較を見ていきましょう!

Photoshopのツールバーと文字パレット

Photoshopのツールバーから文字ツールを選択。
文字パレット(ウインドウズ→文字で表示されます)の「トラッキング」と「カーニング」の設定から実行をします。
トラッキングは複数の文字を選択して文字詰めし、カーニングは文字と文字の間にカーソルを置いて文字詰めをします。
下記のように文字の詰め方次第で、かなり印象が違ってくることがわかります。

文字詰めをする前と後の違い

カギ括弧、感嘆符(ビックリマーク)などは特に余白が目立ちますので、丁寧に文字詰めをします。
文字詰めをする前は余分なアキが大小バラバラにありましたが、カーニングで文字と文字の間を詰めました。
調整したものがAFTERになります。

数字の文字詰め

数字の「1」は余白がアキやすいので注意。


例えば年号など数字が続くような場合、余分なアキが入っていますので、
しっかり文字詰めをしてバランス良く調整しましょう。
AFTERではアキがなくなり、まとまった印象になりました。

金額の文字詰め

文字詰めだけでなく文字の種類やウエイトを変えたり文字の大きさを調整して、より見やすく。

ショートカットで文字詰めを素早く簡単に

ショートカットを上手に使って文字詰めを素早く調整しましょう!

カーニングは、文字を詰めたい場所を選択して実行。トラッキングは、複数の文字を選択して実行。
文字全体をざっくりトラッキングして、それから文字と文字の間をカーニングして調整という流れがスムーズ。

※WindowsとMacでキーボートのショートカットが異なります。

動画で見るPhotoshopを使った文字詰め

普段からデザイナーが、文字詰めをどうやって調整しているのか知りたいですよね!
「数字と文章の文字詰め」と「金額の文字詰め」を例にSTEPを踏んで動画で紹介します。

数字と文章の文字詰めの動画

金額の文字詰めの動画

本日のキーワード

ショートカット

操作を省略して素早く処理を実行すること。

フォント

書体・文字のこと。
無料で使えるGoogle Fonts(グーグル・ウェブフォント)などが有名。
https://fonts.google.com/

トラッキング

文字に対して等間隔のアキを設定すること。
カーニングと違い選択した文字全体に対して行う。日本語では「字送り」と呼びます。

カーニング

文字と文字の間隔のアキを設定すること。
細かい文字間の調整が可能です。

まとめ

ここまでいかがでしたか。
文字詰めはこだわると、とても奥が深いです。
自動調整でもそれっぽくはなりますが、感覚が身につきません。
細かい部分は目視でしっかり調整しながら感覚を覚えましょう!

また、あえて間隔を広げてデザインすることもありますので、
デザイナーはデザインに合わせて柔軟に対応を変えていくことが求められます。
文字詰めを理解し、今までよりも1つ上のクオリティに仕上がると良いですね。

文字詰めをもっと勉強したいという方は、
下記URLから文字詰めをゲーム感覚で学習することができます。
欧文のみですが感覚を身につける良い練習になるのでぜひ、お試しください!

https://type.method.ac/

それでは次回もお楽しみに!

「ノンデザイナーのためのデザイン基本ルール」第2弾出ました!

~フォント種類編~ 代表的なおすすめフォント7選

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top