この記事は SUZURI Advent Calendar 2019 - Adventar の22日目の記事です。
2019年の1年間で SUZURI には10種類の新アイテムが追加され、7種類の既存アイテムがリニューアルされた。
- ✨Tシャツ: 両面プリントに対応 (01/17)
- ✨パーカー: 両面プリントに対応 (01/21)
- ✨ロングスリーブTシャツ: 両面・両袖プリントに対応 (04/02)
- 🆕アノラックパーカー (04/02)
- 🆕ウォッシュTシャツ (04/02)
- 🆕クージー (04/02)
- ✨リンガーTシャツ: ボディリニューアル (07/01)
- 🆕ウエストポーチ (07/08)
- 🆕ジップパーカー (09/25)
- ✨パーカー: サムネイル画像リニューアル (10/28)
- ✨スウェット: サムネイル画像リニューアル (10/30)
- 🆕きんちゃく (11/07)
- 🆕ビッグショルダーバッグ (11/07)
- 🆕ビッグシルエットパーカー (11/27)
- 🆕ビッグシルエットスウェット (11/27)
- 🆕グラス (12/05)
- ✨スマホケース: 仕上がりリニューアル (12/18)
抜け漏れないかな?たぶん大丈夫。
この記事では自分が開発に携わったアイテムについて、作りながら考えていたことやいま改めて思うことを書いていこうと思う。
✨Tシャツ: 両面プリントに対応
もともとオモテ面にしかプリントできなかったTシャツをウラ面にもプリントできるようにした。
こんな感じ。
スリ戸惑い中 / 忍者スリスリくん ( surisurikun )のTシャツ通販 ∞ SUZURI(スズリ)
オモテ | ウラ |
---|---|
両面プリントに関しては、すでに対応済みのコーチジャケットの実装があってそれを参考にしながら実装したので、大きな技術的課題はなかった。
ただ、新アイテムを追加するのは初めての経験だったので仕様の理解(そのためのコードリーディング)にかなり時間をかけたなぁ、という記憶がある。
あとTシャツは他のアイテムと比べてサイズの種類が多い(Mens S~XXXL, Ladies S~L, Kids 90~160)ため、単純にその分手間が掛かった。 実はこの時、単にウラ面に対応しただけではなくオモテ面画像のリニューアルも行なっていて、それも合わせると結構大変だった(特にデザイナさんは作業が多くて大変だったと思う)。
実装しながら思っていたことは、なんかこれミスったら影響でかいよなぁ〜、ということ。TシャツはSUZURIで一番売れるアイテムだから。リリース後に変な問題が起きないように、っていうのを一番考えていたかもしれない。問題なくリリースできて良かった。
案の定めちゃくちゃ売れて8月4日には2019年の累計受注枚数が10万枚を突破した。 pepabo.com
よくわからないけど10万枚はすごそう。
10万といえば10まんボルトだから、きっとすごいと思う。
🆕クージー
クージーって何?という感じだった。
缶やペットボトル飲料を入れて保温保冷するアイテムで、こんな感じ。
NINJA BEER / 忍者スリスリくん ( surisurikun )のクージー通販 ∞ SUZURI(スズリ)
正面 | 持ってる様子 |
---|---|
円柱形のアイテムなのでクリエータさんがアップロードした画像を円柱形に合成する必要があった。
円柱形の合成処理は既存アイテムのマグカップにもあったが
- 再利用できる形に切り出されていない
- 変数名が
length1
,height1
等になっていて可読性が低い
という問題があって、まずはこれを解決するためのリファクタリングをした。
具体的には、円柱形画像変換器として Cylinder
というクラスを作り、マグカップの合成処理からこのクラスを使うようにした。クラス内ではとにかく意味のある変数名を定義した。
変数名を定義するのは意外と大変で、そもそも何やっているか分からないと名前をつけることができない。「あ、この height1
は "斜め上から見下ろした時に見えるプリント領域の高さ" のことなのか〜」「あ、この length1
は "円柱形の上面の楕円の、短い方の半径" のことね!」のように、内容を理解しながら名前をつけていった。
クージーの実装でもこの Cylinder
クラスを使い、良い感じに実装することができた。
正直クージーの実装を担当することに決まった時はめちゃくちゃ不安だった。
「円柱形の合成処理なんて分からんわ〜」という感じだったし、参考としてマグカップの合成処理を読んでも「なるほど(全くわからん)」という状態だったのでヤバかった。
心折れそうだったけど「読んでるうちに理解できるはず」と信じて読み続けていたらだんだんと分かるようになってきたし、「途中までだけどここまで分かったかも」というのを誰かに聞いて欲しくてそれを聞いてくれる(&適宜良い感じの質問をくれる)仲間がいたのでなんとか乗り越えることができた。
(様子)
この Cylinder
クラスは最近リリースされたグラスにも活用されていて、あ〜実装しておいてよかった〜と思った。
ある冬の日 / 忍者スリスリくん ( surisurikun )のグラス通販 ∞ SUZURI(スズリ)
アングル1 | アングル2 |
---|---|
✨リンガーTシャツ: ボディリニューアル
デザインを印刷するTシャツ自体のことを「ボディ」と呼んでいる。 SUZURIのディレクター陣は常に面白いアイテムや良さそうなアパレルを探していて、この時は「今のやつよりも良さそうなシルエットと質感のリンガーTシャツを見つけたからリニューアルしよう」という話になった。
Yes. I am a NINJA. / 忍者スリスリくん ( surisurikun )のリンガーTシャツ通販 ∞ SUZURI(スズリ)
旧ボディ | 新ボディ |
---|---|
画像を差し替えて合成処理のパラメータを調整し直すだけなので、技術的に難しい課題は特になかった。
ただ今回はボディ差し替えと同時にカラー変更(旧ボディの4カラーを全て廃止し、新カラーに変更)も行なったため、旧カラーを表示したいシーン(買ったもの一覧画面など)でエラーにならないように、旧ボディの画像が表示されるようにする対応も必要だった。カラーによって合成処理を切り替えることで旧ボディも表示されるようにした。
ちなみに新カラーはスミ、バーガンディ、ジーパンブルー、ヘザーグレーの4種類で、個人的にはこの2色が好き。
ジーパンブルー | ヘザーグレー |
---|---|
🆕ジップパーカー
その名の通りジップがついているパーカーのこと。個人的には、ジップがついているものを「パーカー」と呼ぶのだと思っていた節がある。(ジップがついていないパーカーのことは「ジップがついていないパーカー」と呼んでいた)
スライス / 忍者スリスリくん ( surisurikun )のジップパーカー通販 ∞ SUZURI(スズリ)
Jingu / 忍者スリスリくん ( surisurikun )のジップパーカー通販 ∞ SUZURI(スズリ)
オモテ | ウラ |
---|---|
もともとSUZURIではパーカーのことを「フーディ」と呼んでいたけど、このジップパーカーのリリースを機に見直されたりした。
🆕きんちゃく
小物を入れるきんちゃく袋。
ズッキュンズッキュン / 忍者スリスリくん ( surisurikun )のきんちゃく通販 ∞ SUZURI(スズリ)
グレー | ベージュ |
---|---|
合成の調整が難しかった。単純に画像を乗せるだけでは質感や色合いがうまく表現できないので、ざらつき感を出す加工をしたり色合いを調整した。
リリース後に、蛍光色を使ったデザインを合成すると微妙な感じになることが発覚し、どうしようかな〜と悩まされた。
社内ドキュメントに「こんな感じでやるといいかも?」とメモを残して私用で休暇に入ってしまったのだが、次に出勤した時には仲間がその感じで修正してリリースしてくれていた。ありがたかった。
🆕ビッグシルエットパーカー
ビッグなシルエットのパーカーのこと。
the page you were... / 忍者スリスリくん ( surisurikun )のビッグシルエットパーカー通販 ∞ SUZURI(スズリ)
オモテ | ウラ |
---|---|
(たまたまこの商品はウラ面のデザインがないけど、両面にプリント可能)
ビッグシルエットパーカーを触りがなら実装していた。
すごくふわふわで気持ちよかった。
この気持ち良さを合成で伝えたかったんだけど、なかなか難しかった。たぶん買ってない人には、このふわふわさは伝わっていないんじゃないかなぁ、と思う。
リリース当時もこんなこと言ってた。
手触りふわっふわパーカー
— たなけん (@tanaken0515) 2019年11月29日
手触りふわっふわスウェット
ていう名前にすればよかったね。
文字数一緒だし
まとめ
自分が実装に携わったのは以上の6アイテムだった。
改めてふりかえってみると、チームメンバーの仲間に大いに助けられてリリースすることができたのだなと感じた。
2020年もSUZURIは新しいアイテムの追加やリニューアルをたくさんやると思う。
楽しみ。