統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすデザイン神は細部に宿る!文字組みの基礎ルールは覚えておこう神は細部に宿る!文字組みの基礎ルールは覚えておこう2018年05月28日デザイン会員登録するferret編集部:2015年9月1日に公開された記事を再編集しています。デザイン作業をおこなう機会がある方の中には、文字組みをあまり意識していないという方もいらっしゃるのではないでしょうか。デザインの美しさ、フォント選びももちろん重要ですが、基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。今回は、必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介します。これまで文字組みに真剣に取り組んでこなかった、という方はこれを機に是非意識してみてください。文字組みの基礎テクニック1.ひらがな、カタカナは原則詰めるhttp://stocker.jp/diary/typographic/ノンデザイナーであれば、あまり気にしないのが文字の間の余白ですが、実は文字の形式に応じて調整する必要があります。漢字の場合は、文字間を調整することなくベタ組みしても問題ないことが多いですが、ひらがな、カタカナの場合には原則、詰め、隣り合う文字との余白を少なくします。理由は、漢字に比べ、ひらがなやカタカナの余白が大きいためです。漢字と並べた時に余白がある分、間延びしたように見えてしまいます。タイトルを書く際、短い文章を大きく表示する際に違和感が目立ってしまいがちですので注意が必要です。2.記号は適度に詰めるhttp://stocker.jp/diary/typographic/忘れがちな記号も適度な感覚に詰めることで、よりプロっぽいデザインに仕上がります。いった記号はひらがな・カタカナ同様に横に余白が生じてしまいますので文字間の調整が必要です。タイトル、見出しで大きく扱う際、隙間があると特に悪目立ちしますので、全体のバランスを見ながら適切な余白に整えます。3.助詞は一回り小さくするhttp://www.actzero.jp/developer/report-2711.html文章にメリハリがないと感じた時の一つの対策として、助詞を一回り小さくするという方法があります。助詞とは、「は」「が」のような、単独では使わない、他の語に付属し意味を付加したりする言葉のことです。「今日は晴れ」という文章の場合「は」が助詞となりますので、その他の文字よりも少し小さくすると抑揚をつけることができます。この時、小さくした助詞は左揃えの場合は下寄せ、中央揃えの場合は真ん中揃えにするのが定番です。「ファイト」の「ァ」のような小さい文字についても助詞と同じように小さくすると、さらに美しい見た目に仕上がります。4.括弧は一番細いフォントにするとスマートになるhttp://lab.sonicmoov.com/design/typesetting/デザイナーでない方は知らない方も多いのが、括弧の取り扱いについてです。雑誌、広告の大見出しを見るとよく分かりますが、括弧だけが細いことがほとんどです。括弧に細いフォントを使用すると、スマートで上品な仕上がりになります。この時、始まりと終わりの括弧のベースラインにも気をつけるとさらに見た目のクオリティを上げることが可能です。括弧に細いフォントを使ってみていまいちだったり、あまり細くない場合には、Photoshopのツールを使って1pxの線で括弧を作るという方法もあります。5.単位には少し小さいフォントを選ぶhttp://stocker.jp/diary/typographic/「○○円」といった単位を含む文字を普通に組んだ場合、数字の方が「円」より小さく見えていまいちな見た目になってしまいます。単位の入った文字列では、単位の箇所のフォントサイズを約1/2から2/3に抑えると、見やすくバランスのいい文字列になります。この時、ベースラインがずれないように他の文字と合わせて調整が必要です。逆に、数字だけを極端に大きくして強調するということも可能です。スーパーの広告が参考になりますので、一度見てみましょう。6.文字をゆがめないhttp://tsutawarudesign.web.fc2.com/yomiyasuku2.html文字が読みにくくなる原因の一つが、文字がゆがんでいることです。した書体であっても、横や縦に伸ばして本来の縦横比を崩してしまうと読みにくくなってしまいます。見た目の良さにおいてもゆがんでいない文字のほうが美しいのは当然です。文字のサイズを変える際に、縦横比を保ったままにしないと文字がゆがみますので注意が必要です。7.英文、和欧混植の文章ではフォントに注意するhttp://tsutawarudesign.web.fc2.com/yomiyasuku2.html日本語文章の中に英文を使う場合には、フォントに気を配る必要があります。メイリオ、ヒラギノ角ゴといった定番フォントにおいては和欧混植しても美しく見えるようにデザインしてありますが、中には英文を書くと可読性が悪くなるフォントがありますので、面倒ではありますが英文部分のみ欧文フォントを使うのがベターです。和欧混植に向く日本語フォントである場合にも、英文は欧文フォントのほうが美しく仕上がります。日本語フォントと欧文フォントを組み合わせる場合には、雰囲気・サイズ・大きさが似ているデザインのフォントを選ぶと違和感のない見た目になります。8.全角、半角をしっかり区別するhttp://whatsdesign.arrow.jp/illustrator04.html基本的なことですが、案外見落としてしまうのが全角、半角の区別です。カタカナを使う際に、表記がばらばらになっているということは少なくないので注意が必要です。全角、半角どちらを使うか予め決めた上で、表記を統一する必要があります。したことではありますが、表記を揃えると格段に見た目も良くなり、可読性も上がります。9.ホワイトスペースに考慮するhttp://visualliteracy.jp/design/2080.html文字と文字の前後だけでなく、文章の余白にも注意をすることが重要です。文字の余白であるホワイトスペースの取り方にはある程度ルールがあり、字間の余白は行間より狭く、行間の余白は段落の間よりも狭い必要があります。これさえ守れば、きちんとしたホワイトスペースを確保することが出来、読みにくい文章になってしまうことを防ぐことができます。カーニング、字送り、文字詰めの違い10.カーニングhttp://illustrator-ok.com/illustrator_koza/text/contents/text6.htmlカーニングとは、特定文字と文字の間隔を調整する処理のことで、横の文字に合わせて調整をおこないます。日本語でも使えますが、主に欧文フォントの調整に使う処理です。カーニングを処理していない場合、文字と文字の間には空白が生じてしまいますが、最適に処理することで文字間の空白を均一にすることが可能です。キャッチコピー、見出しといった大きめのフォントサイズを使うものの場合、不自然な空白が目立つことが多くカーニング処理が重要となります。自動で調整できる、和文等幅・メトリクス・オプティカルと、手動で数値を入力するタイプがあります。単独で処理することもありますが、通常は字送り(トラッキング)と組み合わせて使います。11.字送りhttp://psgips.blog24.fc2.com/blog-entry-74.html字送りは別名トラッキングともいい、文字単体ではなくまとまった文字列の調整に使用する処理のことです。カーニング同様、通常は欧文フォントの調整に使いますが、日本語フォントにも使用することが可能です。設定時の単位は「em」で、フォントサイズを1とした時の1/1000が1emです。特定文字に対する相対的な値ですので、設定値が同じであってもフォントサイズ次第で結果が異なります。12.文字詰めhttp://webmemo.biz/kerning_tracking/カーニングに似た処理ではありますが、文字の前後を詰めるために使う処理のことを言います。カーニングが欧文フォント向きであるのに対し、文字詰めは日本語フォントの調整に適した処理です。設定する際にはパーセンテージで縮める間隔を設定します。まとめ今回は必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介しました。いかがでしたでしょうか。フォントはそのまま使っても制作者が調整している分美しいのですが、シーンによっては違和感を感じることが少なくありません。使わなければならないという決まりはありませんので、ある程度の基礎ルールを身につけ、あとは感覚的に使っていく必要があります。今回ご紹介したテクニックをしっかりと理解し、実践の際に意識して文字を組めば、感覚を掴むことができます。正解がないためプロでも難しい作業ですが、是非繰り返し作業をおこない身につけましょう。このニュースを読んだあなたにおすすめ作業効率グンとアップ!Photoshopの操作が捗る小技3選デザインの雰囲気が手軽に変わるオススメPhotoshop無料テクスチャ60まとめPhotoshopを使う際にデザインの幅が広がる無料のパターン素材80選このニュースに関連するカリキュラムLPOに関するカリキュラムLPOに関して、カリキュラム形式で学びましょうフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るタイトルホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。詳しく見るタイトルホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。広告とは販売のための告知活動を指します。広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。広告とは販売のための告知活動を指します。広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るキャッチコピーキャッチコピーとは、商品などの宣伝の際に使用される文章のことです。宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るデザイン会員登録するおすすめ記事ADCMS・Webサイト制作Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはCMS・Webサイト制作ADマーケティングオートメーション(MA)伝達から会話の時代へ。AI時代を一足先に予習する「マーケティングの練習問題」マーケティングオートメーション(MA)ADSEO(検索エンジン最適化)記事を作っているのにサイト流入が足踏み・・・・・・。そんな状況を打開する「正しい努力」の仕方SEO(検索エンジン最適化)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。編集部厳選!最新情報をお届けもう一度読みたい記事をブックマーク実務に役立つ資料をダウンロード無料会員登録会員ログインこの記事を書いたライターferret編集部ferret編集メンバーが不定期で更新します。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはAD記事を作っているのにサイト流入が足踏み・・・・・・。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。