ぽんひろさんのあのカスタマイズがUseful Blocksプラグインで超簡単

Useful Blocks

「Useful Blocks」はSWELL開発者の了さんWebデザイナーのぽんひろさんが共同開発したプラグインです。

(とは言っても、SWELL専用のプラグインじゃないです。テーマを選ばず使えます!

夢のコラボですねぇ。

プラグイン「Useful Blocks」

WEB業界でぴかぴかセンスが光るおふたり。

考える間もなくインストールして使い始めました。

やっぱりイイわぁ!

私はぽんひろさんのデザインセンスの大ファンです。

サムネイルを見ているだけで楽しい! そんなサイト、なかなかないでしょ。

Useful Blocksは元々ぽんひろさんが公開されている「コピペでできるブログカスタマイズ」内の4つ(現在)です。

HTMLとCSSのコピペで実現できるのですが、はやり結構な手間。HTMLやCSSがわからない方には結構ツライ。

ブロック化された今回のプラグインはものすごく簡単で自由自在です。

自由自在というのはPRO版を購入するのが前提です(わずか980円)。

1200円に値上がりしました。
一度購入すれば以降制限なく使えるので、早く購入した方がお得ですよ~ぉ!

PRO版のみの機能
  • 部位カラー変更
  • アイコン設定
  • コンテンツ自由配置(比較表)
  • 画像挿入(CVボタン)

自由自在の要素はこのPRO版で追加される部分にあります。

この記事はすべて「Useful Blocks PRO版」の内容です。

記事の内容(もくじ)

「Useful Blocks」は本当にユースフル!

リリースされた時は「CVボックス」「比較ボックス」の2機能でしたが「アイコンボックス」「棒グラフ」が加わり現在4つ。

最初の2つでもPRO版を買う価値あり!と思っていたんですが、すごい機能が追加されてお得感いっぱい、いや表現の幅が広がります。

4つ目のブロック追加が間近なようです。メッチャ楽しみ!
(2020.9.30追記)

Useful Blocksのアップデートで予告通り棒グラフの機能が追加されました。

という具合に、機能追加のアップデートが期待できるプラグインです。

説明ページにジャンプするとセンス抜群のわかりやすい説明があります。

なので、私のこの記事は不要な気もしますが、書きたいので書きます(いつものスタイル)。

それはともかく、ブログ運営でマネタイズを考えている場合は威力を発揮しますねぇ。

もちろん自力で制作できますが、自然な印象で訴求するのは結構難しいです。

色や項目の選定、ページへのなじみ加減、好印象を残すデザイン、そして何より分かりやすさ。

それを編集画面でプレビューしながらあっさり作れるので、ものすごく時短になります。

WordPressのデザインでテーマを買うように、購入した機能(プラグイン)を元にゴニョゴニョ自分好みに変えた方が得策と思うのです。

インストールと使い方

Useful Blocks無料版のインストール

通常のプラグインのインストールと同じやり方です。

  1. プラグイン → 新規追加
  2. 検索窓に「Useful Blocks」と入力
  3. 選択 → インストール
  4. 有効化

PRO版を使う際も無料版の有効化が必要です。

Useful Blocks PRO版 購入からインストール

ダウンロードページ

  1. 「購入してダウンロード」をクリック
  2. クレジットカード情報を入れる
  3. 購入後のページ下部「ここをクリック」でダウンロード
  4. プラグイン → 新規追加
  5. 「プラグインのアップロード」をクリック
  6. ダウンロードしたZIPファイルをアップロード
  7. 「今すぐインストール」
  8. 有効化

Useful Blocks PRO版 設定画面

Useful Blocks無料版を有効化すると左側の管理メニューに「Useful Blocks」のメニューが追加されます。

メニュー「Useful Blocks」をクリックすると、「CVボックス」と「比較ボックス」の基本カラーが一覧(だけ)できます。

PRO版にアップグレードするとそれらを自由に変更できるようになります。

CVボックスのカラー設定画面
Useful Blocksの設定画面

その他のPRO版オプションはブロックを呼び出した時、サイドの「ブロック」にそれそれ表示されます。

Useful Blocksの使い方

他のブロック同様、ブロックメニューに追加されるので、それを呼び出すだけです。

STEP
ブロックメニューから呼び出す
Useful Blocks
STEP
元デザインを編集

呼び出したボックスを選択し、右のブロック設定画面で編集。

元デザインを呼び出してポチポチと選んでいくだけで、おしゃれで訴求力満点のボックスができます。

自然なのに目を引く「CVボックス」

CVボックス

CVボックスを呼び出すと、下記が挿入されます。

Useful Blocks CVボックス

画像、コピー、ボタンなどそれぞれの設定

Useful Blocks CVボックス ボタン設定項目
設定できる項目

CVボックスを実際に作ってみた!

テーマ「SWELL」
  • SWELLブロックエディタは最高に使いやすい
  • 高速表示&メッチャおしゃれ
  • アップデートで機能がどんどん追加される
テーマを買ったら予想外のオマケの嵐!
SWELLにしてから記事がどんどん書ける

実際のCVボックスです。オンマウスやクリックで動作確認できます。

下記はデフォルトのカラーです(PRO版のカラー設定をしていない状態)。

Useful Blocks CVボックス オレンジ
丸ボタン・リンク先ナシ
Useful Blocks CVボックス ピンク
丸ボタン・白抜き矢印
Useful Blocks CVボックス グリーン
テキスト矢印・角丸ボタン
Useful Blocks CVボックス ブルー
テキストコメントマーク・角丸ボタン・電球マーク

すごくキレイな色の組み合わせなので、カラーはこのまま使おうと思っています。

商品やサービスの違いを瞬時に伝える「比較ボックス」

比較ボックス

商品やサービスの内容を比較し、印象づけるのに表組はとても効果的です。

比較ボックス

文章でダラダラ書いてもあまり読まれないですが、表にまとめるとパッと目が追ってしまいます。

それが比較表になっていたら、自然と読み比べるという流れに…。

無料版は表の内容がリストのみですが、PRO版だと自由にブロックを配置できます。

これ、いいですねぇ。

画像やボタンなどを配置したら比較ブックスが比較CVボックスに化けますから…。

Useful Blocks 比較ボックス

すっごく可愛い「アイコンボックス」

アイコンボックス

3つ目は「アイコンボックス」でした。超かわいい!

アイコンボックス紹介
  • これは楽しいなぁ~
  • Useful Blocks中で一番お気に入り
  • アイコンはボックス上とボックス内の左右
  • 可愛いアイコンが目を引きます
  • 思わずリストを読んでしまう
  • 多用しそうで怖い
こんなに楽しいアイコンボックス
こんなに楽しいアイコンボックス
アイコンボックス紹介
  • これは楽しいなぁ~
  • Useful Blocks中で一番お気に入り
  • アイコンはボックス上とボックス内の左右
  • 可愛いアイコンが目を引きます
  • 思わずリストを読んでしまう
  • 多用しそうで怖い

ブロックを呼び出せばすぐ直感的にやり方がわかるので、説明は割愛します。

背景透過のイラスト

アイコンは背景透過でないと、画像が浮きます(白背景の枠が見えるのはちょっとねぇ)。

背景透過の無料素材イラストは「イラストレイン」がおススメ。

可愛いイラストがどっさり。

イラストレイン

イラストレイン

手持ちの画像を切り抜く(背景透過)なら「removebg」が便利!

removebg

棒グラフ

Useful Blocks 棒グラフ

こんな棒グラフがあっという間に作れます。

下記のグラフは棒の色を変えただけの一番単純な表現です。

我が家の夕食
和食
45%
洋食
25%
中華
12%
ナゾの料理
18%

挿入した棒グラフを選択すると右側にメニューが現れます。下記はグラフ全体を選択している時の画面です。

Useful Blocks 棒グラフ

棒グラフのの1つを選択するとカラーと割合の設定ができます。

Useful Blocks 棒グラフ

Useful Blocksの詳細

  • WordPressのバージョン5.4以上
  • どんなテーマでも使える
  • 今後もスタイルを追加予定
PRO版
  • 使用メディアに制限なし
    「一粒で二度おいしい」どころじゃない
  • サポート用のSlackコミュニティに参加できる
  • 機能追加にあわせて料金を変更
    最初に買った方がお得!
  • PRO版は980円
  • 支払いはクレジットカードのみ
記事の内容(もくじ)
閉じる