PORTFOLIO / 2026
手で組む、
その先のWebへ。
WordPressのオリジナルテーマ制作を軸に、HTML / CSS / JavaScript で 速くて壊れにくいサイトをつくっています。次は Next.js・TypeScript で、 設計から手触りまで一貫したものづくりへ。
関光 正輝
Front-End Engineer
Web歴 3年
Based in Japan
scroll01
制作実績
受託・自主制作から抜粋。設計から実装、公開後の運用までを一人称で。
2026 / E-Commerce
ハンドメイドアイテム販売
ECサイト
個人開発としてハンドメイドアイテムを販売するECサイトを制作。 Next.jsとShopify Storefront APIを活用して商品管理・注文管理・決済機能を構築し、運営者が管理しやすい仕組みを実現しました。 また、レスポンシブ対応や商品検索機能を実装し、ユーザーが快適に利用できるECサイトを目指しました。
- Next.js
- Shopify Storefront API
- TypeScript
- SCSS
- Figma
URL:https://choro-stitch.vercel.app/
2024 / WordPress
Web・IT総合支援会社
コーポレートサイト リニューアル
Webサイトの実装を担当。 SVGアニメーションを多用した動きのあるサイトの実装に加え、WordPressのカスタム投稿を活用して更新しやすい運用環境を構築し、進捗管理や共同編集など小規模チーム開発にも携わりました。
- HTML
- SCSS
- JavaScript
- WordPress
- ACF
- Figma
URL:https://aegis-service-system.com/
2024 / WordPress
販売代理店・営業支援会社
コーポレートサイト
販売代理店・営業支援事業を展開する企業のコーポレートサイトを制作。 WordPressのカスタマイズとフロントエンド実装を担当し、パララックスを活用した奥行きの表現を意識したサイトに仕上げました。
- HTML
- SCSS
- JavaScript
- WordPress
- Figma
URL:https://equal-inc-service.com/
Web Application
タスク管理アプリ
タスク管理アプリの制作。 Next.jsを使用して、タスクの追加、編集、削除、完了状態の管理を行うアプリを実装しました。 ログイン機能を実装し、ユーザーごとにタスクを管理。また、グラフ機能を実装し、タスクの進捗状況を可視化。
- React.js
- Next.js
- TypeScript
- SCSS
- Figma
- Vercel
URL:https://task-management-three-flax.vercel.app/
Web Application
顧客管理ダッシュボードアプリ
顧客管理ダッシュボードアプリの制作。 顧客の表示、管理に加えて、売上の前年比・目標比で表示することで、売上の推移を確認できるようにしました。 また、顧客ごとに案件進捗やタスク、ログを残せるような機能を実装。 データはFirebaseを使用して管理し、データの変更はFirebaseのデータベースに反映。
- React.js
- Next.js
- TypeScript
- SCSS
- Figma
- Vercel
- Firebase
URL:https://dashboard-one-tawny-43.vercel.app/login
Web Application
バドミントン試合管理アプリ
バドミントンの試合組み合わせを表示するアプリを実装。 オプションとして、試合参加の割合、休憩、途中退出の設定ができるようにしました。 実際に使用しフィードバックをもらうことで、改善点を修正しつつ開発体験を積みました。
- React.js
- TypeScript
- Vercel
URL:https://shuttle-match-three.vercel.app/
02
技術スタック
主に使用している技術スタック。
Languages
HTML
CSS
Sass
JavaScript
TypeScript
CMS
WordPress
STUDIO
Framework / Library
React
Next.js
Three.js
Tools
Git
GitHub
Figma
Photoshop
Illustrator
Environment
Node.js / npm
Vite
Vercel
03
お問い合わせ
Web制作・フロントエンド開発の
ご相談をお待ちしております。