ID:79874さん

# 2026年〜：ECサイトのデザイン修正と保守 **技術スタック**: Rails, React, TypeScript, Tailwind CSS ## プロジェクト概要 ECサイトにおけるユーザー向け画面のUI/UX改善およびフロントエンド再設計 ## プロジェクト背景 本プロジェクトはAI生成をベースにしたデザインから開発が開始されていたが、 - AI特有の不自然なUI - 実際のユーザー操作を考慮していない導線 - 画面間のデザイン統一性の欠如 といった問題があり、そのままではユーザーが利用しづらい状態であった。 途中からプロジェクトに参画し、 **ユーザーが実際に利用する画面のUIを全面的に見直し、再設計および実装を担当した。** --- # 開発・実装内容：UI/UX改善と画面再設計 ## 概要 ユーザーが利用する主要画面のUIを見直し、既存ECサイトのUXを参考にしながらデザインと実装を再構築 --- ## 課題 - AI生成ベースのデザインで実用性が低く、ユーザーが操作しづらい - UIの統一ルールがなく、画面ごとにデザインが統一されてない - ユーザーの操作導線が考慮されていない - 重要なボタンの視認性が低く、ユーザー行動を促しづらい --- ## 対応策・使用技術 ### UI/UX設計 - **既存ECサイトのUX分析** - 大手ECサイトのデザインを参考に画面構成を再設計 - **ユーザー導線の整理** - 購入までのクリック数や操作フローを整理し、ユーザーの行動を想定したUI設計を実施 - **視認性の改善** - CTAボタンの配置・色・サイズを調整し、ユーザーが迷わず操作できる画面構成へ改善 --- ## UI改善内容 - **文字量の最適化** - 情報量を整理し、ユーザーが理解しやすいUIへ改善 - **要素配置の見直し** - ファーストビューに重要な情報を配置 - **CTAボタン等の配置改善** - カート画面では購入ボタンを目立つ位置に配置 - ユーザーの行動導線を意識したレイアウト設計を実施 - **デザイン統一** - 画面間の余白・ボタンスタイルを統一し、UIの一貫性を向上 --- ## 担当画面 ユーザー向け主要画面のUIを全面的に再設計 - 商品一覧画面 - 商品詳細画面 - カート画面 - カート確認画面 - 注文履歴詳細 - 注文履歴一覧 - プロフィール画面 - お問い合わせ画面 - ログイン画面・パスワードリセット画面 - ログイン前とログイン後のヘッダー・フッターの調整 - 営業担当とのチャット画面(フロント側と管理画面側両方) - 利用規約・プライバシーポリシーなど - メールの文面の調整 --- ## 成果 ### UI/UX改善 - AI生成ベースの不自然なUIを改善 - ユーザー導線を考慮した画面設計を実現 - ECサイトとして自然なUXを実装 - デザインの質の向上 ### ユーザビリティ向上 - CTAボタン配置の最適化によりユーザー操作性を改善 - 情報整理により画面理解速度を向上 ### フロントエンド品質向上 - 共通部分のコンポーネント化など、リファクタを進めながらデザイン修正を実施 - UI実装だけでなく、保守性や再利用性を意識した構成へ改善 ### コード品質向上・チーム貢献 - 先輩エンジニアと相互レビューを担当し、実装品質の向上に貢献 - React Hook Formの適切な利用方法や、N+1問題の観点から様々な改善提案を実施 - 保守性・可読性・パフォーマンスを意識したレビューを行い、チーム全体の品質向上に寄与 --- # プロジェクトでの成果・学び ### UI/UX設計力 - ユーザーの行動を想定した画面設計 - ECサイト特有の購入導線設計 - デザイン実装前にプロトタイプを作成し、画面構成や導線を事前に顧客と確認しながら進めることで手戻りの削減に努めた ### 問題解決力 - AI生成デザインの問題点を分析し、UX視点とユーザー行動を踏まえたUI改善を実施 ### プロダクト視点 - 単なる実装ではなく以下を常に意識した開発を経験 - 「ユーザーが使いやすいか」 - 「ユーザーが迷わないか」 - CTAボタンの配置や視認性を改善し、ユーザー行動を促すUI設計を実施 - ユーザーが自然に次のアクションを取れる導線設計を意識したUI改善を行った ### レビュー・品質改善力 - 相互レビューを通じて、実装品質だけでなく設計やパフォーマンス観点でも改善提案を行う力を習得 - 実装の正しさと将来の保守性を意識した視点を身につけた

# 2025年6月〜：スポーツ管理アプリ（継続中） **技術スタック**: Rails, jQuery, JavaScript ## プロジェクト概要 スポーツ団体向けの組織管理・データ管理システム ## プロジェクト背景 仕様書は存在するものの、抜け漏れや記載ミスが多数あり、不完全な状態での開発着手となりました。 --- ## 開発・実装内容A：権限制御機能とUI改善 ### 概要 組織ごとに項目表示を制御する機能の実装とユーザビリティの向上 ### 課題 - 複数の組織が利用するため、データの可視性制御が重要 - 仕様書の記載が不完全で、実装すべき権限制御の詳細が不明確 - 既存UIでフォームの項目が統一されておらず抜け漏れが多々あり、統一が必要 ### 対応策・使用技術 - **Rails**: 役割ベースのアクセス制御を実装し、組織ごとの項目表示制御を整理 - **顧客ヒアリング**: 仕様書の不備を補うため、積極的にヒアリングを実施し要件を明確化 - **UI改善提案**: 使いやすさを重視した改善案を提案し、顧客に採用された - **社内・顧客コミュニケーション**: チーム内で最も積極的に発言し、顧客とのメインコミュニケーション担当 ### 成果 - **権限管理**: 組織ごとに適切なデータ可視性制御を実現 - **要件明確化**: ヒアリングにより仕様書の不備を解消し、正確な実装を完了 - **ユーザビリティ向上**: UI改善により、利用者の操作性の向上に貢献 - **コード品質向上**: リファクタリングにより、保守性の高いコードベースを構築 --- ## 開発・実装内容B：データ管理・検索機能 ### 概要 市区町村マスタの取り込み、データ移行処理、およびインクリメンタルサーチの実装 ### 課題 - 大量の既存データを効率的に移行・更新する必要があった - 大量データから快適な検索体験を提供する必要があった - バグ発生時やデザイン完成時に適切な対応が必要 ### 対応策・使用技術 - **データベース最適化**: インデックス最適化によりクエリ速度を向上 - **jQuery**: リアルタイム検索のフロントエンド実装 - **迅速な対応**: バグ発生時やデザイン完成時に即座に対応し、課題数を効率的に削減 ### 成果 - **データ移行効率化**: 大容量データの安定した移行処理を実現 - **検索性能向上**: 快適なインクリメンタルサーチによりユーザー体験を改善 - **開発速度向上**: 迅速な課題対応により、プロジェクト全体の進行を円滑化 ## 開発・実装内容C：統計機能改修・性能改善 ### 概要 統計機能における検索条件の拡張、複雑な集計ロジックの実装、およびSnapshotテーブル導入による性能改善を担当 ### 課題 - 既存の統計機能は単数団体検索が中心で、実務上必要な複数団体検索に対応できていなかった - 種別・年齢・会員区分・学年など、複数の軸を組み合わせた集計が必要だった - 元データをそのまま集計すると負荷が高く、処理性能の改善が必要だった ### 対応策・使用技術 - **Snapshotテーブル導入**: 集計専用のSnapshotテーブルを作成し、統計処理時の負荷を軽減 - **複数団体検索対応**: 単数団体だけでなく、複数団体を対象にした統計検索へ拡張 - **複雑な集計条件の実装**: 年齢、会員区分、種別、学年などの条件ごとにSQLを組み立て、柔軟な統計集計を実現 - **階層組織対応**: 組織階層を考慮し、直下団体・配下団体を含めた集計ロジックを実装 - **パフォーマンス改善**: SQL最適化や集計対象データの整理により、統計機能の応答性能を改善 ### 成果 - **性能改善**: Snapshotテーブル導入により、統計集計時の負荷軽減を実現 - **検索機能拡張**: 単数団体検索から複数団体検索へ対応範囲を拡大 - **複雑な統計要件への対応**: 種別・年齢・会員区分・学年など、複数条件を組み合わせた集計を実現 - **保守性向上**: サービスクラスへ責務を整理し、拡張しやすい統計処理基盤を構築 - **品質向上**: RSpecによるテストを作成し、統計ロジックの正確性検証と回帰防止を実現 - **テスト設計**: 複数条件の統計ロジックに対して境界値や条件分岐を考慮したテストケースを作成 --- ## プロジェクト全体での成果・学び ### プロジェクト推進面での成果 - **コミュニケーション力**: 社内で最も積極的に発言し、顧客とのメインコミュニケーション担当として信頼を獲得 - **問題解決力**: 不完全な仕様書に対して積極的にヒアリングを行い、要件を明確化 - **提案力**: UI改善案を提案し採用されるなど、技術的な観点から価値提供を実現 - **対応力**: バグやデザイン変更に対する迅速な対応により、プロジェクトの安定性に貢献 - **改善推進力**: 統計機能の複雑な要件に対して、性能面・設計面の両方から改善を推進 ### 技術面での学び - **権限制御設計**: 複数組織対応システムでの適切なアクセス制御設計手法 - **検索最適化**: データベースとフロントエンドの両面からの検索性能向上手法 - **要件分析**: 不完全な仕様書から実装要件を正確に導き出すスキル - **統計処理設計**: 複雑な集計要件を満たすための月次集計ロジック設計とデータ構造最適化 - **性能改善**: SnapshotテーブルやSQL最適化を通じた高負荷機能の改善手法 ### チームワーク・リーダーシップ - **積極性**: チーム内で最も発言し、プロジェクト推進の中心的役割を担当 - **顧客対応**: メインの顧客コミュニケーション担当として、良好な関係を構築 - **課題解決**: 迅速な対応により、チーム全体の生産性向上に貢献

# 2024年8月〜2025年6月：スポーツスケジュール管理アプリ ## 対応実績A：UI/UXの改善 ### 概要 プロトタイプレベルのUIを本格運用レベルに改善し、ユーザビリティを向上 ### 課題 - 参画当初、UIがプロトタイプのデザインで作成されており、担当者も頭を抱えていた状態 - 画面ごとに文言、色、配置などの統一性が取れておらず、ユーザーの混乱を招く可能性 - 同様の機能が画面ごとに重複実装されており、メンテナンス性が低い状態 ### 対応策・使用技術 - **顧客との密なコミュニケーション**: 週次でのデザインレビューを実施し、要望を的確に把握 - **UI統一化**: 文言、カラーパレット、レイアウトの全体的な統一を実施 - **Rails**: partial機能を活用し、再利用可能なコンポーネント化を推進 - **CSS/SCSS**: 統一されたスタイルガイドを使用し、一貫性のあるデザインを実現 ### 成果 - **開発効率向上**: partial化により、類似機能の開発工数を大幅に削減 - **メンテナンス性向上**: 共通部品化により、修正時の影響範囲を最小化 - **ユーザビリティ向上**: 統一されたUIにより、直感的な操作の向上を実現 --- ## 対応実績B：新機能の開発 ### 概要 既存システムに適性テスト診断機能を新規追加 ### 課題 適性テストのロジック実装と結果表示機能を効率的に開発する必要があった 仕様未確定な状態で機能を作成する必要があった ### 対応策・使用技術 Form Objectパターンを採用し、複雑なロジックを実装 既存のUIパターンに合わせた診断画面と結果表示画面を実装 ### 成果 UI改善フィードバック: 提供されたデザインに対してテーブル項目の見やすさを考慮した修正案をフィードバックし、採用された 顧客満足度向上: グラフデザインの修正案を提案し、顧客から高い評価を獲得 --- ## 対応実績D：パフォーマンス最適化 ### 概要 データベースアクセスの最適化によるシステム全体のパフォーマンス向上 ### 課題 - N+1問題が複数箇所で発生し、ページ読み込み時間が遅い状態 - データベースへの負荷が高く、ユーザー数増加時のスケーラビリティに懸念 ### 打ち手・使用技術 - **Rails ActiveRecord**: Eager Loadingを活用したN+1問題の解決 - **クエリ分析**: Rails本来のクエリログ分析により、ボトルネックを特定 ### 成果 - **レスポンス時間改善**: 主要画面のページ読み込み時間を大幅に短縮 - **サーバー負荷軽減**: データベースへの負荷を削減し、システム安定性を向上 --- ## 全体的な学び・成長 ### 技術面での成長 - **問題発見能力**: パフォーマンス問題の特定・分析手法を習得 - **設計力向上**: 既存システムとの整合性を保った機能追加の設計手法 - **品質向上**: パフォーマンスを考慮した実装の重要性を実感 ### プロジェクト推進面での成長 - **顧客コミュニケーション**: 技術的な内容を分かりやすく伝え、建設的な改善案を提示することで、プロジェクト品質向上に貢献 - **優先順位付け**: 限られた時間で最大の効果を生む作業の選択能力