この線のスタイル、どっちが正解？シーンに合わせた線を使うセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
グラフィックデザイナーの「いとくに」です。
今回、私は「線」の使い分けについてのクイズを出題します。
実線、破線、あるいは手描き風の線。
デザインにおいて線を使うとき、実はその「スタイル」ひとつで、情報の受け取り方は大きく変わります。
線の太さや形には、それぞれふさわしい役割があるのです。
早速ですが、クイズです。
以下の3つの作例を見て、AとB、あなたはどちらの「線」の使い方がよいと感じますか？
1問目「心の声の吹き出し、ふさわしい線のスタイルはどっち？」（難易度★）
2問目「空のアップロード枠、ふさわしい線のスタイルはどっち？」（難易度★★）
3問目「あたたかみが伝わる線はどっち？」（難易度★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：A
いかがでしたか？
ではここからは、私なりの解説です。
それぞれの作例のAとBで、何が異なっていたのか？を説明し、「どちらが正しいか」ではなく、「目的や商材に応じて選ぶことが重要」という思考について、私なりの視点で解説していきます。
また、作例で用いられていたデザインテクニックについても紹介します。
1．「心の声」は破線（点線）を使って直感的に表現する
では、1問目から振り返っていきましょう。
この作例は、「心の声」を表現するための吹き出しの使い分けを問うものでした。
私が選んだ答えはBでした。
一見どちらも言葉を囲む枠に見えますが、線のスタイルひとつで、その言葉が「口から出たもの」なのか「心の中にとどまっているもの」なのかが大きく変わります。
Aのような実線は、境界線がくっきりしているため、「はっきりと発せられた言葉」として認識されます。
対してBのような破線（点線）は、輪郭が曖昧になることで「形にならない思考」や「心の中のつぶやき」というニュアンスを直感的に伝えることができます。
ちなみに、吹き出しの「しっぽ（テール）」の形でも、「口から出たもの」なのか「心の中にとどまっているもの」なのかを伝えやすくなります。
以下のように、三角ではなく小さな円を並べる形にすると、それだけで「思っていること」という記号的な意味が強まります。
この「丸いしっぽ」を使えば、たとえ実線であっても「心の声」として表現できますが、そこにさらに破線（点線）を組み合わせることで、より内面的な「モノローグ感」がいっそう引き立ちます。
Illustratorで美しい破線を作るコツ
「アピアランスパネル」の「線」という項目をクリックすると、「線パネル」と同様の設定ができるようになります。ここで「破線」にチェックを入れるだけでカンタンに作れますが、以下の2つのポイントを押さえることで、より美しい破線に仕上がります。
【ポイント1】「線分」と「間隔」でリズムを整える
「線分」で線の長さを、「間隔」で隙間の距離を調整します。
（作例のように「間隔」に数値を入れない場合、隙間は「線分」と同じ広さになります。）
【ポイント2】「コーナー」を美しく整える
図形に破線を設定したとき、角（コーナー）に中途半端なスキマができて、角が欠けたように見えてしまうことはありませんか？
そんなときは、線パネルにある「コーナーやパス先端に破線の先端を整列」というボタンをクリックしましょう。
これだけで、Illustratorが自動計算してすべての角に線がピッタリ配置されるよう調整してくれ、不自然な隙間がなくなります。
2．「未完成」や「空の状態」は破線で直感的に伝える
続いて2問目を振り返ります。
2問目はwebでよく見るアップロードエリアの枠組みについての問題でした。
私が選んだ答えはAでした。
Bのように実線で囲むと、境界線が強固なため、既に何かがそこにある「確定した領域」や「動かせない壁」のように見えます。
一方でAのように破線を使うと、線が途切れていることで、「まだ中身が空であること」や、これからデータが入るための「補助的なガイド」であることを直感的にイメージさせます。
「ホバー効果」でさらに分かりやすく
Webサイトを使っているとき、ボタンにカーソルを重ねると色が薄くなったり、枠線のスタイルが変わったりする演出をよく見かけませんか？
また、ファイルをアップロードする際に、ファイルをドラッグすると枠線が強調されるような演出もありますよね。
下図の「ホバー時」のように、枠線のスタイルに加えてカーソルを重ねたときの演出を組み合わせることで、ユーザーは「ここにファイルをドロップすればいいんだ」と直感的に理解しやすくなります。
「実行前」の少し控えめな点線枠から、「ホバー時」にカーソルが重なり、色がパッと変化することで、操作への確信が生まれます。
こうした小さな視覚的フィードバックの積み重ねが、迷いのないスムーズな操作体験につながります。
ホバー時の色の変化を表現する方法は、デザインの目的や背面の状況に合わせて選ぶのがポイントです。Illustratorでホバー効果用の画像を作る際の、2つのアプローチをまとめました。
【方法1】不透明度の調整
1つ目の方法は、画像の不透明度を下げることです。
やり方は、「アピアランス」にある「不透明度」のパーセンテージを調整するだけです。
数値を落とすと、色が薄くなったような視覚効果が得られます。
ただし、この方法はオブジェクト自体を半透明にするため、背景に別の要素がある場合は透けて見えるので、注意が必要です。
【方法2】アピアランスを活用した色の調整
2つ目の方法は、「アピアランス」機能を使った色の調整です。
背景を透かさずに色を薄くしたいときは、この「アピアランス」の活用が有効です。
対象のオブジェクトをグループ化し、「ウィンドウ」メニューの「アピアランス」をクリックし、アピアランスパネルを開きます。
「新規塗りを追加」して白色を選び、その塗りの不透明度のみを下げることで、全体を薄く見せられます。
元の色情報を維持したまま上からベールをかけるような仕組みなので、後からの色変更にも柔軟に対応しやすくなります。
一括でホバー用のトーンを整えたい場合に役立つ手法です。
3．線の「ゆらぎ」で「温度感」を伝える
最後に3問目を振り返ります。
この作例は、線の質感による印象の違いが問題でした。
私が選んだ答えはAでした。
Aでは、掠れやゆらぎのある線を使うことで、「人の手」を感じさせ、あたたかみやライブ感を演出できています。
一方でBのような均一な直線は、情報を整理するのに適していますが、少し無機質な印象を与えることもあります。
感情を動かしたいシーンでは、あえて線を崩すことで「おいしそう」という心理的効果を高めやすくなります。
Illustratorで線に「質感」を足す方法
ただの線を、あたたかみのある「アナログ感のある線」に変えるには、Illustratorのアピアランスパネルを使います。
今回は、ブラシと効果を組み合わせて線に質感を出す方法を解説します。
【手順1】ブラシとプロファイルで強弱を付ける
まずは対象の線を選択し、「ウィンドウ」メニューの「アピアランス」をクリックして「アピアランス」パネルを開きます。
次に「ブラシ定義」をクリックし、アナログ感のある「木炭（ソフト）」を選択します。
さらに、「線幅プロファイル」は先端が細くなっていく「線幅プロファイル4」に変更しましょう。
これだけで、一気に手書きのようなライブ感が生まれます。
【手順2】「粒状効果」でアナログな摩擦感を足す
さらに質感を足すために「効果」を適用しましょう。
「アピアランス」パネルの「新規効果を追加」から「テクスチャ」＞「粒状...」を選択します。
ダイアログが表示されるので、「密度」と「コントラスト」を調整しましょう。
その際、「粒子の種類」は「標準」のままでOKです。
この「粒状」の効果を加えることで、紙と鉛筆がこすれたときのような繊細な摩擦感が生まれますので、ぜひ試してみてください。
バリエーションを増やすのに生成AIを活用
画像の質感も変えることで表現をさらに広げることもできます。
Adobe FireflyのFireflyボードを使えば、画像そのものの質感や表現を変えたバリエーションを増やすことがカンタンにできます。
Adobe Fireflyとは、画像生成、動画生成、効果音生成などができるオンライン生成AIツールです。
Fireflyボードとは？
Fireflyボードは、生成AIを使ってアイデアを広げたり、複数のバリエーションを1つの画面（ボード）上で比較・検討したりするためのクリエイティブスペースで、Fireflyの機能のうちのひとつです。
単に画像を生成するだけでなく、複数の画像を並べて全体のトーンを整えたり、チームで共有してブラッシュアップしたりするのに適しています。
例えば、このハンバーガーの写真。
元の構図を維持したまま、一瞬で手書きイラストに仕上げることができます。
具体的な手順を見ていきましょう。
Fireflyボードを開き、カンバスに元となる画像を配置して「画像を生成」をクリックしましょう。
縦横比を「自動」に設定してから、「写真」アイコンをクリックするとカーソル形状がスポイトに変わるので、配置した画像を選択します。
生成モデルを「Firefly Image 5」に切り替えます。続いて「色鉛筆で描いたイラストに変更。元の構図は変えない。」とプロンプトを入力し、「生成」ボタンをクリックすると画像が生成されます。
このプロンプトのポイントは「元の構図は変えない」と入力することです。こうすることで、元のハンバーガーの構図を守ることができます。
同じ手順で水彩の感じや、チョークで描いた絵に変更するなど、目指したい雰囲気に合わせて、何パターンもの作例を生成できます。
デザインの目的に合わせて最適な質感を探ってみましょう。
Fireflyボードをオススメする理由
AIによる画像生成は、一度で理想の質感に仕上がるとは限らず、納得がいくまで何度も試行錯誤を繰り返します。
今回の例のように、手書き風やチョーク風といったニュアンスを求める場合、思ったとおりの結果が出るまで生成を続けていくことになりますが、Fireflyボードなら生成した複数の結果を1つの画面に並べて確認できます。
何枚も生成を繰り返していく中で、デザインに最も馴染む「当たり」の結果を、他の候補と比較しながら冷静に選び出しやすくなるのが、ボードを使う大きなメリットです。
単発の生成機能で1つずつ確認するよりも、多くのバリエーションを俯瞰して見られるボードの方が、理想の質感にたどり着くまでの判断をスムーズに進められます。
また今回紹介したFireflyのアドビモデルなら商用利用可能です。
まとめ：シーンに合わせた線のセンスを磨くポイント
今回は、シーンに合わせた線の使い分けについて取り上げました。
最後に、今回のノウハウをまとめます。
1．「点線」は言葉にできない「思考」を伝える
くっきりした実線が「はっきりした発話」を表すのに対し、点線は境界線を曖昧にすることで、内面的なつぶやきや、形のない思考を直感的に表現してくれます。
2．「破線」は「未完成・アクションの誘導」に使う
「まだ中身が空であること」や「補助的なガイド」を意味する破線は、ユーザーを迷わせないためのUIデザインとして効果的です。
ホバー効果と組み合わせることで、操作への理解度をさらに高めてくれます。
3．「質感」でデザインの「温度感」をコントロールする
あえて線を崩したり、粒状のテクスチャを加えたりすることで、「人の手のぬくもり」や「ライブ感」を演出できます。
情報の正確さだけでなく、感情を動かしたいシーンこそ、線の表情にこだわってみましょう。
線のスタイルひとつに「意味」をもたせるだけで、デザインの説得力はグッと高まります。ぜひ、意識してみてください。
お相手はグラフィックデザイナーの「いとくに」でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：いとくに
香川を拠点に活動するグラフィックデザイナー兼ディレクター。Adobe Community Expert。
著書『Nano Banana ＆ Photoshop 生成AIデザインアイデア』『After Effectsエフェクト＋モーション＋映像加工 実用アイデア見本帳』（共にMdN）。『iPadで描こう！ Procreateイラストテクニック』（玄光社）をはじめ、amity_senseiのすべての著書で執筆協力。Adobe MAX Japan 2023、「朝までイラレ」に登壇。