静岡・浜松の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 2022/04/21WordPressで画像をWebP(ウェッピー)に対応する方法

  • posted on 2023/07/072023年12月末までにスマートフォン用楽天GOLDが提供終了!新店舗トップページに移行するための16の機能をご紹介(事前申請で2023年8月2日に自動移行も)

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

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

おすすめタグ

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

Top