こんにちは!
Wixパートナーレベル最上位 レジェンドを取得しています
合同会社アクトワン代表 和田英也です!
今回はWixのストリップの使い方というテーマで解説致します!
前回のセクションに引き続き、今回はストリップの解説です。
ストリップはセクションの次に大きなパーツを入れるためのコンテナであり、デザインの要となるパーツですので、是非マスターしてください!
ストリップには背景に画像や動画、グラデーションを含めた色設定をできたり、カラムと言って、水平に領域を分けることで画像と文章を並列に配置したりですとか、本当に用途が広いパーツです。
ストリップの機能をマスターして 洗練されたデザインのサイトを作ってみましょう!
それでは早速始めましょう!
▼ 目次
ストリップを追加する
前回の動画でも説明した、セクションが入っている状態の上にストリップを追加していきます。
パーツを追加ボタンから"ストリップ"を選択します。
すると上図の赤枠のように様々なストリップのテンプレートが表示されます。
今回は矢印のようなオーソドックスな空のストリップを置いてみます。
するとこのような真っ黒なストリップがセクションの上に入りました。
ストリップの背景を設定する
ストリップも背景を選択することができます。
今は背景色は黒の状態ですが、カラーパレットから色を選べます。
ストリップの色を青に変えてみましょう。
色に対して不透明度を設定することができます。
数値を低くしていくと不透明度が上がって、透明化された状態のストリップが出来上がります。
背景色のグラデーション設定
更にカラーピッカーの中で非常に重宝する機能でグラデーションがあります。
こういったクリエイティブでは、グラデーション機能は本当によく使われます。
それをWebサイトのエディタ上で作れるのは、とても便利なのでぜひ沢山活用してください!
グラデーションを選択すると、グラデーションの種類、方向、色などのパターンが出てきます。
グラデーションの種類はリニア、円形グラデーション、円錐状があります。
今回はリニアを使って説明していきます。
今は画面の左側の色が濃く、右に行くにつれて薄くなっています。
矢印の角度を触ることでストリップのグラデーションの方向を変えることができます。
設定したグラデーションの色の濃淡も上図の矢印のように自由に調整できます。
このように様々なグラデーションを作れるので
グラデーションの色を混ぜてみたり、自分なりに細かな凝ったデザインにも挑戦してみてはいかがでしょうか?
背景の画像や動画の設定
あなたがご自身で作った画像や動画もストリップの背景に選択することができます。
動画の場合はプレビューで実際の動きをチェックしてくださいね。
カラムの割り方について
ストリップはカラムといって領域を分けることができます。
矢印のレイアウトを押して、カラムを追加します。
すると上図のようにカラムが二つの領域に分かれました。
このように2つの領域に分かれても、あらゆるデバイスでWixがコンテンツを表示できる範囲は980pxと決まっています。
それが上図矢印のガイド線のラインです。
要はブラウザの幅がタブレットなど、小さなものになった時に表示できるのがこのグリッド線内の範囲ということです。
例えば、もし上図矢印赤枠のようにコンテンツをグリッド線にはみ出して表示させていると
このようにコンテンツが途中で切れてしまいますので、必ずカラムのグリッド線内にコンテンツは納めましょう。
ちなみにコンテンツをカラム内のどの位置に表示させるかも設定することができます。
上図ではカラムのグリッド線は中心になっていますが
上図のように左右に寄せることもできます。
通常は左側に寄せておきたいヘッダー部分などによくある、このような会社のロゴなんかも、ストリップ無しでそのまま置いてしまうと
ブラウザーの幅が狭まったときに980pxの外になって切れてしまいますが、これをストリップを一旦置いてカラムを左寄せにして、そのグリッド線内にコンテンツを納めておくことで、ブラウザーの幅が狭まった時もキチンとその幅に応じてストリップも変化してくれるように設定することができます。
カラムを使った応用テクニック
続いてこのようなストリップのカラムの特性を生かしたちょっとした応用テクニックをご紹介したいと思います。
カラムの背景をこのような人物に設定します。
そしてカラムのグリッド線内に矢印のようなパーツを置きます。
すると実際にはパーツはこのように少し中途半端な位置に表示されますが、ちゃんと画像の左端に表示させたいですよね。
そんな時にカラムのレイアウトを左寄せにしておくことで、ブラウザーの幅が変わっても
表示される幅がブラウザー左端の赤枠のエリアになるので、そこの一番左端にパーツを置いておくと、ブラウザーの幅が実際に狭まったとしても
上図のようにパーツが画面の左端に固定されている状態を作ることができます。
デザイン上どのようなブラウザーであっても「必ず見せるべきコンテンツはちゃんとグリッド線内に置くようにする」ということを意識しましょう。
こういったストリップの使い方は先ほども書きましたが、ヘッダー部分なんかによく使われます。
ヘッダー部分だと社名やロゴを左端、メニューなんかは右端に揃えたい時なんかに、カラムの領域を左右に分けて設定しておけばどんなブラウザーでも必ずその範囲が表示されるようにすることができます。
ちなみにカラムは「カラムを追加」からどんどん増やすこともできますが
増やしていくほど、1つ当たりのカラムの表示領域も狭くなるので、たいていの場合は2つまでで使うことが多いです。
カラムのレイアウト調整
今は2つのカラムの大きさは同じですが
上図のようにレイアウトを使って大きさの比率を変えることもできます。
手動で変更することも可能です。
カラムとカラムの間の間隔を広げることもできます。
余白で内側にスペースをつけることもできます。
それからストリップは基本的には全幅表示になっていますが
矢印のストレッチをクリックすると、全幅かページを選択することができます。
全幅にしておいて間隔を増やしていくと、全幅でありながら両端にスペースを作ることもできます。
ストリップの詳細設定方法
続いてはストリップのスクロールエフェクトについてご紹介します。
セクションの時も同じ説明をしましたが、スクロールした時の視覚効果を設定することができます。
様々なスクロールエフェクトが用意されているのでサイトの雰囲気にあわせてカスタマイズしてみてください。
ストリップの背景は画像を選択した状態だと、画像の不透明度を下げていくと画像が透過していきます。
他にも画像の背景色を設定したり細かな色調整が行えます。
使っている画像のどの部分を表示させるかや表示サイズなども自由に設定することができます。
背景を動画にした場合は矢印の設定を使って
動画にマスクをかけることもできます。
ストリップの背景を設定した状態でシェイプ区切りをすると、上図のようにストリップを様々な形に区切ることができます。
これでまたデザインの幅が広がりますね。
デザインを編集を押すと
シェイプの高さや横幅の編集もできます。
レイヤーエフェクトで上図のイラストの下の部分ようなエフェクトもつけられます。
他にもエフェクトの方向を変えたり、切り抜きを反転させることもできます。
下だけでなく、上にも適用できるので上図のような形に切り抜くこともできます。
モバイル版での編集方法
では、これらの編集がモバイル版ではどうなっているのかチェックしてみましょう。
カラムの仕切りはPCでは並列に並んでいましたが、基本的にモバイルではカラムを並列にさせることはできません。
全て縦の並びになります。
カラムが2つあれば、このように上下に配置されますが、モバイルならではの設定もあって
カラムを選択した状態で「カラムを管理」、アクションを選択でカラムの上下を入れ替えることができます。
アニメーションからスクロールエフェクトを選択して視覚効果をつけることもできます。
アニメーションとは本来はコンテンツが表示された時に何か動きをつけることなので、スクロールエフェクトではなく、そういったものをつけるときは「入口」を使ってアニメーションをつけることができます。
シェイプ区切りもモバイル版でももちろん使えるのですが
高さもモバイルに適した高さに設定することができます。
これもモバイル独自で設定できるので色々カスタマイズしてみてください。
以上がストリップの操作方法の解説でした。
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします!
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております!
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!
Comments