【料金表編】ノーコード＆ブロックエディタのみ！Lightning G3やKatawaraでおしゃれなデザインのホームページを作る【コピペOK】
松田 啓
WordPressの有料テーマ「Katawara」やLightning G3の有料プラグイン「Lightning G3 Pro Unit」を購入すると、VK Blocks Proというホームページ制作に便利なブロックがたくさん用意されたプラグインを使用できます。
VK Blocks Proのブロックを組み合わせることで、HTMLやCSSを書かずにノーコードでおしゃれなデザインを簡単に作れて便利です。
今回はVK Blocks Proで作った料金表の
おしゃれなデザイン例を3つご紹介いたします！
ノーコードでも工夫次第で色々な表現ができますので、ぜひ参考になさってください！
VK Blocks Proで料金表を作る時の準備とヒント
VK Blocks Proで投稿リストを作る時の準備とヒントを書きました。
VK Blocksの「Outer(Pro版のみ)」「見出し」「ボタン」とテキストブロック「テーブル」を主に使用
VK Blocksのブロックの一つである「Outer(Pro版のみ)」「見出し」「ボタン」を使用して、投稿一覧リストを作ります。
また、プラン内容の紹介として、標準のテキストブロック「テーブル」を使用します。
おすすめプランを目立たせています
料金表のプランはフリープラン・スタンダードプラン・プレミアムプランの3つを想定しています。
この中で一番おすすめしたいプランであるスタンダートプランが目立つように料金表を作っています。
料金表の基本構成は同じにしています
ここでの料金表の基本構成は「プラン名・料金・プラン内容・詳細ボタン」となっております。
PC用とタブレット用とスマホ用の制御は「非表示設定」で制御しています
PC用とタブレット用とスマホ用で料金表を複数作成している場合があります。
それぞれの投稿リストの表示設定はテーマに用意されている「非表示設定」という項目でコントロールしています。
ブラウザのサイズを変えながら表示確認
ブロックエディターで作ってみたら、プレビューをして、ブラウザのサイズを広げたり縮めたりして確認してみてください。
スマホやタブレットなど、画面サイズの異なるデバイスでの表示確認のためにこちらを行います。
※スマホで確認する時とは多少表示が異なる場合があります。
おすすめプランが大きく表示されている料金表
フリープラン
まずはこのプラン
0円
| 限定メルマガ | 月1回 |
| メール相談 | △* |
| Zoom相談 | × |
| 作業時間 | × |
* 限定メルマガで回答する場合があります
スタンダードプラン
おすすめ！
11,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月1回 |
| 作業時間 | 60分 |
プレミアムプラン
法人の方に
55,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月4回 |
| 作業時間 | 無制限 |
【ポイント】VK Blocksのレスポンシブスペーサーで隙間を調整
VK Blocksのレスポンシブスペーサーで各プランに隙間を入れておすすめプランを目立たせています。
赤枠で囲っている四角い点線の部分が、おすすめプランを目立たせるために入れているレスポンシブスペーサーです。
料金の前後の四角い点線など、他にもレスポンシブスペーサーを入れて隙間を細かく調整しています。
また、Outerと見出しを組み合わせることで、目立つボックスを作ることもできます。
おすすめプランの枠が目立つように表示されている料金表
フリープラン
まずはこちらから
0円
| 限定メルマガ | 月1回 |
| メール相談 | △* |
| Zoom相談 | × |
| 作業時間 | × |
* 限定メルマガで回答する場合があります
スタンダードプラン
おすすめ！
11,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月1回 |
| 作業時間 | 60分 |
プレミアムプラン
法人の方に
55,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月4回 |
| 作業時間 | 無制限 |
【ポイント】VK Blocks ProのOuterの枠線設定で線の太さとデザインを差別化
VK Blocks ProのOuterの枠線設定で線の太さとデザインを変更し、おすすめプランを目立たせています。
線の種類は画像のOutsetの他にも、直線や点線、二重線などがあります。
縦にプランを並べた料金表
フリープラン
まずはこのプラン
0円
| 限定メルマガ | 月1回 |
| メール相談 | △* |
| Zoom相談 | × |
| 作業時間 | × |
スタンダードプラン
おすすめ！
11,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月1回 |
| 作業時間 | 60分 |
プレミアムプラン
法人の方へ
55,000円/月
| 限定メルマガ | 月4回 |
| メール相談 | 無制限 |
| Zoom相談 | 月4回 |
| 作業時間 | 無制限 |
【ポイント】VK Blocks ProのOuterの背景設定で背景画像に画像を入れて差別化
おすすめプランだけ、VK Blocks ProのOuterの背景設定で背景画像を入れて目立たせています。
Lightning G3 Pro Unit、Katawaraを未購入の方はこちらから購入可能です
有料テーマのKatawaraは、左にメニューが表示されるおしゃれなテーマです。
買い切りで複数のサイトで使いまわせるところもおすすめのひとつです！
大幅な機能変更や追加はないようですので、カスタマイズがしやすいテーマでもあります。
Lightning G3 Pro Unitは、Lightningを使ってる方に特におすすめの拡張プラグインです。
以下のようにホームページを使いやすく＆充実させることができます。
- 見出しのデザインを簡単に変更
- ヘッダーを半透明に変更
- ヘッダーに電話番号やお問合せボタンを追加
Lightning G3 Pro Unitは買い切りではありませんが、アップデート保証期間が1年、3年、5年の3つのプランがあります。
Lightning G3 Pro Unit、Katawaraのご相談を受け付けております！
以上ノーコード＆ブロックエディタのみで料金表をおしゃれに見せる方法でした！
また料金表の活用アイディアが思いついたらこちらに追加します。
こちらに掲載している料金表の具体的な設置手順はもちろん、Lightning G3 Pro Unit、Katawaraでこんな風にできないか？などのご相談がありましたらお問合せください！
ホームページの新規作成・リニューアルで
お困りの担当者様へ
WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか？
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。
