現役Webデザイナーが、初心者のホームページ自作を応援!

MakeShop(メイクショップ)テンプレート

最終更新日:

MakeShop(メイクショップ)のテンプレートを徹底解説! 主なテンプレートも紹介

MakeShop(メイクショップ)のテンプレート

出典:MakeShop

ホームページ作成の初心者
初心者 ハナ

MakeShopのテンプレートの特徴は?
MakeShopでは、どんなテンプレートがあるの?

今回は、MakeShop(メイクショップ)に関する、上記のような疑問にお答えします。

本記事の内容

  • MakeShopのテンプレートとは?
  • クリエイターモードの特徴・メリット
  • オリジナルデザイン機能の特徴・メリット
  • MakeShopの主なテンプレート

本記事の執筆者

ホームページ自作を応援するWebデザイナー
リュウ

こんにちは、ホームページ自作ラボ管理人のリュウです。
私は、現役のWebデザイナーとして、ホームページ制作会社の代表をしています。

本記事は、以下のような人にオススメです

  • MakeShopのテンプレートについて知りたい
  • MakeShopが自分に向いているかを判断したい

本記事を読むことで、MakeShopのテンプレートについて知ることができ、MakeShopがあなたに向いているネットショップ作成サービスかどうかの判断材料になります。

結論を先に言うと

MakeShopのテンプレートは、プロの制作者も自由にカスタマイズできる素晴らしい機能が整っています。
また、プロだけでなく初心者も「クリエイターモード」を利用すれば、既存のテンプレートをカスタマイズできます。

では、MakeShop(メイクショップ)のテンプレートについて徹底解説していきます!

なお、MakeShopについての全体的な解説は『MakeShop(メイクショップ)の評判は!? 特徴・メリット・デメリットを徹底解説!』をご覧ください。

MakeShop(メイクショップ)のテンプレートとは?

MakeShopには、以下の2つのデザイン編集機能あります。

  • クリエイターモード
  • オリジナルデザイン機能

クリエイターモード

メイクショップのクリエイターモード

出典:MakeShop

クリエイターモードは、用意されているテンプレートの中から選んで、自由に編集しカスタマイズすることができます。

「ゼロからサイト構築することが難しい」「手間を省いてオリジナリティを出したい」という人に向いています。

レスポンシブWebデザインにも対応しているので、パソコン版もスマホ版も同じURLで表示されます。

オリジナルデザイン機能

メイクショップのオリジナルデザイン機能

出典:MakeShop

オリジナルデザイン機能は、自由自在にデザインできる編集機能で、オリジナルデザインのネットショップ作成ができます。

トップページはもちろん、商品ページや買い物かごページなどのHTML編集をすることで、オリジナルデザインのネットショップ作成が可能です。

クリエイターモードの特徴・メリット

MakeShopのクリエイターモードの特徴・メリットは、以下の通りです。

  • レスポンシブWebデザインに対応
  • 既存のテンプレートをカスタマイズ
  • 高いカスタマイズ性

レスポンシブWebデザインに対応

レスポンシブWebデザイン対応のホームページ

クリエイターモードは、パソコン版もスマホ版も同一のURLで、デバイスごとに最適なレイアウトのページを表示する「レスポンシブWebデザイン」に対応しています。

ページをシェアする際に、パソコン版とスマホ版でURLを区別する必要がないため、SEO強化にもつながります。
パソコン版とスマホ版の両方を、別々に更新しなくて良いので、スムーズなネットショップ運営ができます。

ホームページ自作を応援するWebデザイナー
リュウ

レスポンシブWebデザインは、Google推奨のスマホ対応方法なので、SEO対策の1つにもなります。

ホームページ作成の初心者
初心者 ハナ

レスポンシブWebデザインなら、パソコン版とスマホ版のURLが別にならないのも良いですよね。

既存のテンプレートをカスタマイズ

メイクショップの既存のテンプレートをカスタマイズ

出典:MakeShop

技術的、もしくは時間的に、ゼロから構築するのが難しい場合も大丈夫です。
MakeShopでは、既にサイト全体のデザインができている「クリエイターモード用のテンプレート」を使えば、大幅に手間を省けます。

テンプレートからカスタマイズしやすいように、クリエイターモードで使用できるタグをすべて使用した、汎用的なデザインになっています。
トップページに表示する「ランキング」や「お知らせ」、商品ページでの「レビュー表示」や「お気に入り機能」などが、最初から盛り込まれています。

そのため、元のテンプレートから不要な部分を削除するだけで、すぐに利用できます。

ホームページ作成の初心者
初心者 ハナ

「カスタマイズ」って難しそうに聞こえるけど、テンプレートから不要な部分を削除するだけなら、初心者でも簡単にできますね。

ホームページ自作を応援するWebデザイナー
リュウ

そのままでも使えるテンプレートがあるので、少しでも早くオープンした人も助かります。

高いカスタマイズ性

クリエイターモードでは、Smartyを採用したMakeShop独自タグが用意されています。
その独自タグが生成するソースコードの粒度は細かく、細部の調整が可能なので、カスタマイズ性はとても高いです。

ホームページ自作を応援するWebデザイナー
リュウ

Smartyが何かを説明すると長くなるので省略しますが、MakeShop独自タグがあるから、柔軟なカスタマイズができるということです。

ホームページ作成の初心者
初心者 ハナ

HTMLとMakeShop独自タグを組み合わせることで、細かいカスタマイズができるという訳なのですね。

オリジナルデザイン機能の特徴・メリット

MakeShopのオリジナルデザイン機能の特徴・メリットは、以下の通りです。

  • ほぼすべてのページを自由にデザイン可能
  • JavascriptやjQueryなどの設置も可能
  • MakeShopの独自タグがカスタマイズ性をアップ

ほぼすべてのページを自由にデザイン可能

オリジナルデザインもできる

一般的なネットショップ作成サービスのオリジナルデザイン機能は、自由に変更できるページが限定的であることが多いです。

しかし、MakeShopのオリジナルデザイン機能がスゴいのは、ほぼすべてのページを自由にデザイン可能ということです。
HTML・CSSとMakeShopの独自タグを使うことで、自由度が高い、理想のデザインを実現できます。

一例として、以下の部分も自由にデザイン可能です。

トップページ イントロページ、タイトルイメージ、上段メニュー、左側メニュー、中央画面、下段メニュー、ログインページ、移動イベントバナー
内部ページ(1) 商品分類ページ、商品詳細ページ、商品検索ページ、買い物かごページ、お知らせページ、お問い合わせページ
内部ページ(2)

会員登録の時の約款ページ、会員登録/修正ページ、会員認証ページ、パスワード紛失ページ、購入時のログインページ、ポイント照会ページ

その他

独自ページ(フリーページ)

ホームページ自作を応援するWebデザイナー
リュウ

ネットショップのすべてと言っても良いくらい、MakeShopはカスタマイズできる範囲が広いです。

ホームページ作成の初心者
初心者 ハナ

だからこそ、有名企業の本格的なネットショップでもMakeShopが使われているのですね。

JavascriptやjQueryなどの設置も可能

MakeShopの独自デザイン機能は、JavascriptやjQueryにも対応しているので、動きのあるデザインも可能です。

ドロップダウンメニューやスライドショー、スクロールに応じたエフェクトなど、効果的に使用することで、動きのある高度なデザインにできます。

ホームページ作成の初心者
初心者 ハナ

適度に動きのあるサイトは、スタイリッシュでカッコいいですよね。

ホームページ自作を応援するWebデザイナー
リュウ

適度にあるのは良いですが、動きを付けすぎると重くなる場合があるので要注意です。

MakeShopの独自タグがカスタマイズ性をアップ

MakeShopの独自タグとは、通常のHTMLタグ等とは異なり、ネットショップを構築する上で特別な処理をおこなう「MakeShop専用のタグ」のことです。

一例として、[ORDER]というMakeShopの独自タグがあります。
[ORDER]タグを通常のHTMLタグと組み合わせて入力することで、ショップページの任意の場所に、「買い物カゴボタン」を表示させることができます。

このようにして、デザインのためのコードにネットショップとしての機能を追加して、オリジナル性の高いネットショップ作成ができます。

ホームページ自作を応援するWebデザイナー
リュウ

MakeShopの独自タグを入れると様々な機能を付けられるので、難しいプログラムの知識は不要です。

ホームページ作成の初心者
初心者 ハナ

独自タグって難しそうですが、プログラムのコードを書くことに比べれば、シンプルで扱いやすくなっているんですね。

MakeShop(メイクショップ)の主なテンプレート

MakeShopの主なテンプレートをご紹介します。

Complete

MakeShopのテンプレート Complete

出典:MakeShop

クリエイターモードで使用できることを、すべて使用している汎用テンプレートです。
必要ない機能を削除することでカスタマイズできます。

&more

MakeShopのテンプレート &more

出典:MakeShop

アイコンを使用し、テキストを少なくしたテンプレートです。
商品画像やカートボタンなどに動きがあるので、遊び心を演出できます。

BRothers

MakeShopのテンプレート BRothers

出典:MakeShop

グローバルナビゲーションや左メニューなどが配置されたゴシックなテンプレートです。
回遊性の高いレイアウトなので、カテゴリが多いショップに向いています。

Wabisabi

MakeShopのテンプレート Wabisabi

出典:MakeShop

2カラム構成のテンプレートです。
メイン画像が大きく、写真をしっかり見せることができるので、おすすめ商品のアピールや、ショップのイメージづくりがしやすいです。

Shiro

MakeShopのテンプレート Shiro

出典:MakeShop

極限までシンプルで、オシャレな雰囲気のテンプレートです。
アクセサリーやファッションなどのショップに向いています。

Advance

MakeShopのテンプレート Advance

出典:MakeShop

上部にスライドショーを全面的に出せるテンプレートです。
商品一覧で、一つ一つの商品写真を大きく見せられるので、アパレルのショップにオススメです。

Minimum

MakeShopのテンプレート Minimum

出典:MakeShop

サイトデザインが主張せず、商品写真を引き立たせるシンプルなデザインです。
雑貨や化粧品などのショップにオススメです。

Debut

MakeShopのテンプレート Debut

出典:MakeShop

シンプルなデザインながらも、カッコよさのあるテンプレートです。
ファッションアイテムや生活雑貨などのショップにオススメです。

ENKEL

MakeShopのテンプレート ENKEL

出典:MakeShop

メイン画像が大きく、モダンな印象のテンプレートです。
インテリアや食品などのショップにオススメです。

WIDELY

MakeShopのテンプレート WIDELY

出典:MakeShop

載せる写真次第で、カッコよくも可愛くもできるテンプレートです。
幅広いジャンルのショップに向いています。

Fashion

MakeShopのテンプレート Fashion

出典:MakeShop

ワイドなデザインのテンプレートです。
1つの商品で多くの写真を見せたい、アパレルや雑貨などのショップにオススメです。

MakeShop(メイクショップ)のテンプレートのまとめ

今回は、MakeShopのテンプレートについて解説しました。

MakeShopのテンプレートは、プロの制作者も自由にカスタマイズできる素晴らしい機能が整っています。
逆に言うと、初心者は少し難しいように感じるかもしれません。

しかし、既存のテンプレートをカスタマイズできる「クリエイターモード」もありますし、MakeShopならではの手厚いサポート体制があるので、初心者もぜひ挑戦してみてください。

なお、MakeShopについての全体的な解説は『MakeShop(メイクショップ)の評判は!? 特徴・メリット・デメリットを徹底解説!』をご覧ください。

このページのトップに戻る