コースケ

##【プロジェクト概要】 ふるさと納税ポータルサイトおよび関連イベントサイト、ECサイトの制作案件に従事。チーム全体のコーディング業務全般 ##【主な業務と役割】 - ふるさと納税ポータルサイトの定期更新・ページ修正、新規ページ追加のコーディング。 - イベントサイトのフェーズごとの新規ページコーディング。 - ECサイト内の特集ページのコーディング。 - CMSのテンプレートパーツのメンテナンス。 - ドキュメント作成とコーディングルールの整備。 ##【課題と解決策】 - クリエイティブチームに所属し、マークアップの知見が不足していたため、ドキュメントを作成し、新規参入者のためにコーディングルールを整備。 - 細かい依頼が多かったため、作業ログをこまめにつけて業務の効率化とメリハリを実現。 ##【自身が発揮したバリュー及び成果】 更新依頼や新規制作が重なっても遅延することなく、スムーズなリリースを実現。 部署の成果物にバリエーションが増え、多様なデザインに対応できる前例を確立。 ディレクターとのコミュニケーションコストを削減し、精度の高いアウトプットを提供。 ##【習得技術・経験】 - FuelPHPの初期経験。 - 新規ECサイトの立ち上げ経験。 - VanillaJSを用いたUIパーツの開発。 - クリエイティブと開発の橋渡し役としての経験。

## プロジェクト概要 オンラインゲームプラットフォームのキャンペーン施策におけるReactを用いたフロントエンド実装とページ軽量化を担当しました。 ## 役割・体制 ### 自身のポジションと役割 - フロントエンドエンジニアとして、季節ごとのキャンペーンページのコーディングを担当し、Reactによるルーレットゲームの内製化とUIコーディングを実施しました。 - JavaScript（React/TypeScript）およびSCSSのコードリファクタリングを行い、パフォーマンスと保守性の向上に寄与しました。 - 散乱していたドキュメントの整理・統合を推進し、新規参入者がスムーズに業務に入れる環境を整備しました。 ### チーム規模と構成 - バックエンドエンジニア5名、フロントエンドエンジニア4名、デザイナー1名、リーダー1名の計11名チームで開発を行いました。 - フロントエンドチームはキャンペーン施策の短期的なリリースに対応するため、アジャイルとウォーターフォールを使い分けて活動しました。』 ## 背景・課題 - キャンペーン施策の実装にあたり、ドキュメントが散乱していて必要な資料を探し出す手間が大きく、作業効率が低下していました。 - キャンペーンページのパフォーマンスとユーザー体験向上を目的に、JSファイルやSCSSファイルの肥大化と複雑化を解消する必要がありました。 - 季節ごとの新規キャンペーンを迅速にリリースしつつ、コードの品質維持と軽量化を両立させることが求められました。』 ## 実際の取り組み ### 開発環境 - ReactとTypeScriptを中心に使用し、既存のLaravel（Blade）プロジェクトへ段階的にReactを導入し、フロントエンドのモダナイズを推進しました。 - webpackを用いてビルド環境を構築し、webpack.configファイルの大規模な改修を行いビルド効率とパフォーマンスを最適化しました。 - GitとGitHubによるバージョン管理に加え、JIRAやConfluenceでタスク管理とドキュメント共有を行いチーム内の情報連携を強化しました。 ### 設計・改善内容 - 散乱していた仕様書や設計資料をConfluence上で体系的に整理・統合し、新規参入者を含むチーム全体の業務理解を促進しました。 - JSファイルやSCSSファイルのリファクタリングを実施し、不要コードの削減やモジュール分割を進めることで、キャンペーンページのロード速度とレンダリング性能を向上させました。 - ルーレットゲームのReact化により、UIの一貫性を確保しつつユーザーインタラクションをスムーズに実現しました。 ### その他アピールポイント - Figmaを用いたデザイナーとの密な連携により、実装とデザインの齟齬を最小限に抑え、品質の高いユーザーインターフェースを提供しました。 - チーム内でのナレッジ共有を目的に、React導入やwebpack設定の変更点をドキュメント化し、継続的な改善活動を推進しました。 ## 成果・価値 - プレゼント企画のコーディングによりキャンペーンの成功とユーザー参加数の増加に寄与し、プラットフォームの活性化に貢献しました。 - ルーレットゲームのReact化とUIコーディングによって、ユーザーがスムーズにキャンペーンに参加できる環境を提供しました。 - JSファイルやSCSSファイルのリファクタリングにより、キャンペーンページ全体の軽量化とパフォーマンス向上を達成しました。 - 散乱していたドキュメントを体系的に整理したことで、新規参入者の業務開始が迅速化し、チームの生産性向上に繋がりました。

【プロジェクト概要（目的・人数・体制など）】 社内で使用する、キャンペーンや請求情報等を管理するブラウザで動く社内システムのフロントエンド開発 【プロジェクトにおける自身の役割】 キャンペーン適用店舗の割引商品や請求書周りを管理する社内システムの画面周りのフロントエンド分野を担当、 Vue.jsを使用した新規画面のUI実装、請求書データのAPIの連携。バリデーションルールの追加、 また、フロント周りの設計書の作成など、画面遷移やボタンの配置や押下後のUI/UXの提案や各タスクの対応。 【当時の背景/抱えていた課題等】 フロントエンドに知見のあるメンバーが少なく、confluenceなども導入していたが、ドキュメント類が整備されていなかった 2か月ほど経った後はフロントエンドも対応できるメンバーが増えていき、相談しながら進めていけるようになったが、リモートならではのコミュニケーションの問題出てくる。 毎朝のMTGでの積極的な発言やconfluenceでドキュメント、設計書を徐々にまとめていき、システムの全体像のイメージをメンバーへ共有していくなどしていった 【発揮したバリュー及び成果】 フロントエンドの特にCSSの部分で、slackのハドルやzoomなどで口頭でのフォロー、フロントエンド全般の実装 追加した方がよいボタンや項目などを提案することで、社内で実用性のあるシステムに仕上げていった オンラインMTGでの積極的な発言で問題を浮彫にしていき、コミュニケーションをとりながら解決策を見出していった 【習得技術・経験】 フルリモートでの業務経験 Eclipseを使った開発、Vue.jsの知見

【プロジェクト概要（目的・人数・体制など）】 ・2019年1月～2019月8月　某通信会員向けサイト・コーポレートサイト内コンテンツの運用・更新業務。店頭で使うシステムのフロント開発補佐。 ・2019年9月～2020月4月　某銀行サイトのリニューアルプロジェクトへアサインし、コーディングの他、ソースチェック。 【プロジェクトにおける自身の役割】 主に既存の会員サイトの修正・更新・運用業務と並行して、Nuxt.jsで新規プロジェクトのモックアップの制作。 銀行サイトのプロジェクトでは主に、既存ページから新デザインでのリニューアルコーディング、他、コーディングしたページのソースコードチェック 【当時の背景/抱えていた課題等】 店頭で使う予約システムの導入にあたり、初めての試みであり、開発期間にも余裕がなく、事細かに技術調査を行う必要があった その後はまったく別プロジェクト（銀行サイトのフルリニューアル）に前プロジェクトの経験からアサインすることになったが、そこでもリソースが少なかった 【課題に対して自身が発揮したバリュー及び成果】 予約システムのプロジェクトの時の環境面はブラウザのキオスクモードで利用するとのことだったので、モックアップ制作の際、環境設備の調査などを行い、スムーズな報告でPMの判断材料となる情報を提供し、チームで相談しながら開発を進めていきました。 銀行のプロジェクトでは、慎重にページのソースコードをチェックし、問題点やわからないことを即座に確認することで、プロジェクトの工数削減に貢献しました。 【習得技術・経験】 キオスクモードでの開発、webpackを使用したJSのモジュール化 コミュニケーションをとりながら問題点を洗い出し、チームで相談しながらの開発、制作をすること ソースコードチェックで多量のページをチェックする力

【プロジェクト概要（目的・人数・体制など）】 自動資産運用アプリを提供する金融機関（BtoC）の コーポレートサイトの更新・新規ページ追加などのコンテンツを作成 【プロジェクトにおける自身の役割】 コーポレートサイトの運用をメインに、Laravel環境下での新規ページ、キャンペーンページのコーディングやサイト全体のリニューアル対応。ほか、アフィリエイト用のLP制作、HTMLメルマガコーディング、Googleオプティマイズを利用したABテストコーディング。 コラムページにwordpressを導入する際にテーマの作成も担当する 【当時の背景/抱えていた課題等】 参画当初はスタートアップという事もあり、リリース手順や環境構築のことなど、ブラックボックス化しているものが多々あり、誰がどこの何を担当しているのかが、不明瞭だった。 また、リリースやコーディングの際のルールも曖昧で、統一感にかけていたところもあった、 【課題に対して自身が発揮したバリュー及び成果】 コーディングルールなどは、当時はマークアップ担当が自分とDir1名ずつしかいなかったので、必要あれば、confluenceなどでマニュアル化するなどして、ルーティンを作り、新しい人が参画してもすぐに業務に入れるようにする事に意識して取り組みました。 環境面はインフラチームとの連携、コミュニケーションが取れるようになり、ほか、デザイナーの手が回らないときは、簡単な画像修正なども行い、急な修正や要望にも臨機応変に対応していき、週ごとの更新を遅延なくリリースすることに成功する。 その結果、ユーザー数とユーザーからの預り資産額が、参画当時は200億だったのが、1年ちょっとで1000億にまで増え、業界でNo.1となるまでの成長に貢献する 【習得技術・経験】 LaravelPHPによる開発環境構築、@includeなどを利用したコーディング Git、Bitbuketなどによるバージョン管理、Googleオプティマイズを利用してのABテストコーディング web制作会社とは違った制作（開発）現場での経験、大規模のサイトリニューアルの経験 スタートアップ企業での業務経験

【プロジェクト概要（目的・人数・体制など）】 タイなどの東南アジアに進出している流通業者向けのカタログアプリのUIのデザイン、モックアップの制作PM・PG10名ほどのプロジェクトの中に、コーダーとして参画 【プロジェクトにおける自身の役割】 アプリのページごとの画面設計や、アイコン制作、ページによってはモックアップのコーディングなども行う。 プロジェクト内に外国人開発者が多くおり、CSSコーディングのフォローなどもしました。 【当時の背景/抱えていた課題等】 外国人開発者が多く、技術的なことよりも、コミュニケーション的な問題も多かった。 【課題に対して自身が発揮したバリュー及び成果】 デザインできる人がいなかったので、簡易的なアイコンの制作や、cssのコーディングのフォローなどでコミュニケーションを少しでも円滑にし、UIなどのデザインラフを作成して、他の開発者たちに、アプリの完成画面をイメージさせる事により、プロジェクトを少しでも進めやすくしてきました。 【習得技術・経験】 技術とは違うかもしれませんが、ハイブリッドアプリというフロントエンドの技術でスマホアプリを作れるもの存在を知った事やその開発の現場、 海外の人と仕事をする事

【プロジェクト概要（目的・人数・体制など）】 金融情報サービスの提供する会社のコーポレートサイト・LPの更新・修正 【プロジェクトにおける自身の役割】 大手金融系グループ企業での金融情報サイトのWEBデザイン／コーディング業務ほかバナー制作など 日々の為替情報や仮想通貨情報、ファンド情報の定期更新、セミナーイベントのページや特集記事の制作 【当時の背景/抱えていた課題等】 参画当初は初めて人を入れる部署で、引継ぎ方法も制定されていなく、作業が属人化しつつあった 【発揮したバリュー及び成果】 日々のルーティンを速習し、メイン業務である新規ページ制作を迅速に対応することで、遅延なくリリースしてきました。 また引継ぎ資料をより簡潔に整理することで、後任者にもスムーズに作業に取り掛かってもらう。

【プロジェクト概要（目的・人数・体制など）】 日本全国の中小企業、飲食店、個人商店、病院などにホームページソリューションを提供するweb制作会社のマークアップエンジニア デザイナー、マークアップ含めて３０名ほど 【プロジェクトにおける自身の役割】 ディレクターが作成した指示書と、デザイナーが作成したデザインデータをそれぞれ渡され、それをもとに顧客企業の新規コーディング、 または過去制作したサイトの修正や、OEM、リプレイス案件など、他グループ企業が受け持つ病院のサイトのリプレイスなども担当。 また2016年8月から4ヶ月間はベトナムのオフィスに駐在し現地スタッフの管理の仕事に携わりました。 【当時の背景/抱えていた課題等】 こなす案件は多く、手持無沙汰になる事はなかったが、新しい技術の導入や、環境の改善に対する対応など、申請や提案を出しても、なかなか要望が通らなかった。 【課題に対して自身が発揮したバリュー及び成果】 環境の改善を待つだけでなく、とにかく案件をこなすため、コーディングのスピードアップの為、個別でテンプレートを用意し、パターン化させたり、ディレクター個人個人の癖や好みなどをある程度把握し、指示の曖昧な箇所があれば、すぐにディレクターへ確認をし、余分な工数をなくしていく。その結果、ひと月に新規制作だけで約20件ほどの制作をこなし、マークアップグループ内でトップの生産性をあげる。 【習得技術・経験】 Wordpressを用いた制作、Sass(scss)を使ったコーディング。Gulp（タスクランナー）の使用、gulpのタスク作成・追加 Atom、Sublimetext、VScodeなどのテキストエディタでのコーディング Git、gitlabなどによるバージョン管理 テンプレートを利用したスピーディーなHTML/CSSコーディング 実務でのレスポンシブデザインの対応、海外（ベトナム）での勤務

【プロジェクト概要】 当時所属していた人材派遣会社のオフィシャルサイトの運用・リニューアル、その後の更新業務 地域に特化した求人専用サイトの立ち上げによる、応募の増加 上長とデザイナーの2名体制 【プロジェクトにおける自身の役割】 2004年から４年間、営業管理部にて就業していたが、部署移動となり、 コーポレートサイトの更新、デザインの一新などの業務に従事する。 その後、別に求人専用サイトの立ち上げにかかわる 【当時の背景/抱えていた課題等】 自社で手探りで制作していたWEBサイトを少しでも統一感を出す。 掲載するコンテンツの充実。求人の応募数の他、企業からの依頼の増加 【課題に対して自身が発揮したバリュー及び成果】 社内初のweb担当者として独学で、サイトをリニューアルさせたことと、求人専用サイトを別途制作し、会社そのものの為のサイトと、求人用とサイトを分けることで、新しい求人のフローを確立させ、それまでは、紙媒体での求人募集が多かったのが、WEBからでも補う事に成功する。 結果的に、広告費も抑える事ができ、リニューアル以前と比べて、20%以上WEBサイトからの応募が増加、また人材を依頼する企業からの問い合わせもDMを制作して、配布する事などを行い、少しずつ依頼も増加させてきました。 【習得技術・経験】 独学でのHTMLとCSSにてサイト制作Addobe系ソフトの使用経験、CMSを使った作業