現役エンジニアがBASEを使って感じたメリット・デメリット

現役エンジニアがBASEを使って感じたメリット・デメリット

BASEとは

BASE公式サイト

BASEは特別なスキルがなくても無料で簡単に自分だけのネットショップをオープンできるECサイトプラットフォームです。 利用したことがなくても、TVCMをよく見かけるので「名前だけは知っている」という方も多いですよね。

source: https://binc.jp/about 創業者の 鶴岡裕太 氏（上図一番左）

創業者の 鶴岡裕太 氏が大学生時代にリリースしたBASE は、「とにかくユーザーに使われ続けるサービス」であることを目指しています。 「ショップオープンと同時に決済システムを利用できるようにしたい」という思いから、創業初期は鶴岡さん名義nの講座を窓口にしてBASE全店の決済を実行していたそうです。

そんなユーザーファースト目線を貫いた鶴岡氏の努力もあり、現在利用ショップ数は100万店を超えています。 無料で簡単に自分のネットショップをオープンできて、決済システムもすぐに利用できて、さらに売るものが無ければオリジナルTシャツなどの販売支援までしてくれるんです！ここまでユーザーファーストでサポートしてもらえたら、「勇気を出してショップオープンしてみようかな」と思えますよね。

Webサイトのフロント部分では React に　Vue.js と流行りの技術がフンダンに使われ、”これからの時代をになっていくサービス” であると感じさせられます。

また 2019年には東証マザーズに上場し、コロナの影響下でも株価は右肩上がりと順調そのもの、向かうところ敵なしといった風情です。

BASEでできること（メリット）

実際に使ってみて「すごいな」と思った点をご紹介させて頂きます。

• App 追加機能（プラグイン）
• 即日利用可能な決済機能
• 商材の提供
• API
• 初期費用 0円
• 割安なテンプレート群
• HTML、CSS、JavaScript編集
• 画面遷移が早い

まず BASE を使いはじめて最初に感じた印象は「おっ、 アプリを追加して機能を拡張できるの」といった利便性。

https://apps.thebase.in/detail/60

一般的な EC作成サービスは予めプラットフォーム側で必要な機能は用意されていて、ユーザー側で機能を増やしたり減らしたり、というのはできないものです。

例えば MakeShop は充実した商品登録フォームですが、中には不要な項目も。そんな自分にとっていらない部分を制御でき、必要な機能を追加できるのが BASE Apps。実際に使ってみると自分でお店を作っている感があって楽しいです。

【主な BASE Apps】
・ 顧客管理
・ HTML編集
・ ブログ
・ CSVインポート機能　etc
・ レビュー機能
・ メルマガ機能

「即日決済可能」は BASE 創業当時から拘っていた機能で、現在は Pay（株） という BASE から分社された会社にて決済を処理中。通常ネットショップの決済には「GMOイプシロン」や「ソニーペイメント」などが利用されると思いますが、申請から許可まで３週間以上の時間がかかります。そのタイムラグを解消したのが BASE という訳。現在即日決済を実行できるサービスとしては Stripe というグローバル企業がありますが、国内ではそれに対等するサービスが　Pay.jp になります。

「商材の提供」、こちらは売るものがなくても、売るものを作ってくれるサービス。

https://apps.thebase.in/detail/28

例えば上記の様なオリジナルTシャツ（ちょとキモくてすいません...）やオリジナルスマホケース、オリジナルアクセサリーなど。イベントに合わせての物販など様々なシチュエーションで活用できそうですね。

「API」については、カラーミーショップも公開しているサービスで、BASE で登録した商品や売り上げ情報を他のサイトでも利用できる様になります。BASEを軸に他のプラットフォームを利用する際に売り上げを一元管理できて便利、ということ。ただし、他サイトでの API 決済は実行できませんので、その場合は Pay.jp の販売リンク機能を使う必要があるでしょう。

この他にも BASE でできることはたくさんありますが、とにかく管理画面を触っていても楽しく、お店作り楽しいな、という印象を受けました。

BASEでできないこと（デメリット）

• ユーザー登録
• FTP機能
• ページ毎のデザイン
• 決済フロー画面の変更

一般的にネットショップというと ”ユーザー登録” してから送り先を決めて、決済、という流れと思います。そして次回からのお買い物は ”ログイン” してから買い物をし、取引管理をお客様もできる様になっていますね。

BASEはこの ”ユーザーログイン” がありません。単に買い物をして、終わりです。販売する商品にもよると思いますが、”ログイン機能” なくても概ね OK というところでしょうか。確かに購入履歴って、あまり見ませんし、メールの履歴を確認すれば何をいつ買ったか確認することできますもんね。

「FTP機能」、これは Web ページ制作に必要な画像ファイルなどを一括してサーバーにアップできる機能ですが、 BASE には FTP 機能用意されていません。大量に商品の画像ファイルをアップロードしたい場合は、 「CSV商品管理」App をインストールして操作する必要がありますね。

「ページ毎のデザイン」、これは「トップページ」と「商品詳細画面」も同じテンプレートを用いる様になる、ということ。

https://oshimamasara.base.shop/

BASEはページデザインを HTML や CSS で編集できる様になっていますが、その編集権限は１枚の HTML ファイルしか付与されていないので、ページ毎にレイアウトを変更しようと思うと テンプレートエンジンの機能を使うのと JavaScript などで制御、という形になるでしょう。

それから最後に「決済フロー画面」ですが、これは私は違和感を感じた項目になります。

https://shop.someyasuzuki.com/

商品を選択し、決済画面に進むと「Pay IDで購入」 という見慣れない画面が登場。別に Pay ID が怪しい訳ではありませんが、日頃　Amazon や 楽天でお買い物をしている人からするとチョット違和感を感じますよね。しかし、この決済画面は BASE 側で管理しているためユーザーサイドでは変更することができません。個人的にはここの部分が一番引っかかりましたね。

BASEを利用する時にあった方がいいスキル

• HTML、 CSS、 javaScript
• テンプレートエンジン
• デザインスキル

BASEでお店を開いてまず目についた部分が、画面右上の BASE のアイコン表示。

BASE のアイコン表示をクリックすると BASE の公式ページに飛ぶのですが、自分のお店としては不要な部分ですよね。BASEを使っている加減で、著作権上必要なのかなと思いましたが、有料 App で「アイコン非表示 月 500円」というものがありましたので、著作権の加減でもない。であれば、非表示にしたいですよね。

この BASE アイコンを非表示にする方法、 HTML の編集画面から入って、以下のコードを追加するだけで OK。

<style>
    #baseMenu .clearfix .base {display:none;}
</style>

CSS の基本ができていればなんともない作業と思いますが、知らないだけで 月500円....

この様に BASE というプラットフォームは大変便利ですが、デザインを自分好みに変更しようと思うと、 HTML や CSS、 JavaScript の知識が欠かせません。

また HTML、 CSS の知識があっても BASE の場合、オリジナルのテンプレート・エンジンを使用していますので、「テンプレートエンジン初めて」という方は HTML と CSS だけではとっつきにくいと思います。前もって Ruby on Rails や Flask、 Django など Webフレームワーク経験があれば、テンプレートエンジンも抵抗なく入っていけると思いますが。

BASE のデザイン編集に HTML や CSS が必要と言われても... と思いますよね。次はそれらの ”スキル” を身に付けるメソッドをご紹介させて頂きたいと思います。

BASEのデザイン編集力を身に付ける方法

BASEのデザイン編集に欠かせない HTML、CSS、 JavaScript のスキルを身に付ける方法は以下の 3つ。

• 独学でHTMLやCSSを学習
• プログラミング・スクールで学習
• 諦めて外注する

残念ながら先ほどの「BASEロゴ非表示」、ネットで検索してもメソッドは紹介されておらず、自分でカスタマイズを検討する必要があります。またロゴに限らず、メニューバーをページ下部でも表示したい、商品カテゴリーにソート機能を付けたいなど普段ネットショップをされている方としては、いろいろ機能を追加したい場面も出てくるでしょう。

こうした「デザインのカスタマイズ」には、 HTML、CSS などが必要ですが、現在それらのスキルをインストールする方法はたくさんあります。

• YouTube で独学
• 参考書で独学
• ネット検索して独学
• Udemy で独学
• プログラミングスクールで学習

私自身独学で役立ったサイトは、ドットインストールや Progate、それから W3School や Udacity などたくさん。しかし実際にこれらのサイトで学習する場合、時間が必要ですし、”独学”なので間違って理解する場合も少なくありません。

「おれ、大丈夫かな？」「あれ、書いてある通りにやってもうまくいかない」ということは独学中によくあると思いますが、この結果「時間」と「モチベーション」が削ぎ落とされます。限られた時間でパフォーマンスが求められる現代社会においては、こうしたストレスできるだけ減らして、自分をブーストアップしたいですよね。

そんな時に役立ってくれるサービスが「プログラミングスクール」という訳です。先生がいるから「確かな技術」を学べますし、モチベーションだって落ちるどころか上昇基調に転じるのではないでしょうか？

BASEに対する求人状況

CrowdWorksの BASE 事案 （LINK）

プライベート、仕事に限らず BASE でデザインを扱える様になると、そのスキルを活かして仕事ができるようになります。例えばクラウドワークスで 「BASE」 と検索すると、店舗管理以外に ”デザイン” の相談もちらほら。

現在はまだ案件少ないかもしれませんが、BASEというプラットフォームが定着し、売り上げ上昇を目指すお店がもっと増えれば、デザインに対する需要も高まってくると考えます。

コロナによって予測不能な社会となった今、こうした +α のスキルがあると、自分のお店がダメになってもデザインスキルで食っていける、と思うと安心ですよね。

まとめ

MakeShop や カラーミーショップ、 Wix.com にペライチなど様々なサービスを体験しましたが、個人的に一番興奮したのは BASE です。

BASE のプラットフォームは、最近流行の javaScriptフレームワーク React と Vue.js で構成されており、ストレスフリーな操作感を実現しています。「Web って本当に楽しいな」と感じさせてもらえるサイトでした。

「あ〜思うようにデザイン変更できない」「一体どうすればこんなデザインにできるんだ」とお悩みの BASE ユーザーの方、一度 Web の世界、IT の世界を知ってみるとそのストレスが解消されるかもしれませんよ。

CodeCampでは Webデザインに必要なプログラミングコースだけでなく、 IT 全般を幅広く学習できる「テクノロジーリテラシー 速習コース」も展開中です。

Webのことをもっと知りたい方、Web で勝負をかけて行きたいとお考えの方は、CodeCampでWebの世界を体験してみませんか？

CodeCampの無料体験は 公式ページからご予約いただけます！