クエスト15：設定を保守して、安心して運営できる状態にしよう！
jinlab
JIN:Rクエスト
クエスト5：アイコンボックスで要点をパッと伝える！
jinlab
記事内に商品プロモーションを含む場合があります
記事の中で「このポイントだけは絶対に覚えてほしい！」という部分も、読み手は意外と流し読みして見逃してしまうことがあります。
そんなときに威力を発揮するのが 「アイコンボックス」。
アイコンとテキストを組み合わせることで、重要なポイント・注意点・結論をパッと見で区切り、読者の視線を自然に引き寄せられます。
この記事では、JIN:R初心者でもすぐに使いこなせる アイコンボックスの挿入・カスタマイズ方法から、記事をぐっと読みやすくする配置や見せ方のコツまで、タイムライン形式でわかりやすく解説します。
「長文でもサクッと読める記事」にしたい方は、今日のクエストでアイコンボックス活用をマスターしましょう。
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- アイコンボックスのデザインを自分好みにカスタマイズできるようになること
- アイコンボックスブロックの基本操作を覚えること
- 読者が要点をひと目で理解できる配置のコツを身につけること
これができれば、あなたの記事は“なんとなく流し読みされる文章”から、“要点がスッと伝わる記事”へと大変身します。
最初から完璧を目指さなくて大丈夫。
まずは「ここが重要！」という部分を、アイコンボックスで自然に目立たせる感覚をつかんでいきましょう。
アイコンボックスのカスタマイズ方法
ボックスは、記事の中で「ここだけは読んで！」という情報を目立たせるための重要パーツです。
JIN:Rには初期設定で12種類のボックスが用意されており、すぐに使えるのが魅力です。
- ベーシック：8種類
- タイトル付き：4種類
- 初期設定のままでも見た目が崩れる心配がなく、初心者でも安心して使えます。
基本方針
最初は、基本的にカスタマイズは不要です。
まずは標準のデザインを使って記事を書き進め、慣れてきたら必要に応じてカスタマイズすればOK。
「もっと色を変えたい」「アイコンを差し替えたい」と感じたタイミングで手を加える形が効率的です。
カスタマイズが必要になる主なケース
- タイトル付きアイコンボックスのタイトル文言を変更したいとき
- ベーシックボックスのアイコンや色を変更したいとき
カスタマイズを開こう
左メニュー「外観」＞「カスタマイズ」をクリックする。
ボックスの設定画面を開く
カスタマイズ内の「ボックス」をクリックする。
アイコンボックスを選択する
「アイコンボックス」をクリックする。
ベーシックのカスタマイズ
アイコンのカスタマイズ
- 「アイコンを変更する」をクリックする。
- 「アイコン」を選択する。
色のカスタマイズ
- 「色の選択」をクリックする。
- 「色」を選択する。
タイトル付きのカスタマイズ
アイコンのカスタマイズ
- 「アイコンを変更する」をクリックする。
- 「アイコン」を選択する。
色のカスタマイズ
- 「色の選択」をクリックする。
- 「色」を選択する。
タイトルのカスタマイズ
- 「タイトル」をクリックする。
- 「タイトル名」を変更する。
保存する
設定が終わったら「公開」ボタンをクリックして保存します。
まずはプリセットのまま使い、慣れてきたら色変更で“あなたらしさ”をプラスしていきましょう。
アイコンボックスの使い方を覚えよう！
ブログ記事を書くときに役立つのが、「アイコンボックス」。
これを使いこなせば、重要な情報や要点をパッと伝えられ、読者が迷わず内容を理解できる記事に仕上げられます！
ブロックを追加
まず、投稿画面を開きましょう。
そこで画面の「＋」ボタンを押します。
アイコンボックスのブロックを選択する
検索バーに「アイコンボックス」と入力すると、JIN:Rの吹き出しブロックが表示されます。
そこから「アイコンボックス」をクリックする。
ブロックをクリックする
右側のメニュー内の「ブロック」をクリックする。
アイコンボックスの種類を選ぶ
まずは、登録済みのタイプ選択から「アイコンボックス」を選びましょう。
用途に合わせて
- ベーシックタイプ（シンプルで使いやすい）
- タイトル付きタイプ（見出しとセットで強調できる）
のどちらにするか決めると、記事に合った見せ方ができます。
文章を入力する
ボックス内に、表示したい要点や重要情報を入力します。
1〜3行程度にまとめると、パッと見て理解しやすく、読者が迷わず内容を把握できます。
アイコンボックスは、ただの文章を“視覚的に整理された情報”へ変えてくれる便利なツールです。
まずは1つ試して使ってみて、読みやすさや伝わりやすさの変化を実感してみましょう！
読まれる記事にするための「アイコンボックス」の工夫
アイコンボックスは、こんなシーンで効果的です。
- 要点の整理（例：結論・まとめ・チェックリスト）
- 注意点の強調（例：やってはいけないこと・失敗例）
- 手順やフローの提示（例：Step1〜Step3）
- 情報の分類（例：メリットとデメリット／OKとNG）
使用例
よくあるミスと対処法
- 色やデザインが記事ごとにバラバラ
-
【原因】
ボックスを記事ごとに自由に装飾してしまい、色や角丸、余白が統一されていない。【対処法】
デザインプリセットを活用し、ブランドカラーに合わせた設定を基本に統一しましょう。変更する場合は背景色や枠線色のみを調整します。
Q
- ボックス内の文章が長すぎて読みにくい
-
【原因】
本文と同じボリュームをボックスに入れてしまい、圧迫感が出ている。【対処法】
ボックスは1〜3行程度の要約にとどめ、詳細は本文に書くルールを徹底しましょう。
Q
まとめ｜今日の成果を振り返ろう！
アイコンボックスは、記事の中で要点をパッと伝え、読者の視線を自然に誘導してくれる頼もしいパーツです。
成果を振り返ろう！
- アイコンボックスの色やデザインを管理する方法を理解した
- 記事にアイコンボックスを挿入できるようになった
- 効果的な使いどころと、その影響を把握できた
アイコンボックスを活用すれば、「読み流される文章」が「一目で理解される記事」に変わります。
まずは1つ、記事にアイコンボックスを入れて、重要ポイントをしっかりと目立たせてみましょう！
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
