Atsuki M. — Portfolio

Welcome Atsuki M.'s portfolio

本ポートフォリオは、next.jsを使用し作成しています。
オリジナルデザインで、テイストは幼少期からゼルダの伝説のゲームファンのため参考に作成しております。
ポートフォリオを作成する上での技術スタックは以下の通りです。

技術スタック

  • Next.js (App Router) / TypeScript
  • Tailwind CSS
  • Framer Motion (アニメーション)
  • Biome (フォーマッター)
  • ESLint (リンター)
  • Husky + lint-staged (Gitフック)

上記を基盤に本ポートフォリオサイトの開発を行っています。

・自己紹介

Atsuki M.と申します。20代後半、フロントエンドエンジニアとして活動しています。

学生時代はマーケティング戦略を学び、商品企画や産学連携プロジェクトに参加。 卒業後はデジタル広告の運用支援・人材紹介・ライブ配信プロダクション等の多様なビジネス経験を経てエンジニアに転向。 受託開発を通じ共済系の契約管理システム・放送局向け業務システム・大手通信グループ向けLLM搭載AIサービスと業界をまたぐ3プロジェクトに約2年間従事。現在は自社WEBメディア運用企業にてフロントエンド開発・ABテスト・AI活用業務効率化を担当しています。

採用・業務ご依頼の方には、実名・在籍社名・案件名を含む詳細プロフィールも別途ご案内できます。


💡私について一言でいうと?

「ビジネス感覚を持ち、AI駆動で開発スピードを高められるエンジニア」

  • React / Vue.js / TypeScript を主軸とした実装経験
  • Claude Code・Cursor等を活用したAI駆動型開発(Vibe Coding)の実践者
  • 営業・広告・マーケティング経験によるユーザー視点とビジネスKPIの両立

🌱今後の目標

「この人となら最高の成果を成し遂げられる」と思っていただけるエンジニアになることを目標にしています。 React / Vue.js を中心としたフロントエンド技術を磨きつつ、AI駆動開発の実践者として 設計〜実装〜テストの各フェーズで開発速度と品質の両立を追求していきます。 社内でAIハッカソンを主催するなど、チーム全体のAI活用リテラシー向上にも貢献し続けたいと考えています。

    フロントエンド × AI駆動開発 × ビジネス視点

    を一貫して発揮できるエンジニアへ

・現場経験

  • 自社WEBメディア運用企業|2025年12月〜現在現職

    WEBメディア フロントエンド開発

    自社LP・CMSで運用するWEBメディアの運用・保守(デザイン取り込み・機能追加・バグ修正)。ABテストの設計・実装・効果測定によるコンバージョン改善。SEO対策・広告LP品質スコア改善(サーチコンソール活用)。AIツール選定・プロンプト実装による社内業務効率化を推進。

    PHP / HTML / CSS / JavaScript / Node.js / MySQL / WordPress / Cloudflare / GCP / GitHub / Figma / Cursor

  • ソフトウェア受託開発企業(SES)|2024年11月〜2025年11月(1年)

    LLM活用AIウェブアプリ開発(アジャイル)

    大手通信グループ向けLLM搭載AIサービスの新機能開発・既存機能改善。競合調査・企画立案・R&D・PoC開発(市場検証から実装まで一貫担当)。Chrome拡張のプロトタイプを単独で設計〜実装(Plasmo)。Vitestによるテスト・カバレッジ。スクラム形式の短期スプリントに継続参加。

    React / TypeScript / Electron / Hono / Tailwind CSS / Vitest / tiptap / Plasmo / mastra / PostgreSQL / Zod / Google Apps Script / AWS / GitLab / OrbStack / Cursor / Claude Code

  • ソフトウェア受託開発企業(SES)|2024年4月〜2024年10月(7ヶ月)

    大手放送局向け業務システム クラウド移行・新規構築

    放送業向け操作管理画面のフロントエンド開発(複数画面)。ユーザー登録・アラート監視・保守設定・一覧系画面を実装。API・仕様・レイアウト変更に伴う設計書更新と単体テストを実施。

    Vue.js(3系)/ TypeScript / Vuetify / Pinia / Zod / Docker / GitHub / Backlog

  • ソフトウェア受託開発企業(SES)|2024年1月〜2024年3月(3ヶ月)

    共済系契約管理システム フロントエンド開発

    共済系契約管理のフロントエンド開発(大規模画面群)。ロール別の書類登録・提出・登録情報変更などを実装。Jestによるカバレッジテストの維持。結合テストでの障害探索・ケース実施・データ整備・障害対応。

    React / TypeScript / Jest / Tailwind CSS / MySQL / Node.js / GitHub

作品

Netlify Demo(LP)

開く

軽量LP・演出検証

helpful-hotteok-f97800.netlify.app

WASABI 2020

開く

Webサイト実装

wasabi2020.com

GitHub Repositories

開く

コード・成果物一覧

github.com

※ 一部サイトはセキュリティ設定によりプレビューが表示されない場合があります。リンクからご覧ください。

スキルセット

💡 特に得意な技術スタック(実務メイン)

以下の技術スタックはここ数年での使用頻度が高く、設計から実装、テストまで一貫して高いパフォーマンスを発揮できます。

  • React
  • Vue.js(3系)
  • TypeScript
  • JavaScript
  • Tailwind CSS
  • Git / GitHub / GitLab

🔥 フロントエンド

  • HTML / CSS
  • JavaScript
  • TypeScript
  • React
  • Vue.js(3系)
  • Next.js
  • Tailwind CSS
  • SCSS
  • Vuetify
  • Pinia

🧪 テスト

  • Jest
  • Vitest

※ カバレッジテスト含む実務経験あり。

🧩 バックエンド / DB

  • Node.js
  • Hono
  • PHP
  • MySQL
  • PostgreSQL
  • Zod
  • Google Apps Script

※ フロントエンドが主担当。コード読み書き・設定変更レベルの経験あり。

☁️ クラウド / インフラ

  • AWS
  • GCP
  • Cloudflare
  • Docker
  • OrbStack

※ コード読み書き・設定変更レベルの経験あり。

🚀 その他技術

  • Chrome拡張機能(Plasmo)
  • Electron
  • tiptap
  • mastra
  • WordPress

🛠 開発環境 / ツール

  • Git / GitHub / GitLab
  • Sourcetree
  • Docker
  • VSCode
  • Cursor
  • Figma
  • Canva
  • Backlog
  • Redmine
  • Notion
  • Trello

🤖 AIツール活用

  • Claude Code
  • Cursor AI
  • ChatGPT
  • Gemini
  • Perplexity

※ AI駆動型開発(Vibe Coding)を日常的に実践。社内AIハッカソンも主催。

📂 コミュニケーション / ビジネスツール

  • Slack
  • Teams
  • ChatWork
  • Google Workspace
  • Excel
  • Word
  • PowerPoint

・強み

  • 〜 ビジネス感覚を持ったフロントエンドエンジニア 〜

    営業・デジタル広告支援・コンテンツ制作・マーケティングなど多様なビジネス領域を経てエンジニアに転向。「ユーザー視点とビジネスKPIを同時に意識した開発ができること」が強みです。ABテストの効果測定・LP品質スコア改善・SEO対策など、エンジニアリングとマーケティングを横断した業務も担当できます。

  • 〜 多様なプロジェクト・技術スタックへの高い適応力 〜

    共済系契約管理(React・Jest・大規模画面)/放送業向け業務(Vue.js 3系・アラート監視)/LLM連携AIプロダクト(React・Electron・ブラウザ拡張)と、業界も技術スタックも異なる複数案件に短期間で順応。PHP / WordPress ベースのメディア運用保守まで対応範囲を拡大。「初めての技術でも自走してキャッチアップできる」強みをプロダクトの幅で証明しています。

  • 〜 AI駆動型開発(Vibe Coding)の実践者 〜

    Claude Code・Cursor・Geminiを活用したAI補助開発を日常的に実践し、設計〜実装〜テストの各フェーズで開発速度と品質の両立を追求。社内では「AI教育ハッカソン」を主催し、チーム全体のAI活用リテラシー向上にも貢献。AIが当たり前になった開発現場において、活用側として高い価値を発揮できます。

  • 〜 チームの潤滑油・組織貢献への積極的な姿勢 〜

    エンジニアオンボーディング支援・社内勉強会・部活動の企画運営など、技術外の組織活性化にも積極的に関与。企画・デザイン・開発・営業を橋渡しする「全員が同じゴールを見られる環境づくり」が得意領域。中小〜中規模チームにおいて、開発とビジネスをつなぐ役割で最大限の価値を発揮できます。

まとめ

最後までご覧いただきありがとうございます。 強みは「ビジネス感覚を持ちながら、AI駆動開発で実装スピードと品質を両立できること」です。 React / Vue.js を中心としたフロントエンド技術と、Claude Code・Cursorを活用したVibe Codingを組み合わせ、 業界をまたぐ多様なプロジェクトで成果を出してきました。 チームへの貢献・AI活用ナレッジの還元・ビジネスKPIを意識した開発を通じて、 ともに成長できる環境で最大限の価値を発揮したいと思っています。

詳細な職務経歴(実名・社名・案件名の明記)は、選考やご依頼に応じて共有しています。

© 2026 Atsuki M. — portfolio