WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

Webサイトやバナー、または広告などで、ギザギザした線が引かれていたり、境界線がうねうねとしたデザインを見たことはありませんか？
例えば、下のようなイメージです。

岡山ランドリー
https://okayamalaundry.co.jp/

台湾好部
https://www.beams.co.jp/special/2023_taiwan/

「ギザギザ」や「なみなみ」の装飾を取り入れると、シンプルな直線と比べて「にぎやかでポップ」な印象を持たせたり、「個性的に」見せたりすることができるので、デザインの幅が広がります。

今回は、Illustratorを使ってギザギザした線やなみなみとした波線の作り方をご紹介します！Illustratorの機能を使えばとても簡単に作れる上、調整もできるので、ぜひ試してみてください。

ギザギザ線の描き方

まずは、ペンツールで直線を描きます。ペンツールを使ってキャンバス上で2つの点を打つと、直線が作れます。

この直線を選択した状態で、上部のメニューから「効果」→「パスの変形」→「ジグザグ」を選択し、出てきたポップアップウィンドウの「OK」をクリックします。

線がギザギザになりました！

ギザギザの山のサイズを変える

Illustratorで作るギザギザ線は、ギザギザの山の大きさや数を調整することができます。

直線をギザギザに変形するときに出てくるポップアップウィンドウの中の「大きさ」というところの数値を、大きくすると山が大きく、小さくすると山が小さくなります。

山が小さいと穏やかな感じ、大きいと激しい感じになります。

ギザギザの山の数を変える

ギザギザの数も変えられます。先ほどのポップアップウィンドウの中の「折り返し」というところの数値を、大きくすると山の数が増え、小さくすると減ります。

山の数が少ないとゆったりとした感じ、多いと躍動的な感じになります。

一口に「ギザギザ線」と言っても、山の大きさや数によって雰囲気が変わってくるので、全体のデザインに合わせてお好みに調整してみてください。

なみなみ線の描き方

次は「なみなみ線」の作り方です。これは、ギザギザ線からもう1つ設定するだけで作れます。

ポップアップウィンドウの中の「ポイント」を「滑らかに」とします。すると、ギザギザが滑らかになって「なみなみ」になります！

山の大きさや数ももちろん変えられるので、こちらもお好みで調整しましょう。

注意点

ギザギザやなみなみを設定したあとも線の長さや太さを変えることができますが、山の大きさや数は変わらないので、例えば30pxでギザギザを設定したときはちょうど良い加減だったのが、線の長さを100pxに伸ばすと山が低すぎたり山の数が少なすぎてゆったりしすぎる、ということになります。

もちろん山の大きさや数は何度でも変えられますが、できるだけ線の長さを決めてからギザギザ加工をするほうが、よりスムーズに作業できます。

塗りの境界線をギザギザにする方法

これまでご紹介したのは、線をギザギザ・なみなみにする方法ですが、同様の方法で塗り面の境界線をギザギザにすることもできます。

まず、長方形を作ります。ここでは「線」ではなく「塗り」モードで作成します。実際に使いたいサイズよりも幅・高さともに少し大きめに作ってください。

できましたら、先ほどご紹介した方法で境界線をギザギザにします。

このままでも使えますが、シェイプのすべての辺がギザギザになってしまうので、少し使いにくいです。上の辺だけをギザギザにしていきましょう。

今の段階では、見た目がギザギザになっているけど実際のシェイプの辺は直線のままという状態です。

ここで、シェイプを選択した状態で、上部メニューから「オブジェクト」→「アピアランスの分割」を選択します。

すると、完全にギザギザのシェイプとなります。この状態になるとギザギザ加減の調整ができなくなるので、山の大きさや数は事前に決めておきましょう。

ここで、実際に使いたいサイズの長方形シェイプを作ります。高さは後で変えられますので、横幅だけ決めておきましょう。これを、先ほどのギザギザシェイプの上に重ねます。このとき、直線長方形が少し上にはみ出している位置に配置します。

※上の画像では分かりやすいように、長方形シェイプを半透明にしています。

ギザギザシェイプと長方形シェイプの両方を選択した状態で、「パスファインダー」ウィンドウの中の「形状モード」の右から2番目のアイコンをクリック。

上の辺だけがギザギザした長方形シェイプができました！

ギザギザ・なみなみを取り入れて面白いデザインを作ろう

ギザギザ・なみなみの線を文字の下に入れて強調したり、境界線をギザギザ・なみなみにすることで楽しくワクワクする雰囲気にしたりと、この機能を使うとちょっと変わったデザインを作ることができます。覚えてしまえば難しい作業ではないので、ぜひ取り入れてみてくださいね！