Carousel Template · Bootstrap v5.0

Reactを使って作成しました。

ポートフォリオサイト制作の記録 – アニメーション・メール送信・画像管理の工夫

こんにちは！最近、ポートフォリオサイトを作成しており、技術的な工夫や試行錯誤を重ねながら進めています。
今回は Framer Motionでのアニメーション、EmailJSを使ったメール送信、Cloudinaryを活用した画像管理 など、実装の過程で学んだことをまとめました！

🎬 ページに動きをつける – Framer Motionを活用

Webサイトのインタラクションをより魅力的にするために、Framer Motion を使用してアニメーションを追加しました。
ページの遷移や要素のフェードイン・スライドインなど、スムーズな動きを実装することで、より動的なWeb体験を提供できるように工夫しています。

ただ、今後は GSAP の導入も検討中です。GSAPはタイムライン管理がしやすく、複雑なアニメーションに適しているため、どちらを採用するのがベストか試しながら進めています。

📧 EmailJSを使ってフォームからのメール送信

ポートフォリオサイトにはコンタクトフォームを設置し、EmailJS を使ってメール送信できるようにしました。
EmailJSを使うことで、サーバーを用意せずにフロントエンドだけでメールを送ることができるため、手軽に実装できました。

jsxコピーする編集するimport emailjs from 'emailjs-com';

const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm(
        'YOUR_SERVICE_ID',  
        'YOUR_TEMPLATE_ID',  
        e.target,  
        'YOUR_USER_ID'  
    ).then(
        (result) => console.log('Email sent:', result.text),
        (error) => console.log('Error:', error.text)
    );
};

EmailJSは簡単に導入できるのですが、送信時のエラーハンドリングやバリデーションの強化は今後の課題です。

🖼️ 画像の表示問題とCloudinaryの活用

GitHubでポートフォリオを公開した際に、ローカル環境では正常に表示されていた画像がうまく表示されない問題に直面しました。
解決策として、Cloudinary を利用し、画像を外部ストレージにアップロードしてCDN経由で配信することで、表示の安定性を向上させました。

jsxコピーする編集する<img src="https://res.cloudinary.com/YOUR_CLOUD_NAME/image/upload/v1234567890/sample.jpg" alt="portfolio image" />

Cloudinaryを使うことで、画像の最適化や遅延読み込み（Lazy Load） も簡単にできるので、今後さらに活用していきたいです。

🎨 SCSSの学習とレイアウト調整

これまでSCSSにあまり慣れていなかったため、レイアウトが崩れた際にChatGPTを活用しながら調整 しました。
特に、レスポンシブデザインの対応 や ネスト構造の整理 には苦戦しましたが、試行錯誤しながら少しずつ理解を深めています。

scssコピーする編集する.container {
    display: flex;
    flex-direction: column;
    
    @media (min-width: 768px) {
        flex-direction: row;
    }
}

現在、まだ レスポンシブ化が完全ではなく、スクロール時に画像の位置がずれる という課題が残っています。
ここも修正しながら、AboutページやProductページの追加 を進めていきます。

🚀 今後のアップデート予定

✔ レスポンシブデザインの改善
✔ スクロール時の画像位置の調整
✔ AboutページやProductページの追加
✔ Framer Motion vs GSAP – アニメーションの最適化

今後も試行錯誤しながら、より完成度の高いポートフォリオサイトを目指していきます！
もし同じようにポートフォリオサイトを作成している方がいれば、ぜひ情報交換しましょう✨