激動の2020年振り返り

このエントリーについて

このエントリーは著者（UIデザイナー・エンジニア「うっくん」）の2020年の個人的な振り返りです。

おそらくほとんどの人にとって2020年はかなり濃い1年だったのではないでしょうか。コロナの影響で仕事のやり方や普段の生活が根本から変わりました。

筆者も例外ではなく、様々な変化がありました。軽く思い起こすだけでも、転職、転職後初めてのプロジェクト（食品ECサイト）、Webフロントエンドエンジニアデビュー、第一子の誕生、コロナ爆発、ECサイトのプロジェクトがサービス終了、新しいプロジェクト（ネットスーパー）のスタート、iOSエンジニアデビューなど。

筆者が、仕事でプログラムを書かせてもらうことが多くなったタイミングで、このZennという素晴らしいプラットフォームが登場したこともあり、今までやってきたnoteと並行して、Zennの方でもブログを書き始めました。
当分は技術系のストックとして、Zennを使っていこうと思っていますが、エディターが軽快で非常に気に入っているので、このエントリーはZennで書いてみようと思いました。

個人的な振り返りで雑多な内容ではありますが、デザイナー・プログラマーといった垣根を超えて活躍したい方にとって、キャリアや成長の参考になればと思います。

なお、ここで使っているスクリーンショットなどは許可を得て掲載しています。終了したサービスも含まれており、筆者が出さなければインターネット上のどこにも残らない可能性もあるので、長文のエントリーになりますが、画像だけでも見てやってください！

激動の2020年前半

転職

2020年1月から筆者はdely株式会社（デリーと発音）というところで働いています。delyはクラシルというレシピ動画アプリを作っている会社です。

クラシルは累計2500万ダウンロード以上を記録しており、特に女性には認知度が高いアプリです。

その前は某巨大自動車会社の研究開発部でカーナビのUIを設計していました。

転職のきっかけは、（色々ありますが、一言で言ってしまえば）大企業にありがちな社内政治に疲れたことや自分の成長が頭打ちになったと感じたことです。

このままではいけないという危機感があり、3月に子供が生まれてパパになるというのに、次の仕事も決まらないまま有名な自動車会社を退職しました。

普通だったら頭がおかしいと思われそうな行動ですが、普段から仕事の話もよくしているので妻も理解してくれました。

delyへの入社に当たっては、面接と並行して業務委託で1週間ほどお試しでデザイナー業務を体験させてもらいました。お給料をいただいて働きながらお互いの理解を深められる採用プロセスは画期的だなと思いました。こういう採用が普通になればいいなとも思うのですが、普通は転職活動って仕事をしながらやるものなので、難しいですね。思い切って退職したからこそ生まれた縁だと思います。

初めてのプロジェクト - クラシルストア

delyで初めて担当したプロジェクトは「クラシルストア」と呼ばれるECサイトでした。

クラシルストアはクラシルのアプリ内から食品が購入できるというコンセプトのECサイトで、主にお取り寄せグルメや高品質なスイーツなどを取り扱っていました。

僕がジョインした時に、取り扱う商品ジャンルを増やし、サイトもリブランディングするというミッションが与えられました。僕はそのプロジェクトでUIデザインを任せられました。

クラシルストアのようなレベルで一からプロダクトを構築して数百万人のユーザーに届けるという経験は初めてで、とても刺激的でした。ジョインしたばかりの僕がうまくやっていけるように、CXOの坪田さんがガッツリこのプロジェクトにコミットして先導してくれました。毎日隣の席にCXOが座っていて、トライアル＆エラーを繰り返し、爆速で意思決定していった経験は自分にとって特別な時間になりました。坪田さんには非常に感謝しています😭

クラシルストアのUIデザイン

	クラシルストアのトップページの例。毎日のように小〜大規模な改善をしていた。

最初は取り扱う商品点数も少なかったので、トップページはただ全商品の一覧を表示するだけのページとして公開し、主に購入の動線の設計と、商品の詳細ページに力を入れました。

例えば、アカウントを作らなくてもカートに追加できるようにしたり、ECサイトなので長くなりがちな入力フォームを分割したりして、購入フローをできるだけスムーズになるようにがんばりました。複雑な要件を見事に実装してくれたエンジニアの力もあり、いいものになったと思います。

複雑な購入フローの設計。ユーザーにとってシンプルにするため、裏側は結構複雑になっている。

商品詳細ページではできるだけUI要素を減らし、一般的なECサイトよりごちゃごちゃ感が少なくなるようにしました。特に、お取り寄せ商品は送料もかかりますし、比較的高単価な商品が多かったこともあり、いかに商品の良さやストーリーを伝えて購入に結びつけるかが重要だと考えました。

	UI要素を減らして、商品のストーリーを読んでもらうことに注力したデザイン。

フロントエンドエンジニアデビュー

少人数のチームで開発していたこともあり、常に 「やりたいこと＞＞＞リソース」 という状況でした。

もともと静的なHTML/CSSぐらいは書けたので、自分でできそうな簡単な変更をいちいちエンジニアさんに依頼するのが忍びなくなってきたこともあり、自分で直接コミットしてみようということになりました。
環境構築は、チームのエンジニアの方にほとんど手伝っていただき、とても感謝してます。ありがとうございました。

Gitも大して分かっていなかったのですが、SourceTreeというとても便利なものを教えていただき、なんとか自力でプルリクを書けるようになりました😅

触った技術としては、HTML/SCSS/TypeScript/Ruby on Rails/ERB/Vue/Dockerといったところです。
初めてSCSSというものを触って、便利だなと思いました。
ERB（Rubyが使えるHTMLみたいなやつ）も初めて使ったのですが、大変便利でした。ECサイトの販促のための静的なLP（ランディングページ）をいくつも作ったのですが、ERBなら繰り返しの要素をfor文でループさせて生成できるので、変更箇所を少なくできたり、コピペミスのリスクも減らせることを学びました。

TypeScriptは自分のレベルが低すぎて、正直よくわかりませんでしたが、先輩が作ったやつの見様見真似で追加・変更を行なったりしていました。
Swiperという画像をスライドショーするライブラリーをカスタムして、イケイケなスライドショーのUIを作りました。こういうやつ。

	バナーがプレビューできるUIパターン。次に何が来るか見せておくことで、1枚目以外のバナーにも触れてもらうチャンスを作る。

ECサイトでは、商品の告知＝バナーが非常に重要なのですが、無視されてしてしまう傾向があったり、1枚目のバナーだけめちゃくちゃ押されるみたいな問題があります。そこで、次に来るバナーの雰囲気が見えるミニバナーをプレビューとして表示しています。このプレビュー自体をクリックすることで、該当のバナーを表示することもできます。

コロナ襲撃

皆様もご存知の通り、4、5月ぐらいになるとコロナが大フィーバーしました。
この頃delyもフルリモートになるなど、世間でも在宅勤務がポピュラーになっていました。
そんななか、巣篭もり需要とフィットし、公開したばかりのクラシルストアも注文が殺到するような状況でした。

第一子爆誕

コロナが徐々に噂され始めた3月、第一子が誕生しました👶
タイミングよく（？）、コロナがフィーバーしていたこともあり、在宅勤務でベビちゃんと一緒に過ごせたのは良かったです。

クラシルストア終了

そんなさなか、クラシルストア、まさかのサービス終了。理由としては、後述するネットスーパープロジェクトにリソースを投下するためです。
非常に難しい経営判断ではありましたが、一緒に開発したチームメンバーもみんな納得して次のプロジェクトに移れたと思います。（それでもガッカリしたのは言うまでもありませんが・・・）

クラシルストアが終了したのが、6、7月ぐらいだったと思うので、ここまでが前半戦ぐらいでしょうか。

激動の2020年後半

ネットスーパープロジェクト

クラシルストアのプロジェクトがクローズした後、同じECの中でもグローサリー（日用品・生鮮品）を販売する「ネットスーパー」領域を開発するプロジェクトがスタートしました。

クラシルで検索したレシピに必要な食材を直接ネットスーパーで購入できるという、ユーザーにとってもメリットが分かりやすいコンセプトの機能です。この機能をクラシルのアプリの中に組み込むのがネットスーパープロジェクトです。

なぜ最初からこれをやらなかったかというと、こっちの方が難易度がめちゃくちゃ高いからです。

クラシルストアで販売していたミールキットやお取り寄せグルメ系と違い、生鮮品は賞味期限や温度帯管理がシビアなこと、購入頻度は高いものの、単価が低く、配送料を考慮したときに採算が合いにくいことなどが要因で、実現難易度が非常に高い領域です。

あまり詳しいことは、今後の事業の戦略に関わってくるので内緒ですが、ここでもUIデザインを軸としながらも様々なことに挑戦することができました。すでに公開されているUIや製品の情報を中心に振り返ります。

iOSエンジニアデビュー

クラシルのネットスーパー機能は2020年12月現在、クラシルのiOSアプリから利用することができます。

僕はクラシルストアでフロントエンドを少し触らせてもらったこともあり、iOS開発においてもUIデザインと並行してフロントエンド開発（Swift）に挑戦しました。
クラシルネットスーパーではInterfaceBuilderを使わずに、コードのみでUIを実装してますが、もともとWebのフロントエンドしか知らなかった自分が想像していた感じとは結構違いました。
ViewController、SubView、NSLayoutConstraintsなど、ウェブの世界には存在しない概念が大量に出てきて面食らいました。
iOSエンジニアの先輩に手取り足取り教えてもらった結果、見た目の調整、ロジックや通信を伴わないViewの実装 は一人でもできるようになりました。
今後は、CollectionViewなどのデータをUIにマッピングする実装や、アーキテクチャを理解した上で通信や状態の管理など、より高度な実装の部分にも挑戦していきたいです。

ネットスーパー機能のリリース

7月ぐらい？からスタートしたネットスーパープロジェクトですが、12月になんとかリリースにこぎつけることができました。この機能はイオンリテール様と提携し、イオンネットスーパーへの注文をクラシルのアプリの中から受け付けるという形で実現しています。リテール業界の超大手企業様との提携を実現できたこと自体光栄ですし、イオン様の力がなくては実現が難しい機能だったので、実際にリリースされた時は感無量でした。

クラシルのiOSアプリからぜひ使ってみてください。そういえばこのサイトも僕が作りました（デザイン＆実装）↓
https://sm.kurashiru.com

ネットスーパーのUI - 普通のECサイトとの違い

クラシルストアとクラシルのネットスーパー機能、アプリから食品を買えるというところは似ていますが、以下の部分が特に大きく違っていました。

• 商品点数
  • クラシルストアは100~200商品前後でしたが、ネットスーパーは最大4万商品を取り扱っています
  • このため、テキスト検索やカテゴリによる絞り込み、ホーム画面での一覧性の高さなどの重要性が全く違っていました
  • クラシルストアの時は、商品点数の拡張に合わせて順次機能を開発していけばいい、という戦略でしたが、ネットスーパーではいきなり検索機能がなくては話にならない、というプロダクトになることが容易に想像できました。
• 「入店」の概念
  • ネットスーパーは実際のスーパーマーケットの店舗に置いてある商品を、スーパーの店員さんが棚から取ってきて、ユーザーの自宅に配送するというシステムを採っています。
  • このため、既存のネットスーパーでは、「お届け先などの情報を先に入力してもらわないと、店舗が決定せず、取扱う商品ラインナップも確定しない。だからまず郵便番号を入れてもらう」という非常に独特なユーザー体験となっていました。
  • どんな商品が売ってるかも分からないのに郵便番号を入力したり、アカウントを作成しなければいけないのはユーザーにとって使い始めのハードルを上げてしまうことになります。

ネットスーパーのUI - 実現したこと

食材を検索する

レシピ動画から	食材が検索できる
	1発でそのユーザーが求めているものを出すことは不可能という前提で、複数商品を提示している。

ホーム画面での一覧性

	カルーセルを用いて商品の一覧性を高める。テキスト要素も最小限にした。

カルーセル（横スクロールできるリスト）を用いたかなり一般的なUIパターンですが、ここに来るまでいろんなパターンを試しました。アプリを公開する前に何度も社内の方に使ってもらって、分かりやすさを改善していきました。

ログインなどをせずに使い始められるユーザー体験

	ログインしてからでないと実際に購入することはできないが、使い始めた瞬間はログインせずに商品の閲覧ができるようになっている

ネットスーパーでは前述したとおり、お届け先の地域によって商品のラインナップも変わってしまうのでまず郵便番号を入力させるようなUIパターンが多いのですが、クラシルのネットスーパー機能では、まず機能を体験できるようにした。

マイカーを購入

前職時代は、車通勤が許されていたこともあり、マイカーを所有していたいのですが、転職のタイミング前後で手放してしまいました。

ところが今年11月に近年の中古車ブームを受けて、インプレッサWRX STIを購入しました。

この車は、筆者が免許を取得する遥か昔から遊んでいたレーシングシミュレーター「グランツーリスモ4」でとてもお世話になった車です。（ゲームに登場するのはこれのマイナーチェンジ前の「涙目」と呼ばれるヘッドライトが特徴的なモデルになります。）
筆者が購入したのはGDB-F型と呼ばれるモデルで、鷹のように釣り上がった目をしていることから「鷹目」と呼ばれています。
2005年式ですが、15年前の車にしてはとても綺麗で気に入っています。280馬力でスピードメーターには堂々の260km/hが刻まれています。これだけバリバリのスポーツカー性能なのにも関わらず、ちゃんとドアが4枚、トランクにベビーカーもつめて、チャイルドシート固定器具（ISOFIX）も装備しているという完璧なファミリーカーです。

新車価格からほとんど中古市場で値段が落ちていないので、実質無料と思って購入しました！！

この車を買うきっかけになったRX-7と一緒に。仲の良い友達がこのRX-7を買ったことがきっかけで自分もこういう車が欲しくなりました。妻と相談して、ドアが4枚ついてるならと、お墨付きをもらいました（笑）

最後に

今年最後の勤務を昨日終え、今、この振り返りのブログを書いています。
多分ほとんどの人にとって変化の多い1年だったと思います。
来年もさらなる成長マインドを忘れず、コロナにはもう少し落ち着いてもらって、普通な生活を取り戻したいなと思っています・・・。

なお、delyではエンジニア・デザイナーを採用しています。
ぜひ一緒に働きましょう。

採用ページ↓
https://join-us.dely.jp

開発者向けオンライン交流イベント↓
https://bethesun.connpass.com