Elementorのシェイプ区切り 忘れてませんか？無料版の機能にもあるセクションのシェイプ区切りをご紹介します。いざという時にアクセントになったり、組み合わせると面白い演出が出来たりします。今回は基本の説明に加え、応用的使い方も大公開！
シェイプ区切りって？
セクションに紐づく機能で、スタイルの中にあります。
実際使って見たのがこちら！
セクションの下部が半透明の斜めのラインで区切られています。これが「シェイプ区切り」です。シェイプ区切りのデザイン（タイプ）は全部で18種類！迷うくらい沢山あります。
シェイプ区切大図鑑
山
＜設定可能項目＞ 色／幅／高さ／反転／最前面に移動
ドロップ
＜設定可能項目＞ 色／高さ／反転（横）／反転（縦）／最前面に移動
クラウド
＜設定可能項目＞ 色／高さ／反転（横）／反転（縦）／最前面に移動
ジグザグ
＜設定可能項目＞ 色／幅／高さ／最前面に移動
ピラミッド
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
三角形
＜設定可能項目＞ 色／幅／高さ／反転（上下）／最前面に移動
三角形非対称
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
チルト
＜設定可能項目＞ 色／高さ／反転（横）／最前面に移動
チルト透明
＜設定可能項目＞ 色／幅／高さ／反転（横）／最前面に移動
ファン透明
＜設定可能項目＞ 色／幅／高さ／最前面に移動
カーブ
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
カーブ非対称
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
波
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
波ブラシ
＜設定可能項目＞ 色／幅／高さ／反転（横）／最前面に移動
波パターン
＜設定可能項目＞ 色／幅／高さ／反転（横）／反転（縦）／最前面に移動
矢印
＜設定可能項目＞ 色／幅／高さ／反転（縦）／最前面に移動
本
＜設定可能項目＞ 色／幅／高さ／反転（縦）／最前面に移動
基本的な使い方
区切りというくらいなので、セクションとセクションの区切りとして使うのが基本的な使い方となります。
操作としては、セクションを選択し、スタイルタブのシェイプ区切りで、上か下を選択、次にタイプ（デザイン）を選択し、それぞれの設定項目を設定！これだけで素敵な区切りが出来ます。
実際使ってみましょう。例えば、コーナー１とコーナー２があり、それぞれセクションは分かれています。コーナー１とコーナー２に関連性がある場合、「矢印」「分割」などを使い、上下のコーナーの関連性を表現出来ます。
反対にコーナー１と２の関連性を打ち消したい場合、つまりは「ここから話変わりますね！」的な際は、チルトやカーブが良いかもしれません。
さらに、区切りという概念を取っ払い、背景デザインとしても可！
色々なアレンジ
区切りとしてもデザインとしても使えるシェイプ区切りは、色々な機能を担ってくれます。背景との組み合わせや、上下のセクションの関係性など、用途は多岐に渡ります。その中でも自分が良く使う手法をご紹介します！
背景＋シェイプ区切り
背景固定＋下シェイプの組み合わせで、より上下のセクションの関係性を表現出来ます。その場合、シェイプの余白の背景色を下のセクションと合わせてあげるのがポイントです。
画像を背景にする事でレイヤー感が得られ、ちょっと凝ったデザインに見せる事が出来ます。
さらに背景動画との組み合わせも、より一層シネマ感が出てインパクトのある表現が出来ます。
シェイプ区切り「矢印」でストーリを作る
先ほども登場しましたが、矢印でセクション同士の流れを作る時にも役立ちます。例えば上のセクションで課題や問題点を挙げ、下のセクションで解決策を定時するなど、アイデア次第で色々なストーリを演出出来ます。
ランディングページなどで良く見かけますよね。セクション同士の関係性を表現するには「矢印」「分割」「本」などのシェイブ区切りが便利です。
まとめ
自分の場合は最初からシェイプ区切りを使う事はあまりなく、どちらかというと煮詰まった時に「入れてみるか」と採用する事が多い気がします。困った時に頼る存在のシェイプ区切りを是非活用してみて下さい。
10種類以上もあるのに、どうしてもイメージにあうシェイプ区切りが無い時は、背景画像を作ってしまう時もあります。今後種類が増えるといいなぁ〜と密かに思っております（笑）
合わせて読みたい記事
Elementor公式サイト
