クエスト11：セキュリティとバックアップで、ブログをしっかり守ろう！
jinlab
JIN:Rクエスト
クエスト6：ボタン設定でリンクから読者をスムーズに誘導しよう
jinlab
記事内に商品プロモーションを含む場合があります
記事の中で「ここから先を読んでほしい！」「このサービスをチェックしてほしい！」と思っても、読み手は意外とそのまま離脱してしまうことがあります。
そんなときに威力を発揮するのが 「ボタン」。
シンプルな見た目でも、テキストリンクよりも圧倒的に目立ち、次の行動を迷わず取ってもらえるのが魅力です。
この記事では、JIN:R初心者でもすぐに使いこなせる ボタンの挿入・カスタマイズ方法 から、記事をぐっと行動導線につなげるための配置や見せ方のコツまで、タイムライン形式でわかりやすく解説します。
「読まれるだけで終わらない記事」にしたい方は、今日のクエストでボタン活用をマスターしましょう。
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- ボタンを自分のサイトに合うデザインへカスタマイズできるようになること
- ボタンブロックの基本操作を覚えること
- 読者が迷わず次の行動に進める配置や見せ方のコツを身につけること
これができれば、あなたの記事は“読まれるだけの記事”から、“行動につながる記事”へと大変身します。
最初から完璧を目指さなくても大丈夫。
まずは「ここでクリックしてほしい！」という場面に、自然にボタンを置いてみる感覚をつかんでいきましょう。
ボタンのカスタマイズ方法
ボタンは、記事の中で「ここから先に進んで！」という行動を促すための重要パーツです。
JIN:Rには初期設定で 8種類のボタン が用意されており、さらにアレンジできるボタンが2種類。
標準のままでもバランスが取れていて、初心者でも安心して使えるのが魅力です。
基本方針
最初のうちは、カスタマイズは不要です。
まずは標準デザインを使って記事を書き進め、慣れてきたら「もっと色を変えたい」「角丸を調整したい」と思ったタイミングで手を加えればOK。
焦って全部いじるよりも、使いながら改善していくスタイルが効率的です。
ボタンをカスタマイズしたいときは？
基本的には標準デザインで十分ですが、記事を書き進めていくうちに「もっと自分らしく整えたい」と感じる場面も出てきます。
例えば
- メインボタンのカラーをサイトのテーマカラーに合わせたいとき
- サブ導線のボタンを目立ちすぎない色にしたいとき
- 角丸や影などを全体デザインと統一したいとき
こうした場合は、JIN:Rに用意されている 2つの“まっさらな設定” を活用しましょう。
カスタマイズを開こう
左メニュー「外観」＞「カスタマイズ」をクリックする。
ボタンの設定画面を開く
カスタマイズ内の「ボタン」をクリックする。
ボタン選択する
「ボタン」をクリックする。
これが、JIN:Rに用意されている 2つの“まっさらな設定” です。
初期設定が施されていないため、色や角丸、枠線、影などを自由にカスタマイズできます。
ボタンのデザイン設定をする
「塗りつぶし」「アウトライン」「アロー」からデザインを選び、色・文字サイズ・角丸・横幅・高さをスライダーで調整できます。
矢印アイコンを追加すれば、誘導効果もアップします。
詳細設定をする
影のサイズ・カーソル時の動き・表示アニメーションを選んで、ボタンの見え方や動きを細かく調整できます。
ボタンの登録名を変更
作成したボタンは、登録名を自由に変更できます。
用途に合わせて「メインボタン」「サブボタン」など名前をつけておくと、後から管理しやすくなります。
保存する
設定が終わったら「公開」ボタンをクリックして保存します。
はじめはデフォルトのままでOK。
慣れてきたら少しずつ色を変えて、“自分だけのスタイル”を加えてみてください。
ボタンブロックの使い方を覚えよう！
ブログ記事で読者を次の行動へ導くときに役立つのが「ボタン」です。
これを使いこなせば、リンク先へスムーズに誘導でき、記事が“読まれるだけ”で終わらず、行動につながるコンテンツに仕上げられます！
ブロックを追加
まず、投稿画面を開きましょう。
そこで画面の「＋」ボタンを押します。
ボタンのブロックを選択する
検索バーに「ボタン」と入力すると、JIN:Rの吹き出しブロックが表示されます。
そこから「ボタン」をクリックする。
ボタン内の文章を入力する
「ボタンに表示されるテキスト」は自由に入力できます。
「詳しく見る」「お問い合わせはこちら」など、行動をイメージしやすい言葉を入れるのがポイントです。
ブロックをクリックする
右側のメニュー内の「ブロック」をクリックする。
ボタンの種類を選ぶ
- 「デザイン設定」をクリックする。
- 登録済みのタイプ選択から「ボタン」を選びましょう。
URL設定する
ボタンをクリックしたときの移動先を指定できます。
ポイント
外部サイトへ誘導する場合は「別タブで開く」にチェックを入れると、読者が記事に戻りやすくなります。
マイクロコピーを設定
マイクロコピーとは、ボタンのすぐ近くに添える短い補足文のことです。
「ちょっとした安心材料」や「行動するメリット」を伝えることで、読者がクリックしやすくなります。
設定のポイント
- 必要なときだけ入れる
例：読者が不安に感じやすい場面や、ひと押しが欲しい場面 - 短く具体的に伝える
長文は逆効果。1行で完結させる
ボタンは、ただのリンクを“行動を促す導線”へ変えてくれる便利なツールです。
まずは1つ設置して使ってみて、クリック率や記事の動線がどう変わるかを体感してみましょう！
読まれる記事にするための「ボタン」の工夫
ボタンは、こんなシーンで効果的です。
- 行動の誘導（例：お問い合わせ・資料請求・購入ページへ）
- 関連記事への回遊（例：詳しく読む・次の記事へ進む）
- キャンペーンや外部リンクの案内（例：公式サイト・特典ページ）
- ページ内での移動（例：Step1〜Step3の手順を追う）
使用例
マイクロコピー付き使用例
よくあるミスと対処法
- ボタンの色を多用しすぎる
-
ボタンに何色も使うと、どれが一番大事な行動なのか分からなくなります。
対処法： メインカラーとサブカラーの2色までに絞り、記事全体で統一しましょう。
Q
- ボタンのテキストがあいまい
-
こちら」「詳しく」だけでは、読者は何が起こるのか分かりません。
対処法： 「無料で試す」「お問い合わせはこちら」など、行動＋ベネフィットを明確に書きましょう。
Q
まとめ｜今日の成果を振り返ろう！
ボタンは、記事の中で読者を次の行動へスムーズに誘導してくれる頼もしいパーツです。
成果を振り返ろう！
- ボタンの色やデザインを管理する方法を理解した
- 記事にボタンを挿入し、リンク先を設定できるようになった
- 効果的な配置と、その影響を把握できた
ボタンを活用すれば、「読まれるだけの記事」が「行動につながる記事」へ変わります。
まずは1つ、記事にボタンを設置して、読者を自然に次のステップへ導いてみましょう！
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
