ID:83726さん

# プロジェクト経験概要 カウンセリングルームの情報発信・問い合わせ管理を 実現するWebアプリケーションの企画・開発 # チーム情報 - 個人開発（企画・要件定義・設計・実装・テスト・デプロイ・運用を一人で担当） - クライアント：カウンセリングルームを主催する個人事業主 # 開発・実装内容1 ## 問い合わせフォーム・Gmail連携機能 **【どのような機能の開発・実装か】** サイト訪問者がフォームから送信した内容を、 クライアントのGmailにリアルタイムで転送する仕組み **【課題・問題点】** クライアントは情報発信の手段がなく、 問い合わせをGmailで一元管理する仕組みもなかった。 顧客との接点が限られている状態だった。 **【使用した技術】** - Laravel（バリデーション・メール送信）を採用 - エディター職で培ったヒアリング・要件整理の経験を活かし、 クライアントの意向を丁寧にヒアリングして要件を整理 - ワイヤーフレームを作成し「提案→フィードバック→修正」の サイクルでUI/UX、およびサイト内テキストを改善 - Adobe CC （Photoshop / Illustrator）を用いてデザイン・レイアウトも自ら担当 - 自分が実施：要件定義・設計・実装・デザイン・テスト・デプロイ # 開発・実装内容2 ## テスト・品質担保 **【どのような機能の開発・実装か】** フォーム送信・画面遷移・メール送信の動作保証 **【課題・問題点】** 本番公開前に第三者が実際に使った際の 不具合を事前に検出する必要があった **【使用した技術】** - PHPUnit：バックエンドのユニットテスト - Laravel Dusk：ブラウザを使ったE2Eテスト - Playwright：クロスブラウザでの動作確認 - Google Lighthouseによる読み込み速度の計測・改善 - ローカルトンネルを使って第三者に実機検証を依頼し、 使用感のフィードバックをもとに改善 - 自分が実施：テスト設計・実装・フィードバック反映 # 開発・実装内容3 ## デプロイ・運用 **【どのような機能の開発・実装か】** Xserver共用サーバーへの本番デプロイと継続運用 **【課題・問題点】** PaaSではなく共用サーバーへのSSHデプロイのため、 サーバー設定・ドメイン管理・環境構築を手動で行う必要があった **【使用した技術】** - SSH接続によるXserver共用サーバーへのデプロイ - 本番公開後もnews追加・地図差し替えなど継続的な改善を実施 - 自分が実施：サーバー設定・デプロイ・継続運用

# プロジェクト経験概要 個人開発の成果を提示するポートフォリオサイトの 設計・開発・デプロイ # チーム情報 - 個人開発（企画・設計・実装・デプロイを一人で担当） # 開発・実装内容1 ## フロントエンド実装・コンポーネント設計 **【どのような機能の開発・実装か】** Vue.jsを用いたSPA構成のポートフォリオサイト。 ヒーローアニメーションを含む動的なUI設計と コンポーネントベースでの再利用性を重視した実装。 **【課題・問題点】** 個人開発の成果を整理して提示する場が必要だった。 またLaravel中心の開発から、フロントエンドフレームワークへの 理解を深める必要があった。 **【使用した技術】** - Vue.js：コンポーネント指向の理解を深めるために採用 - Vite：高速ビルドで試行錯誤を素早く回すために採用 - vue-router：ルーティング管理に使用 - AI壁打ち＋Cursor：ヒーローアニメーションの実装前にAI壁打ちで構造を整理。 Cursorによるコードを、仮説検証とデバッグを繰り返しながら開発 - 自分が実施：設計・実装・デバッグ・リファクタリング全般 # 開発・実装内容2 ## CI/CD構築・デプロイ **【どのような機能の開発・実装か】** GitHub連携による自動デプロイ環境の構築 **【課題・問題点】** 手動デプロイする非効率を改善し、 開発→反映のサイクルを理解する必要があった **【使用した技術】** - Vercel：GitHub連携による自動デプロイに採用 - CI/CD：変更→プッシュ→自動反映の流れを構築 - 自分が実施：CI/CD設計・デプロイ環境構築

# プロジェクト経験概要 実ユーザーが使うメンバー専用掲示板アプリの 企画・設計・開発・運用 # チーム情報 - 個人開発（企画・設計・実装・テスト・デプロイ・運用を一人で担当） - 実ユーザー：大学同期グループ（複数名が実際に利用中） # 開発・実装内容1 ## リアルタイムUI・認証・権限設計 **【どのような機能の開発・実装か】** ログイン認証・ロールベースのアクセス制御・リアルタイムで更新される掲示板UI **【課題・問題点】** 大学同期グループ全員が使える共有コミュニケーション基盤が必要だった。 またLaravel認証・DB設計・権限管理などの習得が必要だった。 **【使用した技術】** - Laravel 12 + Livewire：JSフレームワークなしでリアルタイムUIを実現 - Enum：ロール管理（admin / member / viewer）を 明示的に型で管理し、権限設計を保つ - Alpine.js：ユーザーの声をもとに文字カウンター機能を追加。 フィードバック→改善のサイクルを実践 - 自分が実施：要件定義・DB設計・認証実装・権限設計・UI実装 # 開発・実装内容2 ## テスト・品質担保 **【どのような機能の開発・実装か】** 認証・権限・投稿機能の動作保証 **【課題・問題点】** 実ユーザーが使う本番環境のため、公開前に品質を担保する必要があった **【使用した技術】** - Pest：Laravel推奨のテストフレームワークを採用し機能テストを実施 - 自分が実施：テスト設計・実装・品質確認 # 開発・実装内容3 ## デプロイ・インフラ・運用 **【どのような機能の開発・実装か】** 本番環境の構築・デプロイ・コスト0での継続運用 **【課題・問題点】** 本番に近い環境でのデプロイ経験を積みたかった。 またランニングコストを抑えた運用が必要だった。 **【使用した技術】** - Docker + Render + FrankenPHP：本番に近い環境でのデプロイを実現。 FrankenPHPの導入時のトラブルをデバッグしQiitaに記録（「デバッグの細道」シリーズ） - Neon（PostgreSQL）：サーバーレスDBでコスト0運用を実現 - 現在Laravel Notificationsによるメール通知機能を開発中 - 自分が実施：インフラ設計・デプロイ環境構築・継続運用