言葉を、紙の外へ。
Paperform
立体的なカードと動くタイポグラフィをつくる創作スタジオ。フォント、ステッカー、紙の質感、自由な配色で、共有できるカードやポスターをデザイン。
JavaScriptViteCanvasCreative tools
“平面から、表現を広げる。”
01
課題
ペーパーカードと動く文字の制作を、ブラウザで気軽に楽しめる一つのツールにする。
02
担当
プロダクト設計、ビジュアルデザイン、編集操作、アニメーション描画、書き出し機能。
03
制約
アカウント、有料API、バックエンドなしでブラウザ内で完結。
04
プロセス
FoldとMotionの編集画面、テンプレート、素材ライブラリ、タイムラインを実装。カードプレビューと画像書き出しで描画処理を共通化。
05
成果
立体カードと動くポスターを制作できる独立アプリ。自動保存、編集データのバックアップ、共有リンク、画像・印刷・動画の書き出しに対応。
体験のポイント
- 10種類のカードデザイン、フォント、ステッカー、質感、フレーム、自由な配色
- 波・ばね・液体・粒子の文字エフェクトとレイヤー・タイムライン編集
- カードの開閉に連動する文字アニメーションと縦・横・正方形のポスター
- 共有リンク、編集データ、PNG、印刷用カード、動画の書き出し
設計とパフォーマンス
- CSS 3Dによる折りたたみ表現とCanvasによる文字描画
- 保存データの入力検証とUnicode対応の共有リンク
- フォントの同梱とプレビュー・書き出しの描画共通化
- ブラウザ標準の動画録画とプレビュー・キャンセル対応