12/6 学科 生成AI基礎⑥【オンライン】
宮本真伍本日のテーマ
コードの生成AIについて
手作業でのコーディング量を減らし、
開発時間を短縮してくれる生成AIがあります。
コーダーになりたい場合は書けることを求められますので、
使いどころには気を付けましょう。
---
### **主なAIツールまとめ（段落分け・再整形版）**
**AI CODE（エーアイ コード）｜基本無料**
テキストでUI要素を指定すると、対応するHTMLとCSSを自動生成するツールです。
例：「シンプルでモダンなナビゲーション 日本語」
ナビゲーション、ボタン、カード、フォームなど、幅広いUIコンポーネントに対応しています。
---
**Cursor（カーソル）｜基本無料**
AIを活用したコードエディタで、補完や生成を通じて開発効率を大幅に向上できます。
---
**UI Sketcher（ユーアイ スケッチャー）｜OpenAI APIキー必要（無料枠あり）**
手書きスケッチやドラッグ＆ドロップ操作から、Webサイトの画面・コンポーネント・レイアウトを作成し、HTMLとCSSに変換します。
利用にはOpenAIのAPIキーが必要です。
---
**FRONT-END.AI（フロントエンド ドット エーアイ）｜有料**
FigmaなどのデザインカンプからWeb画面（HTMLと一部CSS）を自動生成するクラウドサービスです。
VS Codeとの連携にも対応しています。
---
**UI to Code（ユーアイ トゥー コード）｜現時点で無料**
プロンプトに応じてHTML、CSS（Tailwind CSS）、JavaScriptコードを生成します。
生成されたコードはチャット内に展開されるため、コピーしてファイルに貼り付けて使用します。
---
import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, Mail, Github, Linkedin, Globe, Code, Palette, Zap, Monitor } from 'lucide-react';
const PortfolioPresentation = () => {
const [currentSlide, setCurrentSlide] = useState(0);
const [portfolioData, setPortfolioData] = useState({
name: "宮本 真伍",
role: "Webデザイナー",
tagline: "運用で培った論理的思考と、デザインの表現力を融合させ、使いやすく魅力的なWebサイトを創造します",
email: "tamago1999@gmail.com",
github: "準備中",
portfolio: "制作中（WordPress）",
about: "IT運用・社内SEとして5年以上の実務経験を持ち、Azure環境での運用監視やデータ集計に従事してきました。現在は職業訓練校でWebデザインを学習中で、Illustrator・Photoshop・WordPress・Figmaなどのツールを習得しています。運用業務で培った論理的な情報整理力と細部への注意力を、ユーザー体験を重視したデザイン制作に活かしたいと考えています。",
skills: [
{ name: "Illustrator", level: 70, icon: "palette" },
{ name: "Photoshop", level: 70, icon: "palette" },
{ name: "WordPress", level: 75, icon: "globe" },
{ name: "HTML/CSS", level: 65, icon: "code" },
{ name: "Figma", level: 60, icon: "zap" },
{ name: "Azure運用", level: 85, icon: "code" }
],
projects: [
{
title: "パーソナルロゴデザイン",
client: "セルフブランディング",
description: "自身のイニシャル「M」と「S」をモチーフに、立体的な六角形の組み合わせでデザイン。幾何学的な美しさと、デジタルとアナログの融合を表現しました。",
role: "ロゴデザイン、コンセプト設計",
tools: "Illustrator",
results: "• シンプルで記憶に残るデザイン\n• 多様な媒体で展開可能\n• 個人ブランドの確立",
image: "🎨"
}
],
process: [
{ step: "01", title: "ヒアリング", desc: "クライアントの要望を丁寧に聞き取り" },
{ step: "02", title: "調査・分析", desc: "競合分析とターゲット理解" },
{ step: "03", title: "設計", desc: "情報設計とワイヤーフレーム作成" },
{ step: "04", title: "デザイン", desc: "Illustrator/Photoshopでビジュアル制作" },
{ step: "05", title: "実装", desc: "WordPress・HTML/CSSでコーディング" },
{ step: "06", title: "テスト・納品", desc: "動作確認と継続的なサポート" }
]
});
// デジタルグリッドの背景エフェクト
const DigitalGrid = () => (
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute inset-0 opacity-20">
{[...Array(20)].map((_, i) => (
<div
key={i}
className="absolute h-px bg-cyan-400"
style={{
top: `${i * 5}%`,
left: 0,
right: 0,
animation: `pulse ${2 + i * 0.1}s ease-in-out infinite`
}}
/>
))}
{[...Array(20)].map((_, i) => (
<div
key={`v-${i}`}
className="absolute w-px bg-cyan-400"
style={{
left: `${i * 5}%`,
top: 0,
bottom: 0,
animation: `pulse ${2 + i * 0.1}s ease-in-out infinite`
}}
/>
))}
</div>
</div>
);
// 浮遊するデジタルパーティクル
const FloatingParticles = () => (
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(15)].map((_, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-cyan-400 rounded-full"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animation: `float ${5 + Math.random() * 10}s ease-in-out infinite`,
animationDelay: `${Math.random() * 5}s`,
boxShadow: '0 0 10px #22d3ee'
}}
/>
))}
</div>
);
const slides = [
{
id: 'cover',
title: 'カバー',
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center relative overflow-hidden">
<style>{`
@keyframes float {
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
}
@keyframes pulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.5; }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes glitch {
0%, 100% { transform: translate(0); }
25% { transform: translate(-2px, 2px); }
50% { transform: translate(2px, -2px); }
75% { transform: translate(-2px, -2px); }
}
`}</style>
<DigitalGrid />
<FloatingParticles />
{/* スキャンライン効果 */}
<div className="absolute inset-0 opacity-10">
<div className="absolute w-full h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
style={{ animation: 'scanline 4s linear infinite' }} />
</div>
{/* ネオングロー背景 */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500 rounded-full blur-[150px]"></div>
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500 rounded-full blur-[150px]"></div>
<div className="absolute top-1/2 left-1/2 w-96 h-96 bg-pink-500 rounded-full blur-[150px]"></div>
</div>
<div className="text-center z-10 px-8">
<div className="mb-8">
<div className="inline-block px-4 py-2 border border-cyan-400 bg-cyan-400/10 backdrop-blur-sm rounded-lg mb-6">
<span className="text-cyan-400 font-mono text-sm tracking-wider">PORTFOLIO 2025</span>
</div>
</div>
<h1 className="text-7xl font-bold mb-4 bg-gradient-to-r from-cyan-400 via-blue-400 to-pink-400 bg-clip-text text-transparent"
style={{ textShadow: '0 0 30px rgba(34, 211, 238, 0.5)' }}>
{portfolioData.name}
</h1>
<p className="text-3xl mb-6 font-light text-cyan-300">{portfolioData.role}</p>
<p className="text-xl max-w-2xl mx-auto text-slate-300 mb-12">{portfolioData.tagline}</p>
<div className="flex gap-6 justify-center">
{[Mail, Github, Linkedin, Globe].map((Icon, i) => (
<div key={i} className="w-12 h-12 border border-cyan-400 bg-cyan-400/10 backdrop-blur-sm rounded-lg flex items-center justify-center hover:bg-cyan-400/20 transition-all cursor-pointer"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.3)' }}>
<Icon className="w-5 h-5 text-cyan-400" />
</div>
))}
</div>
</div>
</div>
)
},
{
id: 'about',
title: '自己紹介',
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-16 flex items-center relative overflow-hidden">
<DigitalGrid />
<FloatingParticles />
<div className="max-w-6xl mx-auto z-10">
<div className="mb-8">
<span className="text-cyan-400 font-mono text-sm tracking-wider border border-cyan-400/30 px-3 py-1 rounded">
{'<ABOUT_ME />'}
</span>
</div>
<h2 className="text-6xl font-bold mb-12 bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
About Me
</h2>
<div className="grid grid-cols-2 gap-12">
<div>
<p className="text-xl leading-relaxed text-slate-300 mb-8">{portfolioData.about}</p>
<div className="space-y-4">
{[
{ icon: Mail, text: portfolioData.email },
{ icon: Github, text: portfolioData.github },
{ icon: Globe, text: portfolioData.portfolio }
].map((item, i) => (
<div key={i} className="flex items-center gap-3 p-3 border border-cyan-400/20 bg-cyan-400/5 backdrop-blur-sm rounded-lg hover:border-cyan-400/40 transition-all">
<item.icon className="w-5 h-5 text-cyan-400" />
<span className="text-slate-300 font-mono text-sm">{item.text}</span>
</div>
))}
</div>
</div>
<div className="border border-cyan-400/30 bg-slate-900/50 backdrop-blur-sm rounded-2xl p-8 relative"
style={{ boxShadow: '0 0 30px rgba(34, 211, 238, 0.1)' }}>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>
<h3 className="text-2xl font-semibold mb-6 text-cyan-400 font-mono">デザインフィロソフィー</h3>
<div className="space-y-4">
{[
{ num: "01", title: "ユーザーファースト", desc: "常にユーザーの視点で考える", color: "cyan" },
{ num: "02", title: "シンプリシティ", desc: "複雑さを削ぎ落とす勇気", color: "blue" },
{ num: "03", title: "継続的改善", desc: "データに基づく最適化", color: "pink" }
].map((item, i) => (
<div key={i} className="flex items-start gap-3 p-3 border border-slate-700 bg-slate-800/50 rounded-lg hover:border-cyan-400/50 transition-all">
<div className={`w-10 h-10 bg-gradient-to-br from-${item.color}-400 to-${item.color}-600 rounded-lg flex items-center justify-center flex-shrink-0`}
style={{ boxShadow: `0 0 20px rgba(34, 211, 238, 0.3)` }}>
<span className="text-slate-900 font-bold font-mono text-sm">{item.num}</span>
</div>
<div>
<h4 className="font-semibold text-slate-200">{item.title}</h4>
<p className="text-sm text-slate-400">{item.desc}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
)
},
{
id: 'skills',
title: 'スキル',
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-16 flex items-center relative overflow-hidden">
<DigitalGrid />
<FloatingParticles />
<div className="max-w-6xl mx-auto w-full z-10">
<div className="mb-8">
<span className="text-cyan-400 font-mono text-sm tracking-wider border border-cyan-400/30 px-3 py-1 rounded">
{'<SKILLS />'}
</span>
</div>
<h2 className="text-6xl font-bold mb-12 bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
Technical Skills
</h2>
<div className="grid grid-cols-2 gap-6">
{portfolioData.skills.map((skill, idx) => (
<div key={idx} className="border border-cyan-400/30 bg-slate-900/50 backdrop-blur-sm rounded-xl p-6 hover:border-cyan-400/50 transition-all relative overflow-hidden"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.1)' }}>
<div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-400 to-blue-400"></div>
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 border border-cyan-400/50 bg-cyan-400/10 rounded-lg flex items-center justify-center">
{skill.icon === 'palette' && <Palette className="w-5 h-5 text-cyan-400" />}
{skill.icon === 'code' && <Code className="w-5 h-5 text-blue-400" />}
{skill.icon === 'globe' && <Globe className="w-5 h-5 text-pink-400" />}
{skill.icon === 'zap' && <Zap className="w-5 h-5 text-orange-400" />}
</div>
<h3 className="text-xl font-semibold text-slate-200 font-mono">{skill.name}</h3>
</div>
<div className="relative h-3 bg-slate-800 rounded-full overflow-hidden border border-slate-700">
<div
className="absolute h-full bg-gradient-to-r from-cyan-400 via-blue-400 to-pink-400 rounded-full transition-all duration-1000"
style={{
width: `${skill.level}%`,
boxShadow: '0 0 10px rgba(34, 211, 238, 0.5)'
}}
></div>
</div>
<p className="text-right text-sm text-cyan-400 mt-2 font-mono">{skill.level}%</p>
</div>
))}
</div>
</div>
</div>
)
},
...portfolioData.projects.map((project, idx) => ({
id: `project-${idx}`,
title: `作品${idx + 1}`,
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-16 flex items-center relative overflow-hidden">
<DigitalGrid />
<FloatingParticles />
<div className="max-w-6xl mx-auto w-full z-10">
<div className="grid grid-cols-2 gap-12 items-center">
<div>
<div className="mb-6 flex justify-center">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cg%3E%3Cpolygon points='140,50 200,85 200,155 140,120' fill='%235B9BA6' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='200,85 260,50 260,120 200,155' fill='%237CB8C3' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='140,50 200,15 260,50 200,85' fill='%238FC9D4' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='20,150 80,185 80,255 20,220' fill='%235B9BA6' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='80,185 140,150 140,220 80,255' fill='%237CB8C3' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='20,150 80,115 140,150 80,185' fill='%238FC9D4' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='260,150 320,185 320,255 260,220' fill='%235B9BA6' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='320,185 380,150 380,220 320,255' fill='%237CB8C3' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='260,150 320,115 380,150 320,185' fill='%238FC9D4' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='380,250 440,285 440,355 380,320' fill='%235B9BA6' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='440,285 500,250 500,320 440,355' fill='%237CB8C3' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='380,250 440,215 500,250 440,285' fill='%238FC9D4' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3Cg%3E%3Cpolygon points='260,350 320,385 320,455 260,420' fill='%23C85A5A' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='320,385 380,350 380,420 320,455' fill='%23E57373' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='260,350 320,315 380,350 320,385' fill='%23EF8E8E' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='200,450 260,485 260,555 200,520' fill='%23C85A5A' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='260,485 320,450 320,520 260,555' fill='%23E57373' stroke='%23000' stroke-width='2'/%3E%3Cpolygon points='200,450 260,415 320,450 260,485' fill='%23EF8E8E' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3Cg opacity='0.7'%3E%3Cpolygon points='20,300 80,335 140,300 80,265' fill='%23D4E5A3' stroke='none'/%3E%3Cpolygon points='80,335 140,370 200,335 140,300' fill='%23C8DB8E' stroke='none'/%3E%3Cpolygon points='140,370 200,405 260,370 200,335' fill='%23BCD179' stroke='none'/%3E%3Cpolygon points='260,550 320,585 380,550 320,515' fill='%23E57373' stroke='none'/%3E%3Cpolygon points='140,500 200,535 260,500 200,465' fill='%23EF8E8E' stroke='none'/%3E%3C/g%3E%3C/svg%3E"
alt="MS Logo"
className="w-48 h-64 object-contain filter drop-shadow-[0_0_30px_rgba(34,211,238,0.5)]"
/>
</div>
<div className="mb-6">
<span className="text-cyan-400 font-mono text-sm tracking-wider border border-cyan-400/30 px-3 py-1 rounded">
PROJECT_01
</span>
</div>
<div className="text-8xl mb-6 filter drop-shadow-[0_0_30px_rgba(34,211,238,0.5)]">{project.image}</div>
<h2 className="text-5xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
{project.title}
</h2>
<p className="text-xl text-cyan-300 mb-6 font-mono">{project.client}</p>
<p className="text-lg leading-relaxed text-slate-300 mb-8">{project.description}</p>
<div className="space-y-3 mb-8">
<div className="flex items-start gap-3 p-3 border border-cyan-400/20 bg-cyan-400/5 backdrop-blur-sm rounded-lg">
<span className="text-cyan-400 font-semibold font-mono text-sm">ROLE:</span>
<span className="text-slate-300">{project.role}</span>
</div>
<div className="flex items-start gap-3 p-3 border border-blue-400/20 bg-blue-400/5 backdrop-blur-sm rounded-lg">
<span className="text-blue-400 font-semibold font-mono text-sm">TOOLS:</span>
<span className="text-slate-300">{project.tools}</span>
</div>
</div>
</div>
<div className="border border-cyan-400/30 bg-slate-900/50 backdrop-blur-sm rounded-2xl p-8 relative"
style={{ boxShadow: '0 0 30px rgba(34, 211, 238, 0.2)' }}>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 via-blue-400 to-pink-400"></div>
<h3 className="text-3xl font-bold mb-6 text-cyan-400 font-mono">RESULTS</h3>
<div className="space-y-3 whitespace-pre-line text-lg text-slate-300 font-mono">
{project.results}
</div>
</div>
</div>
</div>
</div>
)
})),
{
id: 'process',
title: 'デザインプロセス',
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-16 flex items-center relative overflow-hidden">
<DigitalGrid />
<FloatingParticles />
<div className="max-w-6xl mx-auto w-full z-10">
<div className="mb-8">
<span className="text-cyan-400 font-mono text-sm tracking-wider border border-cyan-400/30 px-3 py-1 rounded">
{'<PROCESS />'}
</span>
</div>
<h2 className="text-6xl font-bold mb-12 text-center bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
Design Process
</h2>
<div className="grid grid-cols-3 gap-6">
{portfolioData.process.map((item, idx) => (
<div key={idx} className="relative">
<div className="border border-cyan-400/30 bg-slate-900/50 backdrop-blur-sm rounded-xl p-6 hover:border-cyan-400/50 transition-all relative overflow-hidden"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.1)' }}>
<div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-400 to-blue-400"></div>
<div className="text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent font-mono">
{item.step}
</div>
<h3 className="text-2xl font-bold text-slate-200 mb-3">{item.title}</h3>
<p className="text-slate-400">{item.desc}</p>
</div>
{idx < portfolioData.process.length - 1 && (
<div className="absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-cyan-400 to-transparent hidden lg:block"></div>
)}
</div>
))}
</div>
</div>
</div>
)
},
{
id: 'contact',
title: 'お問い合わせ',
component: () => (
<div className="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center relative overflow-hidden">
<DigitalGrid />
<FloatingParticles />
{/* ネオングロー背景 */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500 rounded-full blur-[150px]"></div>
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500 rounded-full blur-[150px]"></div>
</div>
<div className="text-center px-8 z-10">
<div className="mb-8">
<span className="text-cyan-400 font-mono text-sm tracking-wider border border-cyan-400/30 px-3 py-1 rounded">
{'<CONTACT />'}
</span>
</div>
<h2 className="text-7xl font-bold mb-8 bg-gradient-to-r from-cyan-400 via-blue-400 to-pink-400 bg-clip-text text-transparent">
Let's Work Together
</h2>
<p className="text-2xl mb-12 text-slate-300">あなたのプロジェクトを一緒に成功させましょう</p>
<div className="space-y-4 max-w-md mx-auto">
<div className="border border-cyan-400/30 bg-cyan-400/10 backdrop-blur-sm rounded-xl p-6 hover:border-cyan-400/50 transition-all"
style={{ boxShadow: '0 0 30px rgba(34, 211, 238, 0.2)' }}>
<Mail className="w-8 h-8 mx-auto mb-3 text-cyan-400" />
<p className="text-lg text-slate-300 font-mono">{portfolioData.email}</p>
</div>
<div className="grid grid-cols-3 gap-4">
{[Github, Linkedin, Globe].map((Icon, i) => (
<div key={i} className="border border-cyan-400/30 bg-cyan-400/10 backdrop-blur-sm rounded-xl p-6 hover:border-cyan-400/50 transition-all cursor-pointer"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.2)' }}>
<Icon className="w-8 h-8 mx-auto text-cyan-400" />
</div>
))}
</div>
</div>
<p className="mt-12 text-lg text-slate-400 font-mono">ご覧いただきありがとうございました</p>
</div>
</div>
)
}
];
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
};
return (
<div className="w-full h-screen bg-slate-950 relative">
{/* メインスライド */}
<div className="w-full h-full">
{slides[currentSlide].component()}
</div>
{/* ナビゲーション */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex items-center gap-4 bg-slate-900/80 backdrop-blur-md px-6 py-3 rounded-full border border-cyan-400/30"
style={{ boxShadow: '0 0 30px rgba(34, 211, 238, 0.2)' }}>
<button
onClick={prevSlide}
className="text-cyan-400 hover:text-cyan-300 transition-colors disabled:opacity-30"
disabled={currentSlide === 0}
>
<ChevronLeft className="w-6 h-6" />
</button>
<div className="flex gap-2">
{slides.map((_, idx) => (
<button
key={idx}
onClick={() => setCurrentSlide(idx)}
className={`h-2 rounded-full transition-all ${
idx === currentSlide
? 'bg-cyan-400 w-8 shadow-[0_0_10px_rgba(34,211,238,0.8)]'
: 'bg-cyan-400/30 w-2 hover:bg-cyan-400/50'
}`}
/>
))}
</div>
<button
onClick={nextSlide}
className="text-cyan-400 hover:text-cyan-300 transition-colors disabled:opacity-30"
disabled={currentSlide === slides.length - 1}
>
<ChevronRight className="w-6 h-6" />
</button>
</div>
{/* スライドカウンター */}
<div className="absolute top-8 right-8 bg-slate-900/80 backdrop-blur-md px-4 py-2 rounded-full border border-cyan-400/30 text-cyan-400 text-sm font-mono"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.2)' }}>
{String(currentSlide + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
</div>
{/* 編集ヒント */}
<div className="absolute top-8 left-8 bg-cyan-400/10 backdrop-blur-md border border-cyan-400/30 text-cyan-400 px-4 py-2 rounded-lg text-sm font-mono"
style={{ boxShadow: '0 0 20px rgba(34, 211, 238, 0.2)' }}>
💡 情報を入れ替えて使用できます
</div>
</div>
);
};
export default PortfolioPresentation;
