ペンツールで曲線を描くときに知っておきたい、たった1つのこと

Illustratorで何かを制作したいという方にとって最初の関門は、おそらくペンツールで曲線を描くことではないでしょうか。
ペンツールの動作はお世辞にも直感的とは言えず初めて使う方は戸惑うことが多いと思います。
しかし、たった一つのことを頭に入れて作業するだけで、初めての方でもある程度自分が描きたい曲線が描けるようになると思います。

そのたったひとつの事とは「ハンドルには引力があり、その引力によってパスが曲がると考える」いうことです。

具体的にどういうことなのか、この記事で解説していきます。

各部の名称

ペンツールで描いた線の各部の名称は以下のようになります。

• 始点や終点などにあるピンクの四角形の部分を「アンカーポイント」
• アンカーポイントとアンカーポイントを接続する黒い曲線の部分を「セグメント」
• 中央のアンカーポイントから上下に伸びた水色の線の部分を「方向線」
• 方向線の端にあるピンクの丸の部分を「ハンドル」
• それら全体のことを「パス」

と呼びます。完成後に目に見えるのは黒いセグメントの部分だけで、それ以外は制作時以外は非表示になります。

曲線の描き方

Pキーを押すか［ペンツール］のアイコンをクリックしてペンツールにします。

Illustratorのアートボード上の適当な箇所をクリックします。
アートボード上の別の場所でドラッグ、つまりマウスの左ボタンを押したままマウスを動かします。
すると曲線を描くことができます。

おそらく慣れていない方が戸惑うのは「どのようにドラッグすれば思い通りの曲線になるのかがわからない」ということではないしょうか。

このとき、ハンドルとセグメントの位置関係に注目してください。

ハンドルがセグメントから少しだけ離れている時は引力が少しだけ働いており、それによって少しだけパスが曲げられていると考えます。

ハンドルがパスから大きく離れている時は引力が大きく働いており、それによってパスが大きく曲げられていると考えます。

つまり、「セグメントを小さく曲げたければハンドル●の位置をセグメントから少しだけ離す必要があり、セグメントを大きく曲げたければハンドル●の位置をセグメントから大きく離す必要がある」ということになります。

練習してみよう

これらを頭に入れた上で練習をしてみましょう。以下のリンクをクリックすると、Illustrator CC用の練習データがダウンロードできます。

ペンツール練習用データ

もしIllustratorをまだインストールしていない場合は、以下のリンクからダウンロードできます。

Illustrator無料体験版 | Adobe Illustrator CC完全版のダウンロード

まずは簡単な曲線から描いてみましょう。

ペンツールで、①の近くのアンカーポイント■のところでクリックします。
次に②の近くのアンカーポイント■から左上のハンドル●までドラッグします。

最後に、Macは［command］+キー（Windowsは［Ctrl］キー）を押しながらアートボード上の何もない場所をクリックすると曲線だけが残ります。

今度は波形の曲線を作ってみましょう。
①近くのアンカーポイント■をクリックし、②の近くのアンカーポイント■から右下のハンドル●までドラッグします。
次に③の近くのアンカーポイントをクリックします。

さらに詳しく学びたい方は

この記事は、「スマートフォン時代のWebデザインスクール」の授業資料の一部を抜粋したものです。

「スマートフォン時代のWebデザインスクール」では、Illustratorはもちろん、Photoshopによる写真補正やAdobe XDによるプロトタイピング制作など、現代のWebデザインに必要な事が一通り学べます。

初回体験レッスンでは「Googleのマテリアルデザイン風のアイコンの制作」や「これからのWebデザインがどのように変化するのか」といったことか1000円で学べます。
8月5日（日）と8月9日（木）には体験レッスンも開催しますので、ご興味ある方は以下からご参加ください。

「スマートフォン時代のWebデザインスクール」初回体験レッスンについて