このパス、どっちが正解？ ロゴ制作で必要になる造形センスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
グラフィックデザイナーのさとうコージィです。
ロゴ制作では、微細なパスの違いが印象に大きく影響します。
このクイズでは、その「微差」を見抜く力を鍛えます。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「パス」がよいと感じますか？
1問目「ふんわり柔らかいイメージを与えるのはどっち？」（難易度★）
2問目「貫通して見えるのはどっちの斜線？」（難易度★）
3問目「左右が凹んで見えないのはどっち？」（難易度★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：B
3問目の答え：B
以上が私なりの解答です。
あなたがよいと感じたパスは、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．やわらかい角丸を演出する（スーパー楕円）
まずは1問目を振り返ります。
Aの角丸正方形は、角の部分が、正円を1/4にしたラインで構成されています。
一方、Bは直線部分がなく、すべての辺が滑らかな曲線になっています。
Bのような形は「スーパー楕円」と呼ばれることもあり、幾何学的にカッチリした形よりも温かみやモダンさが出ます。
そのため、私は「B」を正解としました。
Illustratorでスーパー楕円風の角丸を作るには、主に以下の2つの方法があります。
- セグメントを拡大・縮小する
- 「ワープ」効果を使う
それぞれのやり方を詳しく解説します。
1．セグメントを拡大・縮小する
「セグメント」とは、アンカーポイントとアンカーポイントを結ぶ線分のことです。
このセグメントを使った操作方法は非常にカンタンですので、用語について深く考えずに、動画を参考にしながらやってみてください。
- 正円を描画する
- 「ダイレクト選択ツール」で4つの辺を選択
- ツールバーの「拡大・縮小ツール」を選択し、アートボードの余白でドラッグ
なお、次の方法でも実行できます。
「ダイレクト選択ツール」の扱いに慣れていない場合には、こちらのほうがカンタンです。
- 正円を描画する
- 「選択」＞「オブジェクト」＞「セグメント」をクリック
- 「オブジェクト」＞「変形」＞「拡大・縮小」をクリック
- 「縦横比を固定」の値を調整（110%前後）
2．「ワープ」効果を使う
「ワープ」効果を使えば、後から微調整が可能なスーパー楕円を作成できます。
少し“小ぶり”になってしまうので「変形」効果の度合いを、拡大・縮小して調整しましょう。
- 正円を描画する
- アピアランスパネルを開き、下部の「新規効果を追加」をクリック
- 「ワープ」＞「膨張」をクリックし、ワープオプションで「カーブ」の数値を設定（負の値に）
この方法を使えば、後からカーブの度合いを調整したい場合には、アピアランスパネルで変更できます。
2．錯視を理解してパスを調整する
続いて、2問目を振り返ります。
この問題は「貫通して見えるのはどっちの斜線？」というものでした。
「え？考えるまでもなく、貫通しているのはBでしょ！？」と思った方が多いと思います。
ところが、縦棒の不透明度を下げてみると、斜線が貫通しているのはAでした。
これは、斜線の一部を隠すとズレて見えるという、目の錯覚（錯視）によるものです。
この錯視による違和感をなくすため、Bでは左右の斜線の位置を調整しています。
そのため、私は「B」を正解としました。
なお、Illustratorでこの作例のような貫通している斜線を作った際に、ズレの大きさを確認するには、「プレビュー／アウトライン」表示の切り替えを使います。
「表示」＞「アウトライン」を実行すると、アウトライン表示になり、「塗り」や「線（線幅）」などの情報がないパスだけが表示されます。
「表示」＞「プレビュー」を実行するとプレビュー表示に戻ります。
⌘ + Y（WindowsはCtrl + Y）のキーボードショートカットでも切り替え可能です。
非常によく使うショートカットなので、ぜひ覚えましょう。
錯視によるズレを調整するセンスを磨こう
錯視によるズレの調整の例を、もう2つご紹介します。
1つ目は、こちらの十字の画像です。
左側は縦棒が細く見えませんか？
でも、実は縦棒と横棒は同じ太さです。
そこで、右側では、縦棒を少し太くすることで同じ太さに見えるように調整しています。
2つ目は、こちらの三角の画像です。
左側は物理的に中心に配置していますが、少し下にズレているように見えませんか？
右側では、少し上に移動することで中央に見えるように調整しています。
このような錯視によるズレは、Illustratorの「整列」機能で配置を整えた後に、目視で調整します。
錯視の調整センスを磨く方法として、次の2つを紹介します。
ぜひ日々のスキルアップのトレーニングに取り入れてみてください。
- ロゴが集まった書籍を日頃から目にする
長く使われているロゴの多くは、必ず視覚調整を行っていますので、普段から目にするように心がけましょう。
（拙書『ロゴデザインのコツ プロのクオリティに高めるための手法65』もぜひお手に取ってみてください）
- Illustratorでロゴをトレースしてみる
気に入ったロゴがあれば、Illustratorで正確にトレースし、どのようなパスになっているのかをじっくりと研究してみましょう。
3．視覚調整
3問目は「左右が凹んで見えないのはどっち？」という問題でした。
微妙な差異なので、悩まれたかもしれません。
私が選んだ答えは「B」でした。
なぜなら、Aの縦線は直線ですが、Bは中央をわずかに外側へ膨らませて、視覚的な安定感があるからです。
具体的には、曲線と直線との接点にあたるアンカーポイントのハンドルを、ごくわずかに外側へ動かして、直線だった部分をほんの少し外側へ膨らませています。
機械的に正円の1/2と直線を繋いだだけでは、縦線部分が凹んで見えることへの対応です。
この視覚調整には、縦線を直線のままキープして、正円の1/2のパーツと接する部分に、もっと緩やかなカーブ（緩和曲線）を一部挟み込む方法もあります。
まとめ：ロゴ制作で必要になる造形センスを磨くポイント
今回はパスに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．幾何学どおりを疑う
正しくても「気持ちよくない線」は選ばれません。
本当に微妙な差で伝わる印象は大きく変わります。
パスの「微差」を見抜き、よりよい形に導く力を、ぜひ日々の制作で磨いていきましょう。
ロゴ制作者は、線の1本にも理由をもっています。
違和感を感じたら、怖がらずいじってみるという姿勢を大切にしましょう。
2．ロゴは必ず“錯視”を前提に調整する
太さや位置を揃えただけでは「同じに見えない」ことがあります。
視覚は常にズレを生むもの。だからこそ、アウトライン表示（⌘+Y / Ctrl+Y）での確認や「目視の調整」が欠かせません。
ロゴの見栄えは、数ピクセルの差で大きく変わります。
“正確”より“視覚的に正しい” を優先しましょう。
3．違和感を放置しない
「なんとなく気になる」──
その感覚がプロのセンスの源です。
一例として、直線よりわずかに膨らんだ線のほうが安定感が増したり、凹みに見える錯視を防げたりします。
デザインは“微差”の積み重ね。
ほんの少しの微調整で、全体の印象をすぐに1ランク引き上げることができます。
そして、パスの細部に意図をもつことが、プロ品質のロゴにつながります。
お相手はグラフィックデザイナーのさとうコージィでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：さとうコージィ
宝塚造形芸術大学卒業後、広告代理店勤務を経て2001年にコージィデザインスタジオを設立、2015年に法人化。企業・行政・教育機関のロゴやブランドデザインを手がけ、「ソフマップ」「滋賀医科大学」「オムロンsysmac」などを担当。国内外で受賞多数。著書『ロゴデザインのコツ』ほか。大学講師や講演活動も行う。