前回、ブログ内で注文画面カスタマイズの必要性について、記事を書きました。
早速、MakeShop 注文画面のデザイン変更について行なっていきたいと思います。
今回は、まず文字サイズと表示幅の変更について行なっていきます。
デザインの変更方法
デザインを行なうためには、まず管理画面から、左端の『ショップ作成』⇒『デザインの設定』⇒『注文画面デザイン』へと進みます。
ここから、『注文画面の表示設定』というページが出てきます。
ここで、『文字サイズ・各パーツ色の設定』を選択します。
推奨サイズについて
『文字サイズ・各パーツ色の設定』を開くと、推奨サイズについて書かれています。
表のサイズ：800とフォンサイズ：中と書かれています。
しかし、今はワイド画面が主流なので、ここは変更した方がよいとセミナーでお伺いいたしました。
表のサイズは「1200」、フォントサイズは「特大」がオススメと聞きましたので、Happy Yukiでもそれを採用したいと思います。
フォントサイズの変更
フォントサイズの変更を行なうには、『フォントサイズ選択』より、希望のフォントサイズを選択します。
ここでは、オススメの『特大』を選びます。
表のサイズの変更
表のサイズを変更できるところは、２箇所あります。
２箇所とも、オススメの値『1200』を入力します。
ちなみに、この後配色も変更していきますので、表のサイズ変更は一番最後でもいいかも知れません。
最初に表のサイズを広げると、モニタサイズによっては設定変更がしづらくなります。
配色の変更
配色の変更は、下記画像の様に各箇所カラーパレットより選択いただけます。
項目を選択すると、パレットが出てきて配色を変更できます。
パレット外の色指定は出来ないので、色自体の自由度は高くありません。
ご自身のサイトデザインに、マッチングする組み合わせを見つけて頂ければと思います。
参考サイト
実際のところ、初めて配色を行なう場合、お手本無しで設定するのは少し難しいかも知れません。
色の感覚をつかむために、初めのうちは、よく作りこまれているサイトを参考に設定するのが良いかと思います。
ここでは、MakeShopの方からお伺いしたサイトを、２つご紹介させていただきます。
こちらのサイトは、かなりよく作りこまれており、注文ページ以外も優れていて、ネットショップのお手本の様なサイトであるとのことです。
MakeShopのデモサイトです。
非常にシンプルな配色になっております。
配色をしていくと、気が付くとゴテゴテとした多色使いになりがちです。
設定をしていて、色の感覚がよく分からなくなったときは、こちらのサイトを見て、シンプルに寄せていっても良いかも知れません。
『設定する』を忘れずに
各種変更をしましたら、最後忘れずに『設定する』を押しましょう。
表示確認も行なっておきましょう
設定を変更したら、『ショップを見る』で実際にご自身のサイト表示を確認してみましょう。
設定画面で見るのと、実際のショップ表示で見るのとでは、見え方に結構な差があります。
設定画面だけで良しとせず、ショップ表示でもご確認されることをオススメ致します。
最後に
如何でしたでしょうか。
細かいところと、つい後回しにしがちなところですが、カスタマイズの際は最優先箇所であるとセミナーでお伺いしました。
実際にこの画面をカスタマイズしているショップとそうでないショップとを比較すると、お店の売上高が５倍程度も差があるという統計結果が出ているとのこと。
神は細部に宿るという言葉もある様に、細かいところこそ、無視をしてはいけないということかも知れません。
なお、今回は文字や配色の変更を行いましたが、これだけではカスタマイズ完了とは言えません。
この他にも、画面下部と上部に画像を挿入することが出来ます。
効果的な配置としては、画面下部にショッピングガイドを、画面上部にご購入へ誘引する画像を、それぞれ設定することが出来ます。
その方法につきましては、また別記事でご紹介できればと考えております。
