ウェブ制作のクラウドビジネスをはじめよう！

bingo!CMSニュースレター

配信：2020年7月1日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像（ニュースレタートップ用）

カスタムユニットで『流体シェイプ』を実装しよう
流体シェイプの作成イメージ

こんにちは！ bingo!CMS 広報担当の鈴木です。
 
2020年も折り返しとなりましたね。
本日は、今年のトレンドのひとつ『流体シェイプ』を、bingo!CMSで実装する方法をご紹介します。
 
『流体シェイプ』とは、波形などに代表される、"滑らかな曲線でつくられた形状"のことで、デザイン的には、柔らかく優しい印象を与える効果があります。
 
上のサンプルでは『流体シェイプ』の作成に、2つの無料ツールを使用しました。
また、使用するユニットは『カスタムユニット』のみというお手軽さです！
 
早速つくってみましょう！
 
 

作業1 背景の流体シェイプを作成する

まずは、先程のサンプルのうち、グレー系（#ededed）の波の部分を作成します。
 
ここで使用するのは『Custom Shape Dividers』という、三角形や曲線など、様々な形状の境界線を作成できるツールです。
 
「Custom Shape Dividers」のトップページ
画像引用：Custom Shape Dividers

ツールにアクセスすると、白いボックスの中に、様々な設定が並んでいるのがおわかりいただけると思います。
流体シェイプの境界線を作る場合は、『Shapes』の中の『Waves』を選びます。
その他、色や幅・高さを調整して、雲のアイコンのダウンロードボタンをクリックします。
 
「Custom Shape Dividers」の編集画面
画像引用：Custom Shape Dividers

『Get Code』という画面が表示されるので、HTMLとCSSをそれぞれコピーしメモしておきます。
 
SVGもダウンロードできますが、今回はこちらは使用しません。
 
 

作業2 流体シェイプのパーツを作成する

続いて、サンプルの境界線に重なって設置されている、流体シェイプのパーツを作成します。
 
使用するのは『Blobs』という、バーをスライドさせて任意のシェイプを作成するツールです。
 
「Blobs」のトップページ
画像引用：Blobs

『Changes』をクリックするとランダムで形状を変化させられる他、塗りつぶしやグラデーション、枠線のみなどのバリエーションがあります。
 
好みのシェイプが出来たら、『Changes』の左隣にあるコードボタンをクリックします。
 
「Blobs」の編集画面
画像引用：Blobs

コード画面が表示されるので、右上の『Download』をクリックし、SVGファイルをダウンロードしておきます。
 
これで、流体シェイプの用意ができました！
 
 

作業3 カスタムユニットで組み合わせる

流体シェイプの準備が出来たので、いよいよbingo!CMSに実装します。
 
まずは、ページ編集画面に入り、コンテナに任意の背景色を設定しましょう。
先程のサンプルでは、ピンク系（#ffaad4）を設定しました。
 
次に、ページ編集画面右上のCSS/JSをクリックします。
 
bingo!CMS管理画面（CSS/JS）

『CSS・JS設定』が開いたら、作業1でコピーしておいたCSSを貼り付けて保存します。
このとき、CSSをstyleタグで囲むのを忘れないようにしてください。
 
bingo!CMS管理画面（カスタムユニット）

続いて、コンテナに『カスタムユニット』を設置します。
レイアウトは、ヘッダーに『テキスト1』、左のカラムに『画像1』、右のカラムに『タイトル1』『テキスト2』です。
 
『テキスト1』には、手順1でコピーしておいたHTMLを貼り付けます。
『画像1』には、手順2でダウンロードしておいたSVGを設定します。
 
『タイトル1』と『テキスト2』には、任意の設定をしてから保存します。
 
bingo!CMSページ編集画面

保存すると、このようなレイアウトになります。
 
 

作業4 ネガティブマージンで配置を調整する

今回はシェイプ同士が重なったデザインにしたいのですが、カスタムユニットにただ設定しただけでは、思った配置になりません。
 
そこで役に立つのが、ネガティブマージンです！
 
再度ユニットの編集画面を開き、『画像1』の流体シェイプパーツにマイナスのマージンを設定して、ぐいっと好みの位置へ引き上げます。
ちなみにこのサンプルでは、上と右に-800pxずつネガティブマージンを当てました。
 
その他、『タイトル1』や『テキスト2』の位置を調整してから、ユニットの編集画面を保存すると…
 
ネガティブマージン設定後の完成イメージ

ジャジャーン！
流体シェイプを使ったデザインの完成です！
 
ネガティブマージンについては、こちらのTipsもご参照ください。
▶ カスタムユニットでネガティブマージンを設定する方法
 
 

おわりに

注意点として、このデザインはレスポンシブではありません。
スマホでも表示する場合は、別途調整が必要なのでお気をつけください。
 
鈴木のやっつけセンスではこの程度ですが、グラデーションにしたり、影をつけたり、アイデア次第で様々な表現が可能です。
 
皆さまのデザインの引き出しに、そっと加えていただければ幸いです。
 
 
それでは！
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ