DESIGN RECIPES

Engineering Design Log

研修サイトの実装に込められた技術的工夫と、デザイン・エンジニアリングの「裏側」を詳細に記録した開発者ノート。

Day 1. AI Start

01. Concept: Accessibility & Trust

Day 1は「AIへの第一歩」というテーマのため、信頼感（Trust）と清潔感（Clarity）を最優先。極端な装飾を避け、情報の読みやすさに特化したAzure Blueのカラーパレットを採用しました。

Video Card Layout

動画セクションは、クリックしやすさを追求したカード形式。ホバー時の box-shadow 変化で奥行きを演出。

css .video-card { transition: transform 0.3s ease; border: 1px solid #e2e8f0; } .video-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }

Persistence Checklist

localStorage を使用して、ユーザーの達成状況をブラウザに保存。再読込しても進捗が維持される設計。

javascript function toggleTask(id) { const state = !JSON.parse(localStorage.getItem(id)); localStorage.setItem(id, state); updateProgressUI(); }

Day 2. Canva Basics

01. Bento Grid Architecture

Canvaの「多機能性」と「直感性」を表現するため、Appleのランディングページなどで使われる **Bento Grid** レイアウトを採用。

css .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 20px; } .bento-item.large { grid-column: span 2; grid-row: span 2; }

02. Interactive Mockups (Magic UI)

実際にCanvaを操作している感覚を持たせるため、CSSだけでCanvaのサイドバーやツールバーを再現した「擬似モックアップ」を配置。

Magic Eraser Animation

「マジック消しゴム」機能を視覚化するため、mask-image と clip-path を組み合わせたワイプアニメーションを実装。

css .magic-swipe { animation: swipe 3s infinite; clip-path: circle(50% at 0% 50%); } @keyframes swipe { to { clip-path: circle(50% at 100% 50%); } }

Stacked Layer UI

重なり順（Z-index）の概念を直感的に理解できるよう、3Dトランスフォーム（rotateY）を用いたレイヤーの視覚化。

Day 3. Prompt Magic

01. UI Sounds (Web Audio API)

プログラムから直接波形を生成する **AudioContext** 実装。 MP3なしで「ポチャッ」「シュッ」という音を0.1秒単位で合成。

javascript const osc = audioCtx.createOscillator(); osc.type = 'triangle'; osc.frequency.setValueAtTime(150, now); osc.frequency.exponentialRampToValueAtTime(40, now + 0.15);

02. Particle Physics (Canvas)

requestAnimationFrame を使用した高精度なパーティクルシミュレーション。重力加速度、摩擦抵抗、不透明度の減衰を毎フレーム計算。

03. Scenario Sandbox (エミュレーション)

「動画を見なくても内容が把握できる」ためのブラウザ・エミュレーションUI。疑似的なプロンプト入力と実行結果の出力をアニメーションで表現。

Typed.js Integration

AIが回答を生成している時の「一文字ずつ表示される」演出を、JSの再帰関数と setTimeout で軽量に再現。

javascript function typeWriter(text, i, target) { if (i < text.length) { target.innerHTML +=text.charAt(i); setTimeout(()=> typeWriter(text, i+1, target), 30); } }

Feather Particle Physics

requestAnimationFrame を使用した高精度なパーティクルシミュレーション。重力加速度、不透明度の減衰を毎フレーム計算。

javascript update() { this.vy += gravity; this.y += this.vy; this.alpha -= 0.01; }

Day 4. Nano Banana Pro Magic

01. Physical Feedback Simulation

学習者が「ミッション完了」の達成感を強く得られるよう、単なるチェックボックスではなく、物理的な「封蝋（ワックスシール）スタンプ」のアニメーションを独自実装しました。音（Web Audio API）と連動させることで、心地よいフィードバック体験を生み出しています。

css @keyframes stampIn { 0% { opacity: 0; transform: scale(3) translateY(-50px) rotate(-20deg); } 60% { opacity: 1; transform: scale(0.9) translateY(0) rotate(5deg); } 80% { transform: scale(1.1) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

02. Scenario Sandbox Architecture

動画を視聴しなくても「なぜこのプロンプトが良いのか」が体感できるよう、Zero-Shot（失敗例）とFew-Shot（成功例）を左右で比較できるScenario Sandboxを設けています。情報の対比を色（赤のbad、緑のgood）で直感的に表現しました。

03. Confetti Celebration System

プログレスバーが100%に達した際、HTML5 Canvasの描画能力を活用して、画面全体に物理演算付きの紙吹雪（Confetti）を降らせる演出を追加しました。
単に色や大きさが異なるだけでなく、回転（rot）を加えることで3D的なヒラヒラ感を表現しています。

Global System Architecture

01. Deployment Pipeline (Cloudflare Pages)

本プロジェクトは **GitHub** と **Cloudflare Pages** を連携させたCI/CD環境で運用。 main ブランチへのプッシュをトリガーに自動ビルド・デプロイが走る構成です。

bash git checkout main git add . git commit -m "feat: 開発者ノートの大幅拡充とUI修正" git push origin main

02. Shared State Management (Progress Sync)

各Dayの進捗状況（チェックリスト）は、localStorage を介して index.html (ポータル) と同期。ブラウザを閉じても「どこまで進んだか」が保持される **Persistent Progress** システムを独自実装。

Sync Logic

ポータル画面読み込み時に、各Dayのキーを走査し、合計進捗率を計算して環状プログレスバーを更新。

Phase 4: Quiz System Design

01. Tiered Difficulty Logic

初心者・中級者・上級者の3つのティアに分けたクイズシステム。エンジニアリング的には、1つのJSONデータから難易度タグに基づいて動的に問題をフィルタリング・シャッフルします。

javascript function getShuffledQuiz(tier) { return allQuizzes .filter(q => q.tier === tier) .sort(() => Math.random() - 0.5); }

02. Validation & Feedback UI

正解・不正解時に Lottie アニメーションや Canvas 演出を使い分け、学習者のモチベーションを高めます。

Magazine UI Tokens

01. Dynamic Palette Syncing

各Dayのコンテンツは、ルートのCSS変数で管理。これにより、HTML構造を変えずにDayごとのカラーテーマを瞬時に切り替えることが可能です。

css :root { --day1-brand: #38bdf8; --day2-brand: #ec4899; --day3-brand: #818cf8; } .fixed-header { border-bottom: 2px solid var(--brand-color); }

02. Glassmorphism Standard

情報のオーバーレイには backdrop-filter: blur(12px) を多用。背景の抽象的なグラデーションを活かしつつ、視認性とプレミアム感を両立させるための標準コンポーネント設計。

Glass Layout

マガジンスタイルの表現として、写真を背景に敷き込みつつ、その上に rgba(255, 255, 255, 0.4) の半透明レイヤーを重ねることで、洗練された「雑誌の紙面」のような質感を演出。