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デザイン, カーニング, デザイン, フォント, 印刷

執筆者:


コメントを残す

関連記事

AdobeCreative Cloud デスクトップアプリケーションが起動しない時の対処法

今回、AdobeCreative Cloudを導入したのですが、何台かのマシンにデスクトップアプリケーションが起動しない現象が起こりました。 スポンサーリンク このような画面のまま先に進めなくなりまし …

なんで350dpiなの?線数とかdpiとか分からない人が多すぎる

スポンサーリンク タイトルが愚痴みたいになってしまいましたが、その名の通り線数について書きます。 まずは、なぜ印刷物の解像度が350dpiなんでしょう?そこの君、答えてみてください! 「なになに?なん …

ロックと隠すを利用して効率を上げよう

ロックとカットと隠すを利用して効率を上げる方法 Illustratorで効率をあげる方法があります。それはロックとカットと隠すです。 ロックはcommand+2 カットはcommand+X 隠すはco …

コンテンツ

出版用語としては「目次」を表す言葉。英語の意味としてもcontentsとして複数形で書くと「目次」の意味になる。近年では、webサイトなどに掲載されている「内容」を意味する事が多くなっている。しかし、 …

カラーチップ

特色の指定用に使用される紙片の事。通常、大日本インキ化学工業のDICや東洋インキ製造のTOYOや、Pantoneなどといった色見本帳からチップを切り取って指定紙に添付する。DICやTOYO、Panto …

スポンサーリンク

2018/04/07

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

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

2018/04/03

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

前回地域ポータルサイトを作ろう 第2回からさらに1ヶ月以上が経ちました。 現状は、mottokasukabe.comで確認できます。 本業のデザイン仕事で、現在とある酒蔵のホームページリニューアルがか …

2018/03/30

Illustratorショートカット集

Illustratorショートカット集 Illustratorで必須のショートカットを記しておきます。Illustratorの操作を素早くする事で仕事の効率は倍以上に早くなります。覚え方は実に簡単。そ …

DTP画像

2018/02/22

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

さて、タイトル通り今回は字詰めのお話。 以前、デザインで素人がやりがちな事。プロっぽく魅せるコツ。でも軽く触れたのですが、先程ディレクターの方から 「字詰めの仕方を新人に教える本とか持ってない?」 っ …

2018/02/19

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

前回地域ポータルサイトを作ろう 第1回から約1ヶ月経ちました。 あれから進んだ事は、トップページのデザインが概ね出来た事。下層ページのスマホデザインがなんとなく出来た事くらいです。 その他、サイトの構 …

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


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

スポンサーリンク

    スポンサーリンク