株式会社よりそう 様において、家族葬や火葬式など、葬儀費用の明朗会計・定額プラン、緊急時の24時間対応で葬儀仲介プラットフォームとして全国展開する「よりそうお葬式」のサービス強化のためアサインされました。スパイラル型開発とチーム内レビュー体制を採用し、役員レビューや社内勉強会も実施され、組織的にはポジションや部署間の連携もスピーディーで活性化された環境でした。実装作業ではフロント側の機能改善やSEO施策なども含めた実装領域を対応したり、PCやSPのテンプレートパーツをコンポーネントとして統一化するなど葬儀のブランドガイドラインに沿った実装を幅広く対応しました。
①UIUXデザインの業務：
- 葬儀サービス用LP、ページリニューアル用デザイン、サービス内UIデザインのレイアウト設計と構築・ワイヤーフレーム～モック作成
- Adobe Marketo Engage HTMLメール配信サービスのデザイン
- キービジュアル、バナーの作成
- 制作物データの保守・運用
- デザインレビュー（1次レビュー→2次レビュー→PMレビュー）の過程で成果物を制作
②フロントエンド～サーバーサイド：
- Figma作成の各種デザインをレスポンシブ設計・MFIやクロスブラウザ考慮で実装（Google MAP APIも多少カスタム）
- SalesforceやShopifyからの動的データの出力を連携して目的別に実装（ドメイン駆動設計なども初めて理解）
- LaevelやVueなどのフレームワークを使用したUI実装、Docker、Node.jsとの連携、CICDの運用
- フロント側のパフォーマンスチューニング（画像最適化、コード圧縮、遅延読み込み、キャッシュ活用など）
- Adobe Marketo Engage HTMLメールの実装、運用
- 実装チーム内コード成果物のレビュー
● プラットフォーム内の新規実装・保守運用、新規サービス構築（FE / UIUXデザイナー）
| 関連リンク | [保守更新案件] https://www.yoriso.com/sogi/ https://www.yoriso.com/corp/ https://www.yoriso.com/butsudan/ https://www.yoriso.com/kaiyo/ https://www.yoriso.com/sogi/jizenwari/ https://news.yoriso.com/A01.html [新規案件] https://www.yoriso.com/fuho/yoriso/moshu/lp/ |
| ビジネス形態 | B to B / B to C |
| 使用言語 | HTML Living Standard / SCSS / JavaScript / Vue / Vuetify / Laravel / Bootstrap5 / EJS |
| エディタ | Visual Studio Code / PHP Storm |
| 開発環境 | GitHub / Docker / Yarn / Node.js / Webpack / MySQL |
| デザインツール | Figma / Photoshop / Illustrator |
| 分析ツール | Googleアナリティクス / Google Search Console / Page Speed Insights |
| MAツール | Adobe Marketo Engage |
| タスク管理 | Backlog / Google Spread Sheet（WBS） |
| 開発スタイル | スパイラル型開発、チーム内レビュー体制 |
| その他 | 社内勉強会（デザイン、テック、ビジネス）、PMレビュ―有 |
● 新規サービス立ち上げプロジェクトではVue2.0とVuetifyを使用して実装（UIデザイン改修とデータバインディングでバックから連携されているSalesforceやShopifyなどの値を渡して動的に条件別に表示させるなど）していました。
● CSSの規則はBEMを使用し、PC / SPページ、レスポンシブ設計を適用。一部共通化できるものは、デザインコンポーネントに変換。
●フロント側ではJSによる実装も状況に応じて対応（Vue.js / Google MAP API）。
● Core Web Vitals（CLS）改善を目的にレイアウトシフトを分析後、画像・広告・Webフォントなど非同期で読み込まれる要素について、表示領域の事前確保と読み込み順の最適化を行い、CLSを改善。
● デザインの作成
| 使用ツール | Figma / Miro / Photoshop / Illustrator |
| 成果物 | 新旧デザインデータ作成、ビジュアル・バナー作成 |
| 作業領域 | ブレーンストーミング、WF作成、プロトタイピング、ユーザーペルソナ、 IA設計、ブランディング、UI改善、マルケト（HTMLメール） |
● ワイヤー ⇒ デザイン作成、新規マークアップ実装や保守案件などプロジェクトマネージャーの方と適時相談、連携して進めて参りました。
● 主にWFやホワイトボード、デザインでもメインは Figma を使用
● デザインガイドラインが既にあるものについてはトンマナを合わせてデザイン
● 素材などはPhotoshop、Illustrator、Figmaで画像を必要、ご要望に応じて適時作成
● Figma生成データのチーム内管理を強化（デザインガイドラインをもとに、スタイルガイドやデザインコンポーネントの体系的管理）
● Adobe Marketo Engageを用いて、Marketo HTMLメールやメールユーザー向けLPなどは新規デザインや実装、運用環境設定、使用方法に関するWiki作成などを担当
