METACOGNITIVE JOURNAL 免責事項と運用方針
<!-- Chosen Palette: Zen Stone (Warm Neutrals) -->
<!-- Application Structure Plan:
1. Modal Overlay: Forces 'Self-Responsibility' acknowledgement immediately.
2. Hero Section: Introduces the blog's philosophy (Metacognition in Trading).
3. Context Demo: A 'Daily Log' visualization showing P/L vs Mental State. This provides context for WHAT is being disclaimed.
4. Disclaimer Core: The specific legal text requested, broken into digestible interactive cards.
5. Footer: Copyright and static links.
-->
<!-- Visualization & Content Choices:
- Chart.js Line/Bar Combo: To show the relationship between trading results and mental state, reinforcing the 'Journal' aspect.
- Interactive Disclaimer Cards: To make heavy legal text readable and organized.
- Modal: Standard compliance UI pattern for financial blogs.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #f5f5f4; /* stone-100 */
color: #44403c; /* stone-700 */
}
h1, h2, h3, .serif {
font-family: 'Noto Serif JP', serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
height: 350px;
max-height: 400px;
}
.glass-panel {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.modal-enter {
opacity: 0;
transform: scale(0.95);
}
.modal-enter-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms, transform 300ms;
}
.modal-exit {
opacity: 1;
transform: scale(1);
}
.modal-exit-active {
opacity: 0;
transform: scale(0.95);
transition: opacity 300ms, transform 300ms;
}
</style><!-- Modal Overlay for Disclaimer Agreement -->
<div id="disclaimerModal" class="fixed inset-0 z-50 flex items-center justify-center bg-stone-900 bg-opacity-60 backdrop-blur-sm p-4">
<div class="bg-white rounded-lg shadow-2xl max-w-lg w-full overflow-hidden border border-stone-200">
<div class="p-6 bg-stone-50 border-b border-stone-100">
<h2 class="text-xl font-bold serif text-stone-800">サイト閲覧前の確認事項</h2>
</div>
<div class="p-6 space-y-4 text-sm text-stone-600 leading-relaxed max-h-[60vh] overflow-y-auto">
<p>
当ブログ「Metacognitive Journal」（以下、当サイト）をご覧いただく前に、以下の免責事項をご確認ください。
</p>
<div class="bg-red-50 border-l-4 border-red-400 p-4">
<p class="font-bold text-red-700">投資に関する自己責任の原則</p>
<p class="mt-1 text-red-600 text-xs">
当サイトの情報は、管理人個人の記録であり、投資助言ではありません。最終的な投資判断は必ずご自身の責任で行ってください。
</p>
</div>
<p>
当サイトで公開されるFX、先物、株式取引の記録や分析は、学習およびメタ認知（自身の思考プロセスの客観視）を目的としています。
これらは将来の利益を保証するものではなく、市場の変動により損失が生じる可能性があります。
</p>
<p>
当サイトの情報を利用した結果生じたいかなる損害についても、当サイトおよび管理人は一切の責任を負いません。
</p>
</div>
<div class="p-6 bg-stone-50 border-t border-stone-100 flex justify-end">
<button id="agreeBtn" class="bg-stone-800 hover:bg-stone-700 text-white font-medium py-2 px-6 rounded transition-colors shadow-sm">
同意して閲覧する
</button>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="bg-white/80 backdrop-blur-md sticky top-0 z-40 border-b border-stone-200">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold serif text-stone-800 tracking-tight">Metacognitive Journal</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-stone-500 hover:text-stone-800 transition-colors text-sm font-medium">コンセプト</a>
<a href="#journal-sample" class="text-stone-500 hover:text-stone-800 transition-colors text-sm font-medium">記録サンプル</a>
<a href="#disclaimer" class="text-stone-800 border-b-2 border-stone-800 text-sm font-medium">免責事項</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header id="about" class="bg-stone-100 py-16 sm:py-24">
<div class="max-w-4xl mx-auto px-4 text-center">
<h1 class="text-3xl sm:text-5xl font-bold serif text-stone-900 mb-6 leading-tight">
市場と対話し、<br>自己を客観視する。
</h1>
<p class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto leading-relaxed">
相場の波に翻弄されず、自身の思考プロセス（メタ認知）を記録することで、
再現性のあるトレードを目指す個人のジャーナルです。<br>
成功も失敗も、全てを透明なデータとして蓄積します。
</p>
<div class="flex justify-center space-x-4">
<a href="#disclaimer" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-700 bg-stone-200 hover:bg-stone-300 transition-colors">
免責事項を確認
</a>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-20">
<!-- Context Section: What kind of data is posted? -->
<section id="journal-sample">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider text-stone-500 uppercase">Archive Context</span>
<h2 class="text-2xl font-bold serif text-stone-800 mt-2">公開データの性質について</h2>
<p class="mt-4 text-stone-600 max-w-2xl mx-auto">
当ブログでは、日々の損益だけでなく、その時の「感情スコア」や「セットアップの根拠」を記録しています。
これらは個人的な振り返りのためのデータであり、特定の銘柄の推奨を示すものではありません。
</p>
</div>
<!-- Visualization Dashboard -->
<div class="bg-white rounded-xl shadow-sm border border-stone-200 p-6 sm:p-8">
<div class="flex flex-col md:flex-row justify-between items-center mb-6">
<h3 class="text-lg font-medium text-stone-800 flex items-center">
<span class="w-2 h-6 bg-stone-400 mr-3 rounded-sm"></span>
週間パフォーマンスとメンタル相関（サンプル）
</h3>
<div class="flex space-x-2 mt-4 md:mt-0">
<button class="px-3 py-1 text-xs rounded-full bg-stone-100 text-stone-600 hover:bg-stone-200 transition" onclick="updateChart('fx')">FX</button>
<button class="px-3 py-1 text-xs rounded-full bg-white text-stone-500 hover:bg-stone-50 border border-stone-200 transition" onclick="updateChart('futures')">先物</button>
</div>
</div>
<!-- Chart Container -->
<div class="chart-container">
<canvas id="journalChart"></canvas>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-center text-sm">
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-stone-400 text-xs mb-1">勝率 (Win Rate)</span>
<span class="text-xl font-bold text-stone-700">56.2%</span>
</div>
<div class="p-4 bg-stone-50 rounded-lg">
<span class="block text-stone-400 text-xs mb-1">プロフィットファクター</span>
<span class="text-xl font-bold text-stone-700">1.45</span>
</div>
<div class="p-4 bg-stone-50 rounded-lg border border-red-100 bg-red-50/50">
<span class="block text-red-400 text-xs mb-1">注意喚起</span>
<span class="text-xs text-red-700 font-medium">過去の結果は将来を保証しません</span>
</div>
</div>
</div>
</section>
<!-- Disclaimer Section (Primary Content) -->
<section id="disclaimer" class="scroll-mt-24">
<div class="bg-white border-t-4 border-stone-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-8 sm:p-12">
<h2 class="text-3xl font-bold serif text-stone-900 mb-2">免責事項・運営方針</h2>
<p class="text-stone-500 mb-10">
当サイトをご利用いただくにあたり、以下の事項を必ずお読みください。
</p>
<!-- Interactive Accordion for Disclaimer Items -->
<div class="space-y-4" id="disclaimer-accordion">
<!-- Item 1 -->
<div class="border border-stone-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-stone-400">
<button class="w-full flex justify-between items-center p-5 bg-stone-50 hover:bg-stone-100 text-left transition-colors" onclick="toggleAccordion('item1')">
<span class="font-bold text-stone-800">1. 投資判断の自己責任について</span>
<span id="icon-item1" class="text-xl text-stone-400 font-light transform transition-transform">+</span>
</button>
<div id="content-item1" class="hidden bg-white p-6 text-stone-600 leading-7 border-t border-stone-100">
<p>当ブログ「Metacognitive Journal」に掲載されている全ての情報（FX、株式、先物取引に関する記録、チャート分析、市場の見通し等）は、管理人個人の備忘録および学習プロセスを公開するものであり、特定の金融商品の売買を推奨、勧誘、助言するものではありません。</p>
<p class="mt-4 font-medium text-stone-800">投資に関する最終的な決定は、ご自身の判断と責任において行ってください。</p>
<p class="mt-2">当サイトの情報を参考にして行われた取引によって生じたいかなる損害（利益の逸失、資金の減少等を含む）についても、当サイトおよび管理人は一切の責任を負いません。</p>
</div>
</div>
<!-- Item 2 -->
<div class="border border-stone-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-stone-400">
<button class="w-full flex justify-between items-center p-5 bg-stone-50 hover:bg-stone-100 text-left transition-colors" onclick="toggleAccordion('item2')">
<span class="font-bold text-stone-800">2. 情報の正確性と完全性</span>
<span id="icon-item2" class="text-xl text-stone-400 font-light transform transition-transform">+</span>
</button>
<div id="content-item2" class="hidden bg-white p-6 text-stone-600 leading-7 border-t border-stone-100">
<p>当サイトに掲載されている情報については、可能な限り正確を期するよう努めておりますが、その正確性、完全性、最新性、信頼性を保証するものではありません。</p>
<p class="mt-2">市場環境は常に変化しており、記事執筆時点での情報や見解は、予告なく変更または削除されることがあります。また、過去のデータや検証結果が将来の市場動向と一致することを保証するものではありません。</p>
</div>
</div>
<!-- Item 3 -->
<div class="border border-stone-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-stone-400">
<button class="w-full flex justify-between items-center p-5 bg-stone-50 hover:bg-stone-100 text-left transition-colors" onclick="toggleAccordion('item3')">
<span class="font-bold text-stone-800">3. リスクの認識</span>
<span id="icon-item3" class="text-xl text-stone-400 font-light transform transition-transform">+</span>
</button>
<div id="content-item3" class="hidden bg-white p-6 text-stone-600 leading-7 border-t border-stone-100">
<p>FX（外国為替証拠金取引）、先物取引、株式投資等の金融商品取引には、元本割れを含む高いリスクが伴います。レバレッジを利用した取引においては、預託した証拠金以上の損失が発生する可能性もあります。</p>
<p class="mt-2">当サイトの閲覧者は、これらのリスクを十分に理解した上で、ご自身の資産状況や投資経験に合わせて慎重に行動してください。</p>
</div>
</div>
<!-- Item 4 -->
<div class="border border-stone-200 rounded-lg overflow-hidden transition-all duration-200 hover:border-stone-400">
<button class="w-full flex justify-between items-center p-5 bg-stone-50 hover:bg-stone-100 text-left transition-colors" onclick="toggleAccordion('item4')">
<span class="font-bold text-stone-800">4. 外部リンクと広告について</span>
<span id="icon-item4" class="text-xl text-stone-400 font-light transform transition-transform">+</span>
</button>
<div id="content-item4" class="hidden bg-white p-6 text-stone-600 leading-7 border-t border-stone-100">
<p>当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。</p>
<p class="mt-2">また、当サイトの一部にはアフィリエイトプログラム等の広告が含まれる場合がありますが、紹介する商品の購入やサービスの利用に関するトラブルについても責任を負いかねます。</p>
</div>
</div>
</div>
<!-- Summary Statement -->
<div class="mt-10 p-6 bg-stone-100 rounded text-center">
<p class="text-sm text-stone-500 mb-2">制定日: 2024年1月1日</p>
<p class="font-medium text-stone-800">Metacognitive Journal 管理人</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-stone-900 text-stone-400 py-12">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-white text-lg font-bold serif mb-4">Metacognitive Journal</h3>
<p class="text-sm leading-relaxed max-w-xs">
日々のトレード記録を通じて自己の思考を俯瞰するブログ。
</p>
</div>
<div>
<h4 class="text-white text-sm font-bold uppercase tracking-wider mb-4">Categories</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition">FX Trading Log</a></li>
<li><a href="#" class="hover:text-white transition">Futures / Indices</a></li>
<li><a href="#" class="hover:text-white transition">Stock Market</a></li>
<li><a href="#" class="hover:text-white transition">Weekly Reflection</a></li>
</ul>
</div>
<div>
<h4 class="text-white text-sm font-bold uppercase tracking-wider mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#disclaimer" class="hover:text-white transition">免責事項 (Disclaimer)</a></li>
<li><a href="#" class="hover:text-white transition">プライバシーポリシー</a></li>
<li><a href="#" class="hover:text-white transition">お問い合わせ</a></li>
</ul>
</div>
</div>
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-stone-800 text-sm text-center">
© 2024 Metacognitive Journal. All Rights Reserved.
</div>
</footer>
<script>
// --- Modal Logic ---
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('disclaimerModal');
const agreeBtn = document.getElementById('agreeBtn');
const body = document.body;
// Initially prevent scrolling
body.style.overflow = 'hidden';
agreeBtn.addEventListener('click', () => {
// Fade out modal
modal.classList.add('transition-opacity', 'duration-500', 'opacity-0');
setTimeout(() => {
modal.style.display = 'none';
body.style.overflow = ''; // Restore scrolling
}, 500);
});
// Accordion Logic
// Open the first item by default for visibility
toggleAccordion('item1');
});
// --- Accordion Logic ---
function toggleAccordion(id) {
const content = document.getElementById(`content-${id}`);
const icon = document.getElementById(`icon-${id}`);
// Close others (optional, keeping open allows comparison)
// document.querySelectorAll('[id^="content-"]').forEach(el => {
// if(el.id !== `content-${id}`) el.classList.add('hidden');
// });
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.textContent = '−'; // Minus sign
icon.classList.add('text-stone-800');
} else {
content.classList.add('hidden');
icon.textContent = '+'; // Plus sign
icon.classList.remove('text-stone-800');
}
}
// --- Chart Logic ---
let myChart;
function initChart() {
const ctx = document.getElementById('journalChart').getContext('2d');
// Mock Data
const dataFX = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [
{
label: '損益 (P/L pips)',
data: [20, -15, 45, 10, -5],
backgroundColor: 'rgba(120, 113, 108, 0.5)', // Stone-500
borderColor: 'rgba(120, 113, 108, 1)',
borderWidth: 1,
yAxisID: 'y',
type: 'bar',
order: 2
},
{
label: 'メンタルスコア (1-10)',
data: [8, 4, 9, 7, 5],
borderColor: 'rgba(234, 179, 8, 1)', // Yellow-500 (Subtle Gold)
backgroundColor: 'rgba(234, 179, 8, 0.1)',
borderWidth: 2,
tension: 0.4,
yAxisID: 'y1',
type: 'line',
order: 1,
pointBackgroundColor: 'white',
pointBorderWidth: 2,
pointRadius: 4
}
]
};
const config = {
type: 'bar',
data: dataFX,
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: {
position: 'top',
labels: {
font: {
family: "'Noto Sans JP', sans-serif"
},
usePointStyle: true,
}
},
tooltip: {
backgroundColor: 'rgba(68, 64, 60, 0.9)',
titleFont: { family: "'Noto Sans JP', sans-serif" },
bodyFont: { family: "'Noto Sans JP', sans-serif" },
padding: 12,
cornerRadius: 4
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
grid: {
color: '#e7e5e4'
},
title: {
display: true,
text: 'P/L'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10,
grid: {
drawOnChartArea: false,
},
title: {
display: true,
text: 'Mental Score'
}
},
x: {
grid: {
display: false
}
}
}
}
};
myChart = new Chart(ctx, config);
}
// --- Dynamic Chart Update ---
function updateChart(type) {
const btns = document.querySelectorAll('button[onclick^="updateChart"]');
btns.forEach(b => {
b.classList.remove('bg-stone-100', 'text-stone-600');
b.classList.add('bg-white', 'text-stone-500');
});
event.target.classList.remove('bg-white', 'text-stone-500');
event.target.classList.add('bg-stone-100', 'text-stone-600');
if (type === 'fx') {
myChart.data.datasets[0].data = [20, -15, 45, 10, -5];
myChart.data.datasets[1].data = [8, 4, 9, 7, 5];
myChart.data.datasets[0].label = '損益 (P/L pips)';
} else {
// Futures Mock Data
myChart.data.datasets[0].data = [150, 200, -80, 300, 100];
myChart.data.datasets[1].data = [7, 8, 3, 9, 7];
myChart.data.datasets[0].label = '損益 (円/枚)';
}
myChart.update();
}
window.onload = initChart;
</script>
コメント