WEBディレクター / コーダー志望
・キャンペーン進行管理や事務局対応の実務経験あり
・代理店等との折衝、スケジュール管理の経験あり
・HTML / CSS / JavaScriptでの基礎実装スキル
将来は要件定義から実装までを一人で完遂できるプロを目指し学習を継続しています。
実務での折衝力と、ユーザー視点の設計・AI活用を掛け合わせ、ビジネス課題を解決するWeb制作を遂行します。
大学卒業後、ドコモ・サポート株式会社にてカスタマーサクセス、営業事務、Webサービス制作進行管理に従事。
年間予算1,000万円規模の大手クライアントに対し、施策の企画立案からKPI分析までを一貫して支援しました。
その後、株式会社シンクにてデジタルプロモーションのディレクター職を経験。
システム要件定義や5,000名規模のキャンペーン構築において、代理店との折衝や複雑なスケジュール管理、事務局対応を主導しました。特にSNS運用ではインプレッション数120%増、獲得単価45円での新規獲得2,500名を達成しています。
企画から実装までを形にするプロセスに強く惹かれ、Webディレクター・コーダーとして事業課題の解決に貢献したいと考え、転身を決意しました。
趣味：筋トレ（ジム週5）、サウナ、美容
設計・ディレクション
前職での1,000万円規模の案件進行経験を活かし、ビジネス課題を解決するための論理的なサイト設計と、納期・品質の管理を徹底します。
実装
基礎的なマークアップとCSSアニメーションを自力で実装する土台に加え、複雑なJSロジックは生成AIへ的確なプロンプトを指示し、開発工数を最適化します。
デザインツール
画像トリミングやバナー作成など、コーディングに必要な素材加工やトンマナに合わせた軽微なデザイン調整を迅速に行います。
活用ツール
生成AIへの的確なプロンプト設計により、要件整理から実装補助まで制作工程の各フェーズを効率化します。
「覚醒・静寂」をコンセプトにした架空の高級フィットネス施設のフルスクラッチ制作サイトです。
ペルソナ設計からコーディングまでを単独で遂行しました。
| ROLE | ディレクション / 実装 |
|---|---|
| PERIOD | 10日間 |
| TECH | HTML / CSS / JS / Illustrator / Photoshop / 生成AI |
| DEVICE | レスポンシブ対応（PC/SP） |
| CONCEPT | ・特別な空間を直感的に伝えるため、FVで「静と動」を表現しブランドへの没入感を創出 ・ターゲットの時間価値を尊重し、余白を活かしたUIで意思決定を妨げない直感的な導線を設計 |
| POINT | ・ペルソナの求める「静寂」をUIで表現 ・生成AIで高品質なアニメーション実装の工数削減 |
| URL | サイトを開く → |
主要な高級パーソナルジム・スパ5社を対象に、UI構成や提供価値を分析しました。競合の多くが「活気」や「情報量の多さ」を押し出している傾向を抽出。これに対し、本件ではペルソナのインサイトに基づき「情報制限による静寂」を独自の差別化ポジションとして定義しました。
ペルソナの認知から入会（CV）に至る行動フローを逆算し、サイトマップを策定しました。時間価値を重視するターゲット特性を考慮し、トップページから最短の遷移で各詳細情報へ到達できる5ページ構成のワイヤーフレームを設計し、迷いのない直感的な導線を確保しました。
策定した要件を満たすため、HTML/CSS/JSによるフロントエンド実装を遂行しました。スクロール連動のフェードイン等、高度な演出が求められるJSロジック部分には生成AIを補助として導入。的確なプロンプト指示により、実装品質を担保しつつ開発工数を最適化しました。
実装完了後、PCおよびスマートフォン実機でのレスポンシブ表示と、主要ブラウザにおける動作テストを実施し、アニメーションの挙動を微調整しました。同時にCV導線の弱点など、次期改修に向けたUI/UXの改善課題（NEXT ISSUE）を抽出し言語化しています。
職業訓練校の中間課題として制作したWebサイトです。
codingページの「CSSアニメーション&装飾アイデア集」とAIページの「ゲームコレクション」のJavaScript実装において、生成AIを補助ツールとして活用し、短期間で動くものを作る経験を積みました。
| ROLE | 実装 / AIプロンプト設計 |
|---|---|
| PERIOD | 7日間 |
| TECH | HTML / CSS / JS / Illustrator / Photoshop / 生成AI |
| DEVICE | PC固定幅（900px） |
| POINT | ・CSSアニメーション等を自力で実装し基礎力を証明 ・複雑なJSゲームはAIへ的確に要件定義し開発速度を向上 |
| URL |
サイトトップを開く → codingページを開く → AIページを開く → |
4名体制でのチーム制作プロジェクトです。受注側・発注側の両視点を経験し、要件定義から実装までのプロセスを協働で遂行しました。
| ROLE | 主要コーディング / モックアップ主導 |
|---|---|
| TEAM | 4名（受注・発注の両役割を経験） |
| TECH | HTML / CSS / JS / Figma / GitHub |
| POINT |
・モックアップを主導し、チーム内のデザイン認識を統一 ・実力不足がデザインの制約になることを痛感し、技術習得を加速 |
| INSIGHT | 進行管理やヒアリングの難しさを通じ、納期遵守と意図の正確な把握の重要性を学びました。この経験から、より広範な実装スキルを持つコーダーを志すようになりました。 |
| URL | サイトを開く → |
10日間という短期間で、企画・要件定義から5ページ構成の実装までを「高級感と静寂」を軸に一貫した世界観を表現できました。また、生成AIを活用して高度なアニメーション実装の工数を削減し、限られたリソース内で品質と開発速度を両立させるディレクションを実行しました。
入会・見学申し込みを促すCVボタンの配置数が不足しており、かつデザインに馴染みすぎて視認性が低い点が課題です。今後はサイトの高級感を損なわずにボタンを目立たせるUIの工夫と、目標数値から逆算した精緻な導線設計に取り組みます。
複雑なCSS、JavaScriptのロジックに対し、AIへ的確なプロンプトを出すことで短期間で実装できました。意図を言語化して的確に伝える「AIディレクション」を実践した結果、複数のコンテンツを短期間で制作し、工数の大幅な削減を実現しました。
出力されたコードでエラーが発生した際、原因を素早く特定して修正する自己解決能力を高める必要があります。今後はJavaScriptのコード構造や根底のロジックをより深く理解するための学習を継続し、実務での運用・保守にも耐えうる品質管理能力の向上に努めます。
複雑なCSS、JavaScriptのロジックに対し、AIへ的確なプロンプトを出すことで短期間で実装できました。意図を言語化して的確に伝える「AIディレクション」を実践した結果、複数のコンテンツを短期間で制作し、工数の大幅な削減を実現しました。
出力されたコードでエラーが発生した際、原因を素早く特定して修正する自己解決能力を高める必要があります。今後はJavaScriptのコード構造や根底のロジックをより深く理解するための学習を継続し、実務での運用・保守にも耐えうる品質管理能力の向上に努めます。