JR恵比寿駅が最寄りのメンズ向け全席個室ネイルサロンの新装開店に伴い、競合分析～技術仕様選定、リニューアルUIデザインに関するIA設計・UIデザインの提案とデザインデータ作成、リニューアル関連のフロント側の全実装作業、サーバーレス環境構築までを技術責任者として担当致しました。
その後は、SEO強化設計のために SPA → SSR 化での改良を視野に入れつつ、新規美容系別サービスのリニューアルなども担当しています。
● 新規店舗サイト制作（PM）
| 関連リンク | https://genique.jp/ |
| 設計構想 | ● 新装店舗のブランドイメージに沿い、都会風に洗練され、コンサバティブでモダンなデザインと、ユーザーへの直感的な訴求を調和し、リニューアル版で表現 ● 新装店舗の内装イメージや施術イメージなどをユーザーに想起させる再現性を重視 |
| ビジネス形態 | B to C |
| 使用言語 | React / TypeScript / Tailwind.css / Three.js / GSAP |
| 使用AI | Chat GPT 5.0~ / Gemini 3.0~ / Claude / Nano banana 他… |
| エディタ | Cursor |
| 開発環境 | GitHub , GitHub Actions / Node.js / Vite / Vercel / MCP / Codex |
| デザインツール | Figma / Photoshop / Illustrator / Google Whisk |
| 分析ツール | Googleアナリティクス / Google Search Console / Page Speed Insights |
| タスク管理 | Backlog / Google Spread Sheet（WBS） |
| 開発スタイル | アジャイル型開発、チーム内レビュー体制 |
| その他 | サーバーレス環境構築など対応、役員レビュ―有 |
● 最大手美容系ポータルサイト「HOT PEPPER Beauty」のWeb媒体でしかこれまでは、運用がなかったので、Webサイト版としては完全な新規設計と構築・実装を実施しました。
● フロント側は、React / TypeScript / Tailwind.css の基本構成により、Figmaデザインなどでのデザインからの連動性を高め、コンポーネント分割もしながら実装しました。また、画面スクロール時、インタラクティブな表現を再現するために一部 WebGL を使用しました。
● サーバー管理コストを下げるために、今回はVercelを起用。Github Actions のCICDも経由し、スムーズにリリースできるよう設計しました。
● 新たに技術的な部分を取り入れる際、設計段階、実装、エラー対応など、各所で生成AIやAIエージェントを利用し、作業効率や制度を高めるよう工夫した恩恵が大きいです。
● ワイヤーフレーム・各種デザインデータ・バナーの作成
| 使用ツール | Figma / Photoshop / Illustrator / Nano banana |
| 成果物 | 新規店舗サイトデザイン作成、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善 |
● Figmaを使用し新規ブランドデザインの作成。ブランドコンセプトを何度もヒアリングを重ねたうえ、デザインを作成し、幾度かのレビューを終えて仕上がりへブラッシュアップされました。また、適時レイアウトの洗練を練るために、AIでの調査も有効活用し、最適解を何度もシミュレーションした上で制作を進めました。
● 素材などはPhotoshop、Illustrator、Figmaで画像を必要、ご要望に応じて適時作成