【初心者向け】AFFINGER7「タイトル付きフリーボックス」の使い方とデザイン活用例

AFFINGER7を使って記事を書いていると、

「重要なポイントを目立たせたい」

「おしゃれな囲み枠を作りたい」

「ボタンや画像をまとめて表示したい」

と思うことはありませんか？

そんなときに便利なのが「タイトル付きフリーボックス」です。

フリーボックスを使えば、文章や画像、ボタンなどを自由に配置できるため、記事を見やすくしたり、読者の目を引くデザインを作ったりできます。

この記事では、AFFINGER7のフリーボックスの使い方を初心者向けにわかりやすく解説しています。

※　この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。

AFFINGER7のフリーボックスとは？まず知るべき基本

AFFINGER7の「タイトル付きフリーボックス」機能では下のようなボックスを簡単に作成できます。

フリーボックスは「重要情報を分かりやすくまとめる枠」

文章の途中に枠で囲われた “説明エリア” を作るのがフリーボックスです。

特徴は以下のとおり：

• 見出し（タイトル）を付けられる
• 背景色やボーダーを調整できる
• 枠内の文字が読みやすくなる
• スマホでも見栄えが崩れにくい

初心者でも直感的に使えます。

ボックスを使うメリット（初心者ほど効果が大きい）

フリーボックスの最大のメリットは 読者に見やすい記事が作成できる点です。

文章だけの記事だと、読者は飽きてしまいます。

しかしボックスで情報を整理すると、

• 読者が“どこが重要か”すぐ分かる
• 内容が整理されて読みやすい
• 記事の質が上がって見える（プロっぽい）
• スマホでも視線誘導がしやすい

など強力な効果があります。

ブログ初心者が最短で「読みやすい記事」を作るなら、積極的に利用すべき機能です。

どんな場面で使うと便利？（用途別に具体例を紹介）

フリーボックスは次のような場面で特に有効です。

• 読者に絶対伝えたい重要ポイント
  • 例：「この記事の結論」「要点まとめ」
• 注意喚起
  • 例：「設定変更の注意点」「トラブルの可能性」
• 補足説明
  • 例：「専門用語の簡単な解説」「例外パターン」
• ステップ解説
  • 例：「3ステップの操作方法」「流れの図解」
• メリット／デメリットの整理
  • 表やリストと組み合わせると見やすさ倍増。

このように、フリーボックスは「読者に親切な記事」を作るための便利ツールです。

AFFINGER7でフリーボックスを作成する方法【初心者向け】

ここからは、実際の作り方をステップ形式で解説します。

フリーボックスのおすすめ活用例

①　記事のポイントまとめ

記事冒頭やまとめ部分に使うと効果的です。

②　注意点を目立たせる

③　おすすめ商品の紹介

④　関連記事の案内

よくある質問

フリーボックスの色は変更できますか？

はい。背景色や枠線色を自由に変更できます。

ボタンを入れられますか？

はい。ボタンブロックを配置できます。

スマホでも表示されますか？

レスポンシブ対応しているため、スマホでも問題なく表示されます。

AFFINGER6のフリーボックスと機能の違いはありますか？

いいえ。AFFINGER7への移行でフリーボックス機能に変更はありません。

まとめ

見出し付きフリーボックスは、

• 読者の理解が深まる
• 情報が整理される
• 重要ポイントが伝わりやすい
• 記事の質が上がる
• スマホでも読みやすい

という、読みやすい記事を作成する為の便利機能です。

AFFINGER7には他にも便利な装飾が多いため、「見出し」「ボタン」「テーブル」と組み合わせることで、さらに読みやすさと収益性が上がります。

※　AFFINGER6は現在、AFFINGER7へと移行となりました。