デザイン紹介 – グラフ｜データは読ませず、見せるもの
Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はデータを表現する際に役立つグラフWidgetを紹介します。
今回教えてくれたのは
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | グラフの種類と活用例 |
| 02 | 予め用意されたデザインを使えば、時間短縮に |
| 03 | グラフのデザイン 14選 |
| 04 | まとめ |
01｜グラフの種類と活用例
棒グラフ
例）
- 注文殺到の表現
- 販売後◯ヶ月で品切れになるほどの〜
- お得さの表現
- ◯◯を使い続けるよりも〜
- 成分の比較
- ◯◯は従来の【成分名】の◯倍の効果
- リスクの比較
- ◯◯がない場合とある場合での【リスク】の違い
折れ線グラフ
例）
- 売上の推移（金額や個数）
- 2021年：◯◯
- 2022年：◯◯
- 2023年：◯◯
- 体型の変化（体重やウエスト）
- 1週間後：◯◯
- 4週間後：◯◯
- 8週間後：◯◯
円グラフ
例）
- 量の比較
- 人間の体の60%は水
- アンケート結果の共有
- 90%以上が◯◯と回答
- ◯ヶ月時点で90%が◯◯を体感
- 実績の共有
- 驚異のリピート率90%
- 置き換えダイエット成功率90%成功率
伝えたい内容に応じて、グラフを使い分けましょう。LP制作の際に心掛けるべきは「読ませる＜見せる」の意識。長文のテキストは画像やイラストに置き換えることで、内容をじっくり読まなくても理解してもらいやすくなります。一読しただけで「なんとなく良さそう」と印象を残せるように、データの表現に工夫を凝らすことが鍵です。
ちなみに、右肩上がりの矢印（⤴️）付きのグラフデザインはどの商材とも相性◎でオススメです。
02｜予め用意されたデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
03｜グラフのデザイン 14選
円グラフ
/ Widget名
円グラフ（シンプル）※要javascript
/ Widget名
棒グラフ※要javascript
/ Widget名
折れ線グラフ（複数対応可）※要javascript
/ Widget名
円グラフ（項目表示）※要javascript
/ Widget名
円グラフ（真ん中にパーセント）※要javascript
/ Widget名
アニメーション円グラフ（スクロール後領域内表示）※要javascript
/ Widget名
アンケート(ダミーグラフあり・ラジオボタン・選択で次の問題へスクロール・進捗画像変化） ※要JavaScript
/ Widget名
アンケート（ダミー結果表示・ローダー無し・テキストの下にグラフ）※要Javascript
/ Widget名
アンケート(ダミー結果表示・ローダー無し・テキストの下にグラフ・枠外に画像) ※要Javascript
/ Widget名
入力すると計算結果が表示（差分・比較／グラフ付き）※要java script
/ Widget名
入力すると計算結果が表示（ボタンを押した後計算結果、縦棒グラフが表示）※要java script
/ Widget名
評価グラフとスコア表※要javascript
/ Widget名
分布図
/ Widget名
04｜まとめ
データの表現に工夫を凝らすことで、内容をじっくり読まなくても理解してもらいやすくなります。Widgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。
▼関連記事
- デザイン紹介 - 比較表｜一瞬で選択肢を視覚的に示す
- デザイン紹介- クチコミ｜説得力のある文言を視覚で表現する
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）
