2019-10-13に投稿

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

まとめ

  • のし王という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)
  • 選定理由
    • 仕様実現に際して最低限/シンプルなものを選ぶ
    • 最新の技術よりも枯れて安定した技術を選ぶ
    • なるべくメンテナンスが不要なものを選ぶ
ツイッターでシェア
みんなに共有、忘れないようにメモ

Matsubarase.com公式

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント