Nick Chen

ABOUT

台湾出身。千葉工業大学大学院でデザイン科学の修士号を取得後、日本のWeb業界で約5年間、フロントエンド開発とUI/UXデザインに従事しています。現在は株式会社アイデアランプにて、フロントエンドエンジニア兼UI/UXデザイナーとして働いています。

私の最大の強みは、「デザインの意図を理解し、それを高品質なコードで正確に再現できること」です。
・一貫した対応力：Figmaを使ったUI/UXの設計やプロトタイプ作成から、実際のコーディング（HTML, SCSS, JavaScript, GSAP）まで一人で完結できます。
・品質と保守性の重視：ただ画面を作るだけでなく、SEO対策、Lighthouseのスコア向上、アクセシビリティを意識したマークアップが得意です。また、後で他の人が見ても分かりやすい、保守性の高いコードを書くことを大切にしています。
・チーム開発の橋渡し：デザインと技術、両方の視点を持っているため、デザイナーやバックエンドエンジニアとスムーズにコミュニケーションを取り、プロジェクトを円滑に進めることができます。

これまで、政府の案件や大規模なECサイト、コーポレートサイトなど、多様なプロジェクトを経験してきました。今後はこれまでの経験を活かし、ユーザーの体験（UX）を向上させ、企業のビジネス課題を解決できるエンジニアとして活躍したいと考えています。現在、より高度な開発を行うため、React や Next.js も独学でキャッチアップしています。

CAREER

2022.10 - 現在

フロントエンドエンジニア
兼UI/UXデザイナー

株式会社アイデアランプ

官公庁・大手企業向けWebサイトのUI設計およびフロント実装を担当。SEO・アクセシビリティ・保守性を重視した開発に従事。

2021.12 - 2022.09

インフラエンジニア

NECネッツエスアイ株式会社

サーバー設置・障害対応・配線作業などのインフラ業務に加え、日本語・中国語での現地スタッフとの調整も担当。

2021.02 - 2021.11

フロントエンドエンジニア

株式会社SCF-SOFT

Shopifyを用いたECサイト構築に従事。UI設計からLP制作、SEO対策まで一貫して担当。

2020.04 - 2020.10

フロントエンドエンジニア

株式会社キューブリック

Web制作会社にて初の実務経験を積み、実装・改善提案・成果検証まで一通り対応。

2018.04 - 2020.03

大学院生

千葉工業大学

2017.01

来日

PROJECTS

制作実績一覧

Project

農林水産省「ニッポンフードシフト」公式サイト

全国各地で開催されるFESイベントや食育キャンペーンなどの情報発信を担う政府系Webサイトで、2022年の入社以降、フロントエンド専任として新規構築・UI設計フィードバック・運用保守・改善提案を一貫して担当しています。

Role

HTMLマークアップ（Pug / SCSS / jQuery）
UIデザイン再現（Figmaベース）
イベントページ（FES、キャンペーン等）の新規作成・定期更新
Gulp → Vite への開発環境移行
Lighthouseスコア改善・パフォーマンス最適化
Gitによるバージョン管理
アクセシビリティ対策（構造タグ、コントラスト、キーボード操作）
バックエンドとの仕様調整

Point

イベント終了後も各ページをアーカイブとして残しつつ、情報の一部を更新し続ける必要があるため、Pug/SCSS構成をパーツ単位でモジュール化。特定エリアのみを迅速に差し替えできるようにし、更新工数を最小限に抑えました。クラス設計はBEMに準拠し、他ページへの影響を防止。
全ページにおいて、スマートフォンからPCまで快適に閲覧できるようレスポンシブ対応を徹底。また、官公庁案件として求められるアクセシビリティ基準に対応するため、構造タグの適切な使用、キーボード操作の考慮、コントラスト比の最適化を実装。
Figmaによるデザインを忠実に再現しつつ、Lighthouseのパフォーマンススコアを意識したコード最適化を実施。環境構築をGulpからViteに移行し、ビルド速度と管理性を改善。

Project

リクルート「ゼクシィ保険ショップ」リクルート「ゼクシィなび」

結婚情報サービス「ゼクシィ」関連の公式サイトにおけるWeb運用案件。
「ゼクシィ保険ショップ」「ゼクシィなび」両サイトのコンテンツ更新やパフォーマンス改善、UIパーツの実装、SEO対策、ABテストの実施など、UX向上と集客力強化を目的とした施策に幅広く携わりました。

Role

HTML / CSS / JavaScript（jQuery）によるページ更新・改修
UIパーツ実装（Adobe XDをもとに再現）
Lighthouseスコア改善（コード最適化 / 読み込み速度改善）
SEO施策の反映（構造タグ、meta設定、読み込み順最適化）
ABテスト実装と結果に基づく改善対応
店舗情報や画像データの最適化・加工対応

Point

Lighthouseの指摘項目をもとに、HTML/CSS構造を見直し、不要なクラスの整理、画像読み込みの遅延対応を導入。結果としてスコア向上とUXの安定化を実現。
XDで提供されたパーツデザインを高精度でコーディング。スマホユーザー比率が高いため、SPでの操作性・可読性を特に意識して調整。
マーケターやデザイナーとのやり取りを通じて、文言変更・導線設計・ABテストパターンの反映を迅速に実施。社内外チーム間の連携ハブ的な役割も担いました。

Project

育児支援アプリ「ままのて」

妊娠・出産・育児期のユーザーを対象とした子育て情報アプリ「ままのて」の既存UI/UXを全面的に見直すプロジェクト。
ユーザー離脱の抑制、初期応募率・継続率の向上、収益改善を目的に、データ分析（Redash）に基づいた課題特定から施策提案、UI再設計、ABテストまでを一貫して担当しました。

Role

UXリサーチ・課題分析（ユーザーデータ／ヒートマップ／応募率・RR分析）
オンボーディング導線改善（スキップ導線、キャンペーン訴求最適化）
FigmaによるUI再設計・プロトタイピング
ABテスト用デザイン作成（ポップアップ、バナー、タブUIなど）
アプリ内通知のデザイン最適化（CTR向上とクレーム低減）
イベント仕様グラフィック制作（季節キャンペーン）
関係者レビュー・仕様調整（クライアント／開発／マーケ）

Point

Redashの定量データとユーザーヒアリングの定性情報を組み合わせ、離脱率の高いオンボーディングや低CTRバナーの原因を特定。改善案をFigmaで可視化し、ABテストで効果検証を実施。
キャンペーン導線の配置見直し、スキップ導線のタイミング最適化、応募率を下げない訴求文言設計により、初日応募率を改善。
ポップアップやタブUIの情報優先度を整理し、操作ステップを簡略化。視認性を高める色彩設計とコンポーネント統一で、SP画面のUI一貫性を確保。

Project

デジタル庁「地域幸福度（Well-Being）指標サイト」

デジタル庁が推進する「地域幸福度（Well-Being）指標」を可視化・発信するWebサイト構築プロジェクト。
自治体や一般市民が幸福度データを簡単に閲覧・活用できるよう、ダッシュボード機能とユーザビリティを重視したUI設計・フロントエンド実装を担当しました。

Role

HTML / SCSS / JavaScript / Vue3 によるフロント実装
Figmaデザインデータを基にしたUIコーディング
UIコンポーネントの統一化・再利用性向上
アクセシビリティ改善（キーボード操作、コントラスト比、構造タグ見直し）
デザイナーとの共創によるデザインガイドライン整備
Gitによるバージョン管理

Point

Vue3のコンポーネント設計を活用し、指標カードやグラフ表示部品を共通化。データ差し替えや新指標追加の工数を削減。
政府関連サイトとして求められる高いアクセシビリティ要件を満たすため、WCAGに準拠したコントラスト比調整、キーボード操作への対応、適切なARIA属性設定を実施。
複数デザイナーが関わる中、Figma上でコンポーネントガイドラインを策定。色、余白、フォントサイズの統一で視認性と操作性を向上。