この線のスタイル、どっちが正解？シーンに合わせた線を使うセンスを磨こう

Illustratorで美しい破線を作るコツ

「アピアランスパネル」の「線」という項目をクリックすると、「線パネル」と同様の設定ができるようになります。ここで「破線」にチェックを入れるだけでカンタンに作れますが、以下の2つのポイントを押さえることで、より美しい破線に仕上がります。

【ポイント1】「線分」と「間隔」でリズムを整える

「線分」で線の長さを、「間隔」で隙間の距離を調整します。

（作例のように「間隔」に数値を入れない場合、隙間は「線分」と同じ広さになります。）

「ホバー効果」でさらに分かりやすく

Webサイトを使っているとき、ボタンにカーソルを重ねると色が薄くなったり、枠線のスタイルが変わったりする演出をよく見かけませんか？

また、ファイルをアップロードする際に、ファイルをドラッグすると枠線が強調されるような演出もありますよね。

下図の「ホバー時」のように、枠線のスタイルに加えてカーソルを重ねたときの演出を組み合わせることで、ユーザーは「ここにファイルをドロップすればいいんだ」と直感的に理解しやすくなります。

「実行前」の少し控えめな点線枠から、「ホバー時」にカーソルが重なり、色がパッと変化することで、操作への確信が生まれます。

こうした小さな視覚的フィードバックの積み重ねが、迷いのないスムーズな操作体験につながります。

ホバー時の色の変化を表現する方法は、デザインの目的や背面の状況に合わせて選ぶのがポイントです。Illustratorでホバー効果用の画像を作る際の、2つのアプローチをまとめました。

【方法1】不透明度の調整

1つ目の方法は、画像の不透明度を下げることです。

やり方は、「アピアランス」にある「不透明度」のパーセンテージを調整するだけです。

数値を落とすと、色が薄くなったような視覚効果が得られます。

ただし、この方法はオブジェクト自体を半透明にするため、背景に別の要素がある場合は透けて見えるので、注意が必要です。

Illustratorで線に「質感」を足す方法

ただの線を、あたたかみのある「アナログ感のある線」に変えるには、Illustratorのアピアランスパネルを使います。

今回は、ブラシと効果を組み合わせて線に質感を出す方法を解説します。

【手順1】ブラシとプロファイルで強弱を付ける

まずは対象の線を選択し、「ウィンドウ」メニューの「アピアランス」をクリックして「アピアランス」パネルを開きます。

次に「ブラシ定義」をクリックし、アナログ感のある「木炭（ソフト）」を選択します。

さらに、「線幅プロファイル」は先端が細くなっていく「線幅プロファイル4」に変更しましょう。

これだけで、一気に手書きのようなライブ感が生まれます。

バリエーションを増やすのに生成AIを活用

画像の質感も変えることで表現をさらに広げることもできます。
Adobe FireflyのFireflyボードを使えば、画像そのものの質感や表現を変えたバリエーションを増やすことがカンタンにできます。

Adobe Fireflyとは、画像生成、動画生成、効果音生成などができるオンライン生成AIツールです。

Fireflyボードとは？

Fireflyボードは、生成AIを使ってアイデアを広げたり、複数のバリエーションを1つの画面（ボード）上で比較・検討したりするためのクリエイティブスペースで、Fireflyの機能のうちのひとつです。
単に画像を生成するだけでなく、複数の画像を並べて全体のトーンを整えたり、チームで共有してブラッシュアップしたりするのに適しています。

例えば、このハンバーガーの写真。

元の構図を維持したまま、一瞬で手書きイラストに仕上げることができます。

具体的な手順を見ていきましょう。

Fireflyボードを開き、カンバスに元となる画像を配置して「画像を生成」をクリックしましょう。
縦横比を「自動」に設定してから、「写真」アイコンをクリックするとカーソル形状がスポイトに変わるので、配置した画像を選択します。

生成モデルを「Firefly Image 5」に切り替えます。続いて「色鉛筆で描いたイラストに変更。元の構図は変えない。」とプロンプトを入力し、「生成」ボタンをクリックすると画像が生成されます。

このプロンプトのポイントは「元の構図は変えない」と入力することです。こうすることで、元のハンバーガーの構図を守ることができます。

同じ手順で水彩の感じや、チョークで描いた絵に変更するなど、目指したい雰囲気に合わせて、何パターンもの作例を生成できます。

デザインの目的に合わせて最適な質感を探ってみましょう。