ABOUT
台湾・高雄出身。大学卒業後に兵役を終え、2017年に来日。日本語学校を経て、千葉工業大学大学院 工学研究科 デザイン科学専攻 修士課程に進学。自動車デザインおよびUI/UXデザインを学び、「移動困難者の利便性向上に向けた移動支援システムに関する研究」に取り組みました。
2020年に修了後、Web制作会社にてフロントエンドエンジニアとしてキャリアをスタート。サーバーエンジニア業務も経験した後、現在は株式会社アイデアランプにて、フロントエンドエンジニア兼UI/UXデザイナーとして勤務しています。
コーポレートサイト、LP、ECサイトなどの新規構築や運用において、UI設計から実装まで一貫して担当。SEOやアクセシビリティ、Lighthouseスコアの向上を意識したマークアップ、保守性・再利用性の高いコード設計を強みとし、チームとの連携にも力を入れています。
また、Figmaを活用したUI/UX設計提案、プロトタイピング、A/Bテスト、改善施策の立案・実行など、デザイン面でも実績を重ねています。React / Next.jsなどのモダンフレームワークも独学でキャッチアップ中。
CAREER
2022.10 - 現在
フロントエンドエンジニア
兼UI/UXデザイナー
官公庁・大手企業向けWebサイトのUI設計およびフロント実装を担当。SEO・アクセシビリティ・保守性を重視した開発に従事。
2021.12 - 2022.09
インフラエンジニア
NECネッツエスアイ株式会社サーバー設置・障害対応・配線作業などのインフラ業務に加え、日本語・中国語での現地スタッフとの調整も担当。
2021.02 - 2021.11
フロントエンドエンジニア
株式会社SCF-SOFTShopifyを用いたECサイト構築に従事。UI設計からLP制作、SEO対策まで一貫して担当。
2020.04 - 2020.10
フロントエンドエンジニア
株式会社キューブリックWeb制作会社にて初の実務経験を積み、実装・改善提案・成果検証まで一通り対応。
2018.04 - 2020.03
大学院生
千葉工業大学2017.01
来日
PROJECTS
農林水産省「ニッポンフードシフト」公式サイト
官公庁案件として、UI設計から実装・保守までを一貫して担当。全国で展開されるイベント情報を発信するWebサイト。
リクルート「ゼクシィ保険ショップ / ゼクシィなび」
結婚情報メディアのWeb運用案件。ページ更新・UI改善・ABテストなどを通じて集客力とユーザー体験の向上に貢献。
育児支援アプリ「ままのて」UI/UX 改善プロジェクト
既存アプリのUX課題を洗い出し、オンボーディング改善やABテスト、UI再設計を実施。離脱率低下と継続率向上を実現。
デジタル庁「地域幸福度(Well-Being)指標サイト」
自治体・市民向けの幸福度データを可視化するダッシュボードサイトを構築。フロント開発とアクセシビリティ実装を担当。
beauty-scandal EC サイト運用・改修業務
Shopifyベースの美容ECサイトにて、新機能追加・UI改善・API連携を担当。UX向上とCV率改善を実現。
全国各地で開催されるFESイベントや食育キャンペーンなどの情報発信を担う政府系Webサイトで、2022年の入社以降、フロントエンド専任として新規構築・UI設計フィードバック・運用保守・改善提案を一貫して担当しています。
- HTMLマークアップ（Pug / SCSS / jQuery）
- UIデザイン再現（Figmaベース）
- イベントページ（FES、キャンペーン等）の新規作成・定期更新
- Gulp → Vite への開発環境移行
- Lighthouseスコア改善・パフォー マンス最適化
- Gitによるバージョン管理
- アクセシビリティ対策（構造タグ、コントラスト、キーボード操作）
- バックエンドとの仕様調整
- イベント終了後も各ページをアーカイブとして残しつつ、情報の一部を更新し続ける必要があるため、Pug/SCSS構成をパーツ単位でモジュール化。特定エリアのみを迅速に差し替えできるようにし、更新工数を最小限に抑えました。クラス設計はBEMに準拠し、他ページへの影響を防止。
- 全ページにおいて、スマートフォンからPCまで快適に閲覧できるようレスポンシブ対応を徹底。また、官公庁案件として求められるアクセシビリティ基準に対応するため、構造タグの適切な使用、キーボード操作の考慮、コントラスト比の最適化を実装。
- Figmaによるデザインを忠実に再現しつつ、Lighthouseのパフォーマンススコアを意識したコード最適化を実施。環境構築をGulpからViteに移行し、ビルド速度と管理性を改善。
結婚情報サービス「ゼクシィ」関連の公式サイトにおけるWeb運用案件。
「ゼクシィ保険ショップ」「ゼクシィなび」両サイトのコンテンツ更新やパフォーマンス改善、UIパーツの実装、SEO対策、ABテストの実施など、UX向上と集客力強化を目的とした施策に幅広く携わりました。
- HTML / CSS / JavaScript（jQuery）によるページ更新・改修
- UIパーツ実装（Adobe XDをもとに再現）
- Lighthouseスコア改善（コード最適化 / 読み込み速度改善）
- SEO施策の反映（構造タグ、meta設定、読み込み順最適化）
- ABテスト実装と結果に基づく改善対応
- 店舗情報や画像データの最適化・加工対応
- Lighthouseの指摘項目をもとに、HTML/CSS構造を見直し、不要なクラスの整理、画像読み込みの遅延対応を導入。結果としてスコア向上とUXの安定化を実現。
- XDで提供されたパーツデザインを高精度でコーディング。スマホユーザー比率が高いため、SPでの操作性・可読性を特に意識して調整。
- マーケターやデザイナーとのやり取りを通じて、文言変更・導線設計・ABテストパターンの反映を迅速に実施。社内外チーム間の連携ハブ的な役割も担いました。
妊娠・出産・育児期のユーザーを対象とした子育て情報アプリ「ままのて」の既存UI/UXを全面的に見直すプロジェクト。
ユーザー離脱の抑制、初期応募率・継続率の向上、収益改善を目的に、データ分析（Redash）に基づいた課題特定から施策提案、UI再設計、ABテストまでを一貫して担当しました。
- UXリサーチ・課題分析（ユーザーデータ／ヒートマップ／応募率・RR分析）
- オンボーディング導線改善（スキップ導線、キャンペーン訴求最適化）
- FigmaによるUI再設計・プロトタイピング
- ABテスト用デザイン作成（ポップアップ、バナー、タブUIなど）
- アプリ内通知のデザイン最適化（CTR向上とクレーム低減）
- イベント仕様グラフィック制作（季節キャンペーン）
- 関係者レビュー・仕様調整（クライアント／開発／マーケ）
- Redashの定量データとユーザーヒアリングの定性情報を組み合わせ、離脱率の高いオンボーディングや低CTRバナーの原因を特定。改善案をFigmaで可視化し、ABテストで効果検証を実施。
- キャンペーン導線の配置見直し、スキップ導線のタイミング最適化、応募率を下げない訴求文言設計により、初日応募率を改善。
- ポップアップやタブUIの情報優先度を整理し、操作ステップを簡略化。視認性を高める色彩設計とコンポーネント統一で、SP画面のUI一貫性を確保。
デジタル庁が推進する「地域幸福度（Well-Being）指標」を可視化・発信するWebサイト構築プロジェクト。
自治体や一般市民が幸福度データを簡単に閲覧・活用できるよう、ダッシュボード機能とユーザビリティを重視したUI設計・フロントエンド実装を担当しました。
- HTML / SCSS / JavaScript / Vue3 によるフロント実装
- Figmaデザインデータを基にしたUIコーディング
- UIコンポーネントの統一化・再利用性向上
- アクセシビリティ改善（キーボード操作、コントラスト比、構造タグ見直し）
- デザイナーとの共創によるデザインガイドライン整備
- Gitによるバージョン管理
- Vue3のコンポーネント設計を活用し、指標カードやグラフ表示部品を共通化。データ差し替えや新指標追加の工数を削減。
- 政府関連サイトとして求められる高いアクセシビリティ要件を満たすため、WCAGに準拠したコントラスト比調整、キーボード操作への対応、適切なARIA属性設定を実施。
- 複数デザイナーが関わる中、Figma上でコンポーネントガイドラインを策定。色、余白、フォントサイズの統一で視認性と操作性を向上。
美容関連商品を販売するShopifyベースのECサイト「beauty-scandal」の運用・改修案件。
新規セクション追加、ランディングページ制作、検索・会員機能の改善、API連携による機能強化など、UX向上とコンバージョン率改善を目的とした施策を継続的に実施しました。
- Shopify（Liquid / JavaScript / CSS）によるページ構築・テーマカスタマイズ
- 新規LP・セクション設計・実装
- サロン検索ページ改修・UX改善
- 会員機能の仕様修正
- バックエンドと連携した管理画面API接続・データバインディング処理
- Gitによるバージョン管理
- ランキング機能や特集LPを新設し、商品発見から購入までの導線を短縮。ABテストで文言・配置を検証し、クリック率と購入率を改善。
- LiquidとJavaScriptを組み合わせ、テーマ標準機能では実現困難なUI・動的処理を実装。制約を理解した上での効率的なカスタマイズを実現。
- バックエンドとの仕様調整を行い、管理画面から取得したデータをフロントにバインド。表示のリアルタイム性と運用効率を向上。