活用方法

デザイン紹介 - 比較表|一瞬で選択肢を視覚的に示す

Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はどの案件にも使える万能な比較表Widgetを紹介します。


今回教えてくれたのは

Shihori Nakaide

- BizOps チーム
- Assistant Manager

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

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

目次

01 比較表のデザインが人気な理由
02 予め用意されたデザインを使えば、時間短縮に
03 比較表のデザイン 16選
04 まとめ

 

 

01|比較表のデザインが人気な理由


 

- 読者が一目で情報の整理をできるから

比較表のデザインを利用することで、複数のサービスの特徴を整理することができます。テキストだけではなく、記号や装飾を使用することで情報の視認性を簡単に高めることができます。


- 読者の論理的な整理を手助けするから

他サービスと比較し、意思決定のサポートに役立ちます。類似点や相違点を明確に示すことで、異なる選択肢を比較し、利点や欠点を元に読者が最適な選択を行いやすくなります。

 

 

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


 

image-1

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

 

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

▼ 参考記事

 

 

03|比較表のデザイン 16選


 

logo (1)

どの商材でも応用できる万能デザイン

比較表(ランキング有)

/ Widget名

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


logo (1)

どの商材でも応用できる万能デザイン

ランキングを入れた比較表、左見出し無し

/ Widget名

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


 

logo (1)

どの商材でも応用できる万能デザイン

ソート可能な表※要javascript

/ Widget名

e895fc8772bd620b3fdda636ccae7e0a


logo (1)

どの商材でも応用できる万能デザイン

表 - 評価スターあり・画面幅によりスライド

/ Widget名

e0624b77fb540c1329cf34b2b1f6e823


 

logo (1)

どの商材でも応用できる万能デザイン

比較表-絞り込み・並べ替え機能つき ※要JavaScript

/ Widget名

5da938438935614fb9a77282dcee2185

logo (1)

どの商材でも応用できる万能デザイン

カルーセル(チケット風デザイン)※要javascript

/ Widget名

0c8dba92aeed468c3b25dc480fa93d73


 

logo (1)

どの商材でも応用できる万能デザイン

比較表

/ Widget名

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


logo (1)

BtoB・SaaSサービスでよく見かける

料金比較表 - 横並び

/ Widget名

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


 

logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

公式とその他価格比較

/ Widget名

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


logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

比較表(列を強調、画面幅にフィット)

/ Widget名

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


 

logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

ヘッダー固定比較表(3列)

/ Widget名

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


logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

ランキングを入れた比較表

/ Widget名

ed4018ca5359b6ca8d2e567195302af8


 

logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

ヘッダー固定比較表2(3列)

/ Widget名

スクリーンショット 2023-07-12 17.24.32

logo (1)

美容商材にオススメ!
一瞬で複数の選択肢を見せられる

ランキング(スクロールで上部固定)

/ Widget名

スクリーンショット 2023-07-12 17.25.41

 

logo (1)

美容商材にオススメ!
クチコミ付きで信頼度up

タブメニューで商品ランキング※要javascript
/ Widget名

0a620740adb68d9934b5d1d46f7936dd


logo (1)

新規ユーザーの
アプリインストールと相性 ◎

アプリ比較表 タブで表を切り替え ※要Javascript
/ Widget名

7e9fb8432960f1b2f5661847665761a8


 

 

 

04|まとめ


比較表は、ユーザーに素早く選択肢を提示し、比較検討を促す便利なデザインです。比較表Widgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください!修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。

 

 

▼関連記事

ブログCTA案

2

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

デモを依頼する

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

 

Similar posts