M&2K

Portfolio / Works

Web & App Developer: M&2K

About & Strengths

「興味と仮説を、技術でシステム化する」
Webアプリケーション、Androidネイティブアプリ、キャラクターIPの展開など、自身の関心領域やユーザーの需要をもとにプロダクトを企画・実装。心理機能(MBTI/ソシオニクス)の精密な分析ロジック構築や、行動心理に基づいた習慣化UX設計を得意としています。
Google Playでのクローズドテスト運用から得たフィードバック改善プロセスなど、ユーザー目線に立ったアジャイルな個人開発を実践しています。

フルサイクルなアプリ開発

企画・要件定義から、Kotlinを用いたAndroidネイティブ実装、テスターからのフィードバック収集・改善、Google Playストア公開までを一貫して完遂。

分析とアルゴリズム構築

ユーザーの「無意識の行動」を数値化・逆算する独自ロジックの設計や、LLM(AI)のプロンプトエンジニアリングによるキャラクターの性格維持・対話システムの構築。

Webフルスタック開発

React/Supabaseを用いたPWA開発や、Python/GitHub Actionsによるデータ収集の自動化、さらには音声合成(UTAU)や3Dモデル制作まで幅広く対応。

Technical Skills

Kotlin
Jetpack Compose
Room Database (SQLite)
Kotlin Coroutines / Flow
Retrofit / OkHttp
Android Studio
Google Play Console
HTML5 / CSS3 (UI Design)
JavaScript (Vanilla / ES6)
React 18 / TypeScript / Vite
Node.js / Express.js
Go (API / Runtime)
Supabase (PostgreSQL / RLS)
Drizzle ORM
Docker / Cloud Run
Python (Bot / 自動化)
Google Apps Script (GAS)
Groq API (LLM連携)
GitHub Actions (CI/CD)
C# (基礎) / Unity (学習中)
CLIP STUDIO PAINT / Adobe CC
VRoid Studio (実績336体) / UTAU
Three.js (3D Web描画)
GLTF / VRM (3Dモデル統合)
3D Game Design (空間・操作設計)

Featured Case Studies

Pet Reminder(ペットリマインダー)

AIペット育成型タスク管理アプリ (Google Play ストア配信中)

担当: 企画・UI設計・DB設計・実装・AI連携・ストア運用 (1人開発) 期間: 約1年 (継続改善中)
Kotlin Jetpack Compose MVVM Room Database Retrofit GAS Groq API (LLM) AdMob
概要と課題解決

一般的なTODOアプリにおける「通知を確認しても後回しにしてしまう」という課題に対し、「タスクをこなすことでペットが成長する」ゲーム性を導入。タスク完了や会話によりペットの心理機能パラメータ(MBTI)が変化し、性格やセリフが変わるシステムを構築。LLMを用いたAI会話機能も備え、タスク管理を「義務」から「育成の楽しみ」へと変える体験を実現しました。

フロントエンド & UI/UX
  • Jetpack Composeによる状態管理: ViewModelとStateFlowを利用し、ライフサイクルを考慮した宣言型UIを構築。
  • Material Design 3のカスタマイズ: キャラや背景のカスタマイズ機能。背景色に応じた視認性確保の動的切り替え。
  • UX改善: 手動入力のミスを防ぐためDatePicker/TimePickerを導入。カレンダー連動のタスク追加導線を実装。
  • BGM制御: ライフサイクルに応じたMediaPlayerの再生・停止制御。
DB・通知・AI連携
  • 精緻な通知制御: AlarmManagerの setExactAndAllowWhileIdle() と BroadcastReceiver を用い、スリープ中も確実な通知を実現。「しつこくリマインド(5〜60分間隔)」機能では、Roomの完了状態を確認し自動停止するロジックを構築。
  • AIペットの人格維持: GAS経由でGroq APIと通信。MBTI、一人称、会話履歴をプロンプトに動的反映し、人格のブレを防ぐ設計。
  • データベース移行: 新機能(心理パラメータや追い通知)の追加に伴い、Room Migrationを用いて既存ユーザーのデータを安全に引き継ぎ。
クローズドテストとアジャイルな改善サイクル

Google Play本番公開に向け、12人以上のテスターによる14日間のクローズドテストを実施。得られたフィードバックをもとに以下のようなUX改善サイクルを回しました。
【主な改善実績】
・タスク完了時の報酬(EXP/コイン/性格進化)のUI演出を強化し、モチベーションを向上。
・入力途中のダイアログ外タップによるデータ消失を防ぐステート管理の修正。
・AIの会話(提案)からワンタップでタスクを追加できるシームレスな機能連携を実装。
これらのサイクルを通して、単なる技術実装に留まらず「ユーザー課題の発見と解決によるプロダクトの完成」という実践的なPdM的開発プロセスを経験しました。

Featured Case Studies

Plot Palette

担当: 企画・UI/DB設計・フルスタック実装・インフラ 期間: 約2ヶ月強 (2026.04中旬〜06中旬) 対象: 小説作家・プロット重視の創作クリエイター
React 18 TypeScript Express.js Drizzle ORM PostgreSQL Cloud Run Docker
概要と課題解決

物語のプロット(起承転結・伏線回収)、登場人物の相関関係、舞台設定のメモ作りから、美しい「縦書き」でのエディター執筆、さらに組版風のPDF印刷出力までを「一本のカラーパレット」のように美しくカスタマイズされたアトリエ空間で一元化できるフルスタックWebサービス。
「プロットと執筆画面を行き来するのが煩わしい」「自分の原稿を美しい縦書きで印刷・PDF化して推敲したいが、既存のツールではレイアウトが崩れてしまう」という、多くの創作小説クリエイターが抱える課題をひとつのダッシュボードから直感的にアプローチできるよう設計・開発しました。

技術的な工夫点(フロントエンド)
1. 美しい「縦書き ↔ 横書き」エディターと原稿用紙風CSS設計
独自の manuscript クラスと縦書きレイアウト、行のガイドラインやマス目表示を Tailwind CSS とカスタム CSS Variables で制御。執筆時の没入感を引き出すため、余白や文字送りのトラッキング値を極限までパーソナライズ。

2. 複数ページのA4縦書き小説組版の自動計算&「見切れ」のない高精度PDF生成
jsPDFとhtml2canvasをシームレスに結合。PDF出力の際に、Webフォントの読み込み保障(CORS対応)を完璧にし、画面のスクロール位置による見切れやフォント不均等を解消するため、キャプチャ時に最上部へ「瞬間仮想スクロール&画面縦幅適応キャプチャ」を施す。描画完了後は自動でA4サイズに適した比率へ等縮小し、スクロール量はみ出し分を次ページへ「自動で位置補正分割描画(AddPageループ)」する自作アルゴリズムを実装。これにより、複数ページの小説冊子でも全く崩れない出力が可能に。
技術的な工夫点(バックエンド・機能)
3. フリッカー・ロード待ち完全ゼロ化のための「Optimistic UI (楽観的画面更新)」
プロット項目やキャラクターカードの追加、付箋メモの貼り付けなどの頻繁なデータ操作において、画面上にローカル仮IDを用いてコンマゼロ秒でカードを先行反映(Optimistic Update)させ、背後で非同期にExpress REST APIを叩く設計。たとえネットワークに遅延が発生している環境やオフラインでも、ユーザーにストレスを一切与えない超快適で軽快な「もふみつアトリエ」独特の筆記体験を完全実現。

4. 1600万色調色カラーパレット機能 (テーマカスタマイズ)
サポーター向け特典機能として、1600万色調色のできるプレミアムカスタムカラーパレットを実装。コンポーネントを完全にまたいでの動的なカラー適用を実現するため、CSS Variablesをドキュメントルート全体に再定義・反映させている。さらにこれらのパーソナル設定はバックエンドのPostgreSQLデータベースとシームレスに同期。
苦労した点と解決策
  • 複数ページの小説PDF出力における見切れ問題:
    初期実装では画面にスクロールバーが出ていると「画面内の見える範囲しかレンダリングされない」「2枚目以降でテキストが断裂して見切れる」「一番下に配置しているクレジット・ウォーターマークが消える」といった課題が発生。
    これを解決するために、キャプチャ生成関数(App.tsx 内の `handlePrintEpisode`)において、スクロール位置を一時的に最上部に補正するハックや、html2canvas の windowHeight と height パラメータを要素の `scrollHeight`(内容の実寸高)に同期させて「画面外の見えない要素領域も含めた超巨大キャンバス」を仮想レンダリングさせる手法を構築。さらにjsPDF側でループを回してA4サイズ幅に縮尺を調整しながら次ページにシフトして描き継ぐ、シームレスな自動改ページ分割制御を実装。これにより、長文エピソードであっても破綻なく印刷・PWA利用者がデバイスを問わず小説本のように綺麗に保存できる状態を完成させました。
  • 接続診断、およびセキュリティ面での信頼性向上のためのサンドボックス隔離:
    「会員登録をせずにサクッと使ってみたい」「でもデータは消えてほしくない」という要望を満たすため、ブラウザデバイス単位で擬似的にクラウド同期できるセキュアな「サンドボックス接続」と、Google認証などの「パブリック接続」を完全に隔離しながらデータベースで統合するロジックを設計。同一ブラウザ内の別人のアカウントのセッションキャッシュが混ざるのを防ぐため、ログイン認証時にローカルストレージの整合性チェックを行う「セキュアセッション・アイソレーション」を実装し、製品の信頼性と安全性を高めました。

Code Preview - Online Code Editor & Preview Tool

担当: 企画・UI設計・フロントエンド実装 対象: Web開発者・創作クリエイター・プログラミング学習者
JavaScript Monaco Editor JSZip GitHub API Go
概要と課題解決

GitHubリポジトリやZIPファイル、ローカルフォルダから複数ファイルを読み込み、ブラウザ上でソースコードの編集・プレビューを行えるオンライン開発ツール。開発環境を用意せずにコードを確認したい場面や、複数ファイルで構成されたプロジェクトを手軽に閲覧・編集したいというニーズに対応しました。
HTML・CSS・JavaScriptのプレビューに加え、単一ファイルのJSX・TSXの変換プレビューにも対応。ファイルの切り替えや編集、書き出しまでを一つの画面で完結できる環境を構築しました。

技術的な工夫点
  • 複数ファイルの一括管理: GitHubリポジトリ、ZIPアーカイブ、ローカルフォルダの読み込みに対応。ファイル構造を維持しながら対象ファイルを切り替えて編集可能。
  • コード編集・プレビュー環境: Monaco Editorを採用し、ファイル形式に応じた構文色分けを実装。HTML/CSS/JSプレビューおよびJSX/TSX変換プレビューを実現。
  • GitHub API連携 & エクスポート: 公開リポジトリのファイル取得と再読み込みによる差分反映、編集中のファイル単体DLおよびZIP形式での一括書き出しを実装。
  • 操作性・レスポンシブ: モバイル端末でのコード編集やコピペ、編集内容の反映を考慮し、画面サイズに応じた操作性を調整。
苦労した点と実装上の制約への対応
  • 状態とエディタ同期の解決: 複数ファイルの読み込み・切り替え時、ファイル管理の状態とエディタ上の内容の不一致に対応。特にモバイル環境で古いエディタ状態が反映されないよう処理順序とデータ同期方法を修正。
  • 制限とデータ構造の最適化: GitHubからの大量読み込み時のファイル数制限や、ZIP書き出し時のファイル構造・画像データの扱いを実用ベースで改善。
  • 実行環境の制約設計: フロントエンドで実行できる処理と、サーバー/ビルド環境が必要な処理を区別して設計。PHP、Python、C/C++、Go、Rustなどの構文色分けに対応しつつ、制約を明確化。

MIDNIGHT PROTOCOL(深夜都市行動解析計画)

DISC理論をモチーフとした3D都市探索・行動解析ゲーム

担当: 企画・設計・開発・UI実装・動作調整 (1人開発) 期間: 約2週間 (2026.10) 対象: PC / スマートフォン Webブラウザ
JavaScript Three.js GLTF / VRM 3D空間構築 行動ログ分析 レスポンシブUI
概要と課題解決

DISC理論(D・I・S・Cの4つの行動傾向)をテーマにした3D都市探索ゲーム。プレイヤーは深夜の都市を一人称視点で自由に探索し、NPCとの交流やオブジェクトの調査を通じて自身の行動傾向を分析します。
単なる質問紙の性格診断ではなく、プレイヤーの移動・停止・走行・調査・NPCとの接触や回避などの行動ログをゲーム内でリアルタイムに記録し、「探索体験そのものを分析につなげる」仕組みを実装しました。

技術的な工夫点
  • Three.jsによる3D空間構築: 夜の都市を自由に移動できる一人称視点の3D探索空間をWebブラウザ上に構築。
  • 行動ログと分析の連携: 移動速度、探索の深さ、NPCへの接触・回避行動などをバックグラウンドで記録し、DISC分析アルゴリズムに活用。
  • NPCインタラクション: 会話やオブジェクト調査など、空間内での多彩なアクションをシームレスに処理。
  • マルチデバイス対応: PCでのマウス・キーボード視点操作に加え、スマートフォン向けの仮想スティックを実装し操作環境を両立。
  • UIとゲーム操作の共存: 会話や調査画面のモーダル表示中も、移動スティックなどの操作UIが適切に維持されるようステートを調整。
苦労した点と解決策
  • 3D空間とゲームシステムの連携: 移動、NPC対話、調査、行動ログ記録の複数機能を整理し、探索から分析まで破綻のない一連の体験として成立するように設計。
  • スマートフォンでの操作性改善: タッチ操作と視点操作の干渉を防止。実機テストで発生したダブルタップによる意図しないズームやUI消失に対し、CSSとイベント処理を修正して操作性を担保。
  • 表示状態の管理: 画面切り替え時に操作UIが崩れる問題に対し、条件分岐とイベントハンドリングを調整し、探索を阻害しない堅牢な操作環境を実現。

Cocotte - Simple Memo App

担当: 企画・UI設計・フルスタック実装 期間: 約2ヶ月 対象: 創作クリエイター・一般ユーザー
ReactViteSupabaseVercel
概要と課題解決

デバイスごとにデータが完全分離されたPWA対応メモアプリ。「会員登録は面倒だが、デバイス固有のセキュアな保存領域が欲しい」という需要に応えるため開発。

技術的な工夫点
  • SupabaseのRLS(Row Level Security)ポリシーを利用し、デバイスID基準でデータを分離。
  • QRコードによるデバイス間ログイン(同期)機能の実装。
  • 画像ファイルのアップロードと連携保存に対応。
苦労した点と解決策

データ型の不一致によるビルドエラーが発生したため、データベースのスキーマを整理・再定義。また、RLSポリシーの設計が複雑化したため、「デバイスID」を基準としたポリシーに再設計することで、堅牢性を確保しました。

Deep Cognition Archive & 心理機能分析ツール

担当: ロジック構築・実装 対象: 心理学(MBTI/ソシオニクス)に関心層 成果: サイト内のアクセス上位層を獲得
JavaScriptHTML/CSSアルゴリズム設計
概要と技術的工夫

従来の「自己申告型アンケート」によるバイアスを排除するため、回答時の「ミリ秒単位の迷い」や「修正行動」をログ化し、情報代謝プロセスを定量的に分析・逆算する独自のアルゴリズムを実装。「Gモデル診断」や「Chroma Log」など、派生ツールを含め専門性の高い観測プラットフォームを構築しています。

とりの丘学園 公式ポータル & IP展開

担当: 世界観構築・Webデザイン・音声制作 期間: 継続開発中
UI/UX DesignPython (Bot)UTAU
概要とIP展開の工夫

架空の学園「とりの丘学園」の世界観を軸に、Webポータル、ノベルゲーム、AI対戦アプリを横断的に展開。さらに公式キャラクター「みりんてゃ」のPython製SNS運用Botや、自作音声ライブラリ(UTAU)を制作・公開し、キャラクターIP(知的財産)としての価値を高める多角的なアプローチを行っています。

Other Works

上記代表作以外にも、クリエイターや推し活層の需要に応える様々なWebツールや、キャラクターIP(UTAU音源・Bot)を継続的に開発・公開しています。

すべてのツール一覧を見る →

Connect

日常の開発進捗、アプリの更新情報などはSNSより発信しています。
お仕事のご相談等も、自作のお問い合わせフォームよりお気軽にお送りください。