活用方法
デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は静止画よりも注目されやすいスライド・カルーセルの動きするWidgetを紹介します。
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は情報をコンパクトにまとめられるアコーディオンWidgetを紹介します。
今回教えてくれたのは
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | アコーディオンのデザインが人気な理由 |
| 02 | 予め用意されたデザインを使えば、時間短縮に |
| 03 | アコーディオンのデザイン 20選 |
| 04 | まとめ |
01｜アコーディオンのデザインが人気な理由
- 情報をコンパクトにまとめて見やすくしたデザインだから
コンテンツを階層化して表示することで、情報の整理と表示領域の節約に役立ちます。情報をコンパクトにまとめることで、ユーザーは簡潔な概要を把握しやすく◎ Q&Aや規約などの長文になりやすいコンテンツもシンプルに見せることができ、スマホでも読みやすいページに仕上がります。
- ユーザーが素早く必要な情報に辿り着けるから
長いスクロールをせずとも読みたい情報にすぐ到達できるため、読了ストレスを軽減することができます。コンテンツを収納しておき、必要な場合にのみ展開することで、スクリーンスペースを効果的に活用できます。
02｜予め用意されたデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
03｜アコーディオンWidget 20選
.png)
一覧（アコーディオン）※要javascript
/ Widget名
アコーディオンの中に画像とテキスト※要javascript
/ Widget名
アコーディオン（背景色あり）※要javascript
/ Widget名
アコーディオン
/ Widget名
アコーディオンの中にテーブル ※要javascript
/ Widget名
アコーディオン（三階層・テーブルあり）※要javascript
/ Widget名
アコーディオンで表示/非表示（画像可）※要javascript
/ Widget名
アコーディオンで表示/非表示※要javascript
/ Widget名
フッターメニュー（アコーディオン有）※要javascript
/ Widget名
アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript
/ Widget名
アコーディオン（3階層） ※要JavaScript
/ Widget名
よくある質問コンテンツ（アコーディオン）※要Javascript
/ Widget名
アンケート 回答後にコンテンツをアコーディオンで開く※要javascript
/ Widget名
アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript
/ Widget名
アコーディオンメニュー
/ Widget名
.gif?width=396&height=228&name=903735eb5c7b8a0ed3bb59052fa153e4%20(1).gif)
アコーディオンメニュー（シンプル）
/ Widget名
アコーディオンメニュー（複数）
/ Widget名
アコーディオンメニュー ※要javascript
/ Widget名
追従型ハンバーガーメニュー ※要javascript(見出し)
/ Widget名
アコーディオンメニュー（下層メニューあり）※要JavaScript
/ Widget名
04｜まとめ
アコーディオンのデザインは、情報をコンパクトにまとめることができます。アコーディオンWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。
▼関連記事
- デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい
- デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）