【料金表編】ノーコード&ブロックエディタのみ!Lightning G3やKatawaraでおしゃれなデザインのホームページを作る

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のご相談を受け付けております!

以上ノーコード&ブロックエディタのみで料金表をおしゃれに見せる方法でした!
また料金表の活用アイディアが思いついたらこちらに追加します。

こちらに掲載している料金表の具体的な設置手順はもちろん、Lightning G3 Pro Unit、Katawaraでこんな風にできないか?などのご相談がありましたらお問合せください!