JIN:R「比較表ブロック」一歩先ゆくアレンジのアイデア

アシスタントさん

商品の特徴を比べる表を簡単に作る方法はないのかな、、、

じゅん

比較表ブロックを使うと簡単な操作で分かりやすく伝えられますよ

デザインが整った見やすい比較表を、もっと簡単に作成できたらいいのになと思ったことはありませんか。

そこでこの記事では、JIN:Rの比較表ブロックの使い方とアレンジの方法をたくさんのサンプルと共に紹介していきます。この記事を読めば、画像やテキスト、ボタンを使った読みやすい比較表を簡単に作る方法がわかります。

比較内容をテーブルブロックを工夫して伝える方法から、専用のブロックを使った伝わりやすい方法に切り替えたい方は、ぜひ最後まで読んでください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

比較表ブロックのクイックガイド

JIN:Rには、比較表に特化したオリジナルブロックがあります。従来のテーブルブロックを使う方法よりも読者は読みやすく、筆者は簡単な操作で違いを伝えられます。

選択できる設定項目

比較の列は、右上のプラス「＋」か右側に現れる「列を追加」をクリックすると追加できます。横スクロールは、列を追加すると必要に応じて自動で対応します。また、右上のバツ「x」で1列だけ削除も簡単にできます。

比較する項目の行は、下側に表示されるプラスとマイナスをクリックするだけで追加と削除ができます。

表の始めに画像の表示ができて、画像にはURLリンクが可能です。リンク先URLは検索または直接入力ができます。画像を選択しないことで、非表示にできます。

項目のサブタイトルとテキストのレイアウトは、左寄せと中央寄せの2種類から選べます。

一番下に表示されるボタンは、右上のボタンから非表示も可能です。比較表のボタンも機能はボタンブロックと同じで、内部リンクもアフィリエイトコードの設定が簡単にできます。

画像より上の目立つ場所に、テキストでラベルの入力ができます。

項目のサブタイトルには、比較項目名を入力します。ひとつの列に入力すれば、全ての列に適用されます。

項目のテキストには、10段階の星マークで評価レベルを示すインライン装飾が使えます。他にもJINオリジナルアイコンや内部リンクなどのインライン機能が活用できます。

たくさん設定項目があってややこしいように思いますが、細かく選ばなくても初期設定が実用レベルになっているので安心してください。

デザインパターン一覧

JIN:Rの比較表ブロックで設定項目を変更したデザインパターンを紹介していきます。

最初は、標準に近い設定です。比較商品：2列、比較項目：1行、画像：あり、画像リンク：あり、ラベル：あり、テキストレイアウト：左寄せ、ボタン表示：あり です。

ラベルを入力します

ここに商品名を入力

料金（プリセットのサブタイトル）

1,000円（サンプルで入力されいる）

公式サイトへ

ラベルを入力します

ここに商品名を入力

料金（プリセットのサブタイトル）

1,000円（サンプルで入力されいる）

公式サイトへ

次は、比較商品：3列、比較項目：4行、画像：あり、画像リンク：なし、ラベル：あり、テキストレイアウト、中央寄せ、ボタン表示：あり です。

ここにラベルを入力

商品名：1

サブタイトル（比較項目A）

ここにテキスト入力

サブタイトル（比較項目B）

ここにテキスト入力

サブタイトル（比較項目C）

ここにテキスト入力

サブタイトル（比較項目D）

ここにテキスト入力

公式サイトへ

ここにラベルを入力

商品名：2

サブタイトル（比較項目A）

ここにテキスト入力

サブタイトル（比較項目B）

ここにテキスト入力

サブタイトル（比較項目C）

ここにテキスト入力

サブタイトル（比較項目D）

ここにテキスト入力

公式サイトへ

ここにラベルを入力

商品名：3

サブタイトル（比較項目A）

ここにテキスト入力

サブタイトル（比較項目B）

ここにテキスト入力

サブタイトル（比較項目C）

ここにテキスト入力

サブタイトル（比較項目D）

ここにテキスト入力

公式サイトへ

次は、比較商品：5列、比較項目：2行、画像：あり、画像リンク：なし、ラベル：なし、テキストレイアウト、中央寄せ、評価星：使用、ボタン表示：あり です。

商品名：1

サブタイトル（比較項目A）

1,000円

インライン装飾の星で評価



自由に入力

商品名：2

サブタイトル（比較項目A）

1,000円

インライン装飾の星で評価



自由に入力

商品名：3

サブタイトル（比較項目A）

1,000円

インライン装飾の星で評価



自由に入力

商品名：4

サブタイトル（比較項目A）

1,000円

インライン装飾の星で評価



公式サイトへ

商品名：5

サブタイトル（比較項目A）

1,000円

インライン装飾の星で評価



公式サイトへ

次は、比較商品：2列、比較項目：2行、画像：なし、画像リンク：なし、ラベル：なし、テキストレイアウト、左寄せ、評価星：使用、ボタン表示：あり です。

次は、比較商品：4列、比較項目：2行、画像：なし、画像リンク：なし、ラベル：なし、テキストレイアウト、左寄せ、ボタン表示：なし です。

最後に、比較商品：2列、比較項目：2行、画像：あり、画像リンク：あり、ラベル：あり、テキストレイアウト、中央寄せ、評価星：使用、ボタン表示：なし です。

ラベルを入力

自由テキスト A

サブタイトルを入力

ここにテキストを入力

サブタイトルを入力



公式サイトへ

ラベルを入力

自由テキスト B

サブタイトルを入力

ここにテキストを入力

サブタイトルを入力



公式サイトへ

多彩な比較表ブロックの中から抜粋しましたが、表示イメージを膨らませるサポートになりましたでしょうか。

比較表ブロックをアレンジした使い方

私が思う「比較表」ブロックでおすすめの使い方をご紹介します。

旅ブログで観光地のホテル比較をするイメージで作りました。

贅沢プラン

ラグジュアリーホテル

宿泊料金（1泊）

50,000円

客室タイプ

プレミアム

アクセス

空港から車で2時間

サービスの質



アメニティ充実度



おすすめポイント

とても快適
非現実を味わう

詳細の紹介記事

ラグジュアリーホテル紹介

贅沢なひと時

公式サイトへ

快適プラン

コンフォートホテル

宿泊料金（1泊）

20,000円

客室タイプ

ダブル

アクセス

空港から車で1時間

サービスの質



アメニティ充実度



おすすめポイント

かしこまらない快適さ
家族でのんびり

詳細の紹介記事

コンフォートホテル紹介

快適さ抜群

公式サイトへ

コスパプラン

カジュアルホテル

宿泊料金（1泊）

7,000円

客室タイプ

シングル

アクセス

空港から車で3時間

サービスの質



アメニティ充実度



おすすめポイント

快適さより安さ
仲間でワイワイ

詳細の紹介記事

コスパホテル紹介

コスパ最強

公式サイトへ

ブロックの設定は、比較商品：3列、比較項目：7行、画像：あり、画像リンク：なし、ラベル：あり、テキストレイアウト、中央寄せ、評価星：使用、ボタン表示：あり です。

JIN:Rのオリジナルアイコンを使って箇条書きを表現し、アンカーリンクを作り詳細記事へ内部リンクしています。ボタンにはマイクロコピーを使って先頭のラベルの内容をもう一度アピールしています。

JIN:RにはこのWordPressテーマを開発した方々がデザインした、コードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。

比較表ブロックの基本的な使い方

「比較表」ブロックの使い方を説明していきます。設定項目は、ブロックの近くと右サイドバーに表示される内容を選択するだけで完了です。

比較表ブロックを設置

「/比較表」と入力します。

比較表の列と行の数を設定

右上の「＋」と「x」で列の、下にある「＋」と「ー」で行を追加と削除します。

横スライドは列の数に合わせて設定されるので、選択項目はないです。

画像を設定

「画像の選択」から画像を選び、画像下に現れる枠で画像にリンクするURLを検索または直接入力します。

テキストのレイアウトを選択

右上のアイコンから、左揃えか中央揃えを選びます。

サブタイトルに比較項目名を入力します。1カ所入力すれば横1行に適用され、1列ずつ入力の必要はないです。

ボタンの設定

ボタンブロックと同じ機能で、内部リンクもアフィリエイトコードの設定も可能です。

標準で1番下に表示されていて、右上のアイコンで非表示にもできます。

まとめ：専用にデザインされた表で明確に伝えよう

WordPressテーマ JIN:Rのオリジナルブロック「比較表」の使い方とアレンジの方法を紹介してきました。

従来は、一般的な表を使って商品比較を表す場合が多かったと思います。でも、比較表ブロックを使えば簡単に、画像や画像リンク、ボタンを用いた横スライド対応の商品比較が可能です。

また、読者が読みやすくなる適度な余白や星による評価などの優れたデザイン設計もされています。

比較表ブロックを活用して視覚的に分かりやすく、流し読みでも目が止まるセクションを目指しましょう。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

豊富なオリジナルブロックで
サイト構築をサポート

JIN:R 公式を見る

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。