WORKS
英単語学習 静的Webアプリ
HTMLJavaScriptSassデータ処理
- URL
- https://word-book.nuykmk.com
※ 閲覧にはBasic認証が必要です
（ID：yn_dev / PASS：web2025）
- 担当範囲
- ・HTML / SCSS / JavaScript（検索・絞り込み・モーダル表示・印刷対応など）
・CSV・JSONデータ連携による動的生成
・レスポンシブ設計・UX設計
- 制作期間
- 約3週間（修正期間含む）
- 制作費用目安
- ¥300,000 相当（※実際の受注金額とは異なります）
- 制作概要
- 「モチタン英単語帳」英単語学習Webサイト
(JavaScriptベースの動的UIを備えた静的Webアプリケーション）
FigmaデザインとCSV/JSONデータのみ支給された状態から、情報設計・画面設計・機能設計を行い、静的Webアプリとしてフロントエンド実装を一貫して担当。
HTML/CSS（SCSS）およびJavaScriptにて、以下の機能を実装：
・単語情報の動的表示（CSV・JSON連携）
・モーダル表示／前後切替／スワイプ対応
・フィルタ・ソート・検索・ページネーション機能
・音声再生／印刷対応／レスポンシブ設計/UX設計
仕様書が存在しない中、要件を読み解きながら情報設計から組み立て、構造整理と動作設計を行いました。
タイトなスケジュールの中でも要件整理・情報設計・実装までを完遂した経験は、スピードと精度の両立の重要性を学ぶ貴重な機会となりました。
※クライアントより実績掲載の許可をいただいています。