ProjectOne/Production-work.html at main · Dreeam00/ProjectOne · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レトロAeroデザイン デモサイト</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gradient-to-l from-blue-50 to-blue-300 text-gray-900 font-sans overflow-x-hidden">
  <div class="w-full min-h-screen bg-gradient-to-b from-blue-200 via-blue-400 to-blue-900 pt-8 pb-16 px-2 md:px-0">
    <div class="max-w-5xl mx-auto">
      <!-- ヘッダー -->
      <header class="mb-12">
        <h1 class="text-5xl md:text-7xl font-extrabold text-blue-900 drop-shadow-xl tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent mb-2">Aeroレトロデザイン デモ</h1>
        <p class="text-xl md:text-2xl text-blue-800/90 font-medium drop-shadow-sm">2000年代のAero/Aqua UIを現代的に再現したデモサイト</p>
      </header>
      <!-- ナビゲーション -->
      <nav class="flex gap-4 mb-10 justify-center">
        <a href="index.html" class="px-5 py-2 rounded-full bg-white/70 border border-blue-200 shadow hover:bg-blue-100/80 transition font-bold text-blue-700 backdrop-blur-md">ホーム</a>
        <a href="research.html" class="px-5 py-2 rounded-full bg-white/70 border border-blue-200 shadow hover:bg-blue-100/80 transition font-bold text-blue-700 backdrop-blur-md">研究</a>
        <a href="creation.html" class="px-5 py-2 rounded-full bg-white/70 border border-blue-200 shadow hover:bg-blue-100/80 transition font-bold text-blue-700 backdrop-blur-md">制作過程</a>
      </nav>
      <!-- ヒーローセクション -->
      <section class="relative my-12 p-8 md:p-16 bg-gradient-to-br from-white/90 via-blue-100/80 to-blue-200/70 backdrop-blur-2xl rounded-3xl border border-blue-300 shadow-2xl overflow-hidden group transition-all duration-500">
        <div class="absolute left-0 top-0 w-2 h-full bg-gradient-to-b from-blue-400 via-blue-300 to-blue-100 rounded-l-3xl blur-sm opacity-70"></div>
        <div class="absolute right-8 top-8 w-24 h-24 bg-gradient-to-tr from-blue-300/60 to-white/0 rounded-full blur-2xl opacity-60 animate-pulse"></div>
        <div class="flex items-center gap-4 mb-6">
          <span class="w-12 h-12 flex items-center justify-center drop-shadow-lg">
            <svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10" fill="#e0f2fe"/>
              <path d="M8 12l2 2 4-4" stroke="#0ea5e9" stroke-width="2.5"/>
            </svg>
          </span>
          <h2 class="text-3xl md:text-5xl font-extrabold text-blue-900 drop-shadow-lg tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent">Aero/Aqua UIデモ</h2>
        </div>
        <p class="text-xl md:text-2xl text-blue-800 font-medium leading-relaxed drop-shadow-sm mb-6">
          ガラスのようなパネル、グラデーション、立体的なボタン、SVGアイコンなどAero/Aquaの特徴を現代のWebで再現。<br>
          レスポンシブ対応・アクセシビリティにも配慮しています。
        </p>
        <div class="flex flex-col md:flex-row gap-8 mt-8">
          <!-- サンプルカード1 -->
          <div class="flex-1 p-6 bg-white/70 rounded-2xl border border-blue-200 shadow-xl backdrop-blur-md flex flex-col items-center">
            <svg class="w-10 h-10 mb-2" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="4" y="4" width="16" height="16" rx="4" fill="#dbeafe"/>
              <path d="M8 12h8" stroke="#2563eb" stroke-width="2.5"/>
            </svg>
            <h3 class="text-xl font-bold text-blue-700 mb-1">Aeroパネル</h3>
            <p class="text-blue-900 text-base mb-2">半透明・ぼかし・グラデーションで奥行きと未来感を演出。</p>
            <button class="px-6 py-2 mt-auto rounded-full bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 text-white font-bold shadow-lg hover:scale-105 hover:shadow-blue-400/50 transition-all duration-200 backdrop-blur">体験する</button>
          </div>
          <!-- サンプルカード2 -->
          <div class="flex-1 p-6 bg-white/70 rounded-2xl border border-blue-200 shadow-xl backdrop-blur-md flex flex-col items-center">
            <svg class="w-10 h-10 mb-2" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="4" y="4" width="16" height="16" rx="4" fill="#ede9fe"/>
              <path d="M12 8v8m-4-4h8" stroke="#6366f1" stroke-width="2.5"/>
            </svg>
            <h3 class="text-xl font-bold text-blue-700 mb-1">立体ボタン</h3>
            <p class="text-blue-900 text-base mb-2">影やグロー効果で押したくなるボタンを再現。</p>
            <button class="px-6 py-2 mt-auto rounded-full bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 text-white font-bold shadow-lg hover:scale-105 hover:shadow-blue-500/50 transition-all duration-200 backdrop-blur">押してみる</button>
          </div>
        </div>
      </section>
      <!-- 画像・アクセシビリティサンプル -->
      <section class="my-12 p-8 bg-gradient-to-br from-blue-100/90 via-blue-50/80 to-white/70 backdrop-blur-2xl rounded-3xl border border-blue-100 shadow-2xl">
        <h3 class="text-2xl font-bold text-blue-700 mb-4">画像最適化・アクセシビリティ</h3>
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <img src="hero.png" alt="Aeroデモのヒーロー画像" class="w-64 h-40 object-cover rounded-xl border border-blue-200 shadow-md mb-4 md:mb-0" loading="lazy">
          <div>
            <ul class="list-disc pl-6 text-blue-900 text-base space-y-1 mb-2">
              <li>画像には<code>alt</code>属性を付与し、アクセシビリティに配慮</li>
              <li>画像の<code>loading="lazy"</code>で表示速度も最適化</li>
              <li>レスポンシブ対応でどの端末でも美しく表示</li>
            </ul>
            <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 text-white font-bold shadow-lg hover:scale-105 hover:shadow-blue-400/50 transition-all duration-200 backdrop-blur">画像を拡大</button>
          </div>
        </div>
      </section>
      <!-- フッター -->
      <footer class="mt-12 text-center text-gray-600 bg-white/90 backdrop-blur-2xl p-6 shadow-2xl border border-blue-200">
      <p class="text-sm">© 2025 My Retro Design Research. All rights reserved.</p>
    </footer>
    </div>
    <!-- 右下ポータルボタン -->
    <a href="portal.html" class="fixed md:sticky z-50 bottom-6 right-6 md:bottom-6 md:right-6 flex items-center gap-2 px-5 py-3 rounded-full bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600 text-white font-bold shadow-xl border border-blue-200 backdrop-blur-lg hover:scale-105 hover:shadow-blue-400/50 transition-all duration-200" style="position:sticky; float:right;">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="#e0f2fe"/><path d="M12 8v4l3 3" stroke="#2563eb" stroke-width="2.5"/></svg>
      ポータルへ
    </a>
  </div>
</body>
</html>