熨斗（のし）の王様を作ったときに気をつけたこと

まとめ

のし王というWebサービスを作った。
のし作成サービスが既に存在する中で、下記に気をつけたというお話。
・サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
・仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
・上記を実現するため必要最低限の技術を選定する

不満点の解消、ニーズを仕様に落とし込む

ちょっとした贈り物に「のし」をつけたかったが、既存サービスは、以下の点で不満が残った。
・「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
・Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
・最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
・フォントがしょぼかった
・水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった

不満点の解消をもれなく仕様に落とし込んだ。
・背景画像と任意の文字を組み合わせてPDFで出力できるようにする
・最終出力結果には広告を入れない
・有料でもカッコいいフォントを採用する
・用途に応じて自動で「水引き」と「表書き」が選択できるようにする
・マッスルの神様 ＝ マ神　→　熨斗の王様 ＝ のし王

ユーザー体験を最優先する

文字描画
・技術的な楽さを優先：ユーザー自身がWordなどで描画
・ユーザー体験を優先：Webサービス上で描画

仕上がり確認
・技術的な楽さを優先：プレビュー不可 or プレビューボタンクリックで表示
・ユーザー体験を優先：リアルタイムプレビュー表示

水引き、表書き
・技術的な楽さを優先：ユーザーの選択したものを表示
・ユーザー体験を優先：用途を選ぶと最適な水引き、表書きを自動で選択

描画フォント
・技術的な楽さを優先：無料の範囲で選択可能
・ユーザー体験を優先：有料で質の良いフォントが選択可能

ユーザーが泥酔状態
・技術的な楽さを優先：酔いが冷めてから使う
・ユーザー体験を優先：泥酔状態でも直感で使える

仕様の実現方法を考える

使用した技術
Webサービス上で文字描画しPDF出力
　・水引きの種類や表書きなどの情報をブラウザ上で選択させる
　・サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
リアルタイムプレビュー表示
　・サムネイル描画サーバー(Golang/Google App Engine)を準備
　・水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
用途を選ぶと最適な水引き、表書きを自動で選択
　・Bulma-ExtensionsのQuickViewで用途一覧を表示
　・用途を入力させて絞り込み(jQuery)
　・用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)

選定理由
・仕様実現に際して最低限／シンプルなものを選ぶ
・最新の技術よりも枯れて安定した技術を選ぶ
・なるべくメンテナンスが不要なものを選ぶ