ID:80938さん

# VoNo（https://vono.co.jp/） 電子書籍に音声読み上げ機能を組み合わせた新しい読書体験を提供するWebアプリ「VoNo」を開発。 **個人開発(外注なし)で企画からUI/UXデザイン、フロントエンド/バックエンド実装、インフラ構築までを単独で遂行。** [https://vono.co.jp/](https://vono.co.jp/) --- ## 【開発の経緯】 UI/UXデザイナーとしてポートフォリオ制作に取り組む中で、利用していたオーディオブックアプリに使いづらさを感じたことがきっかけで、VoNoを着想しました。 UI/UXデザインを進めるうちにプロダクトへの愛着が強くなり、「自分で形にしたい」と思うように。本格的に開発することを決意しました。 --- ## 【開発スケジュール】 | 時期 | 内容 | |------|------| | 2024年8月 | VoNoを着想 | | 2024年9月〜11月 | UI/UXデザインを制作 | | 2024年12月〜2025年3月 | MVPを開発 | | 2025年4月 | 株式会社VoNoを設立 | | 2025年4月〜現在 | VoNoの開発を継続しつつ、フリーランスとして他社プロダクトの開発支援も実施 | --- ## 【技術的な取り組みと成果】 ### ■ 大規模フック統合（オーケストレーションアプローチ） - **成果**：ロジックとUIを完全分離し、React Native移植が容易に。保守コストを削減。 - **取り組み**：10個以上のカスタムフックを中央オーケストレーターで統合管理する仕組みを実装。 - **工夫**：依存関係と実行順序を最適化し、ループや過剰更新（0.1秒単位更新など）によるパフォーマンス問題を回避。 --- ### ■ テキストと音声のリアルタイム同期 - **成果**：速度変更や一時停止時でもズレなく、完璧な同期を実現。停止時にも正確にハイライトを保持。 - **取り組み**：音声ファイルとテキストをリアルタイムで同期。再生速度変更（0.5x〜2.0x）にも対応。 - **工夫**：ファイル切替時の遅延を解消するMapベースの先読みシステムを導入。停止時ハイライト保持の仕組みを実装。 --- ### ■ JWT認証＋Cookieによるハイブリッド認証 - **成果**：API呼び出し回数を90%以上削減（120回/時 → 10〜15回/時）。認証レスポンスを0msまで短縮。 - **取り組み**：Supabase JWTとセッションCookieを組み合わせたユーザー認証方式を構築。API層ではCookieから即時にJWTを復号・検証できるハイブリッド認証方式を構築。 - **工夫**：認証（Authentication）と認可（Authorization）を完全分離し、機能単位で権限レベルを定義。JWTを復号することで、セッションキャッシュ的に即時レスポンスを返却。 --- ## 【デザイン解説】 VoNoのUI/UXデザインについて、設計意図や意思決定プロセスを中心にまとめた解説記事を公開しています。 https://yuki-portfolio-lilac.vercel.app/works/vono 単なる画面デザインの説明にとどまらず、 ■課題設定や前提条件、ペルソナ定義 ■UX設計・情報設計の考え方 ■ビジネス要件や開発制約を踏まえた判断 といった点についても言及し、なぜそのデザインに至ったのかを言語化しています。 デザインのアウトプットだけでなく、思考プロセスや設計の組み立て方をご確認いただける内容になっています。 --- ### 技術スタック `React (18.2)` / `Next.js (14.1)` / `Tailwind CSS` / `shadcn/ui` / `Vercel` / `Supabase` --- ## 【自己PR】 デザイン力と実装力（React / Next.js）の両輪を活かし、プロダクトに貢献していきたいと考えています。 UI/UXデザイナーとして、コンポーネント設計やDB構造を意識した上で、目標定義・リサーチ・パターン出し・デザインの言語化まで幅広く対応できます。 デザイン工程の後も、実装まで一貫して担うことで、より整合性の取れた体験を提供することができます。

## プロジェクトチームの概要 病院の経営分析Webアプリケーションの開発に従事。 チーム構成は **PM1名、エンジニア4名、営業3名、カスタマーサポート1名、デザイナー0.5名**。 私はエンジニアとして、**フロントエンドからバックエンドまでを一気通貫で担当**し、機能設計・実装・パフォーマンス改善を主導しました。 --- ## パフォーマンスを発揮したタスク ### 概要 病院の収益漏れを防止するため、算定漏れ箇所を自動で可視化する分析機能を開発 ### 担当内容 C#（ASP.NET Core）を用いてRESTful APIを設計・構築し、フロントエンドからバックエンドまでを単独で実装。 既存データ構造を踏まえつつ、新しい分析アルゴリズムの実装とUI連携部分の開発を担当しました。 ### 課題と工夫した点 既存システムでは、**ユーザー数の増加に伴い集計処理のレスポンスが約3秒かかる**ことが課題でした。 デモ時の体験に影響が出るため、以下の施策で最適化を実施しました。 - **SQLクエリの最適化と非正規化テーブルの導入**により、集計処理を効率化 - **キャッシュ層の設計**によって、繰り返しリクエストの負荷を軽減 - **Repository／Service層を用いた設計リファクタリング**で保守性・拡張性を向上 結果として、主要機能のレスポンスの時間を大幅に短縮。 営業部門からも「デモ時の操作がスムーズになり、提案時の印象が大きく改善した」と評価を得ました。 システム全体の安定性と開発効率向上にも寄与し、リリース後の運用トラブルも減少しました。 ### 使用技術 C#、ASP.NET Core、SQL Server、HTML、CSS