メイクショップ(MakeShop)のECサイト構築
ショップ作成での決済・配送方法の設定から独自デザインでのサイト制作まで解説

ホームメイクショップ(MakeShop)のECサイト構築独自デザインの上段/左側/下段メニュー管理でHTML編集

独自デザインの上段/左側/下段メニュー管理でHTML編集

せっかくメイクショップを利用してECサイトを運営するのですから、自社オリジナルのデザインでサイトを構築したいと考えるショップさんが大多数だと思います。このページでは管理画面のどのメニューからオリジナルデザインの構築ができるのか概要をご説明させて頂きます。

まずはベースとなるテンプレートを選択する

独自デザインとは言え、まず最初はオリジナルカスタマイズする元となるベーステンプレートを選択する必要があります。管理画面の中で、ショップ作成>デザインの設定>デザインテンプレート選択というメニューに進みますと下図の設定画面が表示されます。

アカウントを発行した初期状態は、【プレーン】ホワイトというテンプレートが選択されている場合が多いです。様々なデザインのテンプレートがありますが、いずれにせよ独自デザインでカスタマイズしますので、サニーポップやサマー、ウインターなどの個性的なテンプレートを選択せず、シンプルなベースデザインのテンプレートを選択した方が良いです。中でも初期で選択されている【プレーン】ホワイトはごく一般的なECサイトの基本デザインになっておりますので、これを選択して独自デザインでオリジナルカスタマイズを進めていくやり方が一番ベストだと思います。

大枠となるヘッダー/左メニュー/フッターをカスタマイズする

カスタマイズするベースとなるシンプルなテンプレートを選択しましたら、実際にそのテンプレートをベースにオリジナルのカスタマイズを行っていきます。独自デザイン>トップページ編集という箇所で大枠となるヘッダー/左メニュー/フッターのHTML編集ができるようになっております。

上図のように独自デザイン>トップページ編集へお進み頂きますと、赤枠の上段メニュー管理、左側メニュー管理、中央画面管理、下段メニュー管理という箇所が表示されます。これはずばりそのままで、サイト大枠の共通部分となる、ヘッダー、左メニュー、フッターの編集メニューということになります。中央画面管理とは、それら大枠で囲まれたトップページの編集ということです。

メイクショップに限らず、楽天RMSでもヤフーのストアクリエイターProでもサイト大枠となる共通部分は同じようにまとめて編集できるようになっていることがほとんどです。ヘッダーの編集は、ヘッダー編集や、上段メニュー管理などと表記されたメニューからHTML編集画面に移行し、そこでオリジナルのデザインを構築するという仕組みになっています。

試しにヘッダーの編集画面を見てみる

管理画面にて、独自デザイン>トップページ編集>上段メニュー管理へお進み頂きますと下図の編集画面が表示されます。赤枠で囲まれた箇所に表示されているHTMLソースが編集元となるベーステンプレートのヘッダーHTMLです。このHTMLソースをベースにカスタマイズをしていき、オリジナルデザインのヘッダーを構築します。

レスポンシブサイトにしたい場合


少々専門的な話になってしまいますが、レスポンシブのECサイトにしたい場合は、クリエイターモードを適用して編集する必要があります。メイクショップは基本PCで見ればPC専用サイトが表示され、スマホで見ればスマホに最適化されたスマホサイトが表示される為、レスポンシブにする必要はありません。ただ、GoogleがSEO的にレスポンシブサイトを推奨している為、ECサイトもレスポンシブにした方が良いのではないかとご質問を頂くことが多いです。

ただ、それは一般的なホームページやブログの場合のことで、ECサイトをレスポンシブにする必要性というのはあまりありません。レスポンシブにすることでショップ管理者さんは更新する難易度が高くなりますし、購入するお客様側からしてもスマホはスマホ用に最適化されたサイトの方が見やすいからです。SEO的にもサイトのURLがPC版とスマホ版で異なるわけでは無い為、不利になることもありません。クリエイターモードでレスポンシブサイトにされる場合は、ご利用のWEB制作会社さんやWEB担当者さんは十分に検討された上で、クリエイターモードを利用された方がよいかと思います。

関連記事一覧