1 min read

リピーターを使っておしゃれなデザインを簡単に作成!Wix Studioのリピーターの使い方

Airi Shiroma By Airi Shiroma
リピーターを使っておしゃれなデザインを簡単に作成!Wix Studioのリピーターの使い方
リピーターを使っておしゃれなデザインを簡単に作成!Wix Studioのリピーターの使い方
6:37

 

通常のWixエディタを使用したことがある人は、「リピーター」をよく知っていると思います。

リピーターとは、中身の異なるアイテム(例えば、テキストや画像など)を統一されたデザインやレイアウトで表示させることができるリスト機能のことです。スタッフ紹介やサービスなど、あらゆる種類の情報を簡単に整理して表示することができるので、とても便利です。

Image from Gyazo

Wixエディタ版のリピーターもとても便利でしたが、Wix Studioのリピーターは、それ以上に進化していて、ハイクオリティーになっています。

今回は、Wix Studioでのリピーターの使い方、またおしゃれなデザインでリストを作る方法を簡単に紹介したいと思います。



Wix Studioのリピーターの機能について



冒頭でも少し触れましたが、Wix Studioのリピーターは今までの機能性をはるかに超えるクオリティーと言っても大袈裟ではないと思うほど、使い勝手がよく、デザイン性が高いです。

ここからは、Wix Studioのリピーターを使ってどのようなデザイン、機能があるのか紹介したいと思います。

Wix Studioのリピーターは、ワンクリックでレイアウトをかえることができて、とても便利です。

レイアウトは基本的に、カード、リスト、スライダー、グリッドセルの4種類あります。

Image from Gyazo

リストからカード、スライダーに変更してレイアウトを調整できます。

Image from Gyazo

レイアウトを色々変えて、様々な見せ方ができますが、特に私が便利!と感じたリピーターの機能が2つあります。

「スライダー」と「ABデザインパターン」です。

 

・スライダー(スクロール機能)

 

以前のWix エディタでは、リピーターは、スクロール機能がなく、リストが多い場合は、縦に伸ばして、ページネーションバーを設置して一覧が見れるようになってました。

リピーターのリストをコンパクトに横にスクロールできたらいいのにな…と思った方は今までたくさんいたと思います。

Wix Studioでは、スクロール機能をリピーターに付けることができます!

また、ホバーなどのアニメーションも簡単に付けることができ、より見やすい、かっこよさを出すことができます。

Image from Gyazo

 

設定はとても簡単で、レイアウトをスライダーに変更するだけです。

Image from Gyazo
Image from Gyazo



・ABデザインパターン(リストのデザインパターンを変える)

 

以前のWix エディタでは、一つのデザインが全てに反映されて、デザインのパターンをかえることができませんでした。

Wix Studioでは、ABデザインパターンの機能を使って、デザインパターンをかえることができます。

例えば、色を変えたり

Image from Gyazo

形を変えたり

Image from Gyazo

などデザインのパターンをかえることができます。

交互にデザインパターンが変わるイメージです。

この2つの機能だけでも、サイトのデザイン性を高めることができますよね。

ここからは、ABデザインパターンの設定の方法を解説したいと思います。



ABデザインパターン(リストのデザインパターンを変える)の設定方法

 

まず、レイアウトツール>リピーターをクリックしてセクションにリピーターを追加します。

Image from Gyazo

リピーターを追加したら、アイテムを追加して4つのリストを作ります。

アイテムを追加すると、上に3つ、下に1つというレイアウトになります。

Image from Gyazo

一列に4つのアイテムを表示させたいので、レイアウト>アイテム数を4に設定します。

ここで、行ごとのアイテムの設定がオンになっていることを確認してください。

Image from Gyazo

 

*「行ごとのアイテムを設定」について

 

行ごとにアイテムを設定した場合:

画面サイズが変わった場合でも、設定した数のアイテムが表示されます。

Image from Gyazo
Image from Gyazo

行ごとにアイテムを設定しなかった場合:

画面サイズが変わると、自動的に行ごとのアイテムの数も変わります。

Image from Gyazo
Image from Gyazo

アイテムの数を設定したら、アイテム内のデザインを作っていきます。

今の状態だと、アイテムの色やデザインを変更すると、全てに適用されます。

Image from Gyazo

レイアウト>ABデザインパターンを設定をオンにします。

すると、アイテムにそれぞれ、アイテムA、アイテムBという表示がでます。

アイテムAのデザインをかえると、全てのアイテムAに変更が反映されます。

Image from Gyazo

Bの色や枠などのデザインもぜひ、変えてみてください。

こんなに簡単にデザインパターンを変えられるのはとっても便利ですね!

 

まとめ



ここまでで、簡単にWix Studioのリピーター機能について、またおしゃれなデザインにできる「ABデザインパターン」の設定について紹介しました。

以前Wixエディタでリピーターを使ったことがある人は、もう戻れない!と思っちゃうほど、便利だと思ったのではないでしょうか?

リピーターの機能は、Wix Studioの魅力のほんの一部と言ってもいいほど、様々なデザインやレイアウトを再現したりなど、あなたの理想のウェブサイトへより近づけることができます。

<関連記事>

【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作!事例紹介

完全レスポンシブ対応な「Wix Studio」と「Editor X」の違いは?Wix Studioの魅力!

ウェブサイトの管理方法が簡単なWix Studio!制作はプロに任せて管理は自分でしたい方必見!

 

弊社ブランドバディーズは、Wixパートナープログラムに登録しており、パートナーの最高レベル「レジェンド」レベルのWix制作会社です。

Legend (1)

私たちは、単にウェブサイトを制作するのだけではなく、マーケティングやブランディングを生かしたウェブサイト制作を行っております。

「今後自分でウェブサイトを管理したいからサイトだけを制作してほしい」

「ブランディングサイトを制作したい」

「自分でウェブサイトをWixで作ってみたけど、サイトのリニューアルをお願いしたい」

「かっこいい・高級感のあるウェブサイトがほしい」

「自分で簡単にウェブサイトを更新・変更できるプラットフォームを使いたい」

「自分でサイトを制作したが、会社の雰囲気に合わせてデザインしなおしてほしい」

など考えている方は、ぜひお気軽にご相談ください。

また、Wix Studioでサイトを制作してみたが、うまくいかなかったため、完成までサポートしてほしい方も、ぜひご相談ください。

 

Related Articles

完全レスポンシブ対応な「Wix Studio」と「Editor X」の違いは?Wix Studioの魅力!

( 1 min read )

Tags: wix

【もはやWixで革命!?】Wix Studioでハイクオリティーなサイト制作!事例紹介

( 1 min read )

Tags: wix

Wix おしゃれなメニューバーをコピペで簡単に作ろう!【Velo by Wix】

( 1 min read )

Tags: wix

ジャーニーマップをダウンロード!

オンラインとオフラインでメディア戦略を立てるときにご利用ください。