AdobeCreative Cloud DTP Illustrator InDesign Photoshop webデザイン カーニング デザイン フォント 印刷

これだけでデザインが良くなる!字詰めをちゃんとしよう!

投稿日:

Pocket

さて、タイトル通り今回は字詰めのお話。

以前、デザインで素人がやりがちな事。プロっぽく魅せるコツ。でも軽く触れたのですが、先程ディレクターの方から

「字詰めの仕方を新人に教える本とか持ってない?」

って聞かれました。

私の返答はと言えば、

「感覚でやるものだからなぁ」

「出来る人は、言われなくとも気になって、気持ち悪いと思って気付いて詰めるだろうけど、気にならない人は、一生気にもかけられないんじゃない?」

って感じでした。

 

上記のやり取りからも分かるように、字詰めってホント気にしない人は気にしないですよね。

 

私もグラフィックデザインを始めてから3年くらいは、当時のIllustrator8.0.1に『詰め』機能(今で言うオプティカルに近い機能)があったので、それで良いと思ってました(笑)気になる所は、個別に多少はカーニングをしてはいましたが、今考えるとかなり甘かったですね。

 

しかし、ある日を境に字詰めの凄さに気付いて、過去に作った制作物を全て無かった事にしたくなったものです。

 

タイトルの話に戻りますが、字詰めひとつで、デザインは格段に良くなります。むしろプロなら出来て当たり前ってくらい重要なファクターです。

字詰めはどうするのが正解か?

字詰めには正直、正解はありません。しかしセオリーは確実に存在します。IllustratorやInDesign更にはPhotoshopでも字詰めはするべきです。最近ではwebでもCSSによって字詰めが可能になっています。

文字はリズムで読みます。

雰囲気は、フォントによって大きく左右されますが、字詰めや文字の開きによっても雰囲気を作り出すことが可能になるのです。

字詰めのセオリー

字詰めをする前にまずは、アプリケーションの設定をしっかりしましょう。文字設定パレットを表示し、全ての文字の設定をオプティカル、左右の空き設定はベタにしましょう。これだけで格段に文字の詰めは良くなります。長文の文章の場合は、媒体によってはこのベタ設定は任意の設定にした方が良いです。

さらに段落設定パレットを開き、役物の設定を行末半角設定にするとよいです。こちらは、慣れてきてある程度設定が理解出来てきたら、任意に設定してみましょう。

上記のアプリケーションの基本的な設定は必ず行ってください。それだけで、字詰めは30%はクリアしたことになります。デザインという意味でも、10%は達成した事になりますね。そのくらい重要度は高いです。これ、以外と年配のプロの方なども出来てない場合があるので、早いうちに身体で覚えてしまうと楽です。

スポンサーリンク

さてここからが本題です。字詰めの残り70%のお話です。ここからは、感覚と経験がモノを言う領域ですが、一定のセオリーは存在します。先程、文字はリズムで読みますと述べました。このリズムは一定の間隔です。ですので、字と字の間隔は、一定の間隔を空けてあげるという事が一番のセオリーになります。

あとは、どんな空気感、雰囲気、テイスト、世界観や全体のトーンは、コンサバティブな感じなのか、ユルパラ系なのかなどによって使い分けていきます。この点が、慣れと経験がモノを言う領域になります。

例えば、コンサバ系デザインの代表格は、雑誌の表紙やその中吊り広告などです。普段、あまり気に留めてない方は、よくよく雑誌の表紙や、電車の中吊り広告を見てみてください。

えっ、ここまで詰めていいの?

って感じる筈です。

そうなんです。英語と違って、日本語の面白い点はここにあります。字と字が絡み合うかの様な字詰めをしたりしていますね。しかし、むしろ読みやすい。そして、なんだか凄くデザインされた感じがしますね。これこそデザイン!これこそタイポグラフィ!なんですね。こういった考え方を全体的に施せる人は、出来るデザイナーって感じます。逆に言えば、出来ない人が多すぎます。

もう一つの例を挙げておきます。webの流れから流行っているユルパラ系のテイスト。こちらは、基本に細めのゴシック系で構成される事が多いです。Appleのwebサイトなどを想像して貰えればわかるかと思います。このテイストの特徴は、タイトルなどの文字間を開き気味にすることで、ゆとり感や爽やか感、一昔前に流行った言葉で言うと、LOHASなイメージなどを演出します。

このテイストで肝になるのは、文字間の開き具合なのですが、こちらの場合は特に文字同士の間隔を均等にする事で、絶妙なバランスを保つ事になります。この均等な間隔が多少でも狂っているとかなり不格好になりますね。そこで、均等に見える様に必ず微調整をします。それにより、計算された美しい空きを構築することが可能になります。

ここで重要な点は、文字間は均等にという事です。これが字詰めをする上でいちばん大事な要素になります。これは、実際の距離ではなく、見た目にどうかという話ですので、注意が必要です。

日本語には、漢字、ひらがな、カタカナがあり、書体によっては、ひらがなカタカナがかなり小さくなります。また、ひらがなやカタカナはタイプフェイスが様々な為、並べた時にお互いがやたらと開いてしまったり、逆に詰まってしまう事があります。この差を埋めてあげるのが字詰めというわけです。

ですので、見た目にそれぞれの文字が均等になることを目指すのが最大の目標であり、目的になります。

こればかりは、慣れと経験を積むしかありません。しかし、全くもって難しい話ではないのですぐに慣れます。一度慣れてしまえば、むしろ気になって仕方ないくらい身体と目で違和感を感じる様になります。

まずは、短期集中して、字詰めにこだわる期間を設けて、色々とやってみましょう。

スポンサーリンク

この記事が気に入ったら
いいね ! しよう

Twitter で

-AdobeCreative Cloud, DTP, Illustrator, InDesign, Photoshop, webデザイン, カーニング, デザイン, フォント, 印刷

執筆者:


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

間取り(建築図面)をトレースするコツ

建築図面(間取り)をIllustratorでうまく描くコツ 住宅関係の仕事にはつきものの建築図面。 こちらをIllustratorでうまく描くコツをご紹介します。先日、人に説明する際にわかりやすくまと …

禁則処理

スポンサーリンク 行頭に句点がきたり、行末に起こしのかぎ括弧を組んだりしては読みにくい。これを避けるための処理が禁則である。「、」(テン)、「。」(マル)、閉じカッコなどは行の先頭に置かず、逆に起こし …

地域ポータルサイトを作ろう 第1回

デザインは出来る!HTMLによるwebデザインも出来る!wordpressによるCMSによる構築も出来る様になった! そこで考えたのが、地域のポータルサイトをうまく作成出来ないかと言うことです。 地域 …

イメージセッタ

ページレイアウトソフトなどで作成したデータから、製版のためのフィルムや印画紙を出力する装置。通常、PostScript RIPが接続されており、ラスタライズされたイメージデータを1,200~4,000 …

私のMacBook Proについて

私の所有しているMacBook Proについて書いていこうと思います。 MacBook Pro (13-inch, Early 2011) プロセッサ 2.3GHzデュアルコアIntel Core i …

2018/07/20

ウォータープルーフ対応Bluetoothスピーカー JBL FLIP4を買ってみました

毎日、猛暑日が続きますね!そんな夏本番を楽しくする、便利なガジェットをご紹介します! どんなシーンでも使える便利なBluetoothスピーカー JBL FLIP4です。 ちなみに、なにかと話題のスマー …

2018/06/24

35mm版(さんじゅうごみりばん)

一般的なロールタイプの写真フィルムサイズ。35mmフィルムがかつてライカに採用され全世界に広まったことから、このサイズのフォーマット(縦3.6 cm×横2.4 cm)をライカ版と呼ぶこともある。1カッ …

2018/06/24

三原色(さんげんしょく)

割合を変えて混ぜ合わせることで、あらゆる色を表現出来る3つの基本的な色のこと。光の三原色は、RED(赤)、GREEN(緑)、BLUE(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

2018/06/01

サムネイル

画像やページのイメージ等を、小さいサイズで一覧表示する機能のこと。また、その画像を指す。thumbnailは親指の爪という意味。本来は、小さなアイデアスケッチなどを指す言葉。業界的には、サムネなどと略 …

2018/04/07

レバテッククリエイターさんでこのブログが紹介されました

昨年末くらいにレバテッククリエイターというweb、ゲーム業界のクリエイター向けの求人サイトのブログで、このブログが紹介されました。ということでご紹介させていただきます。 レバテッククリエイターさんの取 …

クリックしていただけると助かります


デザイナーランキングへ にほんブログ村 デザインブログへ
にほんブログ村

スポンサーリンク

    スポンサーリンク

    %d人のブロガーが「いいね」をつけました。