「Webデザインの相棒」シリーズでは、Web制作に役立つツール・サイト・実装Tipsをまとめています。
制作効率を上げたい方や、ちょっとしたアイデアが欲しいときの参考にどうぞ。

 

Webサイトのセクション区切りやヒーローエリアの下部などで使われる「波型のデザイン」。柔らかい印象を与えたり、ページ全体に動きをつけたりと、デザインのアクセントとして非常に人気があります。

ただ、この波形を自作しようとすると、Illustratorでパスを引いたり、思い通りの曲線を作るのに手間がかかったり…。そんな時に役立つのが GetWaves.io です。

 

GetWaves.io を開く
画面左のサイドバーで
・波形タイプ
・複雑さ
・高さ
・色

などを調整
プレビューを確認して微調整
SVGをダウンロード or コードをコピー
Webサイトに貼り付けて完成!

波形デザインジェネレーター getwaves.io

https://getwaves.io/