この線、どっちが正解？情報を引き立てる線のセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
グラフィックデザイナーの河合俊輔（ヴイタロウ）です。
今回、私は「線を活かしたデザイン」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらのデザインが「線を活かせている」と感じますか？
1問目「30〜40代向けのパーティチラシのタイトル。線を活かした上品なタイトルデザインはどっち？」（難易度★）
2問目「雑誌の特集扉のデザイン。ビジュアルに一体感を感じる線の見え方はどっち？」（難易度★★）
3問目「商業施設のキャンペーンポスター。背景のボーダー柄がより活かされているのはどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：B
以上が私なりの解答です。
あなたがよいと感じた「線の活かし方」は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation
1．ターゲット層に響く「文字の品格」を表現する
1問目から振り返っていきます。
このクイズのお題は、「30〜40代向けのパーティチラシのタイトル。線を活かした上品なタイトルデザインはどっち？」というものでした。
AとBは、どちらも線を使って文字を装飾していますが、線の引き方ひとつで受ける印象は大きく異なります。
Aは、文字に細い線や、ゆるやかな曲線を添えることで、上品で落ち着いた印象に仕上げています。
文字に繊細さも加わり、30〜40代向けの「大人っぽい交流パーティー」という設定に合っています。
一方でBは、斜体の文字にスピード感のある線を加えることで、勢いや力強さを感じるデザインになっています。
かっこいい表現ではありますが、今回のお題は「30〜40代向けの交流パーティーチラシ」。
求められているのは、華やかさの中にも落ち着きや上品さを感じる表現です。
そのため、今回私が選んだ答えは「A」でした。
デザインに必要なのは「主観」ではなく「客観」の視点
デザインをするとき、つい「こっちの方がかっこいいから」「自分の好みだから」という主観だけで表現を選んでしまいがちです。
しかし、商業デザインにおいて大切なのは、以下のような客観的な視点です。
- 誰に向けたデザインなのか（ターゲット）
- どんな印象を伝えたいのか（目的・世界観）
今回のタイトルデザインを、実際のチラシに当てはめてみました。
全体のレイアウトに組み込んで客観的に見てみると、その差は一目瞭然です。
このように「デザインが使われる最終的な目的やターゲット」に照らし合わせて考えることで、より適した表現が見えてきます。
Illustratorで上品なタイトル文字を作る方法
Illustratorで、今回の作例Aのような「線の美しさが引き立つタイトルデザイン」を作る方法をご紹介します。
【手順1】文字のアウトラインを作成し、字形の一部分を伸ばす
まずは文字を選択し、「書式」メニューから「アウトラインを作成」を行います。
その後、「ダイレクト選択ツール」を使って端のアンカーポイントを選択し、ドラッグして字形を部分的に伸ばします。
【手順2】「ペンツール」を使ってカット加工を施す
次に、字形の一部が欠けているような加工をします。
カットしたい部分に重ねるように、「ペンツール」でマスク用の囲み線を作成します。
次に、「選択ツール」に切り替え、字形と囲み線の両方を選択します。
そして、「オブジェクト」メニューの「クリッピングマスク」＞「作成」をクリックすると、文字が描いた枠の形に切り抜かれます。
【手順3】装飾用のパーツを組み合わせ、アピアランスで「ぼかし加工」をする
装飾するためのパーツを別途用意し、字形と組み合わせて最もバランスがよくなりそうな位置に配置します。
仕上げに、アピアランスパネルの「新規効果を追加」＞「ぼかし」＞「ぼかし（ガウス）」を選択します。
「ぼかし（ガウス）」の数値は、プレビューを見ながら最適だと思うバランスに調整してください。
線は印象を作る
デザインにおいて、線はただの「飾り」ではありません。
「線の形や細さによって、文字の印象そのものをコントロール」できるものです。
だからこそ、自分の感覚（主観）だけでなく「目的に合っているか」という客観的な視点を常にもって、線のあしらいを使いこなしていきましょう。
2．線の太さと色をコントロールし一体感を生み出す
続いて、2問目の振り返りです。
このクイズのお題は、「雑誌の特集扉デザインで、ビジュアルに一体感を感じる線の見え方はどっち？」というものでした。
私が選んだ答えは「B」でした。
AとBの作例を見比べると、線の引き方ひとつで誌面全体の「まとまり感」がガラリと変わるのがわかります。
Aは、太い白線でしっかり区切られているため、それぞれの要素が独立して見えます。
整理された印象はありますが、区切りが強く感じられる分、一つひとつが別々のパーツとして見えやすくなっています。
一方Bは、色のついた細い線で区切ることで、境界が自然になじんで見えます。
オブジェクト同士がゆるやかにつながっているように感じられ、誌面全体として一体感のある印象になっています。
この問題で見るべきなのは、線そのもののディテールではなく、「線が全体の見え方にどう影響しているか」という視点です。
Bでは、色のついた細い線がオブジェクトになじみ、境界の主張がやわらいでいます。
このように、あえて線の存在感を少し抑えることで、パーツ同士が自然につながり、誌面全体がひとつのビジュアルとしてまとまって見えます。
デザインは、一つひとつの要素を単体で見るだけではなく、「全体としてどう見えるか」のバランスを考えることが大切です。
そして、線は主役ではありませんが、全体の印象を整える大切な役割を担っているのです。
線にはつなぐ役割もある
線は「区切る」ために使うことが多いですが、線の太さや色、存在感を調整することで、オブジェクト同士を「つなぐ役割」をもたせることもできます。
そして、この作例でポイントなのは、線の太さだけではありません。
罫線の色が紙面全体の色設計とつながっていることも、一体感を生み出している大きな理由です。
もし、この罫線の色を他の色に変えてみたらどうなるでしょうか？
以下で実際の見え方の違いを確認してみましょう。
●黄色にした場合
アクセントとして強く目立ちすぎるかもしれません。
●黒色にした場合
主張が強くなり、区切りの印象が前に出てしまいます。
一方、今回の作例で採用したのは「緑色」です。
この緑は、見出しのベタ面や、写真の中の木々、装飾パーツなどにも使われている「誌面のキーカラー（テーマ色）」です。
そのため、罫線だけが浮いてしまうことなく、誌面全体の色の流れの中に自然になじませることができます。
このように、キーカラーをうまく活かすことで、罫線もデザイン全体の一体感を支える要素になるのです。
線は形だけでなく「色によってもつなぐ線になる」ということを、ぜひ覚えておいてください。
Illustratorで「キーカラー」を線に適用する方法
今回の作例では、線の太さだけでなく「色」も一体感を作るポイントでした。
Illustratorでは、「スポイトツール」を使うことで、画像やオブジェクトから色を拾うことができます。
ここでは、「スポイトツール」の使い方をご紹介します。
【手順1】色を変えたい線を選択する
まずは「選択ツール」を選択した状態で、色を変えたい線（罫線）を選択します。
【手順2】「スポイトツール」を使って、色を拾う
次に、ツールバーから「スポイトツール」を選択します。
その状態で、誌面の中にある写真や見出しのベタ面など、基準にしたいキーカラーをクリックしてみましょう。
線をただ黒や白にするのではなく、紙面のキーカラーになじませるだけで、全体のまとまり方は大きく変わります。
複数のオブジェクトを連続して色変更する方法
続いて、デザインの現場で手数を減らせる、スポイトツールの便利な機能をご紹介します。
「スポイトツール」を選択し、基準になる色を一度クリックして吸い取った後、キーボードのOptionキー（WindowsはAltキー）を押しっぱなしにしてみてください。
すると、スポイトのアイコンの向きが変わり、「色を流し込むモード」に変わります。
このOptionキー（Altキー）を押しながら複数のオブジェクトをクリックすると、連続して色を適用できます。
何本もある線の色をまとめて変えたいときに非常に便利なテクニックですので、ぜひ活用してみてください。
線は関係性を作る
線は、オブジェクト同士を区切るために使うことが多いデザイン要素です。
しかし、線の太さや色、存在感を少し変えるだけで、見え方は大きく変わります。
強い線は、それぞれの要素をはっきり区切り、整理された印象を作ります。
一方で、線の主張を少し抑えることで、オブジェクト同士が自然になじみ、紙面全体がひとつのビジュアルとしてまとまって見えることがあります。
また、今回の作例のように、罫線の色を紙面のキーカラーに合わせることで、線は境界ではなく「つなぐ要素」として機能します。
線は、ただ区切るだけのものではありません。
オブジェクト同士の距離感や関係性を整え、デザイン全体のまとまりを作る役割ももっているのです。
だからこそ、「線を入れるかどうか」だけでなく、どんな線なら全体がよりよく見えるか。
そんな視点で考えてみることが大切です。
3．線の形状に意味をもたせ、世界観や空気感を表現する
最後に3問目を振り返ります。
このクイズのお題は、「商業施設のキャンペーンポスター。背景のボーダー柄がより活かされているのはどっち？」というものでした。
今回のポスターは、浮き輪やビーチボールなど、プールをモチーフにした夏らしいデザインです。
Aの背景のボーダーは、まっすぐな直線で構成されており、シンプルで整った印象です。
一方Bのボーダーは、よく見るとゆるやかな波線になっています。
Bのように、背景を波線にすることで、水面のゆらぎや夏らしい空気感がより自然に伝わります。
よって、今回私が選んだ答えは「B」でした。
背景もデザインの一部として「機能」させる
背景の線や柄は、デザインにおいてつい「脇役」として考えがちです。
しかし今回の作例では、波線のボーダーがプールの水面のゆらぎを表現し、浮き輪やビーチボールといったモチーフと自然につながっています。
ただ背景に線を敷くだけではなく、モチーフやテーマに合わせて「線の形そのものに意味」をもたせる。
そうすることで、背景も単なる装飾ではなく、デザイン全体の世界観を支える要素として機能します。
目立つ主役だけでなく、背景までデザインする。
そんな視点が、デザインクオリティをひとつ引き上げてくれるのです。
背景で活躍する線の表現
今回の作例では、波線によってプールの水面を表現しましたが、線の形・強弱・色・文様を工夫することで、背景そのものに意味や世界観をもたせることができます。
以下に、線の色やデザインの例と、その印象をまとめました。
背景の線は一見すると小さな脇役に思えるかもしれません。
しかし、使い方次第でビジュアル全体の印象を大きく変える力をもっているのです。
Illustratorで直線をきれいな波線にする方法
今回の作例のような、プールの水面を思わせるゆるやかな波線は、Illustratorの「ジグザグ」という効果を使って作れます。
【手順1】ベースとなるまっすぐな直線を引く
まず、「直線ツール」や「ペンツール」を使い、背景のベースとなる直線を引きます。
【手順2】「ジグザグ」効果を選択する
次に、「選択ツール」で線を選択した状態で、「効果」メニューの「パスの変形」＞「ジグザグ...」をクリックします。
すると、「ジグザグ」の設定画面が開きます。
【手順3】ポイントを「滑らかに」変更する
続いて、設定画面にある「ポイント」で「滑らかに」を選択します。
ここにチェックを入れることで、ギザギザした山が波線に切り替わります。
【手順4】プレビューを見ながら「大きさ」と「折り返し数」を調整する
最後に、「大きさ（波の高さ）」や「折り返し数（波の細かさ）」の数値を、プレビューを見ながら変更し、好みの水面のゆらぎを作ってみましょう。
操作自体はとても簡単ですが、ただの直線を波線に変えるだけで、背景の印象を大きく変えることができます。
ポスターのサイズや表現したい夏のテーマに合わせて、ぜひ試してみてください。
世界観は細部で決まる
背景の線は脇役ですが、線の形を少し変えるだけで、「世界観や空気感を強める役割」をもたせることができます。
タイトル文字や写真といった目立つ要素だけでなく、背景のような細かな部分にも意味をもたせる。
そうした積み重ねが、デザイン全体の完成度につながるのです。
まとめ：情報を引き立てる線のセンスを磨くポイント
今回は線の活かし方に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．線は印象を作る
線はただ区切ったり飾ったりするだけではありません。
線の形や太さ、動きによって、文字やデザイン全体の印象は大きく変わります。
「どんな線なら、このテーマに合うか？」を考えることが大切です。
2．線は関係性を作る
線はオブジェクト同士を区切るだけでなく、つなぐ役割ももっています。
太さや色、存在感を調整することで、デザイン全体のまとまり方は変わります。
線そのものではなく、「全体にどう作用するか」という視点をもってみましょう。
3．線は世界観を作る
背景や装飾の線も、デザインの一部です。
モチーフやテーマに合わせて線の形を工夫することで、世界観や空気感をより強く伝えることができます。
細かな線にも意味をもたせることが、完成度の高いデザインにつながります。
お相手はグラフィックデザイナーの河合俊輔（ヴイタロウ）でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：河合俊輔（ヴイタロウ）
「ユーモア」と「You More（あなたにもっと）」を合言葉に、ユーザー視点のデザインを手がける株式会社ヴイデザインオフィス代表。
グラフィック、Web、パッケージ、ロゴなど幅広く対応。
著書に『だけじゃない ケイセン デザイン 罫線を活用したデザイン術』（SBクリエイティブ）。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/desig２n/quiz-challenge