東京都内（23区内・区外含む）ではシェアの大きな葬儀サービス「都民のお葬式」サービスサイトのリニューアルに伴い、競合分析から、技術仕様選定、リニューアルUIデザインに関するIA設計・UIデザインの提案とデザインデータ作成、リニューアル関連のフロント側～バックエンドでの全実装作業、VPSサーバー構築、サーバー移管などを主に技術責任者として担当致しました。
現行版（レンタルサーバー）と、新装版（VPS）の技術設計やプログラムが、大幅に異なる分、新たにサーバーを契約、構築し、Docker 経由で、CICDまで組み込み、最終的には新装版を一時的にリリースしました。VPS構築やDB連携などサーバーサイドの作業に加え、コードロジックのリファクタリング、拡張性、セキュリティ対策、メール連携～お問い合わせ機能強化など実装の面でも改善点を踏まえて対応しました。
一時リリース作業後、SEO対策を強化した後期版のデザインも設計、実装まで担当しました。
また、現行版のサービスについても、保守・運用や、Cloudflare仕様への対応とメンテナンス、専用サーバー移管作業など、適時、依頼を受け、コストパフォーマンスや技術的検証・エビデンスを明確にしつつ適切な対応を行いました。
● プラットフォームのフルリニューアル・リプレイス（PM）
| 関連リンク | https://tomin-osohshiki.jp/ |
| 設計構想 | ● 葬儀プラットフォームにおける、ユニバーサルデザインを取り入れたサイトとして、普遍的な分かりやすさや視認性、認知度の向上を追求 ● 「お悔み」という、ユーザーのネガティブ・センシティブな感情が含まれる上での条件下、必要な情報の取得とサービスの訴求・差別化ができるかがポイント |
| ビジネス形態 | B to C |
| 使用言語 | HTML Living Standard / SCSS / JavaScript / Laravel / Livewire / MySQL / Nginx |
| エディタ | Cursor / Visual Studio Code |
| 開発環境 | GitHub , GitHub Actions / Docker / Node.js / Vite / VPSサーバー / Cloudflare |
| デザインツール | Figma / Photoshop / Illustrator |
| 分析ツール | Googleアナリティクス / Google Search Console / Page Speed Insights / Mieruka |
| タスク管理 | Backlog / Notion AI / Google Spread Sheet（WBS） |
| 開発スタイル | ハイブリッド型開発、チーム内レビュー体制 |
| マネジメント | エンジニア 1名 |
| その他 | 管理者業務、サーバー構築、サーバー移管、SEO対策など対応、役員レビュ―有 |
● リニューアル作業におけるフロント～バック側の実装は現行版を引き継ぎつつ、Laravel側の利点を生かして再設計し、全ての実装を担当し、リファクタリング・バグ処理・デプロイ環境構築までを独力と自走で行いました。
● インフラ側はVPSサーバー（KAGOYA）を契約し、独力で環境構築後、現行版がPHPベースの背景から、Docker / Nginx / Laravel / Laravel Blade / Livewire / Vite の技術スタックで技術選定し、MVC設計による実装をしました。
- VPS側はLinux , UbuntuでエンジニアがGUIで触れる状態で設定。また、サーバー側のセキュリティ対策も同時に設定。
- Dockerにおいてはアプリ、DB用にそれぞれコンテナを設置し、専用ymlによる本番・テスト環境の分化でビルドしサーバー起動まで再現できる仕様で作りました。Dev containerなどで開発環境再現を手渡しやすく改善しました。
- NginxはLaravelのサーバーアップ、本番・テストの各種設定に使用。UIUXはLaravelに親和性高いBladeテンプレート機能、Livewireを駆使して構築しました。
- Viteでは主に以前のWebpack系統のビルドや、パフォーマンスチューニングなどの作業を担うようにしています。
● GitHub Actionsでは workflow.yml を設定し、本番・テスト環境の分化で、CI/CDに環境をデプロイするようにしました。（GitHub Container Registry /ghcr の利用など）
● DBはMySQLで式場検索機能のロジックや、キーワード検索機能、AJAXで葬儀オプション取得のロジックを組み込みました。（内部データをjsonやテーブルで管理）
● お問い合わせフォームはリアルタイムバリデーションやMailtrap / Yubinbangoで機能を強化、さらに送信時のDB登録などでEFO（Entry Form Optimization）とデータ取得を狙いとした改善を実装で再現しました。
● リニューアルや移管作業時における、Cloudflareへのサイト繋ぎこみ、各種設定なども対応しました。（DNS設定、CDN配信によるパフォーマンスチューニング、DDoS防御、SSL/TLS証明書の導入によるセキュリティ強化とキャッシュ機能によるページ読み込み速度の改善、Googleタグゲートウェイ接続、障害発生時対応など）
● CSSの規則はBEMを使用し、PC / SPページ、レスポンシブ設計を適用。一部共通化できるものは、デザインコンポーネントに変換。SCSS技の各種検証と導入（@use、コンテナクエリ、has()…）も実施。
● Core Web Vitals（CLS）改善を目的にレイアウトシフトを分析後、画像・広告・Webフォントなど非同期で読み込まれる要素について、表示領域の事前確保と読み込み順の最適化を行い、CLSを改善。
● 初期リリース後、「KPI設定 → 計測 → 改善施策 → 検証」のサイクルを回し、ヒートマップや効果測定をもとにコンバージョン導線を最適化した後期版デザインを作成し実装。サイト全体のボリュームもUI整理により軽量化し、読み手側の負担を減らすデザインにブラッシュアップしました。
● リニューアル作業のプロジェクト中、現行版の運用作業も定期的に発生したため、コードレビューや技術的問題解決や技術指南など、もう一名のエンジニアの方のマネジメントやサポートも行いました。
● ワイヤーフレーム・各種デザインデータ・バナーの作成
| 使用ツール | Figma – FigJam / Photoshop / Illustrator |
| 成果物 | 新旧デザインデータ作成、デザインガイドライン、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善 |
| その他 | 外部クライアント向け資料作成 |
● Figmaを使用しリニューアル用新規UIデザイン作成（TOP～各種機能含め全体）、ビジュアル・バナー作成、ガイドライン作成、リニューアル前後のデザインデータ整備とトレース、トンマナ調整
● Light houseなどでサイトの改善部分を提案ベースでスタートし、まずは初期案が完成。初回リリース後、GA4やMierukaなどのより有効な分析手法を介し、ユーザーペルソナを再分析し、デザインを初期版からSEO設計や導線、利便性を強化した後期版としてブラッシュアップし、実装も兼ねて担当しました。
● 主にWFやホワイトボード、デザインでもメインは Figma を使用し、リニューアル要のPC画面とモバイル画面を作成しました。ブランドイメージに沿って、コントラストや識字率なども考慮しつつデザインは応相談の上、作業を進めて参りました。
● 素材などはPhotoshop、Illustrator、Figmaで画像を必要、ご要望に応じて適時作成
● Figma生成データのチーム内管理を強化（デザインガイドラインをもとに、スタイルガイドやデザインコンポーネントの体系的管理）
● サービスを対外的に説明するコンサル用資料作成も行いました。（全体デザイン当て、技術適用の説明項目作成など）