ID:84281さん

# プロジェクト概要 FDE / Solution Engineer / AI導入支援 / Web制作領域への応募・営業活動に活用するため、自身の経験・スキル・制作実績を整理したポートフォリオサイトを制作しました。 家電修理・エアコン工事などのフィールドサービス経験をもとに、現場業務理解、顧客ヒアリング、問い合わせ導線設計、AI/Web活用による業務改善の取り組みが伝わる構成を目指しました。 # 担当したこと - サイト全体の構成設計 - 自己紹介・強み・実績セクションの設計 - ポートフォリオ掲載内容の整理 - スマートフォン表示を前提としたUI調整 - Next.js / React / TypeScriptでの実装 - Tailwind CSSによるデザイン調整 - Vercelでの公開 - GitHubでのコード管理 # 課題 単に制作物を並べるだけでは、採用担当者や案件発注者に自分の強みが伝わりにくいと考えました。 特に、現場業務経験とAI/Web制作の経験をどのようにつなげて見せるかが課題でした。 # 工夫したこと まず、見た人が短時間で人物像を理解できるように、自己紹介、強み、対応可能な業務、制作実績、使用ツール、問い合わせ導線を整理しました。 また、FDE / Solution Engineerを目指す方向性に合わせて、単なるWeb制作ではなく「現場課題を理解し、AIやWeb技術で業務改善に落とし込む人材」であることが伝わる構成にしました。 デザイン面では、信頼感・清潔感・テック感を意識し、スマートフォンでも読みやすい余白、見出し、カードUIを調整しました。 # 使用技術と使用場面 - Next.js：サイト全体の構築に使用 - React：セクションごとのUIコンポーネント設計に使用 - TypeScript：型を意識した実装に使用 - HTML / CSS：ページ構造と細かな見た目の調整に使用 - Tailwind CSS：レスポンシブ対応とデザイン調整に使用 - Vercel：本番公開に使用 - Git / GitHub：コード管理に使用 - ChatGPT / Claude Code / Codex：構成案、文章作成、UI改善案、実装補助に活用 # 成果 自身の経験、スキル、制作実績を1つのサイトに整理し、転職活動や案件応募時に提示できるポートフォリオとして公開しました。 また、制作を通じてNext.js、React、TypeScript、Tailwind CSS、Vercelを使った一連のWeb制作フローを経験しました。 このプロジェクトにより、現場経験とAI/Web活用を組み合わせた強みを、採用担当者や案件発注者に伝えやすい形に整理できました。