Studioでセクションの境目に波型の区切りを置く方法——どの画面幅でも波の高さを変えない置き方

セクションとセクションの境目を、まっすぐな線ではなく波の形で区切ると、ページの流れがやわらかく見えます。水・美容・保育・飲食など、親しみや動きを出したいサイトでよく使われる表現です。

Studio には、波の形そのものを描く機能はありません。そこで、波の形を画像（SVG）で用意して、画像として置くのが手軽です。この記事では、波の画像の作り方と、Studio への置き方、スマホで波が薄くならないための高さの決め方を順に説明します。

SVG は「拡大してもぼやけない絵」

SVG は、形を「点と線の位置」で記録した画像です。写真（JPEG や PNG）が「色の点の集まり」なのに対して、SVG は「ここからここへ線を引く」という描き方のメモのようなものです。どれだけ拡大しても、描き直すのでぼやけません。

波の区切りは、パソコンの広い画面いっぱいに引き伸ばして使うので、ぼやけない SVG が向いています。ファイルも数KBほどと小さく、ページの表示を重くしません。

波の画像を作る

SHITAJI の波型区切りメーカーを使うと、形と色を選ぶだけで波の SVG を作れます。見え方を試すところまでは登録なしで使え、SVG の保存には無料の会員登録が必要です。

1. 波型区切りメーカーを開き、12種類の形から1つ選ぶ（ゆるやかな波・ギザギザ・三角・雲など）
2. 「波の帯の高さ」を決める（はじめは 120px 前後が扱いやすい）
3. 波の高さや数を、見え方を見ながら整える
4. 「波の色」に、波の下のセクションの色を入れる
5. 「背景の色」に、波の上のセクションの色を入れる（見え方の確認用。画像には入らない）
6. 「SVG を保存」を押して、画像を保存する（保存には無料の会員登録が必要）

Studio に置く

保存した SVG は、Studio のふだんの画像と同じように置けます。特別な貼り付けや設定は要りません。

1. Studio の左にある「アップロード」の一覧に、保存した SVG をドラッグする
2. 波を置きたい2つのセクションの間を選んでから、アップロードした画像をクリックする（画像のボックスができる）
3. 右のパネルの「ボックス」で、幅を 100%、高さを波型区切りメーカーで決めた値（例：120px）にする
4. 同じく「背景色」に、波の上のセクションの色を入れる
5. タブレット・スマホの表示に切りかえても、高さは変えない
6. パネルの「画像」にある「背景サイズ」は、最初の「cover」のままにする

どの画面幅でも、波の高さを変えないコツ

波の画像を「幅 100%・高さは自動」で置くと、画面の幅に合わせて高さも同じ比率で縮みます。パソコンでちょうどよい波でも、スマホでは数分の1の高さになり、ほとんど線のように見えてしまいます。

画像のボックスの高さを px で決め、パソコン・タブレット・スマホとも同じ値にしておくと、どの画面幅でも波の高さは変わりません。変わるのは横幅だけです。

崩れている状態

直った状態

狭い画面での合わせ方は2通り

高さを決めると、狭い画面では波の横の長さが足りなくなります。そのときの合わせ方を、波型区切りメーカーで選べます。形を選ぶと、合いやすいほうが最初から選ばれています。

色を変えたいとき・グラデーションにしたいとき

波の色は画像の中に入っているので、Studio のパネルでは変えられません。色を変えたいときは、波型区切りメーカーで色を変えて、もう一度保存し、画像を差しかえます。設定はページの URL に入っているので、ブックマークしておくと、色だけ変えてすぐに作り直せます。

波の上の色は、画像のボックスの背景色なので、Studio でそのまま変えられます。

波をグラデーションにしたいときは、波型区切りメーカーで「手前の波をグラデーションにする」を選び、右端の色を決めます。そのうえで、波の下のセクションの背景も、Studio の背景色でグラデーションを選んで、同じ色の組み合わせ（左から右）にすると、境目がつながります。

よくある質問

まとめ

波型の区切りは、「波の SVG を作る」→「Studio にアップロードして画像として置く」→「幅 100%・高さを px で決め、画面幅ごとに変えない」の順で置けます。高さを決めておけば、スマホでも波が薄くなりません。

画面幅ごとの崩れにくい組み方はStudioのレスポンシブ設定で崩れにくくする4つの設計に、画像のボックスなどの使い分けはStudioのボックスの種類と使い分けにまとめています。