記事内リストスタイル適用提案書
概要
全記事から81箇所のリスト適用候補を特定しました。これらをガラスモーフィズム風のリストボックスに変換することで、視認性と統一感を向上させます。
適用優先度
🔴 高優先度(即座に適用推奨)
以下のような重要な情報を含むリストは、優先的にリストボックスを適用してください:
- 特徴・メリットの列挙(例:U-22プランの特徴、サービスのメリット)
- 比較項目(例:価格帯別の特徴、ブランド比較)
- 手順・プロセス(例:オーダープロセス、購入手順)
- 推奨事項(例:TPO別の選び方、おすすめブランド)
🟡 中優先度(適宜適用)
- FAQ内のリスト(回答内の箇条書き)
- 会社情報(役員情報、所在地など)
- 統計情報(数値の列挙)
🟢 低優先度(必要に応じて)
- 短いリスト(2項目以下)
- 本文中の補足的なリスト
適用例
例1: 特徴・メリットのリスト
変換前:
* **キャリアの門出にふさわしいスタイル提案**(就活、入学式、インターン)
* **ハレの日を彩る品格あるデザイン**(成人式、結婚式参列)
* **東京・麹町のプライベートサロンでの特別な採寸体験**
変換後:
<div class="list-box">
<div class="list-box__title">U-22限定プランの特徴</div>
<ul>
<li><strong>キャリアの門出にふさわしいスタイル提案</strong>(就活、入学式、インターン)</li>
<li><strong>ハレの日を彩る品格あるデザイン</strong>(成人式、結婚式参列)</li>
<li><strong>東京・麹町のプライベートサロンでの特別な採寸体験</strong></li>
</ul>
</div>
例2: 比較項目のリスト
変換前:
* **特徴**: 既製の型紙(ゲージ)を試着し、そこから着丈や袖丈などを調整します。
* **なぜ安いか**: 根本的な体型補正(猫背、撫で肩など)は行わず、既製品の延長線上で作るため、工数とコストを最小限に抑えられます。
* **メリット**: とにかく安い。既製品よりは体に合う。
* **デメリット(まずい点)**:
1. 根本的な体型補正ができないため、体型が平均から外れていると**「オーダーなのにフィットしない」**事態が起こり得ます。
2. 内部の芯地(骨格)が熱で貼る「接着芯」が主流で、耐久性が低く、**型崩れしやすい**です。
変換後:
<div class="list-box list-box--highlight">
<div class="list-box__title">2万円〜5万円スーツの特徴</div>
<ul>
<li><strong>特徴</strong>: 既製の型紙(ゲージ)を試着し、そこから着丈や袖丈などを調整します。</li>
<li><strong>なぜ安いか</strong>: 根本的な体型補正(猫背、撫で肩など)は行わず、既製品の延長線上で作るため、工数とコストを最小限に抑えられます。</li>
<li><strong>メリット</strong>: とにかく安い。既製品よりは体に合う。</li>
<li><strong>デメリット(まずい点)</strong>:
<ol>
<li>根本的な体型補正ができないため、体型が平均から外れていると<strong>「オーダーなのにフィットしない」</strong>事態が起こり得ます。</li>
<li>内部の芯地(骨格)が熱で貼る「接着芯」が主流で、耐久性が低く、<strong>型崩れしやすい</strong>です。</li>
</ol>
</li>
</ul>
</div>
例3: 手順・プロセスのリスト
変換前:
1. **2〜4万円台**
パターンオーダー中心で、基本的なサイズ調整が可能。
2. **5〜10万円台**
高品質なパターンオーダーまたはイージーオーダーが可能。
3. **10万円以上(フルオーダー)**
完全な個別対応で、最高のフィット感を実現。
変換後:
<div class="list-box">
<div class="list-box__title">価格帯別の特徴</div>
<ol>
<li><strong>2〜4万円台</strong><br>
パターンオーダー中心で、基本的なサイズ調整が可能。</li>
<li><strong>5〜10万円台</strong><br>
高品質なパターンオーダーまたはイージーオーダーが可能。</li>
<li><strong>10万円以上(フルオーダー)</strong><br>
完全な個別対応で、最高のフィット感を実現。</li>
</ol>
</div>
適用ガイドライン
タイトルの付け方
リストボックスには、内容を明確に示すタイトルを付けてください:
- ✅ 良い例:「U-22限定プランの特徴」「価格帯別の比較」「推奨される選び方」
- ❌ 悪い例:「リスト」「項目」「以下」
強調リストの使用
重要な情報(価格比較、注意事項など)には list-box--highlight クラスを使用:
<div class="list-box list-box--highlight">
<!-- 重要な内容 -->
</div>
コンパクトリストの使用
短い項目や補足的な情報には list-box--compact クラスを使用:
<div class="list-box list-box--compact">
<!-- コンパクトな内容 -->
</div>
適用スケジュール提案
Phase 1: 高優先度箇所(約30箇所)
- 特徴・メリットのリスト
- 比較項目のリスト
- 手順・プロセスのリスト
Phase 2: 中優先度箇所(約40箇所)
- FAQ内のリスト
- 会社情報のリスト
- 統計情報のリスト
Phase 3: 低優先度箇所(約11箇所)
- 短いリスト
- 補足的なリスト
注意事項
- 過度な使用を避ける: 1つの記事内でリストボックスを多用すると、視覚的なノイズになります
- コンテキストを考慮: リストボックスは視覚的に目立つため、重要な情報に使用してください
- 統一性を保つ: 同じタイプの情報は同じスタイルを使用してください