活用方法

デザイン紹介 - スライド・カルーセル|静止画よりも注目されやすい

Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は静止画よりも注目されやすいスライド・カルーセルの動きするWidgetを紹介します。


今回教えてくれたのは

Shihori Nakaide

- BizOps チーム
- Assistant Manager

2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。

スクリーンショット 2023-07-05 12.04.38

目次

01 スライド・カルーセルのデザインが人気な理由
02 予め用意されたデザインを使えば、時間短縮に
03 スライド・カルーセルのデザイン 38選
04 まとめ

 

 

01|スライド・カルーセルのデザインが人気な理由


 

- 動きで視線を誘導し、見せたいものに注目をさせられるから

指でスワイプすることで画像を切り替えるデザインや自動で画像が動くデザインは、ユーザーの興味を引き寄せる効果があります。複数の画像やコンテンツが順番に切り替わることで、静止画よりも目を引きやすく、ユーザーの視線を集めることができ、LPにとどまる時間を増やす助けになります。

- 限られたスペースで複数の画像を提供できるから

ページ遷移やスクロールをせずとも複数の画像を一度に表示することができるので、情報をコンパクトにまとめられます。

 

 

02|予め用意されたデザインを使えば、時間短縮に


 

image-1

1 Squad beyondの管理画面にログインし、beyondページを作成
2 Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加
3 テキストを変更したり、色やサイズを調整して完成

 

Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。

▼ 参考記事

 

 

03|スライド・カルーセルのデザイン 38選


 

logo (1)

カルーセル※要javascript

/ Widget名

a7317e70d871e2dd6ff78d899ef1bd51


logo (1)

カルーセル(フェードエフェクト)※要javascript

/ Widget名

bb9f31d2a6d611abd8292628a6ccc43e


 

logo (1)

カルーセル(クリエイティブエフェクト)※要javascript

/ Widget名

ffc25c68865a16aea4ef49faf0808825


logo (1)

横幅いっぱいのカルーセル※要javascript

/ Widget名

7577f4a6931aa8e963edf6084a2e3c85


 

 

logo (1)

自動で画像スライド表示※要javascript

/ Widget名

d5a1b9cd1085adaf529718fae2dcc1c5


logo (1)

自動で画像スライド表示(サイズ違い)※要javascript(画像)

/ Widget名

d26d68b7bad81cc6ab94283cfef71d92


 

logo (1)

カルーセル(矢印小)※要javascript

/ Widget名

f76ae7d06bd02d2731012ff38e84ff60


logo (1)

自動で画像スライドふわっと表示 ※要javascript

/ Widget名

4f70dbe8e323d83caf494c348a8f8c59


 

logo (1)

カルーセル(画像/左右タップでスライド)※要javascript

/ Widget名

471f93966b759a01b727858edbced37d


logo (1)

カルーセル(画像の中に画像・クリエイティブエフェクト)※要javascript

/ Widget名

41cb37ac1d814006c57fc1f97a58317d


 

logo (1)

カルーセル(縦スクロール)※要javascript

/ Widget名

732a950fe81e7863ab1ed1b641236e9b


logo (1)

カルーセル(プレビュー表示あり・複数対応)※要javascript

/ Widget名

ea67a28a19fd1c8682a034633f2092f7

 

logo (1)

カルーセル(紙風デザイン)※要javascript

/ Widget名

871b01334410d58bcee0440b832f8ccc


logo (1)

カルーセル(SNS表示風)※要javascript

/ Widget名

89d17396f372b45a498297e013e11df7


 

logo (1)

カルーセル(画像とテキストのみ)※要javascript

/ Widget名

244fb2eab9770a1ae2a561f9c3c2481a


logo (1)

カルーセル(クリックでポップアップ)※要javascript

/ Widget名

5e075bcd75bcf817c233a92aaaeb94e2


 

logo (1)

カルーセル(画像/テキスト)※要javascript

/ Widget名

e3e496744143c56d802a60a78af2117d


logo (1)

カルーセル(画像/テキスト/中央配置)※要javascript

/ Widget名

2c5457df89684d55050809905121ea47

 


 

logo (1)

カルーセル(カバーフローエフェクト)※要javascript

/ Widget名

601063e0485e7c844fd93f9f916043b8


logo (1)

カルーセル(カードエフェクト)※要javascript

/ Widget名

7e011de4107db15d261316523d7565fc


 

logo (1)

カルーセル - 背景切り替えあり※要javascript

/ Widget名

1198bc853a019d74006f750fbb480899


logo (1)

画像の中にテキスト、背景画像カルーセル※要javascript

/ Widget名

88792ffdaab2c45f2846e171992541dd


 

logo (1)

カルーセル・動画ポップアップ ※要javascript

/ Widget名

442361eab048c0d03129ee4130903aa7


logo (1)

カルーセル(画像リンク)※要javascript

/ Widget名

0d0bc2f5be759886c9cf0416015dc53d


 

logo (1)

カルーセル - 複数個対応※要javascript

/ Widget名

5aee9b4107bb9d49754f89cbb145ee82


logo (1)

トリミングで画像の幅、高さを揃えたカルーセル※要javascript

/ Widget名

ae0d4deede5df40b4bf22b5758b13fab


 

logo (1)

真ん中強調のカルーセル※要javascript(アクション)

/ Widget名

b577f44d11ebe2965f2941f892e412ec


logo (1)

カルーセル上部にテキスト挿入可※要javascript

/ Widget名

8c25eb5044b5e3481a793acafe1328c7


 

logo (1)

カルーセル - 全画面 ※要JavaScript

/ Widget名

4fb3aa01faa32a07a45f4db2ee0c1888


logo (1)

カルーセル(背景カラー設定/画像サイズ縮小/左右矢印フェードイン)※要Javascript

/ Widget名

336c020ac9a4f82345939708b6959f32


 

logo (1)

動画/画像をスライドで比較(左右)※要javascript

/ Widget名

e65cf837fd7178761e653bc5878d8f87


logo (1)

Before/After画像をスライドで比較(クリックして上下比較) ※要javascript

/ Widget名

d328948a2bcd6da52759f895ad0ebad7


 

logo (1)

Before/After画像をスライドで比較(クリックして左右にずらす) ※要javascript

/ Widget名

95707c1549600bb2a27551ff14cfedae


logo (1)

Before/After画像をスライドで比較(カーソルを合わせるだけ、左右比較) ※要javascript

/ Widget名

681f4ae3d5f1da98b0b01ae71f3b8a61


 

logo (1)

カルーセル(スマホ枠)※要javascript

/ Widget名

aef8df0a53ccc7c2023f6e7a70758eff


logo (1)

カルーセル(グラデーション枠)※要javascript(アクション)

/ Widget名

9875c7074aac0261b84895a61dc99e63


 

logo (1)

アンケートの選択肢をスライド化 ※要JavaScript

/ Widget名

95a82658ec621b15a137bb469d940322


logo (1)

ホバーするとスライドしてボタン表示

/ Widget名

89869e12db420074d48a505bcd309676


 

 

04|まとめ


スライド・カルーセルのデザインは、静止画よりも注目されやすいです。スライド・カルーセルWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください!修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。

 

 

▼関連記事

ブログCTA案

2


Squad beyondのご利用には、アカウント開設が必要です。

デモを依頼する

お好きな時間を選んで、どんなことでもお気軽にご相談ください。
(商談の設定、お見積もり依頼、サービスの簡単な説明 など)

 

Similar posts