私の読書記録
自分自身の読書記録をカードで一覧表示するためのWebサイト
プロジェクト概要
目的
自分自身の読書記録を素敵なデザインで表示するための特化サイト。自分用のため無駄な機能は削ぎ落し、シンプルな作りに注力しました。
開発背景
手書きで書き留めておいた読書記録カードを分かりやすく一覧表示にしたいとの思いから作成しました。
プロジェクト画像
カード一覧画面
技術詳細
使用技術
astro 5
TypeScript
Tailwind CSS
papaparse（CSVデータ処理）
開発期間
2025年11月（1日）
開発体制
個人開発
デプロイ
Vercel
主な機能
カードのフリップ
- • カードの表面にタイトルと著者、裏面にレビューと日付を表示
- • クリックでカードを裏返す
UI/UX機能
- • スムーズなアニメーション
- • レスポンシブデザイン
開発過程
1
要件定義～実装
今回は自分用のみという目的が絞られていたため、シンプルなUI/UXを重視しました。また、用途も限られていたため、最低限の設計のみで実装を行い、１日で完成を目指しました。
成果・学び
技術的な学び
- • Astro.jsの初導入
- • papaparse（CSVデータ解析）導入時のデータの取り扱い
プロダクト面の学び
- • シンプルさを追求したUI設計
- • 短時間での効率的な開発