【視覚の魔導】文字の壁を破壊せよ。ボックス・吹き出し・バナーで操る「読者の視線」

ようこそ、愛すべき養分（カモ）の皆様。魔道具屋『GRAVITY』店主のリラです。

突然ですが、あなたは他人のブログを読むとき、一言一句すべて読んでいますか？
……読んでいませんよね？

リラ

飛ばし読み、斜め読み、スクロールの連打。それが現代人の「読む」という行為の実態です。
それなのに、なぜ自分の記事だけは「全部読んでもらえる」と自惚れているのですか？

読者という名の羊たちは、放っておくとすぐに逃げ出します。
彼らを記事という牧場に留めておくには、適切な「柵（ボックス）」と、退屈させない「会話（吹き出し）」が必要です。

今回は、AFFINGER6の標準機能を駆使して、情報を「美しく、かつ暴力的に分かりやすく」整理する視覚の魔導を伝授します。

1. ボックスの心理学：色には「意味」がある

ただ漫然と枠で囲めばいいというものではありません。
AFFINGER6には多彩なボックスデザインがありますが、使うべきは「意味を持った3色」だけです。

① 黄色のボックス（ポイント・チェック）

意味：「利益」「重要」「メリット」
読者はここだけ探して読んでいます。「ここさえ読めば得をする」という情報を入れなさい。

【使いどころ】
・商品のメリット箇条書き
・記事の結論
・試験に出るポイント

② 赤色のボックス（注意・警告）

意味：「危険」「損失」「リスク」
人間は「得すること」よりも「損すること」に強く反応します（プロスペクト理論）。
スクロールする手が強制的に止まる最強の色です。

【使いどころ】
・設定の失敗談
・解約時の注意点
・「これをやらないと損します」という警告

③ 灰色のボックス（メモ・補足）

意味：「休憩」「豆知識」「飛ばしてもいい」
メインの主張ではないけれど、知っておくと便利な情報を入れます。記事の密度（リズム）を調整するのに役立ちます。

リラ

「マイボックス」機能を使い、この3つのパターンを辞書登録しておきなさい。
いちいち色設定をいじっている時間は無駄ですよ。

2. 吹き出しの魔術：孤独な読者に「仲間」を与える

なぜ、私のブログ（この記事）は読みやすいのか？
それは、こうして私（リラ）や他のメンバーが喋っているからです。

リネア

……文章だけの記事は、独り言を聞かされているようで寂しいわ。
でも、会話形式になると、読者は「傍観者」として物語に参加できるのね。

リョウリ

それにさ！難しい説明も、誰かが「わかんない！」って質問してくれると、「あ、自分だけじゃないんだ」って安心するよねっ！

吹き出しの黄金比率

先生役（解説）： 記事の進行、結論。
生徒役（共感）： 読者の疑問、ツッコミ、失敗談の代弁。

この2人がいれば、記事は勝手に進んでいきます。
AFFINGER6なら、「AFFINGER管理」＞「会話アイコン設定」で画像を登録するだけで、一瞬で呼び出せます。

3. デザイナー不要！「バナー錬成」のショートコード

「バナーを作りたいけど、デザインセンスがない」？
……安心してください。AFFINGER6を使っているなら、画像編集ソフトなど不要です。

リラ

文字とコードだけで作れる「ボックスメニュー（バナー風ボタン）」を使いなさい。
修正も一瞬、表示速度も爆速。これが賢い商人のやり方です。

【実践】バナー風ボックスの作り方

「タグ」＞「ボックスデザイン」＞「バナー風ボックス」を選ぶか、以下のショートコードを使いなさい。

 html
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="ご相談はこちら" width="" color="#fff" fontsize="200" radius="5" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="10"]
詳しくはお問い合わせください
[/st-flexbox]

さらに、画像を背景にしたい場合は backgroud_image に画像のURLを入れるだけで、プロっぽい「画像バナー」に早変わりします。

【リラ流・バナーの極意】
重要なのは「綺麗な画像」ではありません。
「押したら何があるか」が文字でハッキリ書かれていることです。
おしゃれな英語だけのバナーより、泥臭い日本語のバナーのほうがクリックされる。これが現実（ファクト）です。