.png)
Wixでパーツをスマートにまとめる方法コンパクトなスマホレイアウト作成のためのグループ化について
- 2023年12月20日
- 読了時間: 4分
こんにちは！ラジャのけんいちです。
本日は、 Wixで行える「グループ化」についてご説明していきたいと思います。
なぜグループにすると便利なの？というところから、グループ化の設定方法までご紹介していきます。
最後まで読んでいただくと、プロが使うグループ化の方法から、
グループ化をすると制作での後々どのような利点が有るのかをご説明していきますので、是非最後までご覧ください。
Wixとは？
Wixのご紹介
Wix（ウィックス）とは、2006年にイスラエルで生まれ、2010年に日本語版がリリースされ、現在全世界で 2.3億人以上の登録ユーザーを有する人気ホームページ作成ツールです。
CMでこのキャッチフレーズを見たことがある方も多いのではないでしょうか。
「1.2秒に1人が Wixを使ってHPを作っています」
直感的にHPを作成・ドラッグ&ドロップにて変更が簡単にできる為、幅広いユーザーから支持を受けています。
Wixでテキストや写真をグループ化すると何がいいの？
Wixである一定のコンテンツを1つのレイアウトとして扱う「グループ化」をすると、
下記のような利点があります。
1.グループ化をする事である程度レイアウトが揃えられ、レスポンシブ対応がされやすい
2.一つのコンテンツとして捉えられる為、移動がしやすい
3.アニメーションなどの設定を一括して行うことができる
Wixでワンタッチで行えるグループ化を施すことにより、ここまでのメリットが享受できるのなら、
ある程度構成が固まった時点で、グループでまとめるものはまとめた方がいいですよね！
これから、グループ化の方法、メリットについて深掘りしていきます。
スマホやタブレットでのレイアウトの重要性
■グループ化しなかった時のデザイン
グループ化しなかった場合は、モバイル版の訂正を行おうと思ったさい、
自動でPC版が反映される為、大枠のデザインはまとまって反映されますが、
自身が思い描いていた、モバイル版への反映ができません。
■グループ化した時のデザイン
グループ化をする事によって、
テキストのまとまりを作れます。テキストのまとまりを作ることによって、モバイル版に反映される時にまとまって反映する事が可能となります。
パーツをまとめて移動・変更する利点
■アニメーションについて
Wixで「アニメーション」を施す際、
グループ化をすることで、グループ全体に一気にアニメーションを設定することができます。
もちろんグループ化を解除することで、バラバラにフェードインさせることはできますが、
同時にアニメーション表示させたい場合に便利な機能です。またタイトルなどで重複してその体裁を使用する場合コピー&ペーストも行いやすくなっています。
■一つのコンテンツとして捉えられる為、移動がしやすい
Wixでのグループ化の作成方法
パーツをグループ化する
パーツを複数選択して、選択したパーツをグループ化することが可能です。
パーツをグループ化すると、パーツひとつにまとめて移動したり、グループ全体にアニメーション効果を追加することも可能です。
パーツをグループ化する方法
エディタでグループ化したいパーツを次の方法で選択します
該当テキスト等をクリックし、クリックした付近をマウスで編みがけします。
キーボードで Ctrl/ Shiftキーを押しながら、パーツをそれぞれクリックすることで代替可能
「グループを作成」をクリックします。
またはショートカットキー「command + G」でもグループ化を行うことが可能です。
パーツのグループ化を解除する
パーツを 1つのコンポーネントとして動作させたくない場合は、簡単にグループを解除することができます。
パーツのグループ化を解除すると、グループに追加したアニメーションも削除されます。
パーツのグループ化を解除する方法
該当のグループをクリックします。
左上にポップアップで出現する「グループ化を解除」をクリックします。
まとめ
最後までご覧いただきありがとうございました。
本日は類似したコンテンツを「グループ化」する方法についてご紹介していきました。
グループ化をする一番のメリットは、レスポンシブデザイン崩れを防げることだと思います。
デザイン崩れは、修正を繰り返す程に、少ない事がじわじわと効いてくるため、
ここのデザインの体裁は崩さないだろうと思った時からテキスト・写真群を「グループ化」することをお勧めします。
グループ化しなかった場合は、細かくストリップにて分ける事がデザイン崩れを起こさないためのポイントです。
弊社では制作面でのお困りごと・貴社のHPをプロの目線で現行サイトを分析して、アドバイスさせて頂く「無料相談会」を実施しております。
ご興味がある方は下記のボタンより、弊社「株式会社ラジャ」までお問い合わせください。