BASEデザインマーケットのテーマ売り上げに繋がった工夫まとめ

#BASEデザインマーケットとは?
「BASEデザインマーケット」は無料でネットショップの作成、運営ができるサービス「BASE」のテーマデザインを販売できるサービスです。テーマは5000円から販売することができます。

https://design.thebase.in/

# キャプチャ画像を工夫
![スクリーンショット 2016-03-20 10.50.08.png](https://qiita-image-store.s3.amazonaws.com/0/26043/b661daab-f8e8-7557-93bc-459842199b4d.png)

テーマ申請にはキャプチャ画像が必要となります。特に1枚目はギャラリーページで表示されるので、目を引くものを作りましょう。

##1枚目PCのトップページを使用
1枚目は、ガイドラインとしてPCのトップページにしなければなりません(ドキュメントには書いていないかもしれませんが、申請チェックで指摘されましたw)なのでモバイルの画像を1枚目にすることはできません。

##背景を工夫
![スクリーンショット 2016-03-20 10.21.50.png](https://qiita-image-store.s3.amazonaws.com/0/26043/3ee0e46d-a1cf-b7d2-3b58-50c0e0117e6c.png)
非常に単純な施策ですが、キャプチャに背景を設けると、売り上げが少し上がりました。


#テーマ説明文を工夫
![スクリーンショット 2016-03-20 10.48.15.png](https://qiita-image-store.s3.amazonaws.com/0/26043/0920505d-dff4-4bc4-369c-fab2b51c30e9.png)

## 最初にテーマの特徴を書く
テーマが増えてくると、どれも同じに見えてきます。なので他のテーマと何が違うのか、このテーマの特徴が何なのかを最初に書きましょう。「Teen」ではスマホに特化したことを推しました。

```
「Teen」はスマホに特化したテーマです。スマホ世代ユーザはパソコンよりもスマホでホームページを見ることが多いです。

これからは10代のスマホ世代がスマホ経由でどんどん買い物をする時代になります。BASEのテーマもスマホで操作しやすいものにしたほうが良いと考えました。
```

## 簡潔に書く
説明文が長いと読む気が失せるので簡潔に書きましょう。具体的には箇条書き、体言止めにしましょう。

```
- 大きな「カートに入れる」ボタン
- 大きなSNSシェアボタン
Instagram,LINE,Facebook,Twitter,Amebaに対応

//誤り:体言止めができていない
Instagram,LINE,Facebook,Twitter,Amebaに対応しやすい
```

##区切りをわかりやすく
項目が増えると境目が分かりづらくなります。区切り線を追加して読みやすくしましょう。

```
==========================================================
◆スマホで操作しやすい
==========================================================
- 大きな「カートに入れる」ボタン
- 大きなSNSシェアボタン
Instagram,LINE,Facebook,Twitter,Amebaに対応
- 「種類」「数量」選択エリアが大きくタップしやすい
- カテゴリーメニューの領域を大きめで、タップしやすい

==========================================================
◆カスタマイズ機能
==========================================================
◯ お知らせ機能
トップにお知らせ(News)を掲載することができます。

```

#テーマ説明用のTumblrを作成
![スクリーンショット 2016-03-20 10.29.09.png](https://qiita-image-store.s3.amazonaws.com/0/26043/3a7fd7ac-98e8-a53f-56d3-9263abb870bd.png)
テーマ説明文にはサイトを掲載することができます。そのサイトでテーマについて詳しい紹介をしましょう。自分は最初、詳細説明サイトを用意していなかったのですが、用意すると売り上げが伸びました。

http://naoyashiga.tumblr.com/post/139091522115/teen

##6秒動画で伝える
![スクリーンショット 2016-03-20 10.44.17.png](https://qiita-image-store.s3.amazonaws.com/0/26043/86b3bca4-c1e4-1408-00d9-e317757c39d6.png)
実際に動いているのを見てもらいたかったのでVineで動画撮りました。以下Vineのメリット。

- 6秒なので短い
    - 長いと途中離脱される恐れ
    - アピールしたい部分を小分けにできる
- Loop回数が表示されるので、なんちゃってアクセス解析になる
    - ユーザ側もLoops回数が多いと注目されているテーマだとわかる
        - BASEの既存テーマ紹介ページではviewsは表示されない
- 動画編集が楽
    - スマホですべてできる
    - VineのPCページから埋め込みタグを取得できる
- Youtube
    - ユーザが見るときにもしかしたら広告が入る恐れがあり、離脱される懸念あり

##デザイン編集のやり方を書く
![スクリーンショット 2016-03-20 10.45.19.png](https://qiita-image-store.s3.amazonaws.com/0/26043/272bec08-1fe9-c7a8-585d-5ff44d938244.png)
オリジナルの機能を追加すると、編集のハードルが上がります。したがってデザイン編集の方法をキャプチャを交えながら解説することは重要でしょう。

自分は以下のような説明文も追加しました。

```
お知らせ機能編集

1お知らせ機能 ON/OFF切り替え

お知らせ機能全体を表示するかどうか。

2.一つ目のお知らせ機能 ON/OFF

お知らせは3つまで表示できます。ここでは1つ目のお知らせを表示するかどうかを決めることができます。

3.お知らせテキスト

お知らせの文章を入力できます。

4.お知らせリンク

これはお知らせの飛び先URLを入力します。
```
##URLは短く
非常に細かいですが、Tumblrの投稿タイトルは英語にしたほうがよいです。日本語にするとURLがとても長くなり、テーマ紹介ページが見づらくなるからです。無難にテーマ名だけにするのがよいと思います。

例: http://naoyashiga.tumblr.com/post/139091522115/teen
「teen」の部分がTumblrの投稿タイトルとなります。

#「Material」と「Teen」の紹介
自分は「Material」と「Teen」を制作しました。良かったら制作の参考にしてください :pray: 
[Material](https://design.thebase.in/detail/22)
[Teen](https://design.thebase.in/detail/19)

#関連記事
[BASEデザインマーケットのドキュメントからは分かりづらい仕様を解説 - Qiita](http://qiita.com/naoyashiga/items/999d85719f309cf747a1)
[Gulpで外部CSSをhtmlに書き込み、BASEデザインマーケットの更新を楽にする - Qiita](http://qiita.com/naoyashiga/items/2feb39cfa98ec7524431)
[BASEデザインマーケットの審査を通すためのチェックポイントまとめ - Qiita](http://qiita.com/naoyashiga/items/6da44c5dbcba6140e6f6)