M&2K

Portfolio

Web Developer & Creator: M&2K

About & Strengths

「興味と仮説を、技術でシステム化する」
Webアプリケーション、分析ツール、キャラクターIPの展開など、自身の関心領域やユーザーの需要をもとにプロダクトを企画・実装。心理機能(MBTI/ソシオニクス)の精密な分析ロジック構築や、創作活動を支援する直感的なUI設計を得意としています。

分析とアルゴリズム構築

表面的なアンケートに留まらず、ユーザーの入力速度や迷いなどの「行動ログ」から深層心理を逆算する独自ロジックの設計。

UI/UXと世界観の統合

複雑なデータベース連携を裏で行いつつ、表向きは「可愛くて直感的」なフロントエンドを実装するデザイン力。

フルスタックな個人開発

React/Supabaseを用いたアプリ開発から、Pythonによる自動化bot、さらには音声合成(UTAU)や3Dモデル制作まで幅広く対応。

Technical Skills

HTML5 / CSS3 (UI Design)
JavaScript (Vanilla / ES6)
React 18 / TypeScript / Vite
Node.js / Express.js / REST API
Supabase (PostgreSQL / RLS)
Drizzle ORM
Docker / Cloud Run
Python (Bot開発 / 自動化)
GitHub Actions (CI/CD)
Google Analytics API
C# (基礎)
Unity (小規模制作・学習中)
CLIP STUDIO PAINT
Adobe Illustrator / Photoshop
VRoid Studio (3Dモデリング・実績336体)

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認証などの「パブリック接続」を完全に隔離しながらデータベースで統合するロジックを設計。同一ブラウザ内の別人のアカウントのセッションキャッシュが混ざるのを防ぐため、ログイン認証時にローカルストレージの整合性チェックを行う「セキュアセッション・アイソレーション」を実装し、製品の信頼性と安全性を高めました。

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

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

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

Connect

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