この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

グラフィックデザイナーの「いとくに」です。

今回、私は「約物(やくもの)」についてのクイズを出題します。

約物とは、括弧類(「」や『』など)や句読点(、。)をはじめ、文章を読みやすく整理するために用いられる記号類の総称です。

早速ですが、クイズです。

以下の3つの作例を見て、AとB、あなたはどちらの「約物の使い方」がよいと感じますか?

1問目「キャッチコピーのダブルクォーテーションの使い方」(難易度★)

以下の広告画像内のキャッチコピーの「イチゴ時間」を囲む括弧、どちらがよいでしょうか?

2問目「伸ばし棒の使い方」(難易度★★)


ハンバーグの「ー」という伸ばし棒、どちらがよいでしょう?また、伸ばし棒の使い方とは別に、もう一点おかしな箇所があるのですが、見つけられるでしょうか?

3問目「リーダー罫の使い方」(難易度★★)

タイトルとページ番号をつなぐ罫線、どちらがよいでしょうか?

私が考える答えは……

1問目の答え:B

2問目の答え:B

3問目の答え:B

いかがでしたか?


ではここからは、私なりの解説です。

それぞれの作例のAとBで、何が異なっていたのか?を説明し、作例で用いられていたデザインテクニックについて紹介していきます。


※本コーナーの作例は、Adobe Illustrator使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustrator使ってみてください。


1.縦書きか横書きかで、約物を使い分ける

では、1問目から振り返っていきましょう。

この問題は「今日だけのイチゴ時間」という文で使われている約物はどちらがよい?というものでした。

私が選んだ答えは「B」です。

なぜなら、Bのほうが文字組みの方向に適した強調用の約物を使っているためです。

約物(やくもの)とは、括弧類(「」や『』など)や句読点(、。)などの記号類の総称でしたよね。

実はこの約物には、横組み用と、縦組み用のものがあります。

横組みとは、私たちがインターネットやビジネス書、技術書などでよく使われている、文字を左から右へと並べていく書き方です。

一方、縦組みとは、日本の小説や新聞などで伝統的に使われる、文字を上から下へと並べていく書き方です。

今回の作例は縦組みですが、作例Aは横組み用の「ダブルクォーテーション」を使ってしまっていました。

一方、Bは縦組み用の「ダブルミニュート(ちょんちょん)」を使用していました。

そのため、Bを正解とした次第です。

ダブルクォーテーションおよびダブルミニュートに関する歴史を語ると長くなってしまうのですが、日本では明治時代の活版印刷導入時に、縦書きに適した引用符としてダブルミニュートが採用されました。

そのため、縦書きの際は、横組み用の「ダブルクォーテーション」を使うのではなく、「ダブルミニュート(ちょんちょん)」を使うものだと覚えておいてください。

ちなみに「ダブルミニュート」は直接入力が難しい約物です。

そのため、入力したい場合は以下をコピーしてご利用ください。

「〝」 「〟」

おフォントによっては、「ダブルミニュート」の字形が収録されていない場合があります。

その場合は別のフォントに切り替えましょう。

2.約物は似ているものではなく、正しいものを使う

続いて2問目です。

ちなみに私が選んだ答えは「B」でした。

それではなぜ、Bが正解なのか、その理由を解き明かしていきます。

この問題は、ハンバーグの「ー」という伸ばし棒はどちらがよい?というものでした。

伸ばし棒は「長音符」や「長音記号」とも呼ばれ、 母音の長音、つまり「伸ばし」を表すための記号のことです。

一般には「伸ばし棒」と呼ばれていますが、出版やデザインの分野では「音引き(おんびき)」とも言われます。

もしあなたが将来、本格的にデザイナーとして活動していきたいと考えているなら、この「音引き」という名称を必ず覚えておきましょう。

また、音引きとは別に、もう一点おかしな箇所があるのですが、見つけられましたか?

1.言葉を構成する「ー」は和文の「ー(音引き)」を使い、「-(ハイフン)」を使ってはいけない

実は作例Aの「ー」をよく見ると、和文の音引き(ー)ではなく、ハイフンになってしまっています。

これは、音引きと見た目がよく似ていることからハイフンを悪気なく使ってしまっている例ですが、このハイフンの使い方は間違っています。

さらに、Windowsで全角の罫線(─)が入力されているケースも多く見られますが、これも間違いです。

いくら見た目が似ていたとしても、正しくない約物の使い方をしてはいけません。

今回はグラフィックでの約物の使用ですが、こういう間違った使い方に慣れてしまうと、普段の文章を書く際にも使ってしまいかねません。
(記事や書籍などでこのような使い方をしてしまうと、音声読み上げソフトでも支障が出てしまいます)

音引き(ー)とハイフン(-)の違いについて解説しておきます。

  • 音引き(ー)の役割
    音を伸ばすという「発音」に関する機能をもっています。
  • ハイフン(-)の役割
    単語と単語をつないだり、行末で単語を分割したりと、「構造」に関する機能をもっています。

実はこういったケースは少なくはありません。

送られてきたデータで正しい約物が使われているかを確認するには、約物を検索するのが近道です。

今回の作例の場合はハイフン(-)を検索することで、音引き(ー)が使われていないことに気付けます。

以下はIllustratorの「検索と置換」の機能を用いて、間違った約物を見つけて修正する過程です。

  1. メニューバーの編集から「検索と置換」を選択し、検索と置換のダイアログボックスを表示させる
  2. 検索文字列のエリアにハイフン(-)、置換文字列エリアに「ー(音引き)」を入力し、検索ボタンをクリック
  3. テキストのハイフン(-)が1つ選択されたら「置換」をクリックし、OKをクリック

2.和文では丸括弧(パーレン)は全角のものを使う

問題2では、前述した音引きの箇所だけでなく、実はもう一箇所NGな箇所がありました。

それは「150g(大盛300g)」というテキストで使われている、丸括弧(パーレン)です。

(※丸括弧は「パーレン」と呼ばれることが多く、英語のparenthesis(パレンシス/パレンセシス)に由来します)

作例Aでは、始め(起こし)の丸括弧を半角で入力してしまっていました。

これはNGです。

正しくは、作例Bのように全角で入力する必要があります。

この作例では、括弧に全角のパーレンが使われています。

使用しているフォントの特性上、半角パーレンであっても大きな違和感はありませんが、半角と全角が混在しないように注意しましょう。

なお、支給された原稿が必ずしも正しく記述されていない場合もあります。

では、なぜ、丸括弧(パーレン)を半角で入力するとNGなのか?

半角の丸括弧(パーレン)の位置が日本語の文章でズレて見えるのは、欧文のデザインルールと和文のデザインルールが異なるためです。

欧文フォントには、大文字の高さを決めるキャップハイトと、小文字の高さを決めるエックスハイトという基準があります。

半角の丸括弧(パーレン)は、この欧文フォントの基準であるキャップハイト(大文字の高さ)に合わせてデザインされています。

さらに、大文字や小文字と並んだときに視覚的なリズムが崩れないよう、半角の丸括弧(パーレン)は、多くのフォントでベースラインよりわずかに下寄りに調整されています。

以下の図を見ていただくと、半角の丸括弧(パーレン)が青い基準線よりも下寄りに調整されていることがわかります。

そのため、和文フォントに欧文の設計である半角の丸括弧(パーレン)を使用すると、位置のズレが生じてしまうのです。

こうしたズレを防ぎ、位置やアキが適切に調整された全角の丸括弧(パーレン)を使用するのが、日本語の文章におけるDTPの基本となります。

3.リーダー罫は末尾の位置を揃える

最後に3問目を取り上げます。

3問目は、タイトルとページ番号(ノンブルとも言います)の間の「リーダー罫」、どちらがよいか?というものでした。

リーダー罫とは、連続した記号や線を並べた罫線のことを指します。

私が選んだ答えは「B」です。

なぜなら、末尾がキレイに揃っているのはBだからです。

この作例Aのような状態は、タイトルとページ番号の間に三点リーダーを直接かつ複数回入力した際に陥りがちです。

リーダー罫を設定する際は、「…」を繰り返し入力するのではなく、「タブリーダー」を使いましょう。

タブリーダーとは、Adobe IllustratorやInDesignをはじめとしたDTPソフト全般に備わっている「タイトルとページ番号といった、左端の項目と右端の数字までを点線や線などでつなぐ機能」を指します。

タブリーダーとは「Tab」と「Leader」という言葉からなる機能名です。

キーボードのTabキーが、特定の文字位置までカーソルを一瞬でジャンプさせるため、「タブで空いた空間を線で埋めて、視線を導くという意味」で生まれました。

タブリーダーを使えば、作例Bのように、キレイにリーダー罫を引くことができます。

以下は、Adobe Illustratorの「タブリーダー」機能の使い方と、実演動画です。

ぜひ参考にしてみてください。

  1. 目次の項目とノンブルの間に「タブ」を挿入する
  2. 「Shiftキー」+「⌘キー(Ctrlキー)」+「T」を押して、タブパネルを開く
  3. タブパネルの右端をドラッグして伸ばす(見本では850pxほどに伸ばしています)
  4. タブパネルの「右揃えタブ」を選択し「位置」に距離を入力する(見本では「837px」を入力しています)
  5. タブパネルの「リーダー」に三点リーダーを入力
    三点リーダーの入力は「Optionキー(Altキー)」+「 ;キー」

今回はIllustratorに搭載されているタブリーダー機能をご紹介しましたが、同様の機能はInDesignに用意されています。

さらに、例えば100ページのコンテンツからページ番号を拾い出して目次を作成するのは面倒で手間がかかりますが、InDesignには自動作成機能があり、また更新も一瞬です。

ただ、チラシやカンタンな料金表など、単一ページで完結するレイアウトはIllustratorが向いています。

そのため今回、Illustratorを用いた事例として紹介しました。

ツールにはそれぞれ適した制作物があるということを知っておいてください。

まとめ:約物を扱う際のルールを知っておこう

今回は約物を正しく扱うためのルールについて取り上げました。
最後にノウハウのまとめを記しておきます。

  1. 縦書きか横書きかで、約物を使い分ける
  2. 約物は似ているものではなく、正しいものを使う
  3. リーダー罫は末尾の位置を揃える

すべてのルールが大切ですが、特に「約物は似ているものではなく、正しいものを使う」というルールは重要です。
横着してしまうと、どこかで歪みが必ず来るからです。

お相手はグラフィックデザイナーの「いとくに」でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。


※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。


執筆:いとくに

香川を拠点に活動するグラフィックデザイナー兼ディレクター。Adobe Community Expert。
『iPadで描こう! Procreateイラストテクニック』(玄光社)をはじめ、amity_senseiのすべての著書で執筆協力。『伝わる!動画テロップのつくり方』(ナカドウガ著、玄光社)ではカバーデザインを手がける。Adobe MAX Japan 2023、「朝までイラレ」に登壇」


すべての問題にチャレンジしてみよう!

あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」

第30回 このZINEのデザイン、どっちが正解?誌面デザインのセンスを磨こう

第29回 このタイポグラフィ、どっちが正解?作字のセンスを磨いておこう

第28回 このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

第27回 表のデザイン、どっちが正解?情報の整理に役立つデザインセンスを磨いておこう

第26回 そのデザインの仕上げ、どっちが正解?「整列」や「ガイド」を使いこなすセンスを磨こう!

第25回 このレイアウト、どっちが正解?視線誘導のセンスを磨いておこう

第24回 このパス、どっちが正解? ロゴ制作で必要になる造形センスを磨いておこう

第23回 この矢印のデザイン、どっちが正解?図解における矢印選びのセンスを磨いておこう

第22回 線の扱い、どっちが正解? 罫線のセンスを磨いておこう

第21回 このドロップシャドウ、どっちが正解?ドロップシャドウのセンスを磨いておこう

第20回 この名刺の文字組、どっちが正解?名刺デザインのセンスを磨いておこう

第19回 この価格の見せ方、どっちが正解?数字のデザインのセンスを磨いておこう

第18回 この書き出し、どれが正解?画像の特徴に合わせた書き出しを学ぼう

第17回 色の組み合わせ、どっちが正解?配色のセンスを磨いておこう

第16回 このスライドのデザイン、どっちが正解?伝わるプレゼン資料作成のセンスを磨いておこう

第15回 このコントラスト、どっちが正解?文字と背景の配色のセンスを磨いておこう

第14回 この余白、どっちが正解?レイアウトにおける余白のセンスを磨いておこう

第13回 このレイアウト、どっちが正解?レイアウトのセンスを磨いておこう

第12回 このフォント選び、どっちが正解?フォントを上手に使うセンスを磨いておこう

第11回 この改行や行揃え、どっちが正解?文字組みのセンスを磨いておこう

第10回 この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

第9回 このグラデーション、どっちが正解?グラデーションのセンスを磨いておこう

第8回 この吹き出し、どっちが正解?デザイン演出のセンスを磨いておこう

第7回 この名刺デザイン、どっちが正解?名刺作成のセンスを磨いておこう

第6回 このデザインのあしらい、どっちが正解?装飾のセンスを磨いておこう

第5回 欧文フォントの見せ方、どっちが正解? フォント選びのセンスを磨こう

第4回 このデザインの配置、どっちが正解?整列のセンスを磨いておこう

第3回 この文字間や行間、どっちが正解?文字の余白のセンスを磨いておこう

第2回 この文字組み、どっちが正解?ベースライン調整のセンスを磨いておこう

第1回 この文字詰め、どっちが正解?文字間調整(カーニング)のセンスを磨いておこう

Illustratorを始めましょう。