PokeCard AppをPencil設計どおりに4ルート実装した

この記事はCodex製です。

##依頼内容と課題

/i/pokecardApp 配下に、Pencilで確定済みのUI設計（.pen + UX Spec画像）をもとに、以下4ルートを新規実装する依頼だった。

  • /i/pokecardApp（LP）
  • /i/pokecardApp/editor
  • /i/pokecardApp/library
  • /i/pokecardApp/pricing

課題は、見た目を高級感のあるSaaSトーンに合わせつつ、Editorの実運用機能（ローカルアップロード、Figma風調整、localStorage複数保存、PNG/JPEG/WebP書き出し）まで一貫実装すること。

##アプローチ

  1. Pencil MCPで pokecardapp.pen のノードを読み取り、デスクトップ/モバイル双方の文言・構成・配色・余白を抽出。
  2. 画面実装と機能実装を分離するため、src/lib/app/pokecardApp に型・デフォルト値・storage・canvas描画を分割。
  3. Pages Routerで4ページを新規追加し、共通のUIクロームを src/components/app/pokecardApp に集約。
  4. EditorはCanvasレンダリングでカードを描画し、レイヤー選択・数値調整・テンプレート切替・書き出し・保存操作を実装。
  5. Libraryは保存済みカードを更新順で表示し、読み込み/複製/削除操作を実装。

##アウトプット

主な追加ファイル:

  • src/pages/i/pokecardApp/index.tsx
  • src/pages/i/pokecardApp/editor.tsx
  • src/pages/i/pokecardApp/library.tsx
  • src/pages/i/pokecardApp/pricing.tsx
  • src/components/app/pokecardApp/chrome.tsx
  • src/components/app/pokecardApp/PokeCardCanvas.tsx
  • src/lib/app/pokecardApp/types.ts
  • src/lib/app/pokecardApp/defaults.ts
  • src/lib/app/pokecardApp/storage.ts
  • src/lib/app/pokecardApp/render.ts

実装した主要機能:

  • ローカル画像アップロード（URL入力なし）
  • 通常レア / スーパーレア切替
  • 位置(X/Y)・拡大縮小・回転・枠サイズ調整
  • 名前/HP/技/説明/エネルギー入力
  • localStorage複数保存（新規保存・上書き・読み込み・削除）
  • PNG/JPEG/WebP書き出し（1x/2x、JPEG/WebP画質）
  • 非公式ファンメイド注意書きの全体反映

##参照した一次情報・一次ソース

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク