NICK CHEN'S
PORTFOLIO
All Projects
所属 | プロジェクト名 | 期間 | ツール | 役割 | |
---|---|---|---|---|---|
株式会社アイデアランプ | 農林水産省「ニッポンフードシフト」公式サイト 運用 | 2022/10~現在 | フロントエンド、UI/UXデザイン | ||
株式会社アイデアランプ | みつけるくんLP リニューアル | 2025/07~2025/08 | フロントエンド | ||
株式会社アイデアランプ | sunsetbeachpark リニューアル・運用 | 2022/10~2025/08 | フロントエンド | ||
株式会社アイデアランプ | モグー アプリフロント改修・運用 | 2024/11~2025/08 | フロントエンド | ||
株式会社アイデアランプ | beauty-scandal EC サイト運用・改修業務 | 2025/02~2025/07 | フロントエンド | ||
株式会社アイデアランプ | アドバンサーのコーポレートサイト リニューアル | 2024/06~2025/06 | フロントエンド | ||
株式会社アイデアランプ | コンペスケット自社のLP作成 | 2025/04~2025/05 | フロントエンド | ||
株式会社アイデアランプ | パナソニック ハックツECサイト運用 | 2023/10~2025/04 | フロントエンド | ||
株式会社アイデアランプ | 北日本石油 コーポレートサイトリニューアル | 2024/08~2025/03 | フロントエンド | ||
株式会社アイデアランプ | モグー サービス紹介サイト作成 | 2024/11~2025/02 | フロントエンド | ||
株式会社アイデアランプ | フジ・コーポレーションオンラインショップ リニューアル | 2024/04~2025/02 | フロントエンド | ||
ジックスタッフ サイトリニューアル | 2024/11~2024/12 | フロントエンド | |||
株式会社アイデアランプ | グッドクルー コーポレートサイトリニューアル | 2024/06~2024/10 | フロントエンド | ||
株式会社アイデアランプ | WA MAREオンラインショップ 運用 | 2023/09~2024/10 | フロントエンド | ||
株式会社アイデアランプ | hikidashi デジタルコンテンツ作成・販売プラットフォームサイト 作成 | 2023/11~2024/09 | フロントエンド、UI/UXデザイン | ||
株式会社アイデアランプ | OMO+(おもたす)Webアプリ 運用 | 2023/08~2024/06 | フロントエンド | ||
株式会社アイデアランプ | 篠崎運輸 コーポレートサイトリニューアル | 2024/02~2024/04 | フロントエンド | ||
株式会社アイデアランプ | WA MARE菊川シェアハウス LP作成 | 2024/07~2024/07 | フロントエンド | ||
株式会社アイデアランプ | WA MARE柴又ホテル LP作成 | 2024/04~2024/05 | フロントエンド | ||
株式会社アイデアランプ | トレインパーク白山 リニューアル | 2024/01~2024/03 | フロントエンド | ||
株式会社アイデアランプ | J-SYSTEM コーポレートサイトリニューアル | 2023/11~2024/02 | フロントエンド | ||
株式会社アイデアランプ | 育児支援アプリ「ままのて」UI/UX 改善プロジェクト | 2023/03~2024/01 | UI/UXデザイン | ||
株式会社アイデアランプ | ESSENTIAL TRAVEL 情報発信サイト 作成 | 2023/06~2023/12 | フロントエンド | ||
株式会社アイデアランプ | デジタル庁「地域幸福度(Well-Being)指標サイト」 作成 | 2023/07~2023/12 | フロントエンド、UI/UXデザイン | ||
株式会社アイデアランプ | 住友林業自家自讃LP 制作 | 2023/09~2023/11 | フロントエンド | ||
株式会社アイデアランプ | リクルート「ゼクシィ保険ショップ / ゼクシィなび」 運用 | 2022/10~2023/08 | フロントエンド | ||
株式会社アイデアランプ | Webサイト無料診断 LP制作 | 2023/05~2023/06 | フロントエンド | ||
株式会社アイデアランプ | Nintendo ピクミン4 | 2023/05~2023/06 | フロントエンド | ||
株式会社アイデアランプ | Nintendo ゼノブレイド3 | 2023/03~2023/04 | フロントエンド | ||
株式会社アイデアランプ | Nintendo ベヨネッタ オリジンズ: セレッサと迷子の悪 | 2023/01~2023/03 | フロントエンド | ||
株式会社アイデアランプ | リクナビイベント オンラインMeetup 作成 | 2022/10~2023/01 | フロントエンド | ||
株式会社 SCF-SOFT | JOSS DROPS金属アレルギー対応アクセサリー販売サイト 運用 | 2021/02~2021/11 | フロントエンド | ||
株式会社キューブリック | TABITABI郡上 コーポレートサイト作成 | 2020/06~2020/10 | フロントエンド | ||
株式会社キューブリック | ユニコントロールズ株式会社 コーポレートサイトリニューアル | 2020/05~2020/08 | フロントエンド |
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
みつけるくん遺失物管理システムサイト
Role
- HTML / SCSS / JavaScript / jQuery / WordPress
Project
SUNSET BEACH PARK
Role
- HTML / SCSS / JavaScript / jQuery
Project
Moguu(モグー)飲食店の予約キャンセル席 アプリ
Role
- PUG / SCSS / JavaScript
Project
beauty-scandal ECサイト運用・改修業務
美容関連商品を販売するShopifyベースのECサイト「beauty-scandal」の運用・改修案件。
新規セクション追加、ランディングページ制作、検索・会員機能の改善、API連携による機能強化など、UX向上とコンバージョン率改善を目的とした施策を継続的に実施しました。
Role
- Shopify(Liquid / JavaScript / CSS)によるページ構築・テーマカスタマイズ
- 新規LP・セクション設計・実装
- サロン検索ページ改修・UX改善
- 会員機能の仕様修正
- バックエンドと連携した管理画面API接続・データバインディング処理
- Gitによるバージョン管理
Point
- ランキング機能や特集LPを新設し、商品発見から購入までの導線を短縮。ABテストで文言・配置を検証し、クリック率と購入率を改善。
- LiquidとJavaScriptを組み合わせ、テーマ標準機能では実現困難なUI・動的処理を実装。制約を理解した上での効率的なカスタマイズを実現。
- バックエンドとの仕様調整を行い、管理画面から取得したデータをフロントにバインド。表示のリアルタイム性と運用効率を向上。
Project
アドバンサー株式会社 公式サイト
Role
- PUG / SCSS / JavaScript / jQuery / WordPress / GSAP
Project
KOWAKE LP
Role
- PUG / SCSS / JavaScript / jQuery / WordPress
Project
「ハックツ!」 地元のためのECサイト
Role
- Shopify / CSS / JavaScript / Adobe XD
Project
北日本石油 コーポレートサイト
Role
- HTML / SCSS / JavaScript / WordPress
Project
モグー サービス紹介サイト
Role
- HTML / SCSS / JavaScript / WordPress
Project
フジ・コーポレーションオンラインショップ
Role
- Pug / SCSS / JavaScript
Project
ジックスタッフ サイト
Role
- HTML / SCSS / JavaScript / jQuery / WordPress
Project
グッドクルー コーポレートサイト
Role
- Pug / SCSS / JavaScript / GSAP
Project
WA MAREオンラインショップ
Role
- Shopify / CSS / JavaScript
Role
- Pug / SCSS / JavaScript / Figma
Project
OMO+(おもたす)Webアプリ
Role
- Vue.js / SCSS / PHP
Project
篠崎運輸 コーポレートサイト
Role
- Pug / SCSS / JavaScript / jQuery / WordPress
Project
WA MARE菊川シェアハウス LP
Role
- Pug / SCSS / JavaScript / jQuery
Project
WA MARE柴又ホテル LP
Role
- Pug / SCSS / JavaScript / jQuery
Project
トレインパーク白山 公式サイト
Role
- Pug / SCSS / JavaScript / jQuery / WordPress
Project
J-SYSTEM コーポレートサイト
Role
- Pug / SCSS / JavaScript / jQuery / WordPress
Project
育児支援アプリ「ままのて」
妊娠・出産・育児期のユーザーを対象とした子育て情報アプリ「ままのて」の既存UI/UXを全面的に見直すプロジェクト。
ユーザー離脱の抑制、初期応募率・継続率の向上、収益改善を目的に、データ分析(Redash)に基づいた課題特定から施策提案、UI再設計、ABテストまでを一貫して担当しました。
Role
- UXリサーチ・課題分析(ユーザーデータ/ヒートマップ/応募率・RR分析)
- オンボーディング導線改善(スキップ導線、キャンペーン訴求最適化)
- FigmaによるUI再設計・プロトタイピング
- ABテスト用デザイン作成(ポップアップ、バナー、タブUIなど)
- アプリ内通知のデザイン最適化(CTR向上とクレーム低減)
- イベント仕様グラフィック制作(季節キャンペーン)
- 関係者レビュー・仕様調整(クライアント/開発/マーケ)
Point
- Redashの定量データとユーザーヒアリングの定性情報を組み合わせ、離脱率の高いオンボーディングや低CTRバナーの原因を特定。改善案をFigmaで可視化し、ABテストで効果検証を実施。
- キャンペーン導線の配置見直し、スキップ導線のタイミング最適化、応募率を下げない訴求文言設計により、初日応募率を改善。
- ポップアップやタブUIの情報優先度を整理し、操作ステップを簡略化。視認性を高める色彩設計とコンポーネント統一で、SP画面のUI一貫性を確保。
Role
- Shopify / CSS / JavaScript
Project
デジタル庁「地域幸福度(Well-Being)指標サイト」
デジタル庁が推進する「地域幸福度(Well-Being)指標」を可視化・発信するWebサイト構築プロジェクト。
自治体や一般市民が幸福度データを簡単に閲覧・活用できるよう、ダッシュボード機能とユーザビリティを重視したUI設計・フロントエンド実装を担当しました。
Role
- HTML / SCSS / JavaScript / Vue3 によるフロント実装
- Figmaデザインデータを基にしたUIコーディング
- UIコンポーネントの統一化・再利用性向上
- アクセシビリティ改善(キーボード操作、コントラスト比、構造タグ見直し)
- デザイナーとの共創によるデザインガイドライン整備
- Gitによるバージョン管理
Point
- Vue3のコンポーネント設計を活用し、指標カードやグラフ表示部品を共通化。データ差し替えや新指標追加の工数を削減。
- 政府関連サイトとして求められる高いアクセシビリティ要件を満たすため、WCAGに準拠したコントラスト比調整、キーボード操作への対応、適切なARIA属性設定を実施。
- 複数デザイナーが関わる中、Figma上でコンポーネントガイドラインを策定。色、余白、フォントサイズの統一で視認性と操作性を向上。
Project
住友林業自家自讃LP
Role
- HTML / CSS / JavaScript
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
Webサイト無料診断 LP制作
Role
- Pug / SCSS / JavaScript / jQuery
Project
Nintendo ピクミン4 公式サイト
Role
- HTML / SCSS / JavaScript / jQuery
Project
Nintendo ゼノブレイド3 公式サイト
Role
- HTML / SCSS / JavaScript / jQuery
Role
- HTML / SCSS / JavaScript / jQuery
Role
- HTML / SCSS / JavaScript / jQuery
Role
- Shopify / CSS / JavaScript / Adobe XD
Project
TABITABI郡上 コーポレートサイト
Role
- HTML / SCSS / JavaScript / jQuery / Photoshop
Project
ユニコントロールズ株式会社 コーポレートサイト
Role
- HTML / SCSS / JavaScript / jQuery / Photoshop