FiTO Service Design & App

Brand Design

服づくりをもっと楽しく、もっと健康的に

近年、日本の衣料業界は衣服の低価格化による作り手の減少、大量廃棄など、多くの問題を抱えています。そんな業界における服づくりをもっと楽しく、もっと健康的にするため、必要な服を、必要な時に、必要な量だけつくる仕組みのひとつとして、縫製料金の自動見積りサービス“FiTO（フィト）”は生まれました。

FiTOのネーミングには、FiT（適している）、iT（IT技術の活用）、iTO（系・縫製）、TO（向かう）の意味がこめられています。

ブランドカラーは運営会社フクルのロゴで使われている水色とネイビーをベースに、あざやかなピンクを加えて3色で展開。グラデーションと組み合わせることで、ブランドグラフィックからキャラクター、ウェブサイトなど、ブランド全体における表現の幅が広がりました。

Logo Design

トルソーと縫い針の先端をモチーフにしたロゴ

シンボルのモチーフはアパレル業界でなじみのある“トルソー”です。FiTOは衣服の生産における適量・適時・適価の3つを特に大切にしているため、3辺の長さが等しい正三角形で構成しました。ロゴタイプは”Futura”をベースに、縫い針や布の端、系のつながりのようなやわらかい曲線をつけました。

Web Design

見積りフローをイメージしやすいウェブサイト

”FiTOでできること”をよりわかりやすく伝えるため、見積りのフローが疑似体験できるチュートリアル動画を制作しました。ブランドグラフィックやキャラクター、洋服のイラスト、モーションなど、あそびのある要素も豊富にあしらい、見ているだけで楽しい、明るい気持ちになれるサイトにしました。

UI Design

縫製料金の見積りから発注までできるウェブアプリ

ウェブアプリは「おまかせ見積り」と「いますぐ見積り」の2種類から、自分に合う方法が選べます。見積りページではリアルタイムで概算見積りができ、ポチポチと仕様を選択するだけで縫製単価の違いや適正料金を確認できます。ウェブアプリだけで見れるオリジナルのイラストもふんだんに使用し、便利なだけでなく、目で見て楽しい、服づくりを楽しめるアプリを目指しました。

Graphic Design & Illustration

服作りの楽しさとFiTOの目指す未来を表すグラフィック・イラスト

メイングラフィックのヒラヒラと流れ続いていくカラフルな布は、服作りのワクワクする気持ちや無限の可能性・自由さを表しています。FiTOが本サービスでかかげる「MORE HEALTHY APPAREL」のキャッチコピーに込めた哲学をビジュアルから体現しました。

イラストはFiTOの世界観を伝えつつ、縫製フローをよりわかりやすく楽しく理解してもらう補助となるものを目指しました。イメージキャラクターのフィトくんが一つ一つの工程を丁寧に行っている様子をブランドカラーを基調にデフォルメしながらまとめています。サービスを通して利用者さん・FiTO運営スタッフさん・職人さんの心が通い合う一助になってほしいという思いを込め制作しました。

Character Design

縫製の見積もりをお手伝いする、サービスの案内役「フィトくん」

アプリやサービスサイトの案内役として随所に登場するお針子のハリネズミ「フィトくん」。小さいけれど縫製や服作りの知識はプロフェショナル。サービスと共に成長し、服作りをサポートしながら伴走してくれる優しく親しみやすい存在を目指しました。

SNSでは広報としてユーザーさんとコミュニケーションをとりながらサービスをより良くするお仕事に日々励んでいます。

FiTO公式Twitter

Motion Design

見積りのチュートリアル動画、キャラクター・アイコンアニメーション

新しいサービスを開発するにあたって、アプリの内容が直感的にわかる動画を作る必要があると考えました。静止画でも実際の画面は見れますが、動画の方が格段に伝えられる情報量が増え、使う場面をイメージしやすいです。ウェブサイトには「おまかせ見積り」「いますぐ見積り」「見積り一覧」「発注フロー」の4種類のチュートリアル動画を使用し、ファーストビューでも見積りの動画を埋め込んでいます。

また、キャラクターやアイコンにもポップな動きをつけることで、服づくりの楽しさ、ワクワク感を増幅させられればと考え、アニメーションを制作しました。

Interaction / Scroll Animation Design

サービスサイトのインタラクションデザインとスクロールアニメーション

FiTOの楽しさ新しさを表現するためにかわいらしいスクロールアニメーションとSVGアニメーション、インタラクションのデザインと実装をしました。

フィトくんが歩くSVGアニメーションはLottieという形式を利用してNext.js上でループするアニメーションを実装しています。

Web App Development

Next.jsを使用した軽快に動作するシングルページアプリケーション

フロントエンドのフレームワークにNext.js、状態管理にReduxを採用し、軽快に動作する操作性の高いシングルページアプリケーション（SPA）を制作しました。

フロントエンド全体でTypeScriptを使用し、バックエンドとのAPI通信にも型推論を用いて堅牢性を向上させています。ログイン管理にはFirebase Authenticationを用いることで実装コストの軽減にも取り組んでいます。

Website Development

Next.js + microCMS + Vercel のJamstack アーキテクチャを採用

フレームワークにはWeb Appと同様にNext.jsを採用しました。GSAPを使用したアニメーションを盛り込みながら、服づくりと自動見積りサービスの魅力をイメージキャラクターのFiTOくんのいきいきとしたガイドによって引き出しています。

お知らせ、ご利用ガイドとジャーナル記事の投稿管理にはmicroCMSを採用しました。画像APIを活用し、フロントにて画像の大きさや画質をコントロールすることで、入稿時の手間を減らして更新できる構成にしました。

Creative Direction

4社共同での2年がかりの新サービスプロジェクト「FiTO」

縫製業界に対して「ITの力をつかって面白いものを作りたい」。ご依頼いただいた当初から、そんな強い思いを抱いて始まったプロジェクトでした。縫製の見積りを自動算出する、AIをつかった画像解析を利用するというアイデアはあったものの、サービスの全貌や仕様などはまだまだ考える部分が多くありました。

デザインやエンジニアリングをうまく融合させることでその余地を見い出し、FiTOの世界観を作っていきました。

ビジュアルデザインやブランドデザイン、エンジニアリング、マーケティング、どれか一つでも欠けていたらFiTOプロジェクトは完成しなかったと思います。

新しいサービスを生み出して動かしていく。それはまさに奇跡の連続です。実際は「本当に必要なサービスなのか？」、「誰が利用し、利用する価値があるのか？」、「ビジネスモデルやお金やリソースは本当に問題ないか？」など、できない理由はどんどん出てきます。サービスづくりはまさに事業づくりです。誰ひとり、悲観的で否定的な言動はないチームで構成され、ついに公開までたどり着きました。時間はかかりましたが楽しく、面白く、難しい、素敵なプロジェクトでした。

クライアントであるフクルさん、インタビューに快くよく応じてくれた縫製会社のみなさん、FiTOアプリの根幹であるバックエンドのエンジニアリングを担当してくれたIS Primeさん、見積り時にAIの画像解析を利用してカテゴリーを選択してくれるという一歩先を行く実装をしてくれたFantomさん。本当にありがとうございました。

Client Voice

フクルの目指したい未来を戦略的に事業に結び付けた、総合的戦略立案をしていただきました。

neccoさんには、フクルの成すべき使命や未来に対し、絶えずコミュニケーションをとって情報の言語化・視覚化をしていただき、創造をはるかに超えた提案をしてくださいました。
今回のプロジェクト-FiTO（フィト）-の名付けからブランディング、ディレクション・デザインからUX/UI、アーキテクチャの選定に及ぶ、すべてにわたりフクルの目指したい未来を戦略的に事業に結び付けた、総合的戦略立案をしていただいたと思っています。
なにより、クリエイティブを楽しむneccoさんのメンバーのみなさんと一緒にお仕事させてもらえることが楽しかった！

株式会社フクル
代表取締役　木島広