【2022年版】AdobeXDで波線を作る方法を紹介!

【2022年版】AdobeXDで波線を作る方法を紹介!

takato(@n8takato)です!

XDで波線を作る方法を知りたい

この記事は上記の課題に向けて作成しています。

web制作をしていると波線を作ることがたまにあります。

僕も最近波線を作成しました。

そこで今回はXDで波線を作成する方法について説明していきます。

この記事を読むメリット

  • XDで波線を作る方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDのガイドの引き方を紹介します! XDでガイドの引き方を知りたい この記事は上記の課題に向けて作成しております。 XDはイラレやフォトショと同様にガイドを引くことが出来ます。 webデザインを作成する...
あわせて読みたい
XDのスクロールグループ機能で各方向のスクロールを確認する方法! XDで各方向のスクロールを確認する方法を知りたい この記事は上記の課題に向けて作成しています。 XDにはスクロールグループという機能があります。 スクロールグループ...
目次

XDで波線を作る方法

早速XDで波線を作る方法を説明していきます。

今回は下記のような波線を作成していきます。

今回説明する波線の完成図です。
今回作成する波線

波線を作る手順は下記の通りです。少し大変ですがついて来てください。

XDで波線を作る手順

  1. 菱形の図形を作成する
  2. 作成した菱形を増やす
  3. 菱形の間隔を調節する
  4. 菱形を合体させる
  5. パスに変換させる
  6. パスをオープンパスに変更する
  7. 菱形の下辺を削除する
  8. 滑らかなカーブに変形する
  9. 両端の辺を削除する
  10. 色を変更する

菱形の図形を作成する

菱形の図形を作成します。手順は下記の通りです。

  1. 多角形ツールで三角形を作成
  2. コーナーカウントを「4」に変更

①多角形ツールで三角形を作成

XDの左側にあるメニューから「多角形ツール」を選択します。

XDの左側にあるメニューから「多角形ツール」を選択します。
「多角形ツール」を選択

②コーナーカウントを「4」に変更

図形を選択した状態で右側にある「コーナーカウント」を4に変更します。

すると三角形の図形が菱形に変わります。

図形を選択した状態で右側にある「コーナーカウント」を4に変更します。すると三角形の図形が菱形に変わります。
コーナーカウントの変更

作成した菱形を増やす

作成した菱形を増やします。

リピートグリッド」を使って菱形を増やします。

図形を選択した状態で「リピートグリッド」をクリックします。

「リピートグリッド」を使って菱形を増やします。図形を選択した状態で「リピートグリッド」をクリックします。
「リピートグリッド」を選択

緑色の枠を横に引っ張ると菱形が複製されます。

緑色の枠を横に引っ張ると菱形が複製されます。
菱形の複製

リピートグリッドは解除せずにこのままでいてください。

菱形の間隔を調節する

菱形が複製されたら間隔を調節します。

菱形と菱形の間にカーソルを合わせると余白が赤く表示されます。

菱形と菱形の間にカーソルを合わせると余白が赤く表示されます。
余白部分にカーソルを合わせる

この状態で菱形同士が重なる程度に間隔を狭めてください。

この状態で菱形同士が重なる程度に間隔を狭めてください。
間隔の調整

菱形同士が重なるくらいの間隔に調節出来たらリピートグリッドを解除してください。

菱形同士が重なるくらいの間隔に調節出来たらリピートグリッドを解除してください。
リピートグリッドの解除

菱形を合体させる

作成した複数の菱形を合体させます。

全ての菱形を選択した状態で右側メニューの「合体」をクリックします。

全ての菱形を選択した状態で右側メニューの「合体」をクリックします。
「合体」の選択

すると菱形同士が重なり合っている部分が合体します。

菱形同士が重なり合っている部分が合体します。
菱形が合体される

パスに変換させる

続いて図形をパスに変更させます。

図形を選択した状態で「オブジェクト」→「パス」→「パスに変換」をクリックします。

図形を選択した状態で「オブジェクト」→「パス」→「パスに変換」をクリックします。
「パスに変換」を選択

すると図形がパスに変換されました。

図形をダブルクリックするとパスに変換されていることがわかります。

ちなみにMacユーザーは「コマンド」+「8」のショートカットでパスに変換することが出来ます。

パスをオープンパスに変更する

パスに変換された図形をオープンパスに変更します。

現在パスの始点から終点まで結ばれています。どこか一部分を消すことで始点から終点まで結ばれていないオープンパスにすることが出来ます。

図形をダブルクリックした状態で「optionキー」+「deleteキー」をクリックします。

パスの一部が削除されオープンパスに変更されました。

①図形をダブルクリックしてパスを表示させる②「optionキー」+「deleteキー」を押す。
オープンパスに変更

菱形の下辺を削除する

オープンパスになった状態で菱形の下辺を削除します。

するとジグザグな線が残ります。

下辺を選択してdeleteキーで削除します。
下辺を削除する

滑らかなカーブに変形する

ジグザグな線を滑らかなカーブに変形させます。

丸い部分をダブルクリックすると自動で滑らかな曲線に変わります。

丸い部分をダブルクリックすると自動で滑らかな曲線に変わります。
滑らかな曲線に変更

両端の辺を削除する

両端の曲線があると綺麗な波線にならないので削除します。

それぞれの曲線部分を選択した状態でdeleteキーを押すと削除出来ます。

両端の曲線を削除します。
両端の曲線を削除

色を変更する

最後に波線の色を変更します。

」から好みの色を選択してください。

波線を太くする場合は「サイズ」の数値を増やしてください。

「線」から好みの色を選択してください。波線を太くする場合は「サイズ」の数値を増やしてください。
波線の装飾を変更

波線の作成は以上です。

webデザインで波線を使用するシーン

webデザインの制作現場ではたまに波線を使うことがあります。

縦長になったwebサイトを資料に貼り付ける際に波線を使ってサイトの中間をカットするような表現をします。

波線を活用することで縦長サイトの中間部分をカットすることが出来る。
波線を活用した切り抜き

上記左のデザインの中間部分に波線を用いることで、右側のように中間部分をカットする表現が出来ます。

波線を用いることでハサミで切ったような表現が出来ます。

この手法はデザイナー以外にアートディレクターも使いますので覚えておいてください。

最後に

この記事ではXDで波線を作る方法を紹介しました。

波線はwebデザインの中間部分を切り抜いた表示をする際に活用出来ます。

提案書に縦長のwebサイトを表示する際は是非波線を活用してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次