業務で対応した案件
面談などのクローズドな場では実際のURLを併せて紹介することも可能です。
フロントエンド開発
① 医療系簡易SNSサービスのフロントエンド開発
【プロジェクト概要】
コロナ後遺症の患者同士が症状や対策について語り合うSNSサービスの立ち上げ（受託開発）にフロントエンドエンジニアの一員として携わりました。 （諸事情によりリリースには至りませんでしたが、モニターユーザーによるテストまでは実施）
【チーム規模】
フロントエンド2名 / バックエンド2名 / デザイナー1名 / PM1名 / ディレクター1名
【担当】
UI実装（投稿フォームやタイムラインの無限スクロールなど） / ユーザーの投稿やいいねに応じたAPIリクエスト / ログイン状態に応じたコンテンツの出し分け / データフェッチ（SWR）の再検証設定の調整 など
【取り組み】
本格的な開発案件は初めてだったので必死でNext.jsとTypeScriptにキャッチアップして実装を進めました。
開発初期はUIコンポーネントの実装がメインでしたが、慣れてきてからはロジック部分の実装も担えるようになりました。最終的にはユーザー情報の取得・更新、投稿の取得・更新などメイン機能の開発も担当しました。
【使用技術】
使用技術：Next.js（SG + CSR） / TypeScript / SWR / Tailwind CSS / Headless UI / React Hook Form
※ バックエンドにはヘッドレスCMSのKurocoを使用していました。
② コールセンターシステムのフロントエンド開発
【プロジェクト概要】
Amazon Connectを利用したコールセンターシステムのリニューアルプロジェクトに外部開発協力会社として携わりました。
コールセンターのオペレーターが利用する画面、システム管理者が利用する管理画面をそれぞれReactを使ったSPAで制作。Amazon Connect StreamsおよびバックエンドAPIと連携しています。
【チーム規模】
バックエンド2名 / フロントエンド2名 / PM1名
【担当】
UIパーツ実装 / 通話記録に関するデータの取得・更新処理の実装 / 管理画面のデータ取得・更新処理 / Amplify UI Authenticator を利用したログイン画面の実装
【実績・取り組み】
ある程度Reactに慣れてきたこともあり、API仕様書にしたがって管理画面を構築する作業は比較的スムーズに進めることができました。
一方、Amazon Connect Steamsから通話に関するデータ（電話番号や受電時間など）を取得してバックエンドのAPIに投げる、というような実装ではAmazon Connectに関する情報が少なく非常に苦労しました。公式ドキュメントにも記載が見つからない部分は、サポートに確認したり、愚直にAPIのログを確認しながらなんとか実装することができました。
【使用技術】
使用技術：React / TypeScript / Chakra UI / Amplify UI Authenticator / Amazon Connect Streams / React Hook Form
Webサイト制作
① 小売企業のサービス&コーポレートサイト制作（WordPress）
CMSでの量産ページも含めて500P程度の規模のWordPressサイト制作を担当しました。
取扱商品や店舗情報の更新など複雑なCMS設計が求められましたが、次の通り管理画面の使いやすさにこだわって実装しました。
- 一覧画面に投稿の絞り込み機能を追加
- 統一感のあるカスタムフィールド設計
- よく使う機能への導線をダッシュボードに追加
- 不要なUIは非表示
担当ディレクターからかなり高い評価をいただけた案件でした。
② 大手スポーツメーカーのコーポレートサイト制作
1000P規模の大型サイトのリニューアル案件にフロントエンドエンジニアとして携わりました。
実装タスクを整理したり、外部エンジニアと連携して仕様設計をするなど直接手を動かさない役割も多く担当しました。
作業者としては問い合わせフォームのUI構築&APIとのつなぎ込みをReactで実装しています。
適切なHTML要素やARIA属性を使用してできるだけアクセシブルなフォームとなるようにこだわりました。
③ 大手印刷会社のコーポレートブランドページ制作
比較的リッチなアニメーションを取り入れた横スクロール型のページを制作しました。
横スクロールの処理やアニメーションはGSAPのScrolltriggerを利用して実装しています。
④ 大手航空会社コーポレートサイトのアクセシビリティ向上
社で運用をしているサイトのアクセシビリティ検査で不適合となった項目についての修正、改善を担当しました。
WCAG参照したり、APGを参考にしながらディレクター・デザイナーと協力してUIの修正・実装を行いました。
⑤ ビル・不動産管理企業のコーポレートサイト制作（WordPress）
100P規模のコーポレートサイトをWordPressで制作しました。
管理している物件をCMSで管理したいという要望があり、カスタムフィールドを組み合わせて簡便に更新ができるよう実装しました。
管理画面の使いやすさにもこだわり、クライアントから好評をいただくことができました。
⑥ オフィス用品を取り扱う企業のコーポレートサイト制作
オープニングのアニメーションやJSを使ったUI実装、検索Saasの設定などを担当しました。
CMS設計や外部エンジニアとの連携、CMS選定など上流工程にも携わることができたのは良い経験でした。
⑦ オフィス用品を取り扱う企業の周年特設サイト制作
企業の周年記念として、これまでの企業の歴史を年表形式で紹介するページをReactで制作しました。
JSONで簡易に更新可能としたコンテンツをスクロールと連動したリッチなUIで表現しています。
⑧ 航空会社グループ企業のコーポレートサイト制作（WordPress）
50~100PのコーポレートサイトをWordPressで構築しました。
お知らせやお問い合わせに加えて、キャンペーン情報の更新やオウンドメディア機能を追加するなど多くのカスタマイズを行っています。
またプラグインによる英語化対応も実装しました。
その他制作物・ページ
① 自社サイトの問い合わせフォーム構築
AWS Lamba + API Gateway + SES を利用してサーバーレスで開発、フロントはVueで構築しました。
AWSに本格的に触れるのが初めてだったので良い経験となりました。
② 排水処理に関する計算を行うシミュレーター開発（React）
リニューアルを担当したサイトの一部の機能として開発を行いました。
ユーザーが入力したカテゴリや数値から計算結果を表示する機能をReactで実装しています。
③ 時刻表PDF生成ツール（React + Puppeteerなど）
航空会社のWebサイト内で配布する時刻表のPDFデータ作成を自動化したい、という要望に応えて制作しました。
Node.jsでエクセルからデータ抽出 → Reactでブラウザにレンダリング → PuppeteerでPDFとしてキャプチャ
という流れで実装しています。
A4サイズに合わせてレンダリングを調整するのに苦労しました。
④ エクセルからデータを読み込み料金表を表示するLP（Vue.js）
航空会社のキャンペーン料金を表示するページをVueで構築しました。
exceljsというライブラリを利用してエクセルファイルのデータをJSで読み込み画面に表示しています。
社内環境整備
① Webサイト制作テンプレートの整備
社内のWebサイト制作用テンプレート（11ty,PostCSS,Webpackで構築）をメンテ・整備していました。
使われなくなったコードの整理、UIパーツの追加、ガイドラインを作成して誰でも使えるようにするなど積極的に更新して、制作物の品質向上に繋げることができました。
② アクセシビリティ推進活動
技術チームのMTGでアクセシビリティについて話したり、セミナーやカンファレンスへの参加を呼びかけるなど、社内にアクセシビリティへの理解が広まるよう働きかけました。
③ 社内ドキュメントの整備
各種案件の情報、開発環境の作り方、入社時のオンボーディングなど積極的にドキュメント整備を進めました。