この価格の見せ方、どっちが正解？数字のデザインのセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイン制作エージェンシーの茄子川導彦です。
今回、私はチラシやバナーで使用する「価格の見せ方」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの価格表示がよいと感じますか？
1問目「基本的な価格表示」（難易度★）
2問目「数字を重ねた価格表示」（難易度★★）
3問目「％OFF表示」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：B
3問目は難しかったかもしれません。
ではここからは、私なりの解説です。
それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックを応用を交えて細かく紹介していきます。
1．数字以外を目立たせない
まず、1問目から振り返っていきましょう。
私がよしとした答えは「B」です。
作例AとBの違いは主に、金額の3桁カンマ「,」のサイズです。
作例Aはカンマが大きく目立っています。
一方Bは、カンマを小さくしたうえで上下位置を調整し、「円」という漢字も少し上にあげています。
価格表示では、数字をできる限り見やすくすることが望ましいです。
そのため、数字以外の文字は目立ちすぎないように工夫しましょう。
特にカンマ「,」は数字と同じフォントサイズにすると、サイズが大きく感じられ、下にはみ出すような位置に表示されることが多いです。
そのままだと情報のノイズとなり、数字をパッと読み取りづらい原因となってしまいます。
情報のノイズを減らすためには、カンマ「,」を小さくし、上下の位置も調整します。
Adobe Illustratorをお使いの場合は、文字パネルの「ベースラインシフトを設定」を使用して上下位置を調整します。
また、漢字の「円」も下にズレているように見えるので、「円」の上下位置も調整します。
さらに、チラシ系のデザイン制作の現場では、数字との形のバランスを整えるために、「円」の文字を少し細長くしたり小さくしたりして配置することもあります。
こうすることで、「円」の文字が全体のデザインになじみ、数字がより見やすくなります。
Illustratorの「合成フォント」を使い、価格表示のデザインを効率化する
先ほどのような価格表示のデザインは、Illustratorを使えばカンタンに実現できます。
そこでオススメしたいのが、Illustratorの「合成フォント」機能です。
「合成フォント」とは、全角文字・半角文字・記号などの種類ごとに、異なるフォントやサイズ、縦横比、ベースライン（文字の位置）を設定し、それらを組み合わせてひとつのフォントとして扱えるようにする機能です。
- 漢字／かな／全角約物／全角記号：小塚ゴシック Pr6N R
- 半角欧文／半角数字：Brandon Grotesque Black
- 特殊文字「,」：Brandon Grotesque Black、フォントサイズ「62.5%」、ベースラインシフト「10%」
- 特殊文字「円」：ルイカ 09、フォントサイズ「50%」、ベースラインシフト「2.5%」、水平比率「90%」
作例で使用した価格表示用の合成フォントは次のように設定しました。
- 使用しない全角文字ではフォントのみを指定し、サイズやベースラインの調整は行わない
- 半角文字（数字）と例外の文字である「,」と「円」にそれぞれ独自の設定を施す
作成した合成フォントを指定すれば、テキストを入力するだけで異なるフォントやサイズ、ベースラインシフトなどが適用されます。
これによって価格表示のデザインが劇的にラクになります。
Illustratorの「合成フォント」機能、ぜひ使ってみてください。
2．クッキリとした線で読みやすさを担保する
次に2問目を振り返ります。
私がよしとした答えは「A」です。
作例AとBの違いは、5,800という数字を形作る黒い線の太さ（線幅）です。
作例Aは太めの線が使われていますが、Bは細い線になっており、800という数字が少しつながって見えてしまっています。
文字同士を区別するための線を作成する
文字どうしが重なるくらいに字間を極端に詰める際、各文字をパッと区別できるように、しっかりとした線を用います。
この線を「セパレーター」と呼ぶこともあります。
区別するための線なので、作例Bのような細い線では意味がありません。
ここからは、文字デザインの雰囲気を壊さずに、文字にしっかりとした線を設定するためのテクニックを、Illustratorを用いてお教えします。
Illustratorでの作成例
作例Aのような線をIllustratorで作る際は、テキストオブジェクトの線を使うのではなく、元々の「文字」が持っている線を使います。
以下がその解説です。
まず、テキストのオブジェクトを選択し、アピアランスパネルを開きます。
「文字」をダブルクリックすれば、線幅や色などの設定画面が開きますので、線（線幅）の設定を「5pt」にします。
ここで注意すべきは、文字に線を付けると、線が文字の内側と外側の両方に広がってしまうことです。
文字の線は「塗り」より背面に移動することができず、線の位置も変更できないため、線を太くすれば文字が痩せてしまいます。
そこで「パスのオフセット」の設定を用います。
アピアランスパネルの「パスのオフセット」を開き、オフセットの設定を、線幅で設定した数値の半分の値である「2.5px」とします。
そうすることで、文字が痩せずに、しっかりとした線を設定することができます。
また、文字に線を設定した際に、デザインとして無駄なアキが出ることがあります。
以下の手順で解消しておきましょう。
- アピアランスパネルの「塗り」に「効果メニュー」→「パスのオフセット」を設定して文字のフチを作成する
- その塗りに、「効果メニュー」→「パスファインダー」→「刈り込み」、「効果メニュー」→「パスファインダー」→「合体」を適用する
字間を操り、様々な表現を演出する
文章における字間は、基本的には文章の読みやすさを考慮して設定します。
しかしあえて、タイトルやキャッチフレーズなどの文字列では、字間を極端に調整することで、高級感や緊迫感を演出する場合もあります。
また、斜めにする（シアーツールを使って斜めに変形する）ことで、勢いのある文字を表現することもできます。
3．文字の線幅はバランス感覚を大切に
それでは最後の3問目です。
3問目は難しかったのではないでしょうか。
私がよしとした答えは「B」です。
作例AとBの違いは、文字の線幅のバランスです。
実は両者では「OFF」という文字の線幅が異なっています。
文字の大きさや太さに合わせて、線幅を変えることも検討する
以下は、ふたつの作例の背面に配置しているトゲトゲ（これをチラシ系の現場では「バクダン」と呼びます）を非表示にし、表示を拡大したものがこちらです。
作例Aは、文字の大きさや太さに関係なく、線幅の数値を同じにしています。
一方Bは、文字の大きさや太さに合わせて、線幅を変えています。
実は文字の線幅は、文字の大きさ・太さ（フォントのウェイト）に応じて、バランスのよい幅が存在します。
各テキストオブジェクトに応じて、どれくらいの線幅が美しいかを常に意識するようにしましょう。
まとめ：価格は重要な情報だからこそ、見やすさ・読みやすさ・わかりやすさを追求する
今回は価格の見せ方に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．数字以外を目立たせない
Illustratorの「合成フォント」を使い、価格表示のデザインを効率化する。
2．クッキリとした線で読みやすさを担保する
文字どうしが重なるくらいに字間を極端に詰める際、各文字をパッと区別できるように、太めの線を用いる。
3．文字の線幅はバランス感覚を大切に
文字の線幅は、文字の大きさ・太さ（フォントのウェイト）に応じて、バランスのよい幅が存在する。
チラシやバナーなどの広告物は、その商品に興味がない人に「読みたい！」と思ってもらえるようデザインすることが重要です。
そのために重要なのが、見やすさ・読みやすさ・わかりやすさを担保すること。
特に価格の情報は、商品訴求において重要です。
お相手は茄子川導彦でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：茄子川導彦
印刷会社のDTPデザイン部門でAdobe Illustratorを使用したチラシ・パンフレットなどの商業系デザイン制作に18年携わったのちに独立。DTP・Web・動画・ WebARなど、「デザイン」を中心とした各種制作を手掛ける。
近年は、行政の人材育成事業や専門学校、公的職業訓練校での講師もおこなっている。