デモウェブサイトのリンク: https://apple-chair.vercel.app/
Lumbra Neo — Claude Code 作業ログ
腰椎サポートチェアの紹介ページ（lumbra-neo.html）をdesign.mdに基づいて作成し、段階的に改善していった対話の記録。
1次作業 — 初期構築
プロンプト ①
腰をサポートする、非常に特別な腰に良い椅子を販売する紹介ウェブサイトを作りたいです。今コピーした design.md ファイルを参考にして、これをベースに HTML と CSS でウェブサイトを構成してください。デザインは Apple 風のトーンですが、他はすべてそのまま再現し、画像だけはインターネットから適切な高級椅子のストック画像を探して使用してください。
Claude 作業サマリー
製品名を「Lumbra Neo」と命名し、フィニッシュ3種（Citrus / Indigo / Blush）をdesign.md通りに活用
ページ構成：グローバルナビ(44px) + スティッキーサブナビ(52px) / Hero(「腰、再始動。」) / Adaptive Lumbar Engine 2×2 カード + ダークアクセント / Citrus・Indigo・Blush フルブリードショーケース / 2カラムスプリットフィーチャー 2個 / カラーセレクター / Tech Specs 左右2列 / Final CTA + Footer
design.mdの原則を遵守：ボックスシャドウ0個、
#0071e3azureはサブナビのBuyボタンにのみ1回使用、28pxカード角丸 / 999pxボタン角丸、ヘッドラインのサイズ別ネガティブトラッキングUnsplashストック画像URL 6枚適用、SF Pro Display → Pretendard → -apple-system fallback
プロンプト ②
代表画像が表示されていないみたい。画像があるべき場所が空白になっているね。それと、できればPNG形式で透過画像を使ってみて。
Claude 作業サマリー
Unsplashの直リンクブロックと推定 → 外部画像をすべてインラインSVGの椅子イラストに差し替え
<symbol>+<use>パターンで、斜め前(#chair-main)・横顔(#chair-side)の2つのビューを定義し、ページ全体の8箇所で再利用fill="currentColor"で、グラデーションの上では白、fog背景ではink色に自動切り替え腰椎サポート領域を半透明の白いellipseで強調、背もたれメッシュの横線、5-starベース + ホイール4個 + ガスシリンダー、横顔は脊椎のSカーブを強調
PNGの使用を希望する場合は、
images/chair.pngへの差し替え、またはBase64データURIの2つのオプションを案内
プロンプト ③
SVGではなく、適切な画像を使って。PNGで。全体的に安っぽすぎるから。
Claude 作業サマリー
Unsplashの検索ページで直接検証したphoto IDを使用し、実際に動作するURLを6枚確保（Hero / Citrus・Indigo・Blush ショーケース / スプリットフィーチャー2個）
グラデーションショーケースのデザイン調整：元のdesign.mdはPNGの透過椅子がグラデーションの上に浮いているコンセプトでしたが、JPG写真は独自の背景があるため、28pxのラウンドカードで包んでグラデーションの上に浮かせる方式に変更（Appleの他のページでも使われているパターン）
PNG透明椅子の限界を正直に共有：安定した直リンクが可能な無料ソースがほとんどないため、removebgなどで自作したPNGをローカルに保存して使用する方法を案内
2次作業 — 大々的な改善
プロンプト ④
lumbra-neo.html このファイルを今から大幅に改善するよ。1) フォントが古臭くてアップルらしさが足りず、可読性が著しく低い。特に背景にグラデーションがある時はさらにひどい。基本的に可読性を改善し、必要な箇所にはシャドウも入れて。2) グラデーションはおそらくCSSで作ったものだと思うけど、いっそ既存のグラデーション画像を探して使ってみて。今はあまり良くない。最大限アップルトーンのグラデーション背景を使用して。3) セクションごとのパディングとマージンが不安定すぎる。全体的に統一感を維持するように改善して、安定感が感じられるように。4) トランジションとアニメーションを積極的に使って。AOSライブラリを使用し、マウスホバー時にトランジションが作動して、アップルらしいアニメーションが動くように開発して。
Claude 作業サマリー
1) フォント & 視認性
Pretendard Variable フォントをCDNで追加（韓国語でSF Proに最も近い可変フォント）
グラデーション上のすべてのテキストに
text-shadow: 0 2px 24px rgba(0,0,0,0.28)を適用本文のカラーを
--color-graphite→--color-slateへ濃くし、font-feature-settings、text-rendering: optimizeLegibilityを追加
2) グラデーションの画像化
CSSグラデーションの代わりにUnsplash Codiofulのグラデーション写真を
::beforeで背景に適用Citrus/Indigo/Blushのトーン別画像を使用し、読み込み失敗時には改善された
radial-gradientフォールバックを適用、::afterのビネットオーバーレイで色味を調整
3) 一貫した間隔システム
--space-section-y: clamp(96px, 12vw, 160px)/--space-section-x: clamp(22px, 4vw, 40px)トークン化--space-block-gap、--space-card-gap、--container-maxをグローバルで統一
4) AOS + ホバートランジション
AOS v2.3.4 CDN追加、すべてのヘッドライン・カードにfade-up + スタッガーディレイ
--ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1)Appleシグネチャーイージングの定義カードホバー時に lift + shadow、画像 scale(1.04~1.06) ズーム、ボタン・リンクの矢印 translate、スウォッチ scale(1.18)、
prefers-reduced-motion対応
プロンプト ⑤
フィードバックです。 1) テキスト一つひとつ、例えば「lumbra neo」「腰、再始動」「腰椎を支える…」といったテキスト部分は、すべて個別にAOSを適用してください。全体として統一感を持たせつつ、スムーズに動作し、Appleのようなトランジションとアニメーションを各タイトル級のテキストに適用する必要があります。テキストが一つずつピタッと動きながら吸い付くような、あのAppleらしいテキスト区分アニメーションを取り入れてほしいです。 2) 特にアニメーション/トランジションは滑らかに動く必要があり、マウスホバー時にはease-in-outで動作するようにしてください。滑らかな曲線を描くように設定してください。 3) 全体的にコンポーネントの構成やグラフ、例示、角度の例などを最大限ブラッシュアップしてください。Appleのように。今はあまりにもスカスカで安っぽく見えるので、Appleレベルまで大幅に改善する必要があります。 4) セクションごとに似てはいるものの、少しずつ変化をつけてリフレッシュされる感じを出してください。Appleのランディングページを見ても、すべて同じセクション構成ではなく、少しずつバリエーションを持たせているので、そのように調整してみてください。
Claude 作業サマリー
1) テキストの単語別リビールアニメーション
splitToWords()JS関数ですべての見出し級テキストを単語単位の<span>に分離各単語
translateY(108%) → 0+ フェードイン、70msのスタッガーディレイ → 単語が一つずつ順番に現れる split-text.reveal-wordsクラスを hero / section / finish / card / split のヘッドライン + eyebrow + subheadline 全体に適用、<br>は保持
2) ease-in-out ホバー
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1)を定義し、すべてのhoverトランジション（カードの浮き上がり / 画像のズーム / ボタン / リンク / スウォッチ / メニュー）に適用登場アニメーションは
--ease-out(減速)で分離し、進入は自然に
3) AppleレベルのSVGダイアグラム
Adaptive Support: 人体のシルエット + S字カーブの脊椎 + 測定グリッド(T1/L1/S1) + パルスする圧力センサー3個 + ラベルライン + Active/Tracking/Anchored 状態
Aero Mesh: 6角形の織りパターン2層（前後の奥行き） + 光沢オーバーレイ + 左から右へ流れる通気矢印（
stroke-dashoffsetアニメーション）Sync Tilt: 椅子側面のシルエット3種(90°/105°/128°) + 角度アーク + FOCUS/WORK/RELAX ラベル + 段階インジケーター(+15°, +23°)
4Dアームレスト: 立体シャドウパッド + 4軸測定矢印 + pillラベル(↕80 / ↔40 / ⤡60 / ↻30°) + 基準グリッド
4) セクションバリエーション
NEW Stat Strip: ヒーローとLumbar Engineの間に大きな数字3つ(128個 / 60Hz / 0.2秒)、グラデーションテキスト + 仕切りボーダー
Indigo showcase: 画像下部の
finish-spec-barで3つのスペックコールアウト(Anodized / Matte 88% / +₩120,000)を表示Blush showcase:
side-layoutクラスでテキストと画像を左右に分割、縦4:5の比率で異なるリズムを演出Selector section: radial glow背景を追加
Hero / Lumbar / Citrusは基本維持で統一感を確保
3次作業 — ダイアグラム拡張 + Idling Gradient + Sticky Scroll
プロンプト ⑥
今の説明グラフィック、すごくいいよ。この調子で進めて。こういうのは非常に良いから、このセクションをあと数個追加して。今からあと3つくらい追加して、それからグラデーションがまだAppleらしくない。もう少しアイドリングするように動くアニメーションのような感じで実装してみて。あと、スクロールに合わせてテキストが追従したり（固定でついてきて、特定の地点で上がっていくApple特有の固定タイトルの感じ）、そういう感覚で改善してみて。良い部分はさらに良くして、追加すべき部分は追加して。言ってることわかるよね？
Claude 作業の要約
1) 新規SVGダイアグラムセクション3つ
Cushion Architecture (Sticky-Stack) — 座面5層構造をカード4枚に分離
Layer 01 Memory Foam: フォームセルバブル + 圧力インデント呼吸アニメーション + PRESSURE矢印
Layer 02 Cooling Gel Matrix: 六角形チャンネルパターン + HEAT IN(赤の矢印) + 左右 −3.4°C 放出フロー
Layer 03 High-Density Core: 9つのグリッド + 領域別の密度・粘度 + SIT-BONE ZONEの点線ハイライト
Layer 04 Aluminum Sub-frame (dark): ブラッシュドメタル + 3.2mm 厚さ測定線 + 150kg LOAD 矢印 + スクリューディテール
Pressure Mapping (Live Heatmap) — 座面トップダウン + 4段階カラーブロブ（赤・黄・緑・青）呼吸アニメーション + 9分割グリッド + 解剖学ラベル（坐骨結節/大腿部/尾骨） + LIVE表示 + カラーレジェンドチップ
Precision Caster + Floor Types — キャスター分解図(Pin → Bracket → Tri Bearing 回転 → PU 75mm ホイール) + ⌀75 アノテーション、3種類の床(フローリング/カーペット/タイル)パターン + 安全チェックバッジ + プッシュフォース 0.4kgf
2) Gradient idling アニメーション
@keyframes gradientIdle— 22秒周期でscale(1.10→1.14)+ 微細な translate + saturate（彩度）の変化により、生きているかのようにゆっくりと漂う@keyframes auroraSpin—.gradient-auroraレイヤーが38秒周期で回転、白い光が柔らかく回り、mix-blend-mode: screenで自然に合成3つの finish-showcase (Citrus / Indigo / Blush) すべてに適用
3) Apple風 Sticky Scroll Pinned Headline
Cushion Architectureセクションを
grid-template-columns: 1fr 1.25frで分割左側の
.sticky-paneにposition: sticky; top: 120pxを適用右側4枚のレイヤーカードがスクロールされる間、左側のタイトルがビューポートに固定 → セクションの終わりで自然に一緒に流れていくアップル特有の動作
paneに "素材白書ダウンロード" CTAリンクを含める
その他の改善
section.band.inkダークセクションユーティリティを追加SVGパルス・フロー・回転アニメーションクラスのフルセット (
pulse,pulse-2,flow,breathe,drift,spin-slow)Tech Specsに座面構造・キャスターの行を新規追加