活用方法
デザイン紹介 - アコーディオン｜情報をコンパクトにまとめる
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は情報をコンパクトにまとめられるアコーディオンWidgetを紹介します。
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は静止画よりも注目されやすいスライド・カルーセルの動きするWidgetを紹介します。
今回教えてくれたのは
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | スライド・カルーセルのデザインが人気な理由 |
| 02 | 予め用意されたデザインを使えば、時間短縮に |
| 03 | スライド・カルーセルのデザイン 38選 |
| 04 | まとめ |
01｜スライド・カルーセルのデザインが人気な理由
- 動きで視線を誘導し、見せたいものに注目をさせられるから
指でスワイプすることで画像を切り替えるデザインや自動で画像が動くデザインは、ユーザーの興味を引き寄せる効果があります。複数の画像やコンテンツが順番に切り替わることで、静止画よりも目を引きやすく、ユーザーの視線を集めることができ、LPにとどまる時間を増やす助けになります。
- 限られたスペースで複数の画像を提供できるから
ページ遷移やスクロールをせずとも複数の画像を一度に表示することができるので、情報をコンパクトにまとめられます。
02｜予め用意されたデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
03｜スライド・カルーセルのデザイン 38選
.png)
カルーセル※要javascript
/ Widget名
カルーセル（フェードエフェクト）※要javascript
/ Widget名
カルーセル（クリエイティブエフェクト）※要javascript
/ Widget名
横幅いっぱいのカルーセル※要javascript
/ Widget名
自動で画像スライド表示※要javascript
/ Widget名
自動で画像スライド表示（サイズ違い）※要javascript(画像)
/ Widget名
カルーセル（矢印小）※要javascript
/ Widget名
自動で画像スライドふわっと表示 ※要javascript
/ Widget名
.webp)
カルーセル（画像/左右タップでスライド）※要javascript
/ Widget名
カルーセル（画像の中に画像・クリエイティブエフェクト）※要javascript
/ Widget名
カルーセル（縦スクロール）※要javascript
/ Widget名
カルーセル（プレビュー表示あり・複数対応）※要javascript
/ Widget名
カルーセル（紙風デザイン）※要javascript
/ Widget名
カルーセル（SNS表示風）※要javascript
/ Widget名
カルーセル（画像とテキストのみ）※要javascript
/ Widget名
カルーセル（クリックでポップアップ）※要javascript
/ Widget名
カルーセル（画像/テキスト）※要javascript
/ Widget名
カルーセル（画像/テキスト/中央配置）※要javascript
/ Widget名
カルーセル（カバーフローエフェクト）※要javascript
/ Widget名
カルーセル（カードエフェクト）※要javascript
/ Widget名
カルーセル - 背景切り替えあり※要javascript
/ Widget名
画像の中にテキスト、背景画像カルーセル※要javascript
/ Widget名
カルーセル・動画ポップアップ ※要javascript
/ Widget名
カルーセル（画像リンク）※要javascript
/ Widget名
カルーセル - 複数個対応※要javascript
/ Widget名
トリミングで画像の幅、高さを揃えたカルーセル※要javascript
/ Widget名
真ん中強調のカルーセル※要javascript(アクション)
/ Widget名
カルーセル上部にテキスト挿入可※要javascript
/ Widget名
カルーセル - 全画面 ※要JavaScript
/ Widget名
カルーセル（背景カラー設定/画像サイズ縮小/左右矢印フェードイン）※要Javascript
/ Widget名
動画/画像をスライドで比較（左右）※要javascript
/ Widget名
Before/After画像をスライドで比較（クリックして上下比較） ※要javascript
/ Widget名
Before/After画像をスライドで比較（クリックして左右にずらす） ※要javascript
/ Widget名
Before/After画像をスライドで比較（カーソルを合わせるだけ、左右比較） ※要javascript
/ Widget名
カルーセル（スマホ枠）※要javascript
/ Widget名
カルーセル（グラデーション枠）※要javascript(アクション)
/ Widget名
アンケートの選択肢をスライド化 ※要JavaScript
/ Widget名
ホバーするとスライドしてボタン表示
/ Widget名
04｜まとめ
スライド・カルーセルのデザインは、静止画よりも注目されやすいです。スライド・カルーセルWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。
▼関連記事
- デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く
- デザイン紹介 - グラフ｜データは読ませず、見せるもの
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）