“エンジニア×デザイナー”の武器を活かす！UXエンジニアのNext.jsポートフォリオ制作記

こんにちは、Sattyです！

このたび、自分のポートフォリオサイトをリリースしたので、自己紹介も兼ねてQiitaにも発信してみることにしました。

👇ポートフォリオサイトはこちらから

この記事では、

• 簡単な自己紹介
• ポートフォリオサイトの紹介
• 制作の裏話や工夫したこと
• 今後やっていきたいこと

についてまとめます。

UXエンジニアというキャリアや、Next.jsを活用したポートフォリオ制作、UX/UI改善に興味がある方の参考になれば嬉しいです。

自己紹介

あらためまして、Sattyです。

大学・大学院で情報デザインを専攻し、新卒でエンジニアとして入社。
その後、UI/UX設計やWebデザインも担当し、現在は「エンジニアとデザイナー、どっちもできたら最強じゃね？」の精神でUXエンジニアとしてWebサービス開発・改善に携わっています。

ポートフォリオサイトについて

✅ フレームワーク　：Next.js（App Router + TypeScript）
✅ UIライブラリ　　：MUI（Material UI）
✅ デプロイ　　　　：Vercel（GitHubと連携）
✅ フォーム送信　　：Google Forms（サーバーレス構成）
✅ アクセス解析　　：GA4（Google Analytics 4）

全体として、軽量・保守しやすい構成にしています。
特にGoogleフォームを活用することで、サーバー不要でも“しっかり使えるコンタクトフォーム”を実現しました。

工夫したポイントをいくつか紹介

🔹 UX設計から構成へ
サイト構成は「誰に」「何を伝えたいか」を明確に整理しています。
採用担当／開発仲間／同じくポートフォリオ作りを目指す人など、それぞれに分かりやすい情報設計と導線を意識しました。

🔹 MUIによるUIの一貫性
MUIのカスタムテーマを活用し、配色やタイポグラフィ、レイアウトを統一。
Next.jsのApp RouterとTypeScriptでコンポーネントの再利用性・保守性も担保しています。
モバイルファーストで、ハンバーガーメニューなどのUI/UXにもこだわりました。

🔹 GA4による行動ログの可視化
GA4（Google Analytics 4）でページ遷移やフォーム送信、スクロール状況まで分析。
自分自身のサイト改善にも“データドリブン”なアプローチを取り入れています。

🔹 英語化
世界中のデザイナー・エンジニアと繋がりたい想いから、英語でサイトを作成しています。
グローバルなポートフォリオ事例を見てみたい方にもおすすめです。

🔹 楽しんでもらえるように
「また見たい」「話しかけやすい」と思ってもらえるよう、堅苦しくなりすぎず、ユーモアや遊び心も意識しています。

今後の展望

• GA4のデータを活用したUI/UX改善
• サイト制作やUXに関するTips、設計プロセスの発信

おわりに：ぜひ感想・フィードバックをください！

最後まで読んでいただきありがとうございます！
ポートフォリオは絶賛アップデート中ですので、「ここもっとこうしたら？」などご意見・ご感想も大歓迎です。

👇ポートフォリオサイトはこちらから

この記事が、UXエンジニアやNext.js、ポートフォリオ制作に興味がある方の参考になれば嬉しいです！