ブログ記事
- AI出力
- スクロールコンテナ
- Next.js
- Tailwind
- 比較記事
- UI実装
- 可読性
長文AI出力をスクロールコンテナで読みやすくする方法
"比較記事で複数AIの出力を全文掲載すると縦に伸びすぎる問題を、max-heightとoverflow-yのスクロールコンテナで解決する手順を実測ベースで解説。モバイル確認のポイントも紹介します。"
複数のAIに同じ質問をして回答を比較する記事を書いていると、出力をそのまま全文貼り付けたくなる場面があります。要約してしまうと「実際に何を答えたか」という再現性が落ちてしまうためです。
ただ、4つ・5つのAIの回答を全文そのまま並べると、ページが非常に長くなり、読者が結論にたどり着く前にスクロール疲れしてしまいます。筆者も比較記事を書く中で同じ問題にぶつかったので、その対策を1分Tipsとしてまとめます。
今日の結論
- 複数AIの出力を全文比較する記事では、出力ブロックをスクロールコンテナに収めると可読性を保ちやすいです
- 実装は
max-height+overflow-y: autoを指定するだけで、Markdown内に直接HTMLを書いても動作します- モバイルでは意図しない横スクロールが出ていないか必ず確認します
- 要約はコンテナの外に1〜3行で置き、全文を読みたい人だけコンテナ内をスクロールしてもらう構成にします
比較記事の出力が縦に伸びてしまう問題
比較記事で各AIの回答を要約せず全文掲載すると、検証可能性は上がりますが、その分ページの縦の長さも比例して伸びていきます。原因は「全文掲載による再現性の確保」と「ページ全体の可読性」が両立しにくいことにあります。要約すれば短くなりますが、それでは「結局どちらが良かったのか」を読者自身の目で確認できなくなってしまいます。
そこで、全文は残したまま、出力部分だけを見た目の上で短くまとめる方法として、スクロール可能なコンテナが使えます。
スクロールコンテナで囲む手順
手順はシンプルです。
- 長文の出力ブロックを
max-heightとoverflow-y: autoを指定したコンテナで囲む - コンテナの高さは300〜400px程度を目安にし、スクロールバーがあることが一目で分かる高さに調整する
- 重要な要約（結論や比較表）はコンテナの外に1〜3行で書く
HTMLで直接書く場合の例です。
<div style="max-height: 360px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px;">
<!-- ここに長文の出力をそのまま貼り付ける -->
</div>
Tailwindを使っている場合は、同じ見た目を次のようなクラスで再現できます（実際のコンポーネント化はCursor側での実装が前提です）。
max-h-[360px] overflow-y-auto rounded-lg border border-slate-200 p-4
チェックリスト
| 項目 | 確認内容 |
|---|---|
| 高さ | 300〜400px程度で、スクロールバーが視認できるか |
| 要約 | コンテナの外に1〜3行の結論が置かれているか |
| 配色 | 背景・枠線がサイトの白背景トーンに合っているか |
| 横スクロール | コンテナ内で意図しない横スクロールが出ていないか |
モバイルでの確認ポイント
PCの画面で見た目が整っていても、モバイル幅では崩れることがあります。実機、または画面幅375px程度の表示で確認するのがおすすめです。
特に、コードブロックや長い英単語を含む出力では、コンテナ内で横スクロールが発生しやすい傾向があります(執筆時点の実測)。overflow-x: hidden や word-break: break-word を併用すると、はみ出しが起きにくくなります。スクロールバーがタップでも操作できるか、あわせて確認しておくと安心です。
まとめ
- このテクニックは、比較記事のように全文掲載が必要な場面で特に効果があります。要約すると再現性が下がってしまうケースに限って使うイメージです
- すべての長文ブロックをコンテナに入れる必要はなく、結論や比較表は外に出したままにします
- 比較記事の構成をまとめたテンプレートは現在準備中です。公開時はこの記事の末尾からご案内します
- 関連: 複数AIの出力を比較した記事／MarkdownブログをNext.jsで管理するメリット
- 次に読む: AIにデバッグを頼む時は「整理しすぎない」方がいい
免責
本記事は2026年6月21日時点での実測に基づいています。スクロールの見え方はブラウザやデバイスによって変わる可能性があるため、公開前に実機での確認をおすすめします。また、利用しているNext.js / Tailwindのバージョンによって実装方法が変わる場合があるため、最終的な実装はCursor側の既存コードに合わせてください。