商品もブランドもすきになる。Floydサイト制作秘話

2020-09-10

この夏、ゴーヤチャンプルーを愛してやまないmokaです。

あんどぷらすでは静岡・三島にあるプロダクトレーベル「Floyd（フロイド）」さんのECサイトリニューアルを行いました。
制作実績はこちらから。

以前は三島にショップ＆カフェをオープンし、東京や愛知などにも店舗を構えていましたが、昨年からはオンラインショップのみで販売を行っています。

今回はFloydさんがなぜサイトリニューアルを考えたのか、サイトがどのようにして作られたのか、記事にしていきます。

Floyd代表・藤沼さんは経営者でありながらFloydのデザイナーも務めています。

そんな藤沼さんのお人柄がわかる記事はこちら▼

fuigo opening partyトークセッションレポート

Floydのこと

Floydはデザイン・製造依頼・在庫管理など全て自社で行っているプロダクトブランドです。

Floydのコンセプトは

「人々に感動と驚き、そして微笑みを届けること」

オンラインショップで販売されている商品は全て自社でデザインしたもの。

コンセプトの言葉どおり、商品ひとつひとつにはストーリーがあります。

サイトリニューアルを考えたきっかけ

Floydさんは現在イベントのポップアップなど期間限定で出店しているのですが、

「ブランド」ではなく「さまざまな商品を扱っている雑貨店」として見られてしまうことに悩んでいました。

もちろん、ECサイトとして購入のしやすさは前提に

Floyd＝プロダクトブランド

のイメージづけをするのが今回のリニューアルの課題でした。

旧サイトの改善点

元々のサイトはシンプルで洗練されていますが、どこか淡白で無機質な印象でした。

商品の魅力が伝わりづらい

商品一覧ページは綺麗ですが、パキッとしていてFloydさんの柔らかい色合いの商品が浮いてしまっています。

こだわりぬいて作った商品もどこをどのようにこだわったのかが書かれていないため魅力が伝え切れていませんでした。

ブランド情報の不足

ブランドコンセプトなどFloydの情報も不足していたため、ブランドへ込めた「想い」やものづくりへの「こだわり」が伝わりにくいサイトになっていました。

旧サイトはフッター（HPの一番下）の「会社概要」から探さなければコンセプトにたどり着きませんでした。

ギフトページ

ギフトで贈りたくなるような商品が多いにも関わらず、サイトの中をよく探さなければラッピングや熨斗（のし）について分かりづらい場所にありました。

贈りものをするときにラッピングしてもらえるというのは重要視されることだと思うので、ギフトページの探しやすさもリニューアルの項目に入れました。

その他細かい部分の修正も含めて制作が始まりました。

Floydのストーリーを共有できるサイトづくり

Floydさんサイトリニューアルの簡単な手順です。

今回の制作担当はkanaさん（デザイナー）、kaneさん（フロントエンドエンジニア）、akiさん（ディレクター）

そしてFloydのデザイナー・代表の藤沼さんにもお話を聞きました。

想いを伝えるブランドに

サイトリニューアルにあたり、こだわりたかったポイントはありますか？

商品は知っているけどFloydを知らないという人が多く、Floydというブランドと商品を結びつくようにしたいという気持ちが大きかったです。
卸先ネットショップでも商品を扱っていただいていますが、どのショップよりもブランドの情報が充実しているサイトにすることが目標でした。
しかし、ただ単にFloydのオンラインショップだけ価値を上げるのではなく取り扱っていただいている卸先ショップの「Floyd」の価値も上げて全体を底上げしたいと思っています。
リニューアルしたことで「Floyd」というブランドをみんなで盛り上げたいです。

リニューアルしたサイトには「ABOUT」ページが追加され、ブランドの想いが伝わりやすくなりましたね。

このようなブランド紹介をするページは今までのサイトに無かったのですが、Floydを知っていただくためにもつくりたいと思っていました。
藤沼さんが制作してくださったイラストも多くあり、よりFloydの世界観を感じることができます。
Floydさんがどのようにものづくりをしているのかがわかるビジネス相関図も掲載しています。これはPC表示だと詳細が細かく書かれていますが、スマートフォンだと小さくて見づらくなってしまうので表示の仕方を変えています。

商品の色合いを活かし、引き立てる

あんどぷらすのみなさんはサイトを制作するにあたって意識したことはありますか？

Floydさんの商品は全体的に色味が淡くて綺麗なものが多いので、その雰囲気を壊さないように色味を意識しました。
例えば、背景を真っ白ではなく少し色を入れることで商品の淡い色味に馴染むようにしています。

旧サイトは背景が真っ白（#FFFFFF）で、なんとなく無機質な印象が。商品一覧の画像を見ると商品を切り抜いたものと撮影したままの写真が混ざってしまっている。

リニューアル後は画像を全て正方形に統一したことで商品とサイトが馴染むように。

買い手を想った、動きのあるサイトへ

お客さまにわかりやすく購入していただけるように導線も意識しました。
引き出物の需要が多かったのでブライダルの特集は固定でトップページに表示するようにしました。

また、新たに法人の方むけのページを作成しました。商品や桐箱に名入れすることもできることを知らない方も多いと思うので、これをきっかけに法人のご注文も増えると嬉しいです。

人気のシリーズや新しく発売された商品についてはTopページに配置し、動きが感じられるサイトにしました。

シリーズページで特にこだわったところはありますか。

Floydさんは、制作するうえで発想やストーリー性を大切にしています。
その発想を日本ならではの素材・技法・文化に上乗せすることで新しい「もの」を生み出しているのが印象的でした。
こだわって作っている過程がわかると「買ってみたい！」という気持ちがわくと思ったので、シリーズページでは制作過程や今までのサイトに掲載されていなかった写真を追加するなど、購入する方が商品をイメージできるようなページにしました。

中でもこだわったのが、Floydの看板商品であるカップリング。

Floydは様々なオンラインショップや雑貨店に自社商品を卸して販売していますが、Floydオンラインショップ限定なのがカップリングのバースデーストーンです。
持ち手となるリングの部分に埋め込まれたスワロフスキーの色を好きな石の色に変更できます。（全12種）
旧サイトでは何月がどの石なのかわからなかったということもあり商品詳細ページにシミュレーション機能を実装しました。

カップリングのシミュレーターがあると色のイメージがつきやすいので購入しやすいですね！

その他にも機能的な面でこだわった点はありますか？

商品詳細ページの「ラッピング」で様々な種類を選択できるところです。ギフトに特化したFloydさんだからこそ、必要なオプションでした。
ここで「熨斗」を選択すると結びの種類や名入れなどを選択できます。

また、商品によって色や柄の表示が違うので、そのオプション表示を商品ごとに変えています。
パッと見たでけではなかなか気が付きにくいですが、商品を書いやすくするために工夫しているので素敵な商品を購入していただけると嬉しいです！

藤沼さん自身はデザイナーでもありますが、なにか普段の制作と違う点はありましたか？

デザイナーの方ならではのご指摘がありました。フォントの指定やカーニング・トラッキング（文字間隔の調整）などデザインしている人でないとあまり気がつかないだろうな。というご意見も多く、新鮮でした。
やはりものづくりをしている方なので、見せ方のこだわりを感じました。

これからサイトに訪れる方にどんな風にサイトを見ていただきたいですか。

「もの」がありふれた時代だからこそ作り手の顔が見えるような情報があるサイトにしたい。数あるブランドの中からFloydだから買いたいと思ってもらえるようなサイトにしていきたいです。
サイトに訪れた方に考えを押し付けるのではなく、「想いを共有する」ことでFloydを知っていただけるサイトになりました！