全12ケース収録
レイアウトライブラリー
「公開できない」を最短で
解決する型集
生成AIで下書きを量産できても、「見た目が崩れて公開できない」で止まるケースは少なくありません。
特に金融・不動産・士業は、情報の正確さに加えて「信頼感のある見せ方」が求められます。
そこで、現場で頻発する「崩れ」を12ケースに整理し、Before → After（実機確認済み）で「直し方の型」としてまとめました。
目次
- 1.ライブラリーで得られる効果
- 2.よくある崩れ
- 3.レイアウト改善12ケース
- 4.活用方法ご案内
- 5.まとめ
ライブラリーで
得られる効果
公開までのリードタイム
短縮
崩れの修正方針が迷わず決まる
品質の標準化
担当者による品質の違いを減らす
手戻り削減
「この型でいきましょう」で合意が取れる
信頼性の底上げ
見た目の整い＝信頼・ちゃんとしている印象に直結
外注コストの最適化
直す箇所が明確になり、依頼範囲を切り出せる
よくある崩れを、目的別に
分類しています
スマホ崩れ系
テーマ依存・導線系
LIBRARY
レイアウト改善 全12ケース
ビフォー（崩れる例）とアフター（改善例）を比較してご確認ください
ラベル+矢印+説明が横並びで崩壊
ビフォー事例
NISAの非課税枠は年間360万円までで、成長投資枠240万円+つみたて投資枠120万円の併用が可能です。ただし生涯投資枠は1,800万円が上限となり、成長投資枠は最大1,200万円まで。スマホだと説明文が極細になって読みづらい!
何が問題か
スマホで説明文が極細になり、読めなくなる。横並びレイアウトはPC表示を前提としているため、モバイルでは文字幅が確保できない。
アフター事例
NISAの非課税投資枠は年間360万円まで
- 成長投資枠：年間240万円まで
- つみたて投資枠：年間120万円まで
生涯投資枠は1,800万円が上限で、成長投資枠は最大1,200万円まで。どちらも併用可能です。
✓ 改善ポイント
- 縦積みレイアウトに変更 ― ラベル→結論→補足の順で縦に並べ、スマホでも読みやすく
- 説明文に十分な幅を確保 ― 横並びを避けて1行の文字数を最適化
- 矢印を視覚的な区切りに ― 装飾的な矢印ではなく、余白やボーダーで情報の階層を明確に
余白がバラバラで間延びして読みにくい
ビフォー事例
投資の基本
投資を始める前に、まず緊急資金を確保しましょう。
分散投資の重要性
一つの銘柄に集中するのはリスクが高いです。
長期投資のメリット
時間を味方につけることで複利効果が期待できます。段落間の余白が統一されていないため、リズムが悪く読みづらい!
何が問題か
段落間の余白が統一されておらず、リズムが悪く読みづらい。見出しと本文の距離もバラバラで、情報の区切りが不明確。
アフター事例
投資の基本
投資を始める前に、まず緊急資金を確保しましょう。
分散投資の
重要性
一つの銘柄に集中するのはリスクが高いです。
長期投資の
メリット
時間を味方につけることで複利効果が期待できます。
✓ 改善ポイント
- 余白ルールを3種類に統一 ― セクション間(40-60px)、段落間(20-24px)、行間(1.7-1.9)で一貫性を
- 見出しと本文の距離を固定 ― 見出し直下は0.5-0.8em、見出し前は1.5-2emなど明確に
- モバイルでは余白を1.2-1.5倍に ― 指でスクロールしやすいよう、PCより余白を広めに取る
強調が多すぎて要点が分からない(マーカー地獄)
ビフォー事例
NISAは税金がかからないお得な制度で、 年間360万円まで投資できます。 成長投資枠と つみたて投資枠があり、 併用可能です! 生涯投資枠は1,800万円なので、 計画的に使いましょう。
何が問題か
マーカー・太字・色文字が乱用され、本当に重要な部分が埋もれる。強調が多すぎると全体がうるさくなり、逆に何も目立たなくなる。
アフター事例
NISAは運用益・分配金等に課税されないというメリットのある制度です。
年間投資上限は360万円で、成長投資枠とつみたて投資枠の併用が可能。
ただし生涯投資枠は1,800万円なので、計画的に活用しましょう。
✓ 改善ポイント
- 強調は3種類まで ― 重要(黄マーカー)、注意(赤文字)、補足(グレー背景)など、役割を明確に分ける
- 1段落に強調は2-3箇所まで ― 多用すると全体がうるさくなり、本当に重要な部分が埋もれる
- 装飾よりも構造で伝える ― 重要ポイントは別ボックスに、注意事項はアラートボックスに分離
見出し直下が長文で、章の入口が弱い
ビフォー事例
iDeCoの特徴とメリット
iDeCo(個人型確定拠出年金)は、老後資金を自分で準備するための制度です。掛金は全額所得控除の対象となり、運用益も非課税、受取時も退職所得控除や公的年金等控除が適用されるため、税制優遇が非常に大きいのが特徴です。ただし、原則60歳まで引き出せないため、長期的な資金計画が必要になります。掛金は月5,000円から始められ、年単位で変更も可能。運用商品は定期預金、保険、投資信託など多様で、自分のリスク許容度に応じて選択できます。
何が問題か
いきなり長文が始まり、読者がこの章で何を得られるか分からない。スクロールしないと全体像が見えず、離脱の原因になる。
アフター事例
iDeCoの特徴とメリット
この章で分かること
- 掛金の全額所得控除で税金が安くなる
- 運用益も非課税で効率的に資産形成
- 60歳まで引き出せない点に注意
iDeCo(個人型確定拠出年金)は、老後資金を自分で準備するための制度です。最大の特徴は3段階の税制優遇です。
掛金は月5,000円から始められ、年単位で変更可能です。
運用商品は定期預金、保険、投資信託など多様で、自分のリスク許容度に応じて選択できます。
✓ 改善ポイント
- 要点ボックスを見出し直下に配置 ― 「この章で分かること」を3-4行でまとめ、読む価値を即座に伝える
- 最初の段落は3-4行まで ― 導入は簡潔に、詳細は次の段落以降で展開するメリハリを
- 視覚的な休憩ポイントを作る ― 長文は途中で小見出しやリスト、ボックスで分割して読みやすく
箇条書きが長すぎて
「だらだら」
ビフォー事例
投資信託を選ぶ際の
チェックポイント
- 運用会社の信頼性と実績を確認すること
- 信託報酬(運用管理費用)が低いかどうか
- 純資産総額が30億円以上あるか
- 設定来のリターンと最大下落率
- 投資対象の地域と資産クラス
- 為替ヘッジの有無
- 分配金の方針(再投資型か分配型か)
- 購入時手数料がかからないか(ノーロードか)
- 信託財産留保額の有無
- 運用方針がインデックス型かアクティブ型か
- 組入銘柄の分散状況
- リバランスの頻度
- 税金の扱い(特定口座対応か)
- SBI証券、楽天証券などで購入できるか
何が問題か
10項目以上の羅列で、重要なポイントが分からなくなる。どれを優先すべきか判断できず、結局全部覚えられない。
アフター事例
投資信託を選ぶ際の
チェックポイント
コスト面
- 信託報酬が0.5%以下(インデックスなら0.2%以下)
- 購入時手数料がかからないノーロード商品
- 信託財産留保額の有無を確認
リスク・実績面
- 純資産総額が30億円以上
- 設定来のリターンと最大下落率
- 投資対象の地域と資産クラス
利便性
- 主要ネット証券(SBI・楽天など)で購入可能
- 特定口座に対応しているか
✓ 改善ポイント
- 1つのリストは3-5項目まで ― それ以上は小見出しで分類(コスト/リスク/利便性など)してグループ化
- 重要な3つだけ残してカード化 ― 詳細情報は別セクションやアコーディオンに格納
- 各項目に1-2行の説明を追加 ― 単なる羅列ではなく、なぜ重要かを補足することで読む価値を高める
カードの高さがバラバラでガタガタ
ビフォー事例
NISA
税金がかからない。
iDeCo
掛金が全額所得控除になり、運用益も非課税。受取時も税制優遇がある。ただし60歳まで引き出せない。掛金上限は職業によって異なり、自営業者は月68,000円まで。
つみたてNISA
長期・積立・分散投資に適した投資信託が対象で、年間40万円まで投資可能。最長20年間非課税。
特定口座
確定申告が不要。
何が問題か
情報量の違いでカードの高さが揃わず、見た目がガタつく。スマホでは2カラムが狭くなり、さらに読みづらくなる。
アフター事例
NISA
税金がかからない投資制度。年間360万円まで投資可能で、非課税期間は無期限。
iDeCo
掛金が全額所得控除になり、運用益も非課税。受取時も税制優遇があるが、60歳まで引き出せない。
つみたてNISA
長期・積立・分散投資に適した投資信託が対象。年間40万円まで投資可能で、最長20年間非課税。
特定口座
証券会社が税金計算を代行してくれるため、確定申告が不要。源泉徴収あり・なしを選択可能。
✓ 改善ポイント
- モバイルは1カラムに ― スマホでは縦1列にして高さの違いを目立たなくする
- 文字数を揃える ― 各カード50-80字程度に統一、または高さ調整CSS(min-height)を使用
- 情報の粒度を統一 ― 「結論だけ」「詳細説明」など、各カードの情報量レベルを揃える
2カラム(左右並び)がスマホで破綻
ビフォー事例
長期投資のポイント
時間を味方につけることで、複利効果を最大限に活用できます。短期的な値動きに一喜一憂せず、10年以上の視点で運用を続けることが重要です。スマホだと文字が極小になって読めない!
何が問題か
画像と説明文が横並びのまま、スマホで文字が極小になる。flex: 1で均等分割すると、テキスト領域が狭くなりすぎる。
アフター事例
長期投資のポイント
時間を味方につけることで、複利効果を最大限に活用できます。
短期的な値動きに一喜一憂せず、10年以上の視点で運用を続けることが重要です。
✓ 改善ポイント
- メディアクエリで縦積みに ― 768px以下では画像→説明の順に縦並びレイアウトに切り替え
- 画像サイズを最適化 ― スマホでは幅100%、PCでは50%など、デバイスに応じた表示サイズに
- flex-direction: columnを活用 ― CSSで簡単にモバイル対応できる構造を最初から設計
表(table)が横にはみ出す/潰れて読めない
ビフォー事例
※ スマホ幅に収めようとすると縦長に…
新NISA（成長）
- 年間上限
- 240万円
- 非課税期間
- 無期限
- 対象商品
- 上場株式、投資信託
- 引出し制限
- なし
新NISA（つみたて）
- 年間上限
- 120万円
- 非課税期間
- 無期限
- 対象商品
- 長期積立向け投信
- 引出し制限
- なし
iDeCo（会社員）
- 年間上限
- 27.6万円
- 非課税期間
- 受取時まで
- 対象商品
- 定期預金、保険、投信
- 引出し制限
- 60歳まで不可
↑ カード形式だと比較しづらく、一覧性が低い
何が問題か
スマホ幅に収めようとすると縦長カードになり、制度同士の比較がしづらくなる。一覧性が失われ、ユーザーが何度もスクロールする必要がある。
アフター事例
| 制度名 | 年間上限 | 非課税期間 | 対象商品 | 引出し制限 |
|---|---|---|---|---|
| 新NISA(成長) | 240万円 | 無期限 | 上場株式、投資信託 | なし |
| 新NISA(つみたて) | 120万円 | 無期限 | 長期積立向け投信 | なし |
| iDeCo(会社員) | 27.6万円 | 受取時まで | 定期預金、保険、投信 | 60歳まで不可 |
※ スマホでは左右にスワイプできます
✓ 改善ポイント
- 横スクロール対応 ― tableをdiv(overflow-x: auto)で囲み、スマホでスワイプできるように
- カード型に変換 ― 3項目以上の表はモバイルで縦型カードリストに組み替え
- 重要列だけ残す ― スマホでは「制度名」「上限額」「引出し制限」など必須情報のみに絞る
吹き出しがテーマ依存で
崩れる
ビフォー事例
ポイント: 長期投資では時間分散の効果が期待できます。毎月一定額を積み立てましょう。
注意: テーマ更新したら吹き出しの形が変わってレイアウト崩壊！しっぽの位置がズレて見た目が台無しに…
何が問題か
テーマ更新で装飾ボックスの形が変わり、レイアウト崩壊。テーマ独自クラスに依存すると、更新のたびに確認作業が必要になる。
アフター事例
ポイント
長期投資では時間分散の効果が期待できます。毎月一定額を積み立てることで、価格変動リスクを軽減できます。
注意
投資には元本割れのリスクがあります。余裕資金の範囲で無理のない金額から始めましょう。
✓ 改善ポイント
- カスタムHTMLに置き換え ― テーマ独自のクラスに依存せず、自前のシンプルなHTML+CSSで実装
- インラインスタイルは最小限に ― 専用CSSファイルで管理し、変更時の影響範囲を限定
- 装飾は控えめに ― アイコンや吹き出しよりも、背景色とボーダーだけのシンプルなボックスの方が安定
CTAが唐突で「売り込み感」が出る
ビフォー事例
iDeCoは税制優遇が大きいため、老後資金準備に有効な制度です。掛金は全額所得控除となり、運用益も非課税で受け取れます。
今すぐお問い合わせ!
次は、つみたてNISAとの併用について説明します…
何が問題か
記事の流れを無視した突然のCTAで、読者が引いてしまう。「まだ読んでるのに売り込まれた」という印象を与える。
アフター事例
iDeCoは税制優遇が大きいため、老後資金準備に有効な制度です。掛金は全額所得控除となり、運用益も非課税で受け取れます。
こんな方におすすめ
- 老後資金を効率的に準備したい
- 所得税・住民税を節税したい
- 60歳まで使わない余裕資金がある
iDeCoについてもっと詳しく知りたい方へ
無料ガイドをダウンロード
✓ 改善ポイント
- 「次のアクション」を挟む ― CTA前に「こんな人におすすめ」「まず何をすべきか」などワンクッション入れる
- ソフトCTAで段階的に ― 「詳しく知りたい方へ」→「資料請求」→「無料相談」と温度感を上げていく
- 文脈に合わせた配置 ― 記事の結論部分や、読者の疑問が解決した直後など、自然なタイミングで提示
スマホで行間・文字サイズが読みにくい
ビフォー事例
投資信託を選ぶ際は、まず自分の投資目的とリスク許容度を明確にすることが重要です。老後資金なのか、教育資金なのか、目的によって選ぶべき商品は変わってきます。
次に、信託報酬などのコストを確認しましょう。長期投資では、わずかなコスト差が最終的なリターンに大きな影響を与えます。インデックスファンドなら0.1%台、アクティブファンドでも1%以内が目安です。
また、純資産総額が30億円以上あるかもチェックポイントです。純資産が少ないと繰上償還のリスクがあり、運用効率も悪くなる可能性があります。スマホで読むと文字が詰まって息苦しい!
何が問題か
文字が詰まって息苦しく、長文を読む気が失せる。行間が狭いと目が疲れやすく、離脱率が上がる。
アフター事例
投資信託を選ぶ際は、まず自分の投資目的とリスク許容度を明確にすることが重要です。
老後資金なのか、教育資金なのか、目的によって選ぶべき商品は変わってきます。
次に、信託報酬などのコストを確認しましょう。長期投資では、わずかなコスト差が最終的なリターンに大きな影響を与えるケースが多いです。
インデックスファンドなら0.1%台、アクティブファンドでも1%以内が目安です。
また、純資産総額が30億円以上あるかもチェックポイントです。
純資産が少ないと繰上償還のリスクがあり、運用効率も悪くなる可能性があります。
✓ 改善ポイント
- 行間は1.7-1.9に ― スマホでの可読性を高めるため、PC(1.6-1.7)より広めの行間設定に
- フォントサイズは16px以上 ― スマホでは最低16px、理想は17-18pxで目の負担を軽減
- 段落間余白を確保 ― 1.5-2em程度の余白で視覚的な呼吸スペースを作る
画像のキャプション・余白・比率がバラバラ
ビフォー事例
図1: NISA投資枠の内訳
複利効果のイメージ図
何が問題か
画像サイズ・キャプションスタイルが不統一で、素人感が出る。記事全体の品質が低く見え、信頼性を損なう。
アフター事例
図1: NISA投資枠の内訳(成長投資枠240万円+つみたて投資枠120万円)
図2: 長期投資における複利効果の推移
図3: 積立投資による資産推移のシミュレーション
✓ 改善ポイント
- 画像サイズを2-3パターンに統一 ― 全幅(100%)、中サイズ(70-80%)、小サイズ(50-60%)などルール化
- キャプションスタイルを固定 ― フォントサイズ、色、余白を統一(例: 0.85em、#666、上5px下15px)
- 画像ブロック全体を統一 ― 上下余白30px、角丸5px、ボーダー1px #eeeなど、一貫したスタイルを適用
HOW TO USE
活用方法
ライブラリーは単なる実例集ではなく、社内の共通言語として使えます
社内チェックの
共通言語に
「このパートは表の横スクロール型で統一しよう」―― こう言えるだけで、制作のブレが減って「管理が楽」になります。
外注・内製の
切り分けに
本文は社内で作り、崩れやすいパーツだけ外注。ライブラリーを見ると「どこを切り出せばいいか」が明確になります。
ラフ合意が
早くなる
初回のラフ提案時に、ライブラリーの該当ケースを2〜3点提示して合意を取ると、完成後の「イメージと違う」をほぼ潰せます。
以下のどれかが
当てはまれば
ライブラリーの
価値が伝わります
金融・不動産・士業は、内容だけでなく「見た目の信頼」が
成約に直結します。
レイアウトの崩れは、専門性以前に「この会社大丈夫？」の
印象を生みます。
まずは「崩れない・読みやすい」を標準化することが、
最短の改善です。