Zenn
🍆

【Next.js】個人開発で背景に悩んだら試しておきたいツール

2023/09/24に公開
Next.js
Tailwind CSS
SVG
tech

個人開発をしていると、背景が単色でつまらない印象になりがちです。
かと言ってグラデーションや波などの装飾はデザインスキルが無く、作るのが難しく感じてしまいます。そこで、いい感じに背景をSVGやPNG形式で書き出しできる無料のWebツールがありましたので紹介します！

Haikei

https://app.haikei.app/

Haikei というWebサービスです。
日本語名ですが海外の方が作ったサービスのようです。

登録なしで使えます。

何ができるのか？

こんな感じで欲しい雰囲気のパターンを選んで色を指定して、
あとはひたすら赤枠箇所をクリックしてガチャを回しまくるだけです。

好きな形のものができたら、右下のDownloadから SVG 形式などでダウンロードしましょう。

Next.jsサイトで背景としてSVGを指定するには？

Tailwind CSS 等ではSVGを画像として指定できません。
CSSとして指定する必要がありますが、SVGを少し加工する必要があります。

  1. width と height を削除する。
  2. カラーコードの # を %23 に置換する。

あとはCSSに適用するだけです。

.bg-haikei {
  background: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 540 960" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 441L11.3 439.3C22.7 437.7 45.3 434.3 67.8 444C90.3 453.7 112.7 476.3 135.2 488.7C157.7 501 180.3 503 202.8 499.7C225.3 496.3 247.7 487.7 270.2 476.8C292.7 466 315.3 453 337.8 454.7C360.3 456.3 382.7 472.7 405.2 471.2C427.7 469.7 450.3 450.3 472.8 449.7C495.3 449 517.7 467 528.8 476L540 485L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%23b7d5f7"></path><path d="M0 459L11.3 444.8C22.7 430.7 45.3 402.3 67.8 402C90.3 401.7 112.7 429.3 135.2 444.7C157.7 460 180.3 463 202.8 454.7C225.3 446.3 247.7 426.7 270.2 411.3C292.7 396 315.3 385 337.8 383.7C360.3 382.3 382.7 390.7 405.2 401C427.7 411.3 450.3 423.7 472.8 425C495.3 426.3 517.7 416.7 528.8 411.8L540 407L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%23a0c7e9"></path><path d="M0 391L11.3 390.5C22.7 390 45.3 389 67.8 379.3C90.3 369.7 112.7 351.3 135.2 339.7C157.7 328 180.3 323 202.8 322C225.3 321 247.7 324 270.2 327C292.7 330 315.3 333 337.8 342.3C360.3 351.7 382.7 367.3 405.2 368.8C427.7 370.3 450.3 357.7 472.8 351.2C495.3 344.7 517.7 344.3 528.8 344.2L540 344L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%2389b9da"></path><path d="M0 247L11.3 258.7C22.7 270.3 45.3 293.7 67.8 300.7C90.3 307.7 112.7 298.3 135.2 294.7C157.7 291 180.3 293 202.8 293.7C225.3 294.3 247.7 293.7 270.2 297.7C292.7 301.7 315.3 310.3 337.8 304.7C360.3 299 382.7 279 405.2 279.3C427.7 279.7 450.3 300.3 472.8 300.3C495.3 300.3 517.7 279.7 528.8 269.3L540 259L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%2371abcb"></path><path d="M0 200L11.3 198C22.7 196 45.3 192 67.8 195C90.3 198 112.7 208 135.2 213.3C157.7 218.7 180.3 219.3 202.8 224.2C225.3 229 247.7 238 270.2 235.5C292.7 233 315.3 219 337.8 217.2C360.3 215.3 382.7 225.7 405.2 228.2C427.7 230.7 450.3 225.3 472.8 219.7C495.3 214 517.7 208 528.8 205L540 202L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%23589ebc"></path><path d="M0 165L11.3 163.7C22.7 162.3 45.3 159.7 67.8 153.7C90.3 147.7 112.7 138.3 135.2 140.3C157.7 142.3 180.3 155.7 202.8 157C225.3 158.3 247.7 147.7 270.2 148.5C292.7 149.3 315.3 161.7 337.8 162.8C360.3 164 382.7 154 405.2 147.3C427.7 140.7 450.3 137.3 472.8 136.5C495.3 135.7 517.7 137.3 528.8 138.2L540 139L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%233c90ab"></path><path d="M0 72L11.3 74.2C22.7 76.3 45.3 80.7 67.8 84.5C90.3 88.3 112.7 91.7 135.2 93.7C157.7 95.7 180.3 96.3 202.8 91.8C225.3 87.3 247.7 77.7 270.2 71.3C292.7 65 315.3 62 337.8 65.2C360.3 68.3 382.7 77.7 405.2 81.8C427.7 86 450.3 85 472.8 88C495.3 91 517.7 98 528.8 101.5L540 105L540 0L528.8 0C517.7 0 495.3 0 472.8 0C450.3 0 427.7 0 405.2 0C382.7 0 360.3 0 337.8 0C315.3 0 292.7 0 270.2 0C247.7 0 225.3 0 202.8 0C180.3 0 157.7 0 135.2 0C112.7 0 90.3 0 67.8 0C45.3 0 22.7 0 11.3 0L0 0Z" fill="%2315839b"></path></svg>');
  background-size: cover;
}

※ background: url('data:image/svg+xml;charset=UTF-8,【ここにSVG】');

これでNext.jsのサイトで背景として指定でき、拡大されても常にきれいな状態で表示されるSVGで描画されるようになります！

カラーコードの選択は、 Picular が使いやすくて愛用しています！

https://picular.co/

Discussion