アパレルのエコデザインサービス「FiTO（フィト）」ブランドサイト

Creative Direction

FiTOブランド、サービスを確立し複数のマイクロサービス所持するブランドへアップデート

FiTOは、縫製の自動見積りサービスとしてスタートしました。株式会社フクルさまからブランド・サービス開発、UIデザイン、フロントエンド実装のご依頼をいただき、2022年にリリース。その後すぐにFiTOのリペアサービスについてもご相談をいただき、同じブランドデザインを踏襲しながら、新たなサービスの開発・デザイン、制作をお手伝いしました。

FiTOリペアが生まれたことでFiTOは複数のサービスを運営することになりました。FiTO見積もりを開発をした際に複数のサービスが生まれる可能性はお伝えいただいていたので、マイクロサービスとして拡張性や柔軟性を持たせたアーキテクチャにするのはもちろん、ブランドとして複数のサービスを所持するイメージをもっていました。

今回はFiTOブランドの構造や整理も兼ねてFiTOの顔になるFiTOの全体を統合するブランドサイトを制作。ブランドサイトからFiTO見積もり、FiTOリペアそれぞれのサービス紹介サイトやウェブアプリケーションに遷移することができます。今後、新規サービスがうまれた場合もこのブランドサイトから遷移することが可能です。

今回のブランドサイト制作とあわせて、いまままでFiTO見積もりで利用していたユーザーアカウントもFiTO見積もりだけでなくFiTOリペアも利用できる共通のFiTOアカウントとにしました。あわせてFiTOアカウトを管理するウェブアプリケーションも開発。neccoではUIデザイン、フロントエンド実装を担当しています。

FiTOというブランドやサービスが長く続くよう、フクルさまと一緒に丁寧に企画や設計、デザインを進めました。このブランドサイトで、FiTOアカウン、FiTO見積もり、FiTOリペアをうまく統合できました。

フクルさんが描く大きな構想と実現したい未来の基盤が整い、これからさらに発展していくお手伝いをこれからもできればと思っています。

Direction / Writing

サービスを結びつけるハブの機能を持ち、ブランドの魅力や姿勢を伝えるサイト

2022年に縫製料金の自動見積りサービスをリリースし、その2年後にアウトドアウェアの補修サービスをリリースしたFiTOプロジェクト。「人と衣服と地球のしあわせな関係をつくる」ことを目指し、カーボン・オフセットやトレーサビリティなどの取り組みにも挑戦しながら、ひとつずつ着実に、社会的意義のあるサービスを展開してきました。

今回作成したブランドサイトは、これまでに生まれたFiTOの素敵なサービスを結びつける「ハブ」の機能を持ちながら、ブランドの魅力を伝える「顔」となるサイトです。1ページでFiTOが描く未来を感じられ、各サービスに興味を持っていただけるような構成と文章を作成しました。

Web Design

関係を紡いでいく様子をグラフィカルに表現

人と衣服、そして地球との繋がりを、リボンと糸をモチーフにFiTOブランドらしい世界観で表現。

FiTOが展開する3つのサービスを動画でわかりやすく紹介し、それぞれのサービスサイトへもスムーズに遷移できる構成になっています。
さらに、FiTOの服づくりについても、環境へ配慮している様子が直感的に伝わるようグラフィカルに表現しています。

ナビゲーションやフッターにはブランドキャラクターの「フィトくん」が隠れており、楽しみながらサービスを知っていただけるようなデザインに仕上げています。

Animation

アニメーションで伝える繋がりとサービス

サイト内では、あしらいや図版にLottieアニメーションを取り入れています。
リボンや糸の動きで「関係を紡いでいく」様子を表現し、サステナブルやカーボンオフセットの循環といったテーマも、より直感的に伝わるよう工夫しました。

デザインを補強するだけでなく、コンテンツを楽しみながら読み進められるようなアニメーションを目指しました。

Website Development

Astro + microCMS + Vercel によるJamstackアーキテクチャを採用

フロントエンドにはAstro、CSSフレームワークにはTailwind CSSを使用し、お知らせや FiTO ジャーナル記事の投稿管理にはmicroCMSを導入しました。

また、FiTOの各サービスサイトで共通のmicroCMS APIを利用することで、コンテンツの一元管理も実現しています。

GSAPやLottieを活用したアニメーションも取り入れ、FiTOの3つのサービスの魅力を、イメージキャラクターの「フィトくん」とともに紹介しています。

Client Voice

ブランドとしての進むべき道を明確に照らしてくれた

デザインがこれほどまでに事業の根幹に影響を与えるものかと、neccoさんとのお仕事を通じて改めて実感しています。 UI/UXの美しさや使いやすさはもちろんのこと、ブランドロゴに込められた意味からWEBサイトの細かなあしらいに至るまで、すべてに一貫した哲学を感じつつ、何よりワクワクする。 それによって、社内でも「FiTOらしさ」とは何かという共通認識が生まれ、事業推進における一体感が格段に高まりました。 デザインと機能性を両立したサービス基盤を構築できたことに大変満足しています。 neccoの皆様に深く感謝するとともに、この先も一緒にFiTOを育てて欲しいです！

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