文字装飾・枠・吹き出しなどの使い方と設定

2026-02-022026-02-03

「文字装飾や枠の使い方がわからない」
「効果的に設置する方法は？」

このような悩みを解決します！

装飾は記事の見た目を華やかにするだけでなく、伝えたい情報を効果的に伝えるられる重要な要素です。

このマニュアルでは、「文字装飾・枠・吹き出し」の使い方を解説します。

良い記事にするために装飾は必要不可欠なので、活用法を理解して親しみのある読みやすい記事を作ってくださいね！

文字装飾・枠・吹き出しの役割（早見表）

次の表は文字装飾・枠・吹き出しの役割早見表です。

1度マニュアルを読んで忘れた時などに、こちらの表を参考にしてくださいね！

装飾	役割
文字装飾	・重要箇所の強調・視認性の向上
枠	・要点やポイントの要約や箇条書き・引用や参考元など枠に役割を持たせる
吹き出し	・筆者の主張や経験談・読者の気持ちの代弁・重要箇所の強調

文字装飾の役割

文章に文字装飾を入れる第1の理由は、読者に重要ポイントを明確に伝えるためです。

太字や色、下線などを効果的に設置すると、読者の視線を重要なキーワードやフレーズに自然に誘導でき、重要なポイントを伝えられます。

また記事に適度な装飾を入れると、単調さがなくなり読者の目の疲れを軽減し最後まで読んでもらいやすくなります。

実際に装飾を抜いた上の文章を、次の枠にまとめたので比較してください。

文章に文字装飾を入れる第1の理由は、読者に重要ポイントを明確に伝えるためです。

太字や色、下線などを効果的に設置すると、読者の視線を重要なキーワードやフレーズに自然に誘導でき、重要なポイントを伝えられます。

また、記事に適度な装飾を入れると、単調さがなくなり読者の目の疲れを軽減し、最後まで読んでもらいやすくなります。

おかだ

どこが重要なポイントかわかりにくいだけでなく、単調で読む気がなくなりませんか？

文字装飾の重要度を理解していただけたかと思います。

文字装飾は3種類

文字装飾の種類は3つに絞りましょう。

なぜなら、文字装飾の種類が多すぎると重要度が伝わりにくく、サイトとしての統一感もなくなるからです。

使用する文字装飾は次の3つで、3段階の重要度を設定します。

必要な文字装飾

太文字：重要度小
赤太文字：重要度中
アンダーライン太文字：重要度大

文字装飾に重要度を設定すると執筆時の迷いがなくなり、読み手も重要度の判別がしやすく読みやすくなるメリットもあります。

文字の大きさで強調するのも効果的

文字の大きさを使って重要箇所を強調するのも効果的です。

たとえば、次のFXの手法を伝える文章を見てください。

・FX初心者でもスグできる！移動平均線を使った勝率73.4%の手法！

・FX初心者でもスグできる！移動平均線を使った勝率73.4%の手法！

どちらが目を引くか一目瞭然ですね。

文字の大きさはここぞという時に使うと効果大ですよ！

注意点！過度な文字装飾は厳禁

文字装飾は効果的ですが、過度な利用は絶対にやめましょう。

理由は多すぎると文字装飾の重要性が薄れ、本当に伝えたいポイントが伝わりにくくなるからです。

文字装飾の注意点

1つの見出しに3つまで
3種の装飾をバランスよく配置
長文を丸ごと装飾しない
文字サイズの変更は「ここぞ！」という箇所に限定

しっかりルール化できていれば、的確に重要箇所を装飾できるはずです。

もし、どこに装飾すればいいのか判断できないのであれば、初心に戻ってペルソナが何を求めているのか考えてみましょう。

囲み枠の役割

続いて囲み枠の役割を解説します。

囲み枠の役割は次のとおりです。

囲み枠の役割

要点やポイントの要約や箇条書き
引用や参考元など枠に役割を持たせる

ちなみに、上の囲み枠は「囲み枠の役割」を箇条書きした使い方をしています。

おかだ

囲み枠は読者の目に止まりやすく、パッと見で要点を伝えられます！

流し読みする読者が多いので、この目を止めるという行動を誘発できる囲み枠はとても重要です。

さらに、「ポジティブな内容に使う枠」「引用に使う枠」など枠に役割を設定すると、サイト全体に統一感が出て読みやすくなります。

我々プロが使っている枠は次の8種類です。

最低限必要な枠

シンプル枠
ポジティブ枠（青系色）
ネガティブ枠（赤系色）
手順枠
参考元枠
引用枠
アコーディオン枠
FAQ枠

それぞれの役割や使い方について解説します。

SWELL用の枠コードも公開しているので、コピペして使ってください。

シンプル枠

シンプル枠は、万能枠で多くのシチュエーションで利用します。

本人確認書類や旅行の持ち物一覧など
計算式
別枠で表現したい文章

おかだ

簡単に言うと、この後紹介する7つの枠で表現できないケースはシンプル枠を使ってください。

<!-- wp:paragraph {"className":"is-style-big_icon_memo"} -->
<p class="is-style-big_icon_memo"></p>
<!-- /wp:paragraph -->

ポジティブ枠（青系色）

FXのメリット

100円からの少額から始められる
平日24時間取引できる
レバレッジで最大25倍の資金で取引できる

青系色のポジティブ枠は、その名の通りポジティブな内容に使用します。

青系色は、信号機の進めに使われるなど、信頼性や誠実さをイメージさせポジティブな印象を与えます。

具体的な使用例としては、「メリット」「良い口コミ」「コツ、ポイント」などです。

<!-- wp:loos/cap-block {"dataColSet":"col2","iconName":"LsMegaphone","iconSize":"1.4em","className":"is-style-onborder_ttl"} -->
<div class="swell-block-capbox cap_box is-style-onborder_ttl" data-colset="col2" style="--the-icon-size:1.4em"><div class="cap_box_ttl" data-has-icon="1"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M97.6 13.9c-.5-.7-.4-1.6.2-2l3.6-2.5c.6-.4 1.5-.2 1.9.5.5.7.4 1.6-.2 2l-3.6 2.5c-.6.4-1.5.2-1.9-.5zM100.7 22.4c-.1-.8.5-1.5 1.2-1.6l4.4-.4c.7-.1 1.4.6 1.4 1.4.1.8-.5 1.5-1.2 1.6l-4.4.4c-.7.1-1.4-.6-1.4-1.4zM90.6 8.1c-.7-.3-1.1-1.2-.8-1.8l1.8-4c.3-.6 1.2-.9 1.9-.6.7.3 1.1 1.2.8 1.8l-1.8 4c-.3.7-1.2.9-1.9.6zM40.9 28.7 24.2 4.9c-1.1-1.6-2.5-1.5-3-1.4-.7.2-2 .8-2.4 3.1-2.1 8-6.1 12.2-9.2 14.3l-6.4 4.5C1.7 26.4.8 28 .7 29.8c-.1 1.5.3 2.9 1.2 4.1 1.1 1.5 3 4.3 4 5.8.7 1 1.6 1.8 2.7 2.2.8.3 1.5.4 2.3.4 1.2 0 2.4-.4 3.4-1.1l3.9-2.8 4.4 6.2c.6.9 1.9 1.1 2.8.5L27 44c.9-.6 1.1-1.9.5-2.8l-4.2-6c3.2-1.6 7.8-2.8 14-2.2 2.4.4 3.4-.6 3.8-1.2.3-.3.9-1.5-.2-3.1zM21 32.1l-6.8-9.7c2.9-2.7 6.1-6.8 8-13.3l7 10 7 10c-6.7-.4-11.7 1.1-15.2 3zM42.7 12.2 38.6 15c-.7.5-1.6.3-2.1-.4s-.3-1.6.4-2.1L41 9.7c.7-.5 1.6-.3 2.1.4.5.6.3 1.6-.4 2.1zM33.9 3.7l-2.1 4.5c-.4.8-1.2 1.1-2 .7-.8-.4-1.1-1.2-.7-2l2.1-4.5c.4-.8 1.2-1.1 2-.7.8.4 1.1 1.3.7 2zM46.2 23.8l-5 .4c-.8.1-1.6-.5-1.6-1.4-.1-.8.5-1.6 1.4-1.6l5-.4c.8-.1 1.6.5 1.6 1.4 0 .8-.6 1.6-1.4 1.6z"></path></svg><span><b><span style="font-size:18px" class="swl-fz">ポイント</span></b></span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

ネガティブ枠（赤系色）

FXのデメリット

投資なので損失の可能性がある
ギャンブルになりやすい
勉強が必要で簡単には稼げない

赤系色のネガティブ枠はポジティブ枠の反対で、ネガティブな内容に使用します。

赤系色はネガティブ印象を与えるためです。

具体的な使用例としては、「デメリット」「悪い口コミ」「注意点、リスク」などです。

<!-- wp:loos/cap-block {"dataColSet":"col1","iconName":"LsAlert","iconSize":"1.4em","metadata":{"categories":["swell-custom-patterns"],"patternName":"swell-patterns/parts-61","name":"赤注意枠"},"className":"is-style-onborder_ttl"} -->
<div class="swell-block-capbox cap_box is-style-onborder_ttl" data-colset="col1" style="--the-icon-size:1.4em"><div class="cap_box_ttl" data-has-icon="1"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M47 37.9 27.5 4.1c-.7-1.3-2-2-3.5-2s-2.7.7-3.5 2L1 37.9c-.7 1.3-.7 2.7 0 4 .7 1.3 2 2 3.5 2h39.1c1.4 0 2.7-.7 3.5-2 .6-1.3.6-2.7-.1-4zM21.5 17.5c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5v-10zM24 38c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path></svg><span><b><span style="font-size:18px" class="swl-fz">注意</span></b></span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

手順枠

FX口座開設手順

【STEP1】フォーム入力
【STEP2】本人確認書類の提出
【STEP3】審査
【STEP4】口座開設完了
【STEP5】取引開始

順を追ってやり方を解説する時に使うのが手順枠です。

たとえば、上の例のようにFX口座の開設方法などSTEP形式で解説する内容で使います。

見出しの冒頭にあらかじめ手順を明示しておくと、読者も全容を理解しやすく親切です。

<!-- wp:loos/cap-block {"dataColSet":"col2","iconName":"LsToc","iconSize":"1.4em","metadata":{"categories":["swell-custom-patterns"],"patternName":"swell-patterns/parts-64","name":"手順枠"},"className":"is-style-inner custom-style-step u-mb-ctrl u-mb-40"} -->
<div class="swell-block-capbox cap_box is-style-inner custom-style-step u-mb-ctrl u-mb-40" data-colset="col2" style="--the-icon-size:1.4em"><div class="cap_box_ttl" data-has-icon="1"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><circle cx="4.8" cy="24" r="3"></circle><path d="M44.3 26h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2-.1 1.1-.9 2-2 2z"></path><circle cx="4.8" cy="37" r="2.5"></circle><path d="M44.3 39h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2-.1 1.1-.9 2-2 2z"></path><circle cx="4.8" cy="37" r="3"></circle><path d="M44.3 39h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2-.1 1.1-.9 2-2 2z"></path><circle cx="4.8" cy="11" r="3"></circle><path d="M44.3 13h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2-.1 1.1-.9 2-2 2z"></path></svg><span><b><span style="font-size:18px" class="swl-fz">手順枠</span></b></span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

引用枠

他媒体の情報を引用する場合に使用するのが引用枠です。

引用枠は記事で言及している情報やデータの情報源を明示する時に使います。

たとえば、「FXの税金は一律20.315%です。」とだけ伝えるより、次の引用文を添えて伝えた方が読者が納得しやすいですよね。

給与所得や事業所得は、所得が増えるほど税率が高くなる「累進課税」の仕組みになっています。一方、FXの利益にかかる税率は所得の金額にかかわらず一律で、20.315%(所得税15%＋住民税5%＋復興特別所得税0.315%)です。

松井証券：FX取引で利益には税金がかかる？税率や計算方法、確定申告が必要となる条件を解説

引用する情報は、公的機関や大企業など信頼性と権威性の高い媒体だけに絞ってください。

どこの誰だかわからない個人サイトの情報は、嘘の可能性もあるので避けましょう。

<!-- wp:quote {"className":"has-swl-gray-background-color has-background u-mb-ctrl u-mb-40","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<blockquote class="wp-block-quote has-swl-gray-background-color has-background u-mb-ctrl u-mb-40" style="font-style:normal;font-weight:600"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

参考元枠

参考元

参考元枠は記事内で参考にした文献やデータなどの情報元を開示するため使用します。

他媒体にある情報を流用した場合、参考元を明示するのはサイト運営のルールです。

他から持ってきた情報をあたかも自分の情報として利用すると、最悪訴訟問題にもあるので注意しましょう。

おかだ

外部リンクの設置は、SEO的にもプラス効果があるんですよ！

<!-- wp:loos/cap-block {"dataColSet":"col4","iconName":"LsBookmark","iconSize":"1.4em","className":"is-style-inner u-mb-ctrl u-mb-40"} -->
<div class="swell-block-capbox cap_box is-style-inner u-mb-ctrl u-mb-40" data-colset="col4" style="--the-icon-size:1.4em"><div class="cap_box_ttl" data-has-icon="1"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M10 3h28c1.1 0 2 .9 2 2v39.6c0 .9-1.1 1.3-1.7.7L24 31 9.7 45.3c-.6.6-1.7.2-1.7-.7V5c0-1.1.9-2 2-2z"></path></svg><span><b><span style="font-size:18px" class="swl-fz">参考元</span></b></span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

アコーディオン枠

アコーディオン枠は、枠をクリックするとコンテンツが表示される枠です。

記事を開いた時には枠が閉じているので、見たい人だけが見る枠と覚えましょう。

具体的には、情報としてはあった人がいいけど「見出しの文量が多くなってしまう」「知っている人には不要な情報」といった時に使います。

記事は情報をコンパクトにまとめて見た目をスッキリさせるのが理想なので、入れたいけどボリュームが多くなるといった状況で便利な枠です。

<!-- wp:loos/accordion {"metadata":{"categories":["swell-custom-patterns"],"patternName":"swell-patterns/parts-65","name":"アコーディオン"},"className":"u-mb-ctrl u-mb-40"} -->
<div class="swell-block-accordion u-mb-ctrl u-mb-40"><!-- wp:loos/accordion-item -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label"><span data-icon="LsChevronDown" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjIuOSAzMy0xMy0xMy4xYy0uOC0uOC0uOC0yIDAtMi44LjgtLjggMi0uOCAyLjggMEwyNCAyOC40bDExLjMtMTEuM2MuOC0uOCAyLS44IDIuOCAwIC44LjguOCAyIDAgMi44TDI1LjEgMzNjLS42LjYtMS42LjYtMi4yIDB6Ij48L3BhdGg+PC9zdmc+)" aria-hidden="true" class="swl-inline-icon"> </span>タイトル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p>ここに書く</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

FAQ枠

FXとは簡単に言うと何ですか？

FXとは外国為替証拠金取引のことで、外貨預金と同じように外貨に投資する商品です。

FXはギャンブルと同じですか？

FX（外国為替証拠金取引）は、必ずしもギャンブルではありません。

しかし、ハイリスク・ハイリターンの取引であるため、ギャンブルのように捉えられることもあります。適切な知識とリスク管理があれば、投資として成立します。

その名通りFAQ（よくある質問）に使用するのがFAQ枠です。

FAQを設置する目的は2つあります。

【FAQを設置する目的】

①読者が疑問に思うであろう質問に回答する
②Googleのリッチリザルト対策で構造化データとして出力

①はブログ記事などでよく見る使い方で、読者の疑問をあらかじめ予想して回答します。

②はSEO対策の一つで、Googleの検索結果のリッチリザルトに表示させるためのテクニックです。

一部WordPressのテーマには、標準で設定されている機能でSWELLではFAQ枠ブロックを選択するとオンオフを設定できます。

少しでもクリックされる可能性を上げるために、WordPressの機能を最大限有効活用しましょう。

<!-- wp:loos/faq {"qIconStyle":"fill-custom","aIconStyle":"fill-main","outputJsonLd":true,"metadata":{"categories":["swell-custom-patterns"],"patternName":"swell-patterns/parts-66","name":"FAQ"},"className":"u-mb-ctrl u-mb-40 is-style-default"} -->
<dl class="swell-block-faq u-mb-ctrl u-mb-40 is-style-default" data-q="fill-custom" data-a="fill-main"><!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q"></dt><dd class="faq_a"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q"></dt><dd class="faq_a"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item --></dl>
<!-- /wp:loos/faq -->