BASEテンプレート

2019年10月8日火曜日

BASE ホームページ

B!

BASEのテンプレート

素人でも簡単にネットショップが作れるBASEが人気です。
奏へもBASEでの制作依頼が増えていますが、何度か困った事も起きました。
今日は、主にテンプレート選択の注意点や実際にあったトラブルなどをご紹介していきます。

最後に、実際に私が使ってみてオススメできるテンプレートもご紹介しているのでご参考にしてください。

BASEテンプレート

BASEのテンプレート

BASEにはシンプルなデザインの無料テンプレートと、高機能でおしゃれなデザインの有料テンプレートの2種類があります。

有料テンプレートは外部のクリエイターが制作し、BASE経由で販売しています。
wordpressもそうですが、有料テンプレート並みの機能・デザインを一から制作しようとしたら、時間・費用ともに相当かかりますが、汎用品の有料テンプレートを利用すると5,000円~10,000円で実装できるので時間・費用の節約になります。

BASEの有料テンプレートは種類が豊富でデザインも洗練されています。
また購入後もBASEの機能追加などのバージョンアップにも対応してくれるので、至れり尽くせりのサービスとなっています。

奏でも、有料テンプレートを利用したご依頼が多いです。


過去のテンプレートの不具合

奏では、これまで20サイト以上のショップをBASEで制作しています。
その中でテンプレートの不備を発見したのは2回です。

WEBページ制作にバグは付きものなので、不具合を見つけるのは特別珍しいことではありません。
レスポンシブデザインが定着して、どの画面サイズでも表示崩れを起こさない様にコーディングする必要がある上に、ブラウザや機種特有の特別仕様があるため私自身が開発する際も最終チェックで表示崩れが見つかったりする事はよくあります。

私自身、テストには相当力を入れているので、幸いにもいまのところ、納品後に不具合が見つかった事はありませんが、今後も絶対にないとは言い切れませんっっ。


テンプレート不具合1

記述ミス
スペルミスなどで「404 not found」がでていました。いまのところSEO上問題はありませんが、見る人が見ると分かるので気持ちが良いものではありません。
これだけでしたら、わざわざ制作者への連絡はしなかったかもしれません。


構造化記述漏れ
SEOに有効と言われている構造化マークアップですが、これにも記述の決まりがあります。
今回は、一部分の要素にしか構造化記述をしていなかったのと、記述方式にミスがあり、サーチコンソールでエラーとなっていました。

googleからは「検索結果に重大な影響がでる」とメールが来ていたので重要度は高いと思われますが、BASEではサーチコンソールは今現在、対象外となっているのでバグではありません。


レスポンシブデザイン不備
画面サイズによりナビメニューの表示位置を変えたり、サイドバーをページ下部に移動したりといったレスポンシブデザインが一般的に多く取られます。

今回は、ipadのサイズの場合、ハンバーガーメニューが表示され、表示されたハンバーガーをクリックするとメニューの中身が開いたり閉じたりするはずが。。。
最初っから開きっぱなしという事象が発生しました。

見た目、インパクトが大きい不具合なので、非常にかっこ悪い。。。


私自身、開発する際は、画面サイズを徐々に変えていき表示チェックをします。
それに加え、PC、ipad、iphone、アンドロイドでの表示も確認します。

今回は、この表示テスト時に不具合を発見しました。


対処
すぐに修正がされなかったのと、構造化記述漏れは対応されないようなので、私の方でテンプレートを修正しました。


構造化エラー


テンプレート不具合2

表示項目の設定ミス
商品1の説明に商品3の説明が表示されるという初歩的なミス。
これ、ネットショップでは非常に困ります。。。


画面サイズによる表示崩れ
PCやスマホサイズは考慮されているが、ipadやPCで画面を小さくすると表示が崩れる。
これもテスト漏れが原因です。


対処
商品説明に違う商品の説明が表示されるネットショップってどう思いますか?
お客様から見ると「このショップ大丈夫か?」と心配になったり、表示されている商品説明を信じて購入される方もいらっしゃいますよね?

これは初歩的なミスですが、重要度が高いミスと言えます。

制作期間中(1週間)待ちましたが、対応されないので、私の方で修正しました。


テンプレートの不具合があった場合

制作者へ連絡する事になります。
使う側からするとすぐに対応して欲しいところですが、早くて1,2週間というところでしょうか。1度目のエラー修正には1か月かかりました。
2度目のエラーは、2週間です。

ネットショップなわけですから、サイトの不具合はそのまま売り上げや経営に影響します。ある画面サイズの場合だけの不具合など、レアケースならまだしも、パッと見てすぐに分かる不具合やお買い物に支障をきたす不具合は困りものです。

ちなみにテンプレートに不具合があった場合でも、返金は不可となっています。

テンプレートの修正ができない素人の方が不具合テンプレートを買ってしまった場合、ただひたすら修正されるのを待つ事しかできないのが現状です。

違うテンプレートを買うか、無料のテンプレートで代用する方法もありますが、余計な手間が増えてしまいますので、どちらにしても購入者にとっては困る状態です。


不具合テンプレートの見極め方

それでは不具合のあるテンプレートを避けるための確認方法をお教えします。
※いろいろなパターンがあるので、すべてを確認できるわけではありません。


BASEでテンプレートのデモサイトを確認

実際にBASEにて自社テンプレートを実装したサイトを公開している制作者様がいらっしゃいます。

デモサイトを用意している方は多いのですが、BASEではなく別サーバーで同じデザインを実装している場合がほとんどです。
それですと、本当の意味での確認にはなりません。

ぜひ、BASEでのデモサイトでページを確認してみてください。

PCだけでなく、画面を小さくしたり、シュミレーションや実機を使い、ipadやスマホでも表示が崩れないかをチェックしてみましょう。


同じテンプレートを利用しているショップサイトを確認

BASEでのデモページを公開しているのは一部のテンプレートなので、こちらの方法が一番ポピュラーかと思います。

テンプレートの説明ページの下の方に、「利用しているショップ」として実際にテンプレートを利用しているショップが紹介されています。

実際に表示してみて、一通りチェックしてみてください。


自分のサイトでテンプレートをプレビューして確認

デモサイトもなく、まだ誰も利用していない新しいテンプレートの場合、自分のBASEショップでプレビューさせることができます。

やり方は、以下になります。

  1. 自分のサイトの管理画面へログイン
  2. デザイン
  3. BASEデザインマーケット 有料テーマを購入をクリック
  4. 気になるテンプレートをクリック
  5. プレビューをクリック  ※購入をクリックしてはいけません!!
  6. 表示や実際にカスタマイズできる項目を確認。ページ遷移をできるので全ページ表示してみる

BASEテンプレート確認


おすすめBASEテンプレート

テンプレートは常に更新されていますので、変更されて不具合が発生している場合もあります。
必ず自分でも確認してからご購入ください。


実際につかってみて良かったテンプレート

Copenhagen
Paradis
Natura
note +
Handmade
DEPARTMENT

最後に

BASEはネットショップに必要な機能が豊富に用意されています。
専門知識がなくても簡単に作成、管理ができるように設計されている優れたサービスで、私の一番のオススメです。

有料テンプレートもおしゃれなデザインで、BASEの基本機能を更に使いやすくカスタマイズしたものが多く、優秀なエンジニアが作成していると感じさせるものばかりです。

不具合は決して珍しいものではありません。むしろ不具合は付きものであると思っていただき上手に利用してください。



自己紹介

自分の写真

Sou

【BASEオフィシャルパートナー】
【LINE認定資格:LINE Green Badge】

便利ツールの紹介や、WEB関連、HTML+CSSなどのIT関連情報のほかに、投資や節約など個人的趣味についても投稿しています。