見出し画像

ストアデザイン機能アップデートの裏側

STORES.jp デザイナーの冨田です。

2018年12月に、ストアデザインエディタの大きなリニューアルがありました。今も少しずつ進化している機能なので、今更ですが制作の裏側を紹介させてください。

画像10

経緯

もともと、STORES.jpのストアデザインは、10個のレイアウトからひとつを選び、そのレイアウトに自分の情報を追加していく、という仕様でした。

画像1

当時、私に来た依頼は「新しいレイアウトを追加してほしい」という内容でしたが、もう少しベースの、ストアデザインエディタのあり方から考えてみることにしました。

STORES.jpのショップオーナーは、それぞれのブランドの個性が強く、自身の手で作りあげることにこだわっている方が多いです。

そんなオーナーさんたちには、貸店舗でいうと、間取りも内装もバチバチに決まっているより、自由に改装していける物件のほうがあっているかな、と考えました。
やっぱテラス席も作ろうかな、商品増えたから2階も改築したいな…とか。

画像2

そこで、自分で好きなパーツをカスタマイズして作成できるエディタを提案しました。
もともとのコンセプトでもあった「HTMLの知識がなくても簡単にカスタマイズできる」という根っこの部分は変えていません。

名称未設定アートワーク 2

エンジニアの横田さんも、代表の塚原さんも大賛成してくれて、開発が決定しました。

もちろん、ショップオーナーさんのなかには、特にデザインにこだわらず、すぐにいいかんじに作りたい、という需要もあります。
すでにデザインが決まっている「テンプレート」も用意されていたのですが、これも数を増やして用意することにしました。

画像4

作業

1.仕様検討

まずは既存のレイアウトをパーツに分解していきます。
パーツに分けた後にUIに落とし込んでいき、仕様とワイヤーフレームを作成しました。

名称未設定アートワーク 4

2.UI作成

直感的に使える」をテーマに設計しました。
どんなショップオーナーさんも、気づいたら思い通り、いい感じにできていた!が理想に違いないです。

モックアップ作成後は、ショップオーナーさん、STORES.jpの各部署のメンバーや、グループ会社のCoineyのデザイナーにも触ってもらい、フィードバックをもらいました。
既存、新規、どちらのショップオーナーさんも違和感なく使えるゴールを目指しました。

あまりに自由度をあげることで、機能が把握しきれなくなったり、使いこなせない、ということが起こらないように、「自由度」についても会話を重ね、認識を合わせました。

名称未設定アートワーク 5

デザイン決定後は、zeplinでデザインを共有し、フロントエンドに開発を依頼しました。
その後も、細かいUIの使用感はフロントエンドチームからフィードバックをもらいつつ、一緒に話し合いながら詰めていきました。

初回リリース

画像7

まずは既存のストアデザインをパーツ分解し、それを自由に組み合わせることができる状態で、初回リリースを行いました。

カスタマイズせずにそのまま使えるテンプレートも9種類から50種類に増やしました。

画像8

他にも「PCでモバイルの確認ができる」「ストアトップのレスポンシブ化」など、かゆいところに手が届く機能の追加やバージョンアップもしています。

スクリーンショット 2019-10-24 14.53.54

追加リリース

初回リリース後も、カスタマイズの幅が広がる新機能を続々リリースしています。また、細かいUIのブラッシュアップや、新機能の検討も日々行っています。

■カテゴリーパーツのカスタマイズ

■ピックアップアイテムの追加

■メニュー項目のカスタマイズ

■アイテム画像の横長・縦長のカスタマイズ

さいごに

読んでもらって、現場にいる人ならわかると思うのですが、このアップデートはフロントエンドエンジニアのみなさんのモチベーションとスキルがとてもすごいので成り立ちました。ほんとうに感謝です。

トップダウンで決まった仕様を開発に流すのではなく、設計段階でもエンジニアの意見を聞き、開発段階でも疑問に上がったことは一緒に再考するコミュニケーションが取れているので、そこもSTORES.jpでデザイナー業務を行う醍醐味だと感じています。

既存のいいところを残しながら、新しいエディタを作るのは大変でしたが、
エディタを使いこなしてくれているオーナーのみなさんのショップを見るたびに、やってよかったなと思います。

カスタマイズされたショップの実例はこちらをごらんください。

そんなSTORES.jpでは、デザイナー、エンジニア、双方ともメンバーを募集中です。

ご興味を持っていただけた方は、オープンオフィスの機会も隔週で設けていますので、どうぞお気軽に遊びに来てください。


STORES.jpはコチラ▼


文・イラスト:ストアーズ・ドット・ジェーピー デザイナー 冨田マリー

この記事が参加している募集

Happy :D
87

STORES.jp

本格的なネットショップが、誰でも簡単に作成できる『STORES.jp (ストアーズ・ドット・ジェーピー)』です。 STORES.jpはこちら▶https://stores.jp/

STORES.jpの裏側

8つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。