Webサイトを作っていて、「なんだか単調だな…」「ただ四角い箱が上下に並んでいるだけで、テンプレートっぽさが抜けない…」と感じたことはありませんか？
コーポレートサイトであればカッチリした直線でも良いですが、美容系、サービス紹介、または親しみやすさを出したいLPなどでは、境界線を波線や斜めにするだけで、グッとプロっぽい洗練されたデザインに生まれ変わります。
通常、これを実装するには複雑なCSSや画像素材が必要ですが、Elementorなら「シェイプ区切り」という機能を使って数秒で設定可能です。 今回は、その具体的な使い方と、綺麗に見せるためのコツを解説します。
シェイプ区切りの設定場所と基本設定
シェイプ区切りは、セクション・コンテナの上または下の境界線に適用するデザイン機能です。
⚫︎ 基本の設定手順
デザインを変えたいセクション・コンテナを選択します。
左側のパネルのスタイルタブを開きます。
下の方にある「シェイプ区切り」をクリックして開きます。
上か下、どちらの境界線を変更するか選びます。
タイプのプルダウンから、好きな形（波、斜め、雲、ギザギザなど）を選択します。
たったこれだけで、コンテナの境界線がおしゃれな形に変化します！
デザインを微調整する4つの設定項目
形を選んだら、サイトの雰囲気に合わせて微調整を行います。シェイプを選択すると表示される設定パネルには以下の項目があります。
⚫︎ カラー：シェイプの色を決めます。
⚫︎ 幅：波の緩やかさや、斜めの角度を調整します。数値を大きくすると波が横に伸びます。
⚫︎ 高さ：波や山の高さ（深さ）を調整します。
⚫︎ 反転 ：波の向きを左右・上下に反転させます。「もうちょっと波の頂点をずらしたいな」という時に便利です。
⚫︎ 最前面に移動：シェイプを中の要素に被せます。
シェイプ区切りを綺麗に馴染ませるコツ
シェイプ区切りを設定したものの、「なんか浮いて見える…」「思っていたのと違う…」となる原因の9割は、カラー設定のミスです。
綺麗に馴染ませるための鉄則は以下の通りです。
⚫︎ 鉄則⚫︎ シェイプの色は隣り合うセクションの背景色と同じにする！
例えば、上に青い背景のセクション・コンテナ、下に白い背景のコンテナがあるとします。 上の青いセクション・コンテナの下にシェイプ区切りを設定する場合、シェイプのカラーは下のセクション・コンテナと同じ白色に設定してください。
こうすることで、まるで白いコンテナが青いセクション・コンテナに波打って食い込んでいるような、自然で美しい境界線を作ることができます。
レスポンシブ設定も忘れずに
PCできれいな波線が作れても、スマホで見ると波が高すぎて、中のテキストが読みにくくなっているということがよく起こります。
スマホ表示の時は、少し高さの数値を低くすると、画面の狭いスマホでもスッキリとした美しい境界線になります。
まとめ
コンテナのスタイルタブ ＞シェイプ区切りから設定。
色は「隣のセクションの背景色と合わせる」のが鉄則。
スマホ表示での高さ調整を忘れずに。
直線ばかりのサイトにシェイプ区切りをひとつ取り入れるだけで、ユーザーに与える印象は大きく変わります。 「波」や「斜め」はどんなサイトにも合わせやすいので、ぜひ色々なページで試してみてください。
