MakeShop（メイクショップ）テンプレート
最終更新日：
MakeShop（メイクショップ）のテンプレートを徹底解説
出典：MakeShop
こんにちは、ホームページ自作ラボ管理人のリュウです。
ホームページ制作会社の代表であり、現役のWebデザイナーでもある僕が、初心者でも自作できるネットショップ作成サービスについて解説しています。
ネットショップ作成サービス「MakeShop（メイクショップ）」は、初心者でも作成できるようテンプレートが用意されています。
今回は、MakeShopのテンプレートについて解説します。
この記事を読むことで、MakeShopのテンプレートについて知ることができ、MakeShopがあなたに向いているネットショップ作成サービスかどうかの判断材料になります。
なお、MakeShopについての全体的な解説はMakeShopを徹底解説をご覧ください。
MakeShop（メイクショップ）の評判は本当!? 特徴・メリット・デメリット・料金・評判などを徹底解説
このページの目次
MakeShop（メイクショップ）のテンプレートとは？
MakeShopには、下記の2つのデザイン編集機能あります。
- クリエイターモード
- オリジナルデザイン機能
クリエイターモード
クリエイターモードは、用意されているテンプレートの中から選んで、自由に編集しカスタマイズすることができます。
「ゼロからサイト構築することが難しい」「手間を省いてオリジナリティを出したい」という人に向いています。
レスポンシブWebデザインにも対応しているので、パソコン版もスマホ版も同じURLで表示されます。
オリジナルデザイン機能
オリジナルデザイン機能は、自由自在にデザインできる編集機能で、オリジナルデザインのネットショップ作成ができます。
トップページはもちろん、商品ページや買い物かごページなどのHTML編集をすることで、オリジナルデザインのネットショップ作成が可能です。
クリエイターモードの特徴・メリット
MakeShopのクリエイターモードの特徴・メリットについて解説します。
レスポンシブWebデザインに対応
クリエイターモードは、パソコン版もスマホ版も同一のURLで、デバイスごとに最適なレイアウトのページを表示する「レスポンシブWebデザイン」に対応しています。
ページをシェアする際に、パソコン版とスマホ版でURLを区別する必要がないため、SEO強化にもつながります。
パソコン版とスマホ版の両方を、別々に更新しなくて良いので、スムーズなネットショップ運営ができます。
レスポンシブWebデザインは、Google推奨のスマホ対応方法なので、SEO対策の1つにもなります。
レスポンシブWebデザインなら、パソコン版とスマホ版のURLが別にならないのも良いですよね。
既存のテンプレートをカスタマイズ
技術的、もしくは時間的に、ゼロから構築するのが難しい場合も大丈夫です。
MakeShopでは、既にサイト全体のデザインができている「クリエイターモード用のテンプレート」を使えば、大幅に手間を省けます。
テンプレートからカスタマイズしやすいように、クリエイターモードで使用できるタグをすべて使用した、汎用的なデザインになっています。
トップページに表示する「ランキング」や「お知らせ」、商品ページでの「レビュー表示」や「お気に入り機能」などが、最初から盛り込まれています。
そのため、元のテンプレートから不要な部分を削除するだけで、すぐに利用できます。
「カスタマイズ」って難しそうに聞こえるけど、テンプレートから不要な部分を削除するだけなら、初心者でも簡単にできますね。
そのままでも使えるテンプレートがあるので、少しでも早くオープンした人も助かります。
高いカスタマイズ性
クリエイターモードでは、Smartyを採用したMakeShop独自タグが用意されています。
その独自タグが生成するソースコードの粒度は細かく、細部の調整が可能なので、カスタマイズ性はとても高いです。
Smartyが何かを説明すると長くなるので省略しますが、MakeShop独自タグがあるから、柔軟なカスタマイズができるということです。
HTMLとMakeShop独自タグを組み合わせることで、細かいカスタマイズができるという訳なのですね。
オリジナルデザイン機能の特徴・メリット
MakeShopのオリジナルデザイン機能の特徴・メリットについて解説します。
ほぼすべてのページを自由にデザイン可能
一般的なネットショップ作成サービスのオリジナルデザイン機能は、自由に変更できるページが限定的であることが多いです。
しかし、MakeShopのオリジナルデザイン機能がスゴいのは、ほぼすべてのページを自由にデザイン可能ということです。
HTML・CSSとMakeShopの独自タグを使うことで、自由度が高い、理想のデザインを実現できます。
一例として、下記の部分も自由にデザイン可能です。
| トップページ | イントロページ、タイトルイメージ、上段メニュー、左側メニュー、中央画面、下段メニュー、ログインページ、移動イベントバナー |
|---|---|
| 内部ページ（1） | 商品分類ページ、商品詳細ページ、商品検索ページ、買い物かごページ、お知らせページ、お問い合わせページ |
| 内部ページ（2） |
会員登録の時の約款ページ、会員登録/修正ページ、会員認証ページ、パスワード紛失ページ、購入時のログインページ、ポイント照会ページ |
| その他 |
独自ページ（フリーページ） |
ネットショップのすべてと言っても良いくらい、MakeShopはカスタマイズできる範囲が広いです。
だからこそ、有名企業の本格的なネットショップでもMakeShopが使われているのですね。
javascriptやjQueryなどの設置も可能
MakeShopの独自デザイン機能は、JavascriptやjQueryにも対応しているので、動きのあるデザインも可能です。
ドロップダウンメニューやスライドショー、スクロールに応じたエフェクトなど、効果的に使用することで、動きのある高度なデザインにできます。
適度に動きのあるサイトは、スタイリッシュでカッコいいですよね。
適度にあるのは良いですが、動きを付けすぎると重くなる場合があるので要注意です。
MakeShopの独自タグがカスタマイズ性をアップ
MakeShopの独自タグとは、通常のHTMLタグ等とは異なり、ネットショップを構築する上で特別な処理をおこなう「MakeShop専用のタグ」のことです。
一例として、[ORDER]というMakeShopの独自タグがあります。
[ORDER]タグを通常のHTMLタグと組み合わせて入力することで、ショップページの任意の場所に、「買い物カゴボタン」を表示させることができます。
このようにして、デザインのためのコードにネットショップとしての機能を追加して、オリジナル性の高いネットショップ作成ができます。
MakeShopの独自タグを入れると様々な機能を付けられるので、難しいプログラムの知識は不要です。
独自タグって難しそうですが、プログラムのコードを書くことに比べれば、シンプルで扱いやすくなっているんですね。
MakeShop（メイクショップ）のテンプレートのまとめ
今回は、MakeShopのテンプレートについて解説しました。
MakeShopのテンプレートは、プロの制作者も自由にカスタマイズできる素晴らしい機能が整っています。
逆に言うと、初心者は少し難しいように感じるかもしれません。
しかし、既存のテンプレートをカスタマイズできる「クリエイターモード」もありますし、MakeShopならではの手厚いサポート体制があるので、初心者もぜひ挑戦してみてください。
なお、MakeShopについての全体的な解説はMakeShopを徹底解説をご覧ください。
Let's share !
