ID:61193さん

# プロジェクト概要 シード期の企業でVtuber向けのプラットフォームサービスの開発 # 開発メンバー CTO、自分、副業エンジニア4人 # 使用技術 Nuxt.js、TypeScript、Graphql、urql # 業務内容 フロントエンド設計、開発 # 詳細 ・GraphQLのフラグメントコロケーションを用いた実装方法を提案・導入。この変更により、コンポーネントとクエリおよびミューテーションの依存関係が明確になったことで、デバッグのしやすさ、保守性の向上につながった。 ページファイルごとにロジック用のファイルを作成し、そこでqueryやmutationを行っていたり、様々な箇所に似たロジックを書いてしまっていたことからデバッグが大変であった。 そのため、データ取得ロジックを各コンポーネントの近くに配置し、 コードの可読性と再利用性を高め開発効率向上に繋げようと考えたため。 ・デザイナーとコミュニケーションをとり、新レイアウトを作成。AtomicDesignのtemplate層の原則に従って新レイアウトを実装し、10種類のレイアウトを使い分けていたところを2種類だけに統一した。 ナビゲーションのメニューがなく、アプリケーションの導線がわかりづらい状況になっていた。 さらに、AtomicDesignのtemplates層をうまく使えておらず複数のtemplateが乱立していた。 ナビゲーションを含めたtemplateを作成し、必要なものだけに簡潔にまとめてレイアウトを一新することで一貫性のある実装ができるように整えた。 ・Nuxt.jsのpluginsの機能を使ってカメラ、マイクデバイスの状態管理をアプリケーション全体で一律管理するように修正した上でWebRTCを利用したビデオ通話機能の開発を行った。 デバイスの状態を集中管理することでコンポーネント間の状態の整合性を保つため。また、さまざまな箇所で使われるデバイス状態のコードの重複を防ぐため。 ・ApplePay,クレジットカード決済を含む支払い機能のリファクタリングを実施。複数の箇所に散乱していたコアとなる計算部分のロジックをhooks化させ、保守性の高いコードに修正した。 特にバグが起きてはいけない支払いロジックの部分であり、ロジックの一元管理をして保守性を高めたかったため。 ・アプリケーションのインタラクション向上のため、Vue.jsのトランジション機能を基に複数のアニメーション用の共通コンポーネントを作成し、リッチなUIの構築を主導した。 ホバー時やモーダル表示時のアニメーションがなく、アプリケーションが安っぽく見えてしまっていた。 variablesで共通cssとして定義、vueコンポーネントとしてアニメーション用のテンプレートを作成することで一貫して開発者が共通のアニメーションを付与できるようにしUXを改善したかったため。

# プロジェクト概要 UGCマーケティングツールのフロントエンド開発 画像や動画投稿を管理できるシステムをユーザーに提供、 そのシステムをECサイトと連携し、ユーザーの売上アップにつなげるためのアプリ。 # 開発メンバー PM1人、フロントエンドエンジニア3人、バックエンドエンジニア3人 # 使用技術 Vue.js（OptionsAPI） / TypeScript / Vuetify / Vuex # 業務内容 フロントエンド設計、開発 # 詳細 ・ユーザーの画像投稿や動画投稿を管理するシステムのフロントエンドの画面設計、開発を実行。 ・Vue.jsのOptions APIからComposition APIへの移行を主導し、月間タスク完了率を130%向上。 ・Storybookを活用して会社の独自UIライブラリコンポーネントのデザインと開発に貢献。優秀なデザイナーがおり、高クオリティの独自UIを作成できる環境に合ったこと、フロントエンドエンジニアには経験が浅いメンバーが多く、UIの品質を担保するためにUIコンポーネントを管理し、効率的かつ一貫性のある開発を推進したかったために行った。 ・動画プレイヤー（videojs）の改善やバグ修正など細かいフロントエンドの修正対応。

# プロジェクト概要 Saas型のBtoB受発注サービスの新規開発。 # 開発メンバー PM1、フロントエンドエンジニア3人、バックエンドエンジニア3人 # 使用技術 Vue.js（compositionAPI） / JavaScript /TailwindCSS /_Laravel # 業務内容 フロントエンドの設計、開発 バックエンドAPIの開発 # 詳細 ・詳細な仕様書はなく、Figmaにメモされている簡易的な仕様をBizメンバーとすり合わせながらアジャイルでの0→1のフロント開発を経験 ・ユーザーのフィードバックをリサーチした結果から、複数見積もり作成機能を構想し、要件定義、デザイン、実装までの全プロセスを主導。見積もり作成プロセスの33%で採用される機能になった。 ・Google Analytics 4を設計、導入し、DataStudioと組み合わせることでデータ測定ができる環境を整えた。それを利用して使用頻度の低い機能をまとめ、改善することでユーザー体験を向上させた。

# プロジェクト概要 6人のScrumチームの一員として、自社のBtoB一括見積りサービスのSEOを改善。サイト構造の修正や、テクニカルSEOに関わる開発を実施し、月間コンバージョン率を112%増加させる成果を達成。 # 開発メンバー PM1人、スクラムマスター1人、開発エンジニア4人 # 使用技術 HTML / CSS / JavaScript / PHP / Laravel / Silex # 業務内容 ・パンくずの整理 ・noindex/nofollow設定 ・ページスピード改善（lazyloadやcacheの改善など） ・関連記事表示機能 ・内部リンクの整理 ・CVモーダルのABテスト ・metaタグの改善 # 詳細 行った上記のようなSEO改善の施策案は基本的にPMが要件定義だったが、改善施策案を自ら積極的に提案。 施策案を出すにあたってPageSpeedInsights、TestMySite、GoogleSearchConsoleといったツールを利用。 例えば、GoogleSearchConsoleで画像検索の流入数が減っていることを発見し、 画像が検索に表示されるようにした結果、月3000ssほどの回復に貢献。 開発実務経験の少ない中でもPMの手が回らないニッチな部分まで注視して改善を行うことを意識した。