昨日の夜に、Happy Yuki用のショッピングガイドを作ってから、そのまま家にも帰らずカスタマイズを行なっておりました。
おかげで、結構カスタマイズが進みました。
今まで何ヶ月も全く手付かずだったのが嘘の様に、１日で一気に進捗がありました。
それも、MakeShopのセミナーのおかげです。
セミナーでは、具体的にどこを変えたら効果的だとか、実践的なお話を聞くことが出来、それが刺激となり一気に製作できました。
（ちなみに、そのときのことは前回こちらの記事に記しております）
セミナーは無料ですし、参加して良かったぁ
もちろん、進んだとは言え、納得いくレベルまでにはほど遠い状態です。
ですが、カスタマイズの方法はなんとなく分かってきた気がします。
ちなみに、カスタマイズにあたっては、ネット上に情報も少なく、全て手探りで進めました。
方法さえ分かっていれば、もっと早く出来たはず。
今回の経験で得た知識については、どんどん情報公開をしていこうと思います。
具体的な個々のカスタマイズ方法については、後に個別の記事で開示させて頂きます。
とりあえず、今回の記事では、１日(24時間）でどこをカスタマイズしたのか、昨日からのまとめもかねてご紹介したいと思います。
カスタマイズその１ 送料無料案内の掲示
こんな感じで、ショップ名の横に送料無料の案内を出しました。
今のところ、ただ掲示するためだけの物です。
バナー化したり、マウスオーバーで動きをつけても面白いかも知れません。
illustratorで画像を作って、貼ってみて、修正、修正の繰り返しで作りました。
ただし、ショップ名がモノクロなので、この掲示がデザイン的に浮いてしまっています。
最終的に外すかも知れませんが、カスタマイズの方法が知りたかったので実験的に設置してみました。
ちなみに画像のピクセル数はW:316px、H:48px です。
カスタマイズその２ カテゴリ表示
デフォルトでは文字だけで味気なかったので、画像化しました。
マウスオーバーで、変化もします
こちらも画像を作って、貼ってみて、いろいろ変えてみました。
最初はマウスオーバー時に青く光る様にしましたが、暗くみえる気がしたので、ピンクに変更しました。
ちなみにＣＳＳは一切使っていません。
この各画像のサイズが、W:180px ,H:30pxです。
当初H:50pxで製作しており、その方が見栄えも良かったのですが、今後カテゴリーも増える予定があるので、高さを抑え気味にしました。
ここは、デザイン次第でいくらでも見せ方がありそうです。
カスタマイズその３ 会員登録バナー変更
会員登録のバナーも変更しました。
会員登録していただくことに、インセンティブを持たせることと、教室の宣伝もかねて作りました。
ちなみに、こちらもマウスオーバーで画像が変化します。
雪の位置もワザとずらして、アニメーションチックにしてみました。
ただ、このデザインだと、新規会員登録のためのボタンに見えますが、実際は既会員のログインボタンも兼ねており、表示の明確化を図る必要があります。
カスタマイズその４ 教室案内を設置
Happy Yukiの実店舗での教室案内バナーも設置しました。
こちらも、マウスオーバーで画像が変化します。
ここでは、下のカレンダーと連動させるイメージにしました。
ちなみに、このバナーのサイズは、w:180px,H:100px です。
このバナーをクリックいただくと、教室案内のページ（独自ページ）に飛びます。
教室案内のページも、それに合わせて急いで作りました。
教室案内のページは大きく３つのブロックに分けて画像をつくりました。
本当は、教室で具体的にどういうことをするのか、教室風景などの画像を最初に設置すべきなのですが、使えそうな画像を持っていないため急場しのぎで出来る範囲で製作しました。
ちなみに、画像は見やすさを考慮し、大きめに作りました。
上の画像から、①W:800px , H:567px 、②W:400px 、H:100px ×２ 、③W:800px , Ｈ:813px
として作りました。
今後は、さらに教室風景の画像を追加していく予定です。
カスタマイズその５ 注文画面ヘッダ画像
離脱率が高いといわれる注文画面にヘッダ画像を入れました。
実際に設定してみると、画像が入るだけで一気に印象が変わります。
スマホサイトにも、同様の画像を設置しました。
こちらの画像サイズは、W::1200px ,H:230px で製作致しました。
（スマホは、自動で最大幅に縮小して表示されます）。
カスタマイズその６ 注文画面フォントサイズ、配色等
こちらについては、前回記事にした通りです。
サイト全体との親和性を高めるために、配色の選定には苦労しました。
逆に、こちらの配色から、ヘッダ画像とショッピングガイドの色合いを合わせていったところもあります。
変更前が下の画像ですので、大きく変わったと思います。
カスタマイズその７ 注文画面にショッピングガイドを設置
同じく注文画面にて、下部にショッピングガイドを設置しました
メイクショップのデモサイト、メイクデパートの作りを参考に作成いたしました。
製作サイズは、W:1200px , H:1981px になりました。
こちらも、スマホサイトにも設置しております。
まだまだ改良の余地があるところなので、少しずつ改良を加えていきたいと思います。
カスタマイズその８ トップページにショッピングガイドを設置
同じショッピングガイドを、サイトのトップページの下部にも設置しました。
トップページから設置することにより、注文画面へ移動したときの違和感がなくなる効果があるとの狙いです。
以上が主な改良点です。
他にも、カテゴリーの階層を変更したり、設定を見直したりと、見えないところもかなり変更をかけました。
私の様に全く知識のないものでも、１日でここまで進めることができました。
１日と言っても、途中塾の授業もしたり、睡眠をとったりで、実働は14時間程度かと思います。
今回カスタマイズした箇所は、方法が分かりましたので、次からはさらに時間短縮できそうです。
もちろん、このブログでもカスタマイズ方法は記事にして参ります。
最後に、今回カスタマイズしたサイト、Happy Yukiはこちらからご覧いただけます。
個人で運営している、本当に小さなお店ですが、これから皆様と長いお付き合いができれば幸いです。
メニューにはまだ載せていませんが、オーダーメイドや、ギフトラッピング等にも対応いたします。
あなたにHappy をお届けできる様、頑張っていきます。
★最後まで記事をお読みいただき、有難う御座います
★
