ハンドメイド作家向けの発送支援サービス『Order2Post』をリリースしました

はじめに

こんにちは、フィヨルドブートキャンプ(FBC)でプログラミング学習中のriraです。
約1年間の学習期間を経て、自作サービスOrder2Postをリリースすることができました🥳
本記事ではサービスの紹介とリリースまでの振り返りを行います。

Order2Postとは

Order2Post
ハンドメイドマーケット大手のminneとCreemaのユーザー向けサービスとなっています。

主な機能

  • 注文一覧データを人間に読みやすい形にして表示（+印刷）する
  • 注文一覧データからクリックポストのまとめ申込用ファイルを出力する

の2種類です。

ここで言う注文一覧データというのは、minne、Creemaでダウンロードできる注文一覧のCSVファイルを指します。

使い方

  1. minne、Creemaで注文情報をダウンロードする
  2. サインアップ（会員登録）する。
  3. ダウンロードしたファイルを選択する

これで以下のように注文の一覧表示ができ、印刷も可能です。

注文を一覧で表示

クリックポストの申込用ファイルが欲しい場合

  1. クリックポスト変換ボタンを押します。

  2. フォームが現れるので内容品を記入します。内容品はクリックポストのラベルに印字されます。

  3. クリックポスト変換ボタンを押すと、申込ファイルの内容が表示されます。

  4. 内容を確認して、ダウンロードボタンを押すとclickpost.csvという申込用ファイルがダウンロードされます。

ダウンロードしたファイルをクリックポストのまとめ申込フォームで選択すればまとめ申込が完了します。

開発のきっかけ

私自身minne,Creemaを通じてハンドメイド作品の公開、販売を行っているのですが、発送作業において2つの問題を抱えていました。

【問題1】アプリだけでは注文の管理が辛い

注文が立て込んでくると、スマホの小さな画面と公式アプリだけでは注文の管理が辛い場面がありました。
注文を2回に分けて行ったお客様がいたとしてもそれに気づけなかったり、週末に送って欲しいと言われていた注文はどれだっけ？といった情報がアプリの注文一覧画面からは読み取りづらいのです。
必要な情報だけをリスト化、印刷したいな～という思いがありました。

【問題2】クリックポストの手入力が辛い

送料が安く、ポスト投函で発送作業が完了するクリックポストは大変便利なのですが、住所を1つずつ手入力するのはなかなか骨の折れる作業でした。
ハンドメイドECのアプリを開き、郵便番号をコピーし、ペーストする、住所1をコピーしペーストする、住所2を、氏名を、内容品を…
この作業、多い時には一日40件くらいやるわけです。
毎日、絶対正確に行わないといけないのは本当に大変！

解決策

そこで作ったのがminneとcreemaの注文をまとめて管理するプログラムでした。
注文を一覧化し、印刷、さらにクリックポストへも変換ができる！
これはこれで便利だったのですが、こちらはChromeDriverの設定が必要なうえにExcelとWindowsPCが無いと動作しませんでした。
個人的に使う分には問題ないのですが、一般公開して非エンジニアが気軽に使うにはハードルがある、という状況でした。
みんな喜んでくれてるけど、もう少し使いやすくしたいなぁという思いがありました。

Webアプリ化

FBCの最終課題はWebサービスを作るというものです。
制作する内容は自由だったので、これを機に誰でも設定なしで使える形で公開しようと考え、今回の開発に至りました。

工夫したこと

Webアプリ化に際してこだわったこととしては

  • 誰でも使える
  • 設定なしで使える

という事でした。
これに関してはFBCのメンターのmachidaさんがUIの設計の時点で色々とアドバイスしてくださり、ボタンを極力減らした現在の形になりました。
説明をたくさん書くより、説明を読まなくても使えるくらいシンプルなものを、というコンセプトのもとに作りました。

技術選定

Order2Postの技術スタックは以下となります。

バックエンド

フロントエンド

データベース

デプロイ

CI

テスト

作る機能がシンプルだったので、技術的にもチャレンジしながら作りたいという気持ちがありました。
特にReactとTypeScript、RSpecに関しては全然わからない状態でのスタートでしたが、就職を見越して学んでおきたいと思い採用しました。
開発のスケジュールは伸びましたが、手を動かしながら学べたので良い結果を得られたと思います。

苦労したこと

デザインが本当に難しかった

今でこそシンプルなデザインにまとまりましたが、開発の後期までがちゃがちゃした、はっきり言えばダサいデザインの状態でした。
こちらもメンターのmachidaさんに相談して、まずはカラーコンセプトをしっかり決める、色は背景含めて3~4色にする、といった指針をいただきデザインを見直しました。
多少ダサくても便利に使えるならいいか、と思っていたのですが、一新した結果を見ると『デザイン見直して良かった…』と感じます。

技術についての情報がどの程度あるか？を考えるべきだった

技術選定では使ってみたい、学習したい技術を詰め込んだのですが、その技術についてどれだけの情報が存在しているのかということを考慮していませんでした。
特にViteとFly.ioについては情報が少なく、デプロイ時にビルド失敗したりすると、『どこで何が引っかかってるのかがさっぱりわからない』という状況になりハマりました。
技術選定の指標に情報量という尺度が必要だと感じました。

今後の展望

スマホからだとOSの都合で印刷するボタンが使えないので、PDFとして注文一覧をダウンロードできるようにしたいと考えています。
ダウンロードしたPDFをプリンターのアプリで印刷してもらうイメージです。
その他のECサイトへの対応ですが、私が使っていないサービスだと管理が難しいため今のところは考えていません🙏

おわりに

FBCのメンター、受講生、卒業生、たくさんの方に助けられてリリースすることができました。心より感謝いたします。
Order2Postを通じてハンドメイド作家の皆さんが少しでも楽に、楽しく作家活動を続けられるようになったら私としては大変うれしいです。