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