<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>研究テーマ 記録カード</title>
<style>
body {
background-color: #f4f6f9;
font-family: 'Helvetica Neue', Arial, sans-serif;
padding: 40px 20px;
display: flex;
justify-content: center;
}
/* カード全体のスタイル */
.research-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 640px; /* 1000文字が一番読みやすい横幅 */
padding: 24px;
border: 1px solid #e1e8ed;
transition: transform 0.2s, box-shadow 0.2s;
}
.research-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
/* メタ情報（タグや日付） */
.card-meta {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.tag {
background: #eef2ff;
color: #4f46e5;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: bold;
}
.date {
color: #8899a6;
font-size: 0.85rem;
margin-left: auto;
}
/* タイトル */
.card-title {
font-size: 1.4rem;
color: #1a1a1a;
margin: 0 0 16px 0;
font-weight: 700;
line-height: 1.4;
}
/* 本文エリア（ここが伸縮します） */
.card-body-wrapper {
position: relative;
max-height: 120px; /* 初期状態の高さ（3〜4行分） */
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}
/* 長文（1000文字）の本文スタイル */
.card-body {
font-size: 0.95rem;
color: #333333;
line-height: 1.7; /* 行間を広げて視覚的負荷を軽減 */
margin: 0;
}
.card-body p {
margin-bottom: 16px;
}
.card-body h4 {
font-size: 1.1rem;
color: #1a1a1a;
margin: 24px 0 8px 0;
border-left: 4px solid #4f46e5;
padding-left: 8px;
}
/* 下部を薄く消すグラデーション（閉じてる時だけ表示） */
.card-body-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(transparent, #ffffff);
transition: opacity 0.3s;
pointer-events: none;
}
/* 開いたときのスタイル変更 */
.research-card.is-open .card-body-wrapper {
max-height: 2000px; /* 十分な高さに広げる */
}
.research-card.is-open .card-body-wrapper::after {
opacity: 0; /* グラデーションを消す */
}
/* ボタン */
.toggle-btn {
display: block;
width: 100%;
background: none;
border: none;
color: #4f46e5;
font-weight: bold;
font-size: 0.9rem;
padding: 12px 0 0 0;
margin-top: 8px;
cursor: pointer;
border-top: 1px dashed #e1e8ed;
text-align: center;
}
.toggle-btn:hover {
color: #3730a3;
}
</style>
</head>
<body>
<!-- カード本体 -->
<div class="research-card" id="myCard">
<div class="card-meta">
<span class="tag">HCI分野</span>
<span class="tag">妄想フェーズ</span>
<span class="date">2026/07/30</span>
</div>
<h3 class="card-title">生成AIを活用した「ブレスト自動ファシリテーション」型デスクライトの提案</h3>
<!-- 伸縮する本文コンテナ -->
<div class="card-body-wrapper">
<div class="card-body">
<p><strong>【背景と目的】</strong>
研究室やオフィスでの個人ブレインストーミングにおいて、一人でアイデアを出し続けるのには限界があり、思考が煮詰まりやすいという課題がある。本研究では、ユーザーが机に向かって独り言をつぶやいたり、ノートに文字を書いたりする動作をトリガーに、適切な問いかけやヒントを光と音声で提示するスマートデスクライトを提案する。</p>
<h4>1. システムの概要とアプローチ</h4>
<p>本システムは、デスクライトの筐体に小型カメラ、マイク、そしてプロジェクターまたは指向性LEDを内蔵する。ユーザーが「うーん、どうしようか」と呟いた声を認識すると、生成AI（LLM）が文脈を解析。「例えば、逆に考えてみたら？」や「ターゲットを学生に絞るとどうなる？」といった、思考のフレームワークに基づいた問いかけを音声で返す。また、机の上に付箋のような光の枠を投影し、そこにキーワードを文字として浮かび上がらせる視覚的アシストも行う。</p>
<h4>2. 1000文字を想定した長文の展開</h4>
<p>従来のチャットボットによるアイデア支援と異なり、本システムは「日常の家具（照明）」に擬態している点が新しい。画面を覗き込む必要がないため、ユーザーは手元の思考ノートに集中したまま、まるで『優秀な壁』と会話しているかのような感覚でブレストを継続できる。これにより、PCを開くことで発生する「SNSを見てしまう」といった誘惑や、集中力の途切れを防ぐことが可能となる。</p>
<h4>3. 今後の評価実験計画</h4>
<p>プロトタイプを作成後、研究室のメンバー10名を対象に比較実験を行う。通常のデスク環境で30分間ブレストを行った場合と、本システム稼働下でブレストを行った場合で、出されたアイデアの「量（件数）」と「多様性（カテゴリの広がり）」を測定する。また、アンケート調査により、システムからの問いかけが「思考の邪魔になったか」「心地よい刺激になったか」の心理的負荷を評価する。将来的には、複数人の会議にも応用し、発言が少ない人を光で優しく促すようなファシリテーション機能の追加も目指している。</p>
</div>
</div>
<button class="toggle-btn" id="toggleBtn">続きを読む</button>
</div>
<!-- 動きをつけるJavascript -->
<script>
const card = document.getElementById('myCard');
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
card.classList.toggle('is-open');
if (card.classList.contains('is-open')) {
btn.textContent = '閉じる';
} else {
btn.textContent = '続きを読む';
}
});
</script>
</body>
</html>