概要
HTML・CSS・JavaScript・EJS・Storybook を用いて UI コンポーネントの開発、最適化、ドキュメント化を担当し、使いやすく一貫性のあるフロントエンドを実現しました。画面テスト、バグ修正、顧客対応にも取り組み、品質向上とスムーズなプロジェクト進行に貢献しました。
技術スタック
HTML5
CSS3
JavaScript
jQuery
Storybook
Laravel Mix
Git
GitHub
デザインツール
VS Code
📅
期間
2023年7月～2024年3月
チーム構成
👤フロントエンドエンジニア: 2
👤デザイナー: 2
👤ディレクター: 1
主な機能
- 1HTML5, CSS3, JavaScript を用いてインタラクティブでユーザーフレンドリーな UI モジュールとコンポーネントを開発
- 2jQuery を使用しユーザーインタラクションを効率的に処理
- 3EJS による動的テンプレート生成とページレンダリングを実装
- 4Storybook を用いて UI コンポーネントをドキュメント化し、デザインシステムの一貫性と再利用性を向上
- 5モバイルファーストでレスポンシブデザインを実装
- 6画像最適化、コード圧縮、非同期処理などのパフォーマンス最適化を実施
- 7各モジュール・ページの画面テストを行い、バグ修正を実施
- 8顧客フィードバックに迅速対応し、要求に応じて調整を実施
- 9プロジェクトの最終納品と引き渡しを担当
- 10顧客からの問い合わせやトラブル対応を迅速に行い、信頼性を確保
課題と解決策
複数ページで共通UIモジュールを使用するため、デザインシステムの一貫性維持が課題でした。Storybookを導入してコンポーネントカタログを構築し、EJSテンプレートとの統合によりドキュメント化とビジュアルテストを実現しました。
成果
Storybookによりコンポーネントの仕様が明確化され、開発効率とコードの再利用性が向上しました。パフォーマンス最適化によりページ読み込み速度が改善し、顧客から良好なフィードバックを得ることができました。
