10種類のカラーデザイン
記事やサイトの雰囲気に合わせて、比較表の配色を選べます。
このツールでできること
表を作って終わりではありません。
比較表と記事本文を別々に作る手間を減らし、ひとつの流れで仕上げます。
軽量なテキストHTML
画像ではなく、WordPressへ貼り付けて使うHTMLとして出力します。
表と記事の内容が連動
比較表にまとめた情報をもとに、内容のそろった比較記事を作成します。
作成の流れ
クリックと入力で、表から記事まで。
ローカル入力フォームを使い、比較情報を整理してからHTMLと記事を作成します。
- 01
質問に答える
比較したい商品や項目など、GPTの案内に沿って回答します。
- 02
入力フォームを使う
作成されたローカル専用フォームに、比較情報をまとめて入力します。
- 03
比較表HTMLを作る
配色を選び、WordPressに貼り付けられるHTMLを生成します。
- 04
比較記事を仕上げる
完成した表のデータに合わせて、比較記事の本文を作成します。
早送りデモ
実際の操作を、動画で確認。
比較する情報の入力から、比較表と記事を作成するまでの流れを早送りで紹介しています。購入前に操作イメージを確認できます。
比較表デザイン例
明るい配色も、ダークな配色も。
10種類のカラーデザインから、提供いただいた7種類の作例を掲載しています。
ダーク×シアン
通信サービスなど、デジタル感を出したい比較に。
ライト×ピンク
明るく柔らかな印象で、5商品を一覧化した作例。
ダーク×パープル
濃色背景にピンクと紫を合わせた、華やかなデザイン。
ライト×ティール
情報量が多くても読み進めやすい、爽やかな配色。
ダーク×イエロー
横長の多商品比較にも対応した、視認性の高い作例。
ライト×オレンジ
購入ボタンまで温かい色で統一した、親しみやすい表。
ダーク×レッド
おすすめ列とボタンを強く見せる、引き締まったデザイン。
購入前の動作確認
お使いのWordPressで、先に表示を試せます。
下のサンプルHTMLを貼り付け、見本画像のように表が表示されるかご確認ください。
確認手順
- 1「HTMLをコピー」を押します。
- 2WordPressで「カスタムHTML」ブロックを追加して貼り付けます。
- 3プレビューを開き、見本画像と大きく崩れていないか確認します。
動作確認用サンプルHTML
WordPressのカスタムHTMLブロックへ貼り付け
サンプルHTMLを読み込んでいます…ご注意：サンプル内の料金・キャンペーン情報は表示確認用です。掲載や申込みには使用せず、ボタンのリンク先もご自身の商品・サービスURLへ置き換えてください。表示が大きく崩れる場合は、購入前にココナラの販売ページからご相談ください。
比較表だけでなく、記事も確認できます。
ココナラブログで、格安SIM3社を比較したサンプル記事を公開しています。表の情報を、記事本文にどのように展開するか確認できます。
サンプル記事を見る 販売ページ
購入する場所を選べます。
Brainまたはココナラから、利用しやすい販売先をお選びください。