MakeShop 1日で8つのカスタマイズが出来ました!(アクセサリーHappy Yuki)

昨日の夜に、Happy Yuki用のショッピングガイドを作ってから、そのまま家にも帰らずカスタマイズを行なっておりました。

おかげで、結構カスタマイズが進みました。

今まで何ヶ月も全く手付かずだったのが嘘の様に、1日で一気に進捗がありました。

それも、MakeShopのセミナーのおかげです。

セミナーでは、具体的にどこを変えたら効果的だとか、実践的なお話を聞くことが出来、それが刺激となり一気に製作できました。

(ちなみに、そのときのことは前回こちらの記事に記しております)

セミナーは無料ですし、参加して良かったぁ369323wnl5verem3

 

 

もちろん、進んだとは言え、納得いくレベルまでにはほど遠い状態です。

ですが、カスタマイズの方法はなんとなく分かってきた気がします。

 

ちなみに、カスタマイズにあたっては、ネット上に情報も少なく、全て手探りで進めました。

方法さえ分かっていれば、もっと早く出来たはず。

今回の経験で得た知識については、どんどん情報公開をしていこうと思います。

具体的な個々のカスタマイズ方法については、後に個別の記事で開示させて頂きます。

とりあえず、今回の記事では、1日(24時間)でどこをカスタマイズしたのか、昨日からのまとめもかねてご紹介したいと思います。

 

カスタマイズその1 送料無料案内の掲示

 

2014-09-13_19h17_48

こんな感じで、ショップ名の横に送料無料の案内を出しました。

今のところ、ただ掲示するためだけの物です。

バナー化したり、マウスオーバーで動きをつけても面白いかも知れません。

illustratorで画像を作って、貼ってみて、修正、修正の繰り返しで作りました。

ただし、ショップ名がモノクロなので、この掲示がデザイン的に浮いてしまっています。

最終的に外すかも知れませんが、カスタマイズの方法が知りたかったので実験的に設置してみました。

ちなみに画像のピクセル数はW:316px、H:48px です。

 

カスタマイズその2 カテゴリ表示

 

デフォルトでは文字だけで味気なかったので、画像化しました。

2014-09-13_19h25_13

マウスオーバーで、変化もします

2014-09-13_19h25_23

こちらも画像を作って、貼ってみて、いろいろ変えてみました。

最初はマウスオーバー時に青く光る様にしましたが、暗くみえる気がしたので、ピンクに変更しました。

ちなみにCSSは一切使っていません。

この各画像のサイズが、W:180px ,H:30pxです。

当初H:50pxで製作しており、その方が見栄えも良かったのですが、今後カテゴリーも増える予定があるので、高さを抑え気味にしました。

ここは、デザイン次第でいくらでも見せ方がありそうです。

 

カスタマイズその3 会員登録バナー変更

 

会員登録のバナーも変更しました。

2014-09-13_19h35_12

会員登録していただくことに、インセンティブを持たせることと、教室の宣伝もかねて作りました。

ちなみに、こちらもマウスオーバーで画像が変化します。

2014-09-13_19h35_32

雪の位置もワザとずらして、アニメーションチックにしてみました。

ただ、このデザインだと、新規会員登録のためのボタンに見えますが、実際は既会員のログインボタンも兼ねており、表示の明確化を図る必要があります。

 

カスタマイズその4 教室案内を設置

 

Happy Yukiの実店舗での教室案内バナーも設置しました。

2014-09-13_19h40_58

こちらも、マウスオーバーで画像が変化します。

2014-09-13_19h41_11

ここでは、下のカレンダーと連動させるイメージにしました。

ちなみに、このバナーのサイズは、w:180px,H:100px です。

このバナーをクリックいただくと、教室案内のページ(独自ページ)に飛びます。

教室案内のページも、それに合わせて急いで作りました。

教室案内のページは大きく3つのブロックに分けて画像をつくりました。

2014-09-13_19h49_21

 

2014-09-13_19h49_46

 

2014-09-13_19h50_30

本当は、教室で具体的にどういうことをするのか、教室風景などの画像を最初に設置すべきなのですが、使えそうな画像を持っていないため急場しのぎで出来る範囲で製作しました。

ちなみに、画像は見やすさを考慮し、大きめに作りました。

上の画像から、①W:800px , H:567px 、②W:400px 、H:100px ×2 、③W:800px , H:813px

として作りました。

今後は、さらに教室風景の画像を追加していく予定です。

 

カスタマイズその5 注文画面ヘッダ画像

 

離脱率が高いといわれる注文画面にヘッダ画像を入れました。

2014-09-13_20h00_46

実際に設定してみると、画像が入るだけで一気に印象が変わります。

スマホサイトにも、同様の画像を設置しました。

こちらの画像サイズは、W::1200px ,H:230px で製作致しました。

(スマホは、自動で最大幅に縮小して表示されます)。

 

カスタマイズその6 注文画面フォントサイズ、配色等

 

こちらについては、前回記事にした通りです。

サイト全体との親和性を高めるために、配色の選定には苦労しました。

2014-09-13_22h59_53

 

逆に、こちらの配色から、ヘッダ画像とショッピングガイドの色合いを合わせていったところもあります。

変更前が下の画像ですので、大きく変わったと思います。

2014-09-12_00h26_54

 

カスタマイズその7 注文画面にショッピングガイドを設置

 

同じく注文画面にて、下部にショッピングガイドを設置しました

2014-09-12_23h53_02

メイクショップのデモサイト、メイクデパートの作りを参考に作成いたしました。

製作サイズは、W:1200px , H:1981px になりました。

こちらも、スマホサイトにも設置しております。

まだまだ改良の余地があるところなので、少しずつ改良を加えていきたいと思います。

 

カスタマイズその8 トップページにショッピングガイドを設置

 

同じショッピングガイドを、サイトのトップページの下部にも設置しました。

2014-09-13_23h05_56

トップページから設置することにより、注文画面へ移動したときの違和感がなくなる効果があるとの狙いです。

 

以上が主な改良点です。

他にも、カテゴリーの階層を変更したり、設定を見直したりと、見えないところもかなり変更をかけました。

私の様に全く知識のないものでも、1日でここまで進めることができました。

1日と言っても、途中塾の授業もしたり、睡眠をとったりで、実働は14時間程度かと思います。

今回カスタマイズした箇所は、方法が分かりましたので、次からはさらに時間短縮できそうです。

もちろん、このブログでもカスタマイズ方法は記事にして参ります。

最後に、今回カスタマイズしたサイト、Happy Yukiはこちらからご覧いただけます。

個人で運営している、本当に小さなお店ですが、これから皆様と長いお付き合いができれば幸いです。

メニューにはまだ載せていませんが、オーダーメイドや、ギフトラッピング等にも対応いたします。

あなたにHappy をお届けできる様、頑張っていきます。

最後まで記事をお読みいただき、有難う御座います664789c6oez1lkq4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です