400万人が利用するビジネスSNS
冨岡 司 エンジニア/ディレクター
相手にとって最高のアイデアとアウトプットを
個人事業主でエンジニアをしています 冨岡 です！
この先やってみたいこと
現在、個人事業主として活動中で、お仕事募集中です。
- 100P規模コーポレートサイト｜ヘッドレスCMS化
【プロジェクト概要】 100ページ以上で構成されるコーポレートサイトの一新に当たり、デザイン改修、全ページCMS化、特別ページの追加など、サイト全体を改修するプロジェクト。 【担当フェーズ】 ● 実装 / CMS入力サポート 【業務内容】 ● 実装 / CMS入力サポート MicroCMSで定義したコンポーネントの実装、CMSでの適切な入力のサポート、を担当。PMが入力中に困った時に、フォローしたり設計調整のお願いをしたり、一緒に並走しながら進行。 【実績・取り組み】 設計補助の中でも、テーブル入力の設計は特に貢献しました。 設計当初は、5つのデザインパターンが選べるだけだったのですが、それだと実現不可能なテーブルも発生し、問題がありました。 そこで「ヘッダー有にする」「横スクロールを許可する」「縦線有りにする」といったルールベースの設計を提案。 実装側としてはパターンが増えて構築が大変になりましたが、再現できるテーブルの自由度が上がり、入力のしやすい設計に調整ができました。 【技術スタック】 使用言語：TypeScript, HTML/CSS FW / 環境：Next.js, React AI：Claude Code, Cursor CSS：Scss その他：Git, GitHub, SourceTree
- - 桜AIカメラ 開発
【プロジェクト概要】 スマホカメラで撮影した桜の健康状態と推定樹齢をAI判定し、ユーザーや自治体に開示されるサービス「晴れ風 桜AIカメラ」の開発。 桜を撮影すると、幹の状態等から健康状態を推定して「元気度・樹齢」を判定、撮影データはデータベース化され、全国で撮影された桜データをリアルタイムに公開し、桜の保全活動へと活用されるコンテンツ。 今田美桜と目黒蓮の起用効果もあってSNSでも話題になり、多くのメディアでも取り上げられ、反響を呼んだ。 東洋経済オンライン https://toyokeizai.net/articles/-/865446 【技術スタック】 使用言語：TypeScript, HTML, CSS FW：Next.js, React AI：Claude Code, Cursor CSS：CSS in JS (Vanilla Extract) ビジュアル：Three.js, Shader その他：Git, GitHub, SourceTree 【担当フェーズ】 ● 要件ヒアリング ● 環境構築 / 詳細設計 ● 実装 ● 運用保守 【業務内容】 ● 要件ヒアリング クライアントと社内PMと一緒に「撮影した桜画像の加工」「トリミングでできること」「エラー判定」など、テクニカル部分を中心に要件を整理。 ● 環境構築 / 詳細設計 フロントの開発環境を設備して、開発メンバーに提案。状態管理ツール(Redux)、スタイリング方法(Vanilla Extract)、など、複数案を出して意思決定し、環境構築まで担当。 詳細設計では、カラー・フォント定義などの実装設計や、撮影画面の画面遷移フローの整理、共通のコンポーネントの設計などを行なった。 ● 実装 スマホ撮影機能、撮影画像の加工・トリミング、撮影データ送信、診断結果画面の展開、などの桜AIカメラの主要機能の「撮影」画面を実装。 加えて、TOPページなどその他ページのマークアップと、全体のデバック等幅広く対応。 ● 運用保守 公開後も内容の追加調整があったため、PMと連携しながら運用を最後まで並走しました。 【実績・取り組み】 機能実装では、開発期間が約2ヶ月でスピードが重要だったため、MDNを読めば正確に実装してもらえそうな撮影許可フロー等は、Claude Codeに依頼しつつ進行しました。 また、撮影画像の加工やトリミング処理については、要件定義の段階からクライアントとすり合わせやフィジビリ調査をし、円滑に設計まで進められるように努めました。 【技術スタック】 使用言語：TypeScript, HTML/CSS FW / 環境：Next.js, React AI：Claude Code, Cursor CSS：CSS in JS (Vanilla Extract) その他：Git, GitHub, SourceTree
-
- 在庫管理Webアプリ「W-KEEPER」開発（WMS）
【プロジェクト概要】 2023年時点で3,545荷主で稼働する倉庫管理システム(WMS)「W-KEEPER」の新規Webアプリ開発。オンプレミス/パッケージソフトとして提供するW-KEEPERをクラウド型として新規展開するプロジェクト。 2022年から約1年をかけて役員とPMを含めたメンバーで要件定義が行われ、その後バックエンドの基盤が整えられ、2023年2月頃からフロントエンドの開発も本格的に始動。 【担当フェーズ】 ● フロントの進行管理/要件提案 ● UIの構成制作 / ベンダー管理 ● フロントエンドの要件定義 / 詳細設計 ● フロントエンド実装 ※一部担当 【業務内容】 ● フロントの進行管理/要件提案 参画当初は私の役割が明確に定義されていない中で、UIベンダー提携やフロントエンドの技術選定、フロントエンドメンバーのアサイン願い等、PM/PLへ様々な提案をしながら進行してまいりました。 ● UIの構成制作 / ベンダー管理 UIデザインに関しては私の力では応えられなかったため、私がワイヤーフレーム制作をしてUI実装はベンダーに依頼するよう提案。PM/PLと連携しつつ、ベンダーとの橋渡しとなる動きをしました。 ● フロントエンドの要件定義 / 詳細設計 React状態管理は何を扱うか、スタイル記述のルールはどこまで決めるか、コンポーネント設計等の詳細設計など、テックリードと相談しつつ要件定義を行いました。 他にも、私がUI制作のベンダーと連携していたので、カラーやフォントなどのデザインルールの実装などもエンジニアメンバーにブリッジしつつ、要件をまとめていきました。 ● フロントエンド実装 詳細設計と並行してできるところから実装開始しました。引き継ぎ先のフロントエンド実装ベンダーと連携しつつ、モーダルやタブといった汎用性のあるコンポーネントの型定義と一部実装まで担当しました。 【技術スタック】 使用言語：TypeScript, HTML/CSS FW / 環境：Next.js, React CSS：Scss その他：Git, GitHub, SourceTree
-
