Wix事例｜ホームページお引越し｜アパレルセレクトショップ

Wix Studioのホームページ事例をご紹介させていただきます。

今回は、新潟県長岡市のセレクトショップ、Clairさまからご依頼いただきました。

カラーミーショップのECサイトから実店舗のホームページへ変更するため、Wix Studioへのお引越しです。

実は、、、普段の私は受け身でお仕事をしており、あまり自分から営業をすることがないのですが、今回は初のココナラの応募案件で1/69の倍率でお選びいただきました！

Wix Studio事例｜セレクトショップClairさま

ホームページリニューアル
現状：カラーミーでECサイトを運営
今回：実店舗のホームページへリニューアル
ページ数：5ページ
目的：
・実店舗への集客
・イメージアップ
出したい雰囲気：ふんわりと優しく、大人ガーリー、スタイリッシュ
イメージカラー：白・シルバーグレー・赤
納品までの期間：40日（1ヶ月と10日）
URL：https://clair-clair.jp/
使用ツール：Wix Studio
使用機能：ブログ機能・CMS機能・ギャラリー機能・インスタグラムのフィード投稿連動
顧客層：50歳前後（40代〜60代）の仕事をお持ちの女性
実施内容：キャッチフレーズ・コンセプトライティング（文章）・レスポンシブデザイン

当初のご希望は「WordPressで納品後にご自身で運用可能なこと」でしたが、WordPressでこの内容を叶えるのは大変なので、私からはWix Studioをご提案させていただきました。

なお、お客様が普段見慣れていらっしゃるのがファッションブランドのECサイトで、全体的に文字が細く小さく薄いのです。

コントラストや文字の小ささはUIデザインからは外れますが、それをお伝えした上でのご希望ですので、今回はお客様のしっくりくる感覚や業界に合わせてお作りしました。

構成

• home
• about
• news（ブログ機能）
• 新着アイテム個別ページ（CMS機能）
• ブランド個別ページ（CMS機能）
• ポリシーページ（おまけ｜カラーミーから転記）

トップページ｜home

カラーミーショップのECサイトと同じ内容にしたいというご希望でしたので、実店舗向けの順番に並べ替えました。

• スライドショー
• コンセプト
• スタイリング（インスタグラムのフィード投稿連動）
• 新着商品
• ニュース（ブログ機能）
• 取扱ブランド一覧
• アクセスMAP
• CTA＆マスコット紹介

アニメーション

マスコットキャラクターを歩かせたいというご希望があったのですが、動画アニメーションの作成はまた別のサービスになりますので、今回は代わりにwixのアニメーションをお付けしました。

• 遊び心で、トップ画像の上でチャームが揺れているようなアニメーションをつけてみました。
• Accessのセクションには、マスコットと車が動いているアニメーションをお付けしました。

商品写真のスライダー

当初、季節ごとの新着アイテムのコラージュ写真をスイライドショーに混ぜたいとご希望されていたのですが、Webデザインは見る端末のサイズがまちまちなので、大きさによって端が見切れてしまいます。

また、コラージュするには慣れやテクニックも必要です。

そこで今回は、スライドショーの下に商品写真を入れて、アニメーションで横断させることにしました。

Wix Studioの場合はギャラリー機能を使うと、ノーコードでこの動きが実現できます。

これであればコラージュ写真を作る手間も省けますし、季節ごとの商品写真の入れ替えも楽になります。

CMS機能

Wixでとても便利だと思うのがCMS機能です。

同じデザインの枠の中に異なる情報を複数入れることができる優れものです。

今回は、New Arrivalの商品情報とブランドの紹介に使いました。

New Arrival（新着商品情報）

右スクロールして商品が見られるのですが、クリックすると詳細ページに飛びます↓

この２つの箇所は１つの管理リストに紐づいていて、商品を入れ替えたい時には管理リストを修正するだけで表示が入れ替わります。

取扱ブランド情報

取扱ブランド一覧にもCMS機能を使い、ブランドのバナーを表示させています。

こちらもそれぞれのバナーをクリックすると、ブランドの紹介ページに飛びます。

こちらも、ブランドを入れ替えたい時には管理リストを修正するだけで表示が入れ替わります。

aboutページ

トップページは実店舗向けの情報に集約し、お問合せはLINEへ誘導、念の為お問合せフォームもご用意、という優先順位だったので、お問合せフォームはこちらのページに入れました。

魅力を伝えるお手伝いポイント

キャッチコピー

今回は特にキャッチコピーのご依頼があったわけではないのですが、キャッチコピーをお入れする際に修正させていただきました。

と言いますのも、「わたし時間を楽しむ」＝「一人の時間」を想像してしまい、例えば部屋着やアロマ、クッションなどを置いてあるお店のような印象を受けます。

Clairさまの場合はそうではなく、”自分らしさを楽しむ大人の女性のための洋服やファッショングッズを扱っているセレクトショップ“でしたので、「”わたしらしく”を楽しむ」と修正させていただきました。

ホームページ用のキャッチフレーズもお店のキャッチコピーに合わせ、「わたしらしく、大人を楽しむ。」としました。

スライドショー

ECサイトの時には取り扱いブランドのバナーをスライドショーに使用されていました。

これですとブランドの紹介にはなりますがショップの魅力にはなりにくいため、「行ってみたい」と思ってもらえるよう実店舗のスライドショーにはショップのお写真を使いました。

---

ホームページはトップ画像で印象が左右します。

できればプロのカメラマンに撮ってもらうことが好ましいものの、今回はお客様ご自身で撮影したお写真を使われるということでしたので、お写真を拝見してから「もう少しこう写すと良いですよ」と構図を指定させていただきました。

また、いただいたお写真はまず、真正面から写した角度に矯正してから加工修正して使っています。

↓真正面から見た角度に矯正↓

お客様の声

今回ショップのHPリニューアルということで、彩葉DWさんにご協力いただきました。
最初から、彩葉DWさんの文才と、ブランディング力に安心してお任せすることができました。
こちらの細かい要望も素早くご対応いただき、思い描く以上の楽しくて、見やすく、スタイリッシュなHPを作成して頂きました。
とても大満足です。ありがとうございました。

Clairさま

あとがき

私はちょうど顧客層のど真ん中なのですが、年々、似合う服が変わってきているように感じます。

体型もそうですが、それよりも顔つきなのでしょうか、、、どんな服を着れば良いのか迷子になりがちな年代です。

そんな時にプロ目線のアドバイスで自分に似合う素敵なお洋服が見つけられたら、嬉しくてワクワクして、毎日が楽しくなりますよね。

新しいホームページを見た方が、「ちょっと覗いてみようかな」と思うよう、Clairさまの魅力がしっかり伝っていると嬉しいです。

益々のご発展を祈って。