croccha Web UI

OVERVIEW

ハンドメイドに特化したSNSアプリ「croccha」 webアプリのUIデザイン

YEAR 2019

概要

新規ユーザーの獲得、認知向上のためにweb版のアプリをリリース


使用ツール

  • Figma
  • HTML
  • CSS
  • React

担当業務

サービスのUIデザイン・コーディングをメインで担当。

デザインチームのスケジュール管理や外部デザイナーへの発注等ディレクション的な役割も担当しました。


開発規模

  • webデザイナー・コーダー2名(本人+アルバイト)
  • エンジニア3名

デザインで重視したこと

  • ハンドメイドのSNSであることがわかるようにする
  • ハンドメイドのアイデアが得られる動線を作る

トップページではcrocchaがどのようなサービスなのか説明するとともに、ユーザーの投稿を表示することでハンドメイドのSNSというコンセプトを押し出しました。

また、投稿の一覧では作品の種類を絞り込む機能を設け、ユーザーが興味のあるジャンルと作りたいものから投稿を探すことができるようにしました。


ツールの見直し

XD+zeplinからFigmaへ

デザインチームは2名体制であったため共同で作業をする場面が多々ありました。

現在はアップデートされていますが当時のXDはファイルの共同編集ができず、デザインファイルのバージョン管理は作業の大きなネックになっていました。

また、zeplinでコンポーネントライブラリを作成していましたがコンポーネントを更新するたびにXDからzeplinへexportする作業も手間だと感じていました。

そのため、共同編集が可能なFigmaを使用するようにツールを変更しました。チームライブラリ機能を使用することでコンポーネントライブラリやデザインスペックの定義もFigmaに集約しデザイン作業の効率性を向上することができました。


WEBSITE