<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使い方 - PCパーツ見積ツール</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
max-width: 900px;
margin: 0 auto;
background-color: #f4f7f6;
color: #333;
}
h1 {
color: #007bff;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
margin-bottom: 25px;
}
h2 {
color: #28a745;
margin-top: 30px;
border-left: 5px solid #28a745;
padding-left: 10px;
}
h3 {
color: #333;
margin-top: 20px;
}
.section {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.warning {
background-color: #ffe5e5;
border: 1px solid #dc3545;
padding: 15px;
border-radius: 5px;
color: #dc3545;
font-weight: bold;
margin-top: 20px;
}
code {
background-color: #eee;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1><i class="fas fa-book"></i> PCパーツ見積作成ツールの使い方</h1>
<div class="warning">
<h2>【重要】価格に関する免責事項</h2>
<p>本ツールは、お客様のPC構成検討のための<strong>「見積作成」</strong>を目的としています。以下の点にご注意ください。</p>
<ul>
<li><strong>表示価格について:</strong> ツールに表示される価格は、データインポート時（CSVファイル）の静的な価格であり、リアルタイム価格ではありません。</li>
<li><strong>実際の販売価格:</strong> 実際の販売価格は、各製品カードにある「購入する」ボタンのリンク先（Amazonなど）で**必ず**ご確認ください。</li>
<li><strong>価格の責任:</strong> 本ツールは価格変動に関する責任を一切負いません。最終的な購入決定は、お客様ご自身の判断とリンク先の情報に基づいて行ってください。</li>
</ul>
</div>
<div class="section">
<h2>1. 見積作成の流れ</h2>
<ol>
<li><strong>パーツの選択:</strong> 画面左側のカテゴリ一覧から、PCケース、CPU、マザーボードなど、必要なパーツを選択します。</li>
<li><strong>プレビュー確認:</strong> 選択したパーツは画面右側のプレビューパネルに反映され、合計金額が自動で計算されます。</li>
<li><strong>構成の保存:</strong> 気に入った構成は「構成を保存」ボタンで記録しておき、後で比較・復元できます。</li>
<li><strong>見積書の出力:</strong> 「見積書をエクスポート (CSV)」ボタンで、現在の構成をCSVファイルとしてダウンロードできます。（Excelで開くと購入リンクが機能します。）</li>
</ol>
</div>
<div class="section">
<h2>2. 管理機能（製品データの更新）</h2>
<p>新しい製品を追加したり、価格を更新したりする場合に使用します。JavaScriptファイルを直接編集する必要はありません。</p>
<h3>製品データのエクスポート/インポート</h3>
<ol>
<li><strong>エクスポート:</strong> 管理パネルの「製品データのエクスポート (CSV)」をクリックし、現在の製品データをダウンロードします。</li>
<li><strong>編集:</strong> ダウンロードしたCSVファイルをExcelなどで開き、新しい行を追加したり、既存製品の価格やスペック、アフィリエイトURLを更新したりします。</li>
<li><strong>インポート:</strong> 編集したCSVファイルを「データのインポート (CSV)」エリアにドラッグ＆ドロップまたはアップロードします。</li>
</ol>
<p><strong>注:</strong> インポート時、同じ「カテゴリ」と「製品名」の組み合わせの製品は、新しいデータで上書き（更新）されます。</p>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.