スクリーンショット_2018-11-01_17

BASEのデザインを自由に変更!HTML編集appを利用してデザインカスタマイズできます。ポイントなど

BASEを使ってみました。

先日ちょっとしたECサイト制作の依頼があり、色々なサービスを検討しています。そこまで大きいシステムは必要なさそうだな、ということでBASESTORESで検討中。

そんな中、BASEだとHTMLとCSSの編集が可能であり、デザインのカスタマイズができるということなので、この機会にちょっと触ってみようかなと思い利用してみました。


BASEのテンプレートについて

そもそもBASEのデザインテンプレートですが、基本的には下記2パターンあります。

・無料のデザインテンプレートを選択し、利用する。
・有料のデザインテンプレートを購入し、利用する。

それぞれ簡単に説明します。

・無料のデザインテーマを選択し、利用する。

無料だと下記のようなテンプレートが利用できます。

基本的にシンプルなのが多いかなという印象。ただ無料なのでそんなに文句も言えないというか、ここまでできれば問題ないレベルかな思います。

・有料のデザインテーマを購入し、利用する。

続きまして有料ですと下記のようなテンプレートが利用できます。(詳しくはこちら

有料なだけあって素敵なデザインが多いですね。数もそれなりにありますし、価格は5,000円〜10,000円程度なので、そんなに高すぎないのも嬉しいです。
(個人的にはこれとか好きかも。)

…と通常はこの2パーターンのどちらかから選択するのですが、HTML・CSS知識がある方むけに、HTMLの編集機能もあるのです。

どうやってHTML編集できるの?

で、本題。

BASEにはHTML編集のappがあるので、デザインを自由に編集できるんですよね。

元々は月額980円のappだったらしいですが、現在は無料で利用できるようです。こちらをインストールすることで、HTML・CSSの修正が可能になります。

以前よりECサイトの提案を受けた時に、「BASEはECサイトを無料で利用できるのはとても魅力的だけど、デザインカスタマイズできないからカラーミーかな」というお客様が結構いました。しかしこちらカスタマイズできるとなると、一気にBASEという選択肢も増えるのではないでしょうか。

ということで中身を見てみます。


--- 🏠 ---


BASEテンプレートカスタマイズ3つのポイント

HTML編集のappを確認していたところ、ポイントとして4つあるなと思いました。

1.  1つのHTMLファイルで全ページ制御している
2.  cssもjsファイルも1ファイルで制御
3. 独自タグがある
4. BASE管理画面のエディタは使いにくい

ポイント1: 全ページ1つのHTMLファイルで制御している

通常複数ページがあるときは、複数のファイルで制御されているかと思います。

例えば下記のようなページ構成の場合

・TOPページ
・カテゴリ一覧ページ
・検索結果一覧ページ
・商品詳細ページ
・お店概要ページ

通常はページ数と同様の5ファイルで制御します。

しかしながらBASEは、この場合でも1ファイルで制御します。

そしてその1ファイル内で条件分岐させ、各ページの内容を表示しています。

慣れてないとどの箇所がどのページかわかりにくいのかと思います。


ポイント2: cssもjsファイルも1ファイルで制御

上記で触れたように、1ファイルのみとなります。これはHTMLファイルが1ファイルということではなく、cssやjsもその中に含まれます。なので例えばstyleを定義する場合は、<head>タグ内にズラーッと書くようになります。

【ちょっと思ったこと】
レンタルサーバ借りておけば、レンタルサーバにcssをおいて、BASEからそちらのcss読み込むようにすればいけるのかな?まだ確認できてないです。


ポイント3:独自タグがある

テンプレート内で利用できる独自タグがあります。

このtagの内容や詳しいルールについては、BASE公式のGitHubにマニュアルが載っていますのでこちらを参考にしてください。


4. BASE管理画面のエディタは使いにくい

HTML・CSSはBASEの管理画面から修正するようになります。で、こちらは当然といえば当然なのですが、管理画面のエディタはとてもつかいにくです。

画面左にエディタ、右にプレビュー画面が表示されるようになります。

なので使い方としては、
【管理画面からコードコピー】→【使い慣れたエディタに貼り付け】→【エディタで修正】→【完成したらBASE管理画面に貼り付け】
といった作業が必要になると思います。


--- 🏠 ---

といったところで、BASEのHTML編集app利用のポイントは以上です。

HTMLが編集できて気軽に好きなデザインに変更できる反面、覚えなくてはいけないことが結構あるなという印象です。なので、デザインにそこまで手間をかけられないという方は今の所は有料テンプレートを購入した方が良いのではないかな、、と思います。

ただ、BASEを利用しつつ他のお店とは違ったテイストでお店のサイトをオープンできるのはとても魅力的だと思います。

例えばこちらのショップ

コンセプトがとても面白いですよね。
「うわーすごいサイトだなー、何でできてるんだろうなー。」と思いながらみていたらなんとBASEなんですよね。
BASEでここまでできるのか!という驚きがあります。だいぶカスタマイズ入っているとは思いますが、頑張ればここまでできるんだということを見せてもらいました。素晴らしい事例だと思います。


BASE デザインマーケットについて

最後に、BASE デザインマーケットというマーケットプレイスをご紹介してこの記事を終わりにします。

これは、作成したデザインテンプレートを販売することができる仕組みのようです。

自分が作ったデザインを、全く知らないお店の方が利用しているっていうのは面白いですよね。ご興味ある方は是非チャレンジしてみてくださいませ。


ということで以上です。BASE、もう少し調査続けたいと思います!


ちなみにBASE、ECショップ作るだけならほんと10分くらいでできました。便利です。




読んでいただきありがとうございます。