はじめに
年末年始や記念日。LINEやDMで「あけましておめでとう」と送るのは簡単ですが、どこか味気なさを感じることはないでしょうか。
手書きの手紙にある「封を開ける時のドキドキ」や、スクラッチカードを「削る時のワクワク」。そんな身体的な体験をWeb上に持ち込めないかと考え、この年末に『KezuLetter(ケズレター)』というWebアプリを開発しました。
ブラウザ上で銀色のレイヤーを指で削ると、中からメッセージとキャラクターがひょっこり現れる。そんなシンプルなプロダクトですが、実装にはこだわりのUXと技術、そして生成AIの力を詰め込んでいます。
今回は、このアプリを開発するにあたっての技術的な裏側と、こだわったポイントについて紹介します。
作ったもの: KezuLetter
KezuLetterは、URLをシェアするだけで「スクラッチ付きの手紙」を送れるWebアプリです。
- アプリインストール不要: ブラウザですぐに遊べます。
- 削る体験: スマホのタッチ操作(PCではマウス)で、直感的に隠されたメッセージを削り出せます。
- 完了判定: ある程度削ると「紙吹雪」が舞い、キャラクターがお祝いしてくれます。
技術スタックと実装の裏側
基本構成は非常にシンプルです。特別なフレームワークは使わず、React, Next.jsとHTML5 Canvasを中心に構築しました。
1. Canvas APIによる「削る」挙動の再現
このアプリの核となるのは、<canvas>要素を使ったスクラッチ機能です。
単に線を引くのではなく、「画像を透過させる」処理にはglobalCompositeOperationプロパティを使用しました。
この一行を指定することで、描画した部分(指でなぞった部分)が「色を塗る」のではなく「透明になる」挙動になります。これにより、銀色のマスク画像の下から、背景にあるメッセージ画像が透けて見える仕組みを実装しています。
2. 「削り終わり」の判定ロジック
UXとして重要だったのが、**「いつ削り終わったとみなすか」**という判定です。
ユーザーが全部きれいに削りきらなくても、ある程度見えたら「クリア!」として達成感を与えたいと考えました。
具体的には、Canvasのピクセルデータ(getImageData)を取得し、透明になったピクセルの割合を計算しています。
- パフォーマンスへの配慮:
mousemoveやtouchmoveのたびに全ピクセルを計算すると動作が重くなるため、計算処理を間引く(スロットリング)ことで、スマホでもヌルヌル動く操作性を実現しました。
3. PC・スマホ両対応のレスポンシブデザイン
「手の中で削る」体験を重視してスマホファーストで作りましたが、PCで開かれた時のがっかり感をなくすための工夫もしています。
PC表示では画面幅を制限し、中央に「スマホ端末のようなコンテナ」を配置。背景には和紙やドットなどのテクスチャを敷くことで、PCの大画面でも間延びせず、没入感を損なわないデザインに仕上げました。
UX/UIデザインのこだわり
ただ「削れる」だけでなく、「気持ちいい」を作るために細部を作り込みました。
キャラクターストーリー
「隠れたものが現れる」というギミックに合わせて、土の中からひょっこり顔を出す習性のあるプレーリードッグをマスコットキャラクターに採用しました。
五感へのアプローチ
Webアプリですが、可能な限りフィジカルな感覚に近づけました。
- 聴覚: 削っている最中の「カリカリ」というSE(効果音)。
- 視覚: 削り終わった瞬間に舞い散る「紙吹雪」のアニメーション。
- 季節感: お正月なら「和紙と水引」、記念日なら「パステルカラー」と、スキンによって雰囲気が変わる設計。
生成AIとのペアプログラミング
今回の開発では、アセット制作とコーディングの両面で生成AI(主にGemini)をフル活用しています。
デザイン素材の生成
アプリ内に登場するキャラクター、背景の和紙テクスチャ、OGP画像などはすべて画像生成AIで作成しました。
「404ページでうつむくプレーリードッグ」のような具体的なシチュエーションも、プロンプトで指示することで短時間で用意できました。
コーディングの壁打ち
Canvasのイベント処理(マウスとタッチの座標ズレなど)や、OGPの動的な出し分けロジックなどは、AIと壁打ちしながら実装しました。「PCだと挙動がおかしい」といったバグも、AIに状況を説明して即座に修正案をもらうことで、開発スピードを数倍に加速できました。
さいごに
「KezuLetter」は、現在無料で公開中です。
テキストチャット全盛の今だからこそ、わざわざ「削る」というひと手間をかけることで、そこに「相手を想う時間」や「ワクワク」が生まれると信じています。
年末年始の挨拶や、ちょっとしたサプライズに、ぜひ使ってみてください。
