![](https://cxg-design.jp/wp-content/uploads/2024/01/AdobeStock_302723738.jpeg)
グラデーションで画像を斜めに切り取り、動きのあるレイアウトに
前回はグラデーションの機能を用いて、文字がはみ出しているデザインを作成しました。
今回は、その応用で、グラデーションの角度を変えて斜めに画像を切り抜いて、動きのあるレイアウトを作成します。今回は、アウトドアコレクションのLPです。
DOWNの製品紹介では、切り抜き画像のスライダーを、 Smart Slider3で作成しました。
![](https://cxg-design.jp/wp-content/uploads/2023/10/3716d4b092b75c2f4eefd6e87ce3c743-2000x1156.png)
出典 : Smart Slider3
スライダー>シンプルを指定し、サイズを横600px、高さ1000px、レイアウトBoxedで作成します。スライダーの外側に矢印を設定するため、操作>矢印>前の位置「Outer 左 10px」、次の位置「Outer 右 10px」に設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/01/6bd0a8cc1d05b8d9684a71a3b375e5c2.png)
スライダー、シンプルを選択し、縦600px、高さ1000px、レイアウトBoxedに設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/3263b75202c81072e58e323eb345df20-2000x1187.png)
前の位置「Outer 左 10px」、次の位置「Outer 右 10px」に設定。
タイトル
タイトルは、カバーを2つ重ねて作成しています。左に黒の半透明のグラデーションを作成し、斜めの帯を入れました。下に背景色の黒で、不透明のグラデーションを作成し、斜めに切り落とした。どちらも画像のモデルのポーズに合わせて角度をつけています。
まず、カバーに画像を配置し、オーバーレイでグラデーションを作成し、コントロールポイントを黒100と0、同じ位置に作成します。角度を105°にして、「オーバーレイの不透明度」を80にしました。これで、左の半透明が完成です。
次にそのカバーの中にカバーを作成し、グラデーションのコントロールポイントを黒0と100同じ位置に作成し、角度を185°にしました。これで、画像の下が斜めに切り取られます。
あとはタイトルを「見出し」で入力し、上下にスペースを入れて調整します。
![](https://cxg-design.jp/wp-content/uploads/2024/01/7720e331fc505478a50a426ae1e133c4.png)
オーバーレイ>グラデーション黒100、0を同じ位置に設置し、角度105°に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/28d5c3d4a2423279550e1cc1bbae97f3.png)
カバー内にカバーを入れ、オーバーレイ>グラデーション黒0、100を同じ位置に設置し、角度185°に設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/421644b7928c21160646e223cf26c2b0.png)
タイトルを入れ、上下にスペーサーを入れて調整。
画像の切れ方をSP、PCなどで確認
PCのモニターは色々なサイズがあり、タブレットでは画面の幅が大きく変わります。また、ブロックエディターは、レスポンシブデザインに対応していて、カラムなどはSPになるとレイアウトが変更になります。グラデーションはパーセンテージで設定するので、斜めのグラデーションの位置も画面の幅によって変化します。特に、画像の角を残すのか、切るのかデザインに合わせてグラデーションの長さ、角度を調整しましょう。
FUNCTION
ダウンの機能を紹介するボックスを半透明の台形を作成し、上にカラムで文字を載せています。
まず、2カラムを作成し、左のカラムにカバーを入れ、画像を配置します。オーバーレイ>グラデーションで、中央に黒100、0、同じ位置に作成し、角度95°、「オーバーレイの不透明度」80にします。
その上にカラムを50/50で作成し文字を入力します。左右のパーセンテージを変更し、文字が黒バックから出ないように調整します。
作成した左のカラムをコピーして、右のカラムにペーストし、写真、文字を入れ替えれば完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/2b68b5b6e6ff8748b4f9946ac755284a.png)
オーバーレイ>グラデーションで、中央に黒100、0、同じ位置に作成し、角度95°に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/dd21a24802b7cebe08872a8543fb00ad.png)
カラムを50/50で作成し文字を入力し、右カラムにコピー&ペーストして塗り替え。
DOWN
DOWNは、LPなどでよく見かける、全画面で平行四辺形に写真を切り取りました。写真にはオーバーレイで黒50%がかかっているように作成します。
まず、カバーに写真を入れて、内容を作成します。カバー内に2カラムを作成し、左に、Smart Slider3で作成したスライダーのショートコードを入れます。右に商品のスペックを入力し、上下中央配置にします。
次に、カバーのグラデーションを調整します。オーバーレイ>グラデーションを黒100、50を同じ位置に、間を開けて50、100を同じ位置に作成します。角度を350°にすれば、平行四辺形で切り抜かれた画像の完成です。
他の商品は、作成したブロックをコピー&ペーストし写真などを変更して作成します。これでDOWNは、完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/22fb24daac9ad3a2c1d892e39a5cac8b.png)
カバー内に50/50作成し左にスマートスライダーのショートコードを入れ、右にスペックを入力。
![](https://cxg-design.jp/wp-content/uploads/2024/01/ade316f6cc80f0260a2b2c33249abfe0.png)
オーバーレイ>グラデーションで黒100、50を同じ位置に、間を開けて、50、100を同じ位置に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/9f070293ca1737a15014014f389a58c0.png)
コピーして、塗り替え、他の2つを制作。
BOOTS
BOOTSは商品の下に背景を台形で入れています。PCでは、3商品の背景がつながり、ギザギザになっています。
まず3カラムを作成し、左のカラムにカバーを作成します。背景画像を入れて、オーバーレイ>グラデーションを黒0、100を同じ位置に設定し、角度を160°にします。これで、台形の完成です。
その上に商品画像を配置し、下から背景が見えるように「スペーサー」で調整します。その下にスペック入れて左カラムの完成です。残りの2つは、左カラムをコピー&ペーストして、塗り替えて完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/bdea0ab74a70b3ae227e39cbc4427358.png)
オーバーレイ>グラデーションを黒100、0を同じ位置に設置し、角度を160°に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/aa34e19780b9af83fb397192ea983fa7.png)
カバーの下にスペックを入力
![](https://cxg-design.jp/wp-content/uploads/2024/01/fd080f48d60922d8817a89cebee39cda.png)
カラムをコピー&ペーストして、塗り替え、他の2つを制作。
SHOP
斜めのグラデーションを左右対称に入れて、画像を五角形に切り取り、ショップのアイコンのような形にしました。
カバーを作成し、画像を入れ、オーバーレイ>グラデーションで黒100、50を同じ位置に配置し、角度を145°にします。このカバーをコピーして、作成したカバー内にペーストします。ペーストしたカバーの画像を削除します。また、グラデーションをコントロールポイントは同じ位置で、透明度のみ黒100、0に変更します。角度を-145°に変更して、五角形の完成です。
カバー内に3カラムを25/50/25で作成し、真ん中に、テキストとボタンを入れて、画像内に文字が収まるようにスペーサーで調整して、完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/238777580eac70da5fb0d1e0c1b5f863.png)
オーバーレイ>グラデーション、黒100、0同じ位置に設置し、角度145°に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/b0c1336323c417be7a4ff8385287dcf8.png)
カバーをコピーして、カバー内にペーストし、グラデーションの角度を-145°に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/01/84fe4890b6e58740b3b13be6ef7929e5.png)
3カラムの真ん中にスペックを入れ、写真の内側に入るように調整。
今回は、斜線を多く使うことで、動きのあるレイアウトのLPを作成しました。今回は、アウトドアをテーマに作成しましたが、スポーツや車などのサイトにもよく使われています。Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。