01DATA / AUTOMATION
Sales Dashboard
複数店舗の売上CSV / Excelを読み込み、検証・集計・前月比較・KPI表示・再出力まで自動化する業務ダッシュボード。
- Problem
- 月次集計の転記・計算・確認作業を減らす。
- Decision
- 入力検証から再出力までを一つのフローに統合。
- Verification
- 55テストでCSV/XLSX・異常入力・KPI・出力を確認。
WEB APPLICATION DEVELOPER / PORTFOLIO
田島 裕太
Webアプリケーション
開発ポートフォリオ
Pythonを中心に、業務向けWebアプリや小規模なWebサイトを設計・実装しています。入力、処理、保存、出力、テストまで、業務の流れを一通り動く形にすることを重視しています。
業務の流れを、使える形にする。
掲載データはすべて架空です。Sales / Salon / Quote の公開デモはBasic認証付きです。
WHAT I BUILD
見た目だけでなく、業務の前後まで。
画面だけでなく、入力検証、データ保存、競合防止、帳票出力、テスト、公開時のデータ取扱いまで含めて実装します。代表4作品では、集計・予約・帳票・店舗UIという異なるテーマを扱っています。
FEATURED PROJECTS
代表4作品
「何を作ったか」だけでなく、「どんな課題をどう解いたか」が分かるようにまとめています。
02CRUD / OPERATIONS
Salon Flow
小規模サロンの予約受付を想定した予約・顧客管理デモ。登録、検索、編集、来店状態の更新、顧客履歴まで扱います。
- Problem
- 予約・来店状況・顧客履歴を一画面で追えるようにする。
- Decision
- SQLiteの書き込み時に重複確認も行い、二重予約を防止。
- Verification
- 10テストでCRUD・競合・履歴・公開デモ動作を確認。
03DOCUMENT / WORKFLOW
Quote Desk
見積作成から請求書への引き継ぎ、日本語PDF出力までを一つの流れにした帳票業務ツール。
- Problem
- 見積から請求への転記と金額計算ミスを減らす。
- Decision
- Decimalで計算し、見積と請求を独立データとして保持。
- Verification
- 17テストで境界値・日付・PDF・HTTP入力を確認。
04STATIC / UI
喫茶 凪
福岡の架空喫茶店を題材にした静的サイト。情報設計、余白、タイポグラフィ、レスポンシブ表現を重視しました。
- Problem
- 店舗の雰囲気と必要情報を、迷わず読める一枚にまとめる。
- Decision
- 写真素材に依存せず、CSSと文字組みで世界観を構成。
- Verification
- PC / iPhone幅でレイアウトと見出し折返しを確認。
CASE STUDIES
設計判断と検証
代表作品について、機能一覧より一段深い「課題・判断・検証」を抜き出しています。
01
SALES DASHBOARD
手集計の流れを、そのまま自動化の単位にした。
Problem
店舗ごとの売上ファイルを開き、日付・金額を確認し、転記・集計・前月比較・報告ファイル作成まで行う作業を想定。
Decision
CSV / XLSXの読み込み、入力検証、月別・店舗別集計、KPI、CSV / Excel再出力を一つのWebフローに統合。アップロードデータは永続保存しない設計にした。
Verification
返品などの負数、異常行、CSV/XLSX、KPI、HTML escaping、出力まで55テスト。公開デモでも認証・Health・CSV取得を実アクセスで確認。
02
SALON FLOW
CRUDだけでなく、予約業務の「競合」を扱う。
Problem
予約一覧だけではなく、登録・変更・来店状態・顧客履歴を一つの小さな業務システムとして扱う必要がある。
Decision
予約登録時の重複確認と書き込みを同じSQLiteトランザクション内で扱い、同一日時の二重予約を防止。電話番号を軸に顧客履歴を参照できるようにした。
Verification
CRUD、競合防止、履歴、入力検証を10テスト。公開版は一時SQLiteを使い、再起動後に訪問者入力が消えることも実地確認。
03
QUOTE DESK
帳票作成を「計算・状態遷移・PDF」の問題として分けた。
Problem
見積から請求への転記、数量・単価・税率の計算、日本語帳票の出力を手作業で行うとミスが起きやすい。
Decision
金額計算にはDecimalを使用。見積から請求へ変換しても元見積は残し、請求書を独立データとして生成。PDFはReportLabで直接生成する。
Verification
数値上限、指数表記、日付前後関係、長文PDF、不正HTTPフォーム、容量超過を含む17テストとPDF表示確認を実施。
04
喫茶 凪
機能ではなく、情報の順序と空気感を設計した。
Problem
店舗サイトでは、雰囲気を出しながら営業時間・メニュー・アクセスなど必要情報を見つけやすくする必要がある。
Decision
写真素材に頼らず、余白、文字サイズ、背景、区切りを使って静かな喫茶店のトーンを表現。モバイルでは見出しの折返しも個別調整した。
Verification
PC・iPhone幅での表示確認とHero見出しの折返し修正を実施。Vercel Previewで検証後、Cloudflare Pagesで一般公開した。
APPROACH
共通して意識したこと
01
業務を分解する
誰が何を入力し、何を判断し、最後に何を得たいかを整理してから実装します。
02
壊れ方を考える
入力異常、重複、サイズ上限、日付・数値の境界などをテストに落とします。
03
公開時を分ける
ローカル機能と公開デモの扱いを分け、公開側では不要な永続化や機密入力を避けます。
PROFILE
Experience / Skills
Experience
Web・業務システム開発に加え、要件整理や顧客対応を含む業務経験があります。画面単体ではなく、実際の作業手順や運用を意識して機能を分解することを得意としています。
- 業務システム / Webアプリ開発
- 要件整理・仕様確認
- 顧客対応・問い合わせ業務
- 個人開発での設計・実装・テスト・公開
Skills
Backend / Data
Python, SQLite, CSV / XLSX, PDF
Frontend
TypeScript, React, Next.js, HTML, CSS
Development
Git / GitHub, Docker, Vercel, Render, automated testing
Focus
業務フロー、入力検証、データ境界、テスト、安全なデモ公開
DEMO ACCESS
公開デモについて
Sales Dashboard / Salon Flow / Quote Desk は、第三者の書き込みや不要なデータ保持を避けるためBasic認証で保護しています。閲覧用の認証情報は、このポートフォリオを共有する際にあわせて案内します。
Salon Flow / Quote Desk の公開デモは一時SQLiteを利用し、サービス再起動時に初期状態へ戻ります。実在する個人情報・取引情報は入力しないでください。
CONTACT
このポートフォリオについて
ソースコードは現在Private repositoryで管理しています。技術的な詳細やコード確認が必要な場合は、応募・面談時に案内します。