BASEがサービス開始された頃からBASEの魅力を感じテーマデザイナーとして日々BASEのデザインを研究しています。そんな私たちのテーマラインナップの中で人気テーマをご紹介します！

BASEの人気テーマ1位「Edition」

『Edition / エディション』はサイドメニューレイアウトを特徴としたデザインテーマです。 カラーリング自由なサイドバー、ヘッダーバーがカラーアクセントとなり、よりお店の個性や雰囲気を表現しやすくなっています。

また「商品サムネイルのサイズ変更、縦横比調整」といった細やかなデザイン調整、「スライドギャラリー」や「動画再生」、「カテゴリーヘッダー」など、様々なカスタマイズ機能を搭載ています。 複数のデザイン設定サンプルをご用意していますのでぜひご覧ください。

デザイン設定次第で変わるバリエーション別サンプル

BASEの人気テーマ2位「UNIVERSE」

UNIVERSEはいくつかのテーマを制作し、たくさんのショップオーナー様に使っていただいた経験をベースにして、いろんな工夫やアイディアを詰め込んだテーマです。

ヘッダー画像のデザイン、カスタマイズ性が高く、またスライダーとパララックス効果もあり、印象的なデザインを簡単に作成することができます。


さらにサイドバーを入れない「1カラムデザイン」は商品写真を大きくみせることができます。

商品ページのレイアウトカスタマイズもとても凝っていて、さらに全ページのフッターエリアに発送方法の案内や支払い方法を表示できる所など、それまでのテーマにはなかった表現が盛りだくさんとなっています。


さまざまなショップの雰囲気に合わせられるという例として、デモサイトは全く系統の異なる2サイトを用意しています。

デモサイト1：https://universe.base.ec/
デモサイト2：http://universedemo.base.ec

BASEの人気テーマ3位「Relation」

「Relation」はトップページに全てを盛り込むワンページレイアウトのテーマで、ストーリー性のある少数商品EC、サブスク販売、オンラインコミュニティをイメージしています。


デモサイト：https://demoreltn02.base.ec

その他の人気テーマ

テーマ選びのアドバイス

• テーマ紹介やデモサイトの見栄えが良くても、実際に使ってみるとどうも使いづらい…。

• デモサイトを気に入って購入したはずが、いざ自分のショップに適用してみると何か違う…。

ということがよくあります。

テーマ紹介で使用されているおしゃれな写真、英語のキャッチコピー、英語の商品名。これらは当然デザイナーがデザイン優先で選別したものであり、実際のショップで使用されるものとは大きな差があることがあります。

デモサイトの綺麗な写真に惑わされず、デザインテーマの詳細ページから利用できる「プレビュー」を利用して自分のショップ写真素材、自分の商品を入れたらどう見えるか、をしっかりとチェックしてみましょう。 新規ショップ開設をご検討の方は、ぜひテーマ無償化特典をご利用ください。

BASEで作成できるショップの基本構成はとてもシンプルですが、「ページ追加App」を追加することで、上記以外の固定コンテンツページを自由に追加することができます。
しかし「ページ追加 App」はオフィシャルテーマのみが対象となっています。
デザイナーズテーマ、および「HTML編集 App」で作成されたカスタムテーマには対応していません。（2023年1月現在）

デザインテーマでページを追加する３つのアイディア

多くのショップオーナー様からご質問を頂きますが、デザインテーマを利用されている方が「ページ追加できないならデザインを諦めてオフィシャルテーマに」とはなかなか行きません。
そんな時にご提案しているアイディアをご紹介します。

アイディア1：Blogの記事として固定ページのコンテンツを投稿する

Blog Appsを利用すれば個別記事ページを無限に作成することができます。その機能を利用して記事ページを固定ページとして利用するというアイディアです。

Blog利用のパターン1：Blog Appsはそのままブログ、お知らせとしても利用する場合

テーマのデザインとしてはBlogページは「Blog」や「NEWS」などの大見出しが付くようになっていると思うので、記事個別ページは「Blog > 固定ページタイトル」といった表示がされてしまい、気にしだすと気になると思います。また、固定ページなのに日付が表示されていればそれも気になると言えば気になります。

Blog利用のパターン2：Blog Appsを固定ページ専用にしてブログは書かない場合

この場合は少しだけ工夫を加えることができます。Blogページで「Blog」や「NEWS」などの大見出しを付けず、ブログ記事タイトルを大見出しにするようにをテーマをカスタマイズすることで、記事ごとのページからブログ感を消すことができ、見た目上は完全にページ追加Appのような独立した固定ページのようにできます。

ブログ記事タイトルを大見出しにするにはHTMLカスタマイズが必要ですが、Blog用の大見出しを非表示にするだけであればもう少し簡単に済ませることもできます。（パターン１のスクリーンショットでJournalだけを消すイメージ）

ページができたらテーマ設定でナビゲーションやバナーを追加し、そのページのURLにリンクをして完了です。 どちらのパターンでも、コンテンツ内容は管理画面のBlogAppの本文編集機能を使うので、誰でも簡単に編集できるというのはメリットであり、同時にHTMLを利用できないのデメリットとも言えます。
多少の問題はありますが、アイディア1のパターン1は今すぐできる最も簡単な対処方法です。

テーマ「Edition」では、これをHTMLカスタマイズなしで再現できる「Blogでページ追加」という機能を搭載していますので、「Edition」をご利用の方はマニュアルの「8 その他の設定 > Blogでページ追加」をご覧ください。

アイディア2.：AboutページにHTMLで全部詰め込む

AboutページのHTMLとして固定コンテンツの全てを含めた長尺ページとしておき、ナビゲーションURLをxxx/about#faq のようにページ内リンクとする方法です。 オリジナルテーマでも唯一のフリースペースとして使えるAboutページ。この中にコンテンツを全て詰め込んでおき、ナビゲーションURLをxxx/about#faq のようにページ内リンクするというアイディアです。 よほど重すぎる、長すぎるということがない限り、ページ内リンクはうまく機能しますのでお客様としてもごく自然にサイト内を閲覧できます。
当然HTMLの知識が必要となりますが、デザインされたコンテンツを自由に入れていくことができます。

アイディア3：独立したサイトとBASEを行き来する

固定ページの数が多い場合、またそれらを別途CMSで管理したいといった場合、WordPressなどで作成したサイトとBASEのデザインを完全に合わせ、完全に役割を分けることも検討できます。
例えばWordPressであればそのテーマデザインとBASEのテーマデザインを完全に一致させます。そしてナビゲーションのリンク先だけが２つのドメインを行き来するようにします。そうすることで、閲覧しているだけでは完全に１つのサイトとして、固定ページコンテンツとBASEショップを行き来することができます。 この手法は、元々持っているメインサイトがあり、そこにBASEショップ機能を追加したい。といった場合にも採用できます。 BASEはシンプルなだけに、アイディア次第でいろんな応用ができます。
デザインも、ページ追加も諦めない方法、ぜひお試しください。

ショップオーナー様は既にご存知だと思いますが、現在BASEにて10周年記念キャンペーンを開催中です！ 2022年11月20日（日）、BASE10周年の記念と日ごろの感謝を込めて、割引率が最大10%OFFとなるBASE負担クーポンを配布されています。
BASE負担クーポンということで、10%分をBASEにて負担してもらえるという、ショップにも購入者にも嬉しいクーポンとなっています。

おおよそ2日間だけの期間限定ですが、クリスマス/年末年始セールを直前にして「ブラックフライデーセール」をやるかどうか？迷っていたショップオーナーにとってもとてもタイムリーなキャンペーンです。


キャンペーンサイトを確認してぜひご活用ください！

BASEがサービス開始された頃からBASEの魅力を感じて応援し続け、テーマのデザインマーケットがはじまった当初からずっとテーマデザイナーとして日々BASEのデザインを研究しています！
テーマラインナップの中で人気テーマをご紹介します！

BASEの人気テーマ1位「UNIVERSE」

UNIVERSEはいくつかのテーマを制作し、たくさんのショップオーナー様に使っていただいた経験をベースにして、いろんな工夫やアイディアを詰め込んだテーマです。

ヘッダー画像のデザイン、カスタマイズ性が高く、またスライダーとパララックス効果もあり、印象的なデザインを簡単に作成することができます。


さらにサイドバーを入れない「1カラムデザイン」は商品写真を大きくみせることができます。

商品ページのレイアウトカスタマイズもとても凝っていて、さらに全ページのフッターエリアに発送方法の案内や支払い方法を表示できる所など、それまでのテーマにはなかった表現が盛りだくさんとなっています。


さまざまなショップの雰囲気に合わせられるという例として、デモサイトは全く系統の異なる2サイトを用意しています。

デモサイト1：https://universe.base.ec/
デモサイト2：http://universedemo.base.ec

BASEの人気テーマ2位「Relation」

「Relation」はトップページに全てを盛り込むワンページレイアウトのテーマで、ストーリー性のある少数商品EC、サブスク販売、オンラインコミュニティをイメージしています。


2021年の7月にリリースされたばかりです、利用していただくショップを選ぶテーマ（特徴的なのでどのショップでも使えるというわけではないかも…）なのですが、とても多くの方に試していただき好評をいただいています。


このテーマは着手からリリースまで実に半年ほどかかっているのですが、そのきっかけとして「BASEオフィシャルテーマの充実度がすごい」ところにあります。2020年の秋にBASEオフィシャルテーマは大きくリニューアルされ、デザインパーツを自由自在に組み合わせ、どんなデザインも簡単に作れるようになりました。


これを見たとき、「もうみんなオフィシャルテーマでよくない？」と思っちゃったのです…

こんな良いものが無料で使える隣で、有料のデザインテーマの存在意義は何か

その時点でたくさんのデザインテーマがありましたが、どれも似たり寄ったり、どれも飛び抜けた特徴がない、デモサイトの写真だけで分別しているような… これ以上、似たようなテーマは必要ないかもしれない。（その方向でのベストとしてUNIVERSE を作った！）


そんな中、極端なコンセプトで、BASEを普通のショップとは違う使い方で使いたいと思っている方に向けたテーマを作りたい。と思い立ったのがこの「Relation」です。


当初は、コミュニティAppだけを想定したオンラインサロンテーマを目指していましたが、BASE開発チームの方からのアドバイスをいただく中で、一般的な使い方でも使えるように、と改善されていき、最終的にはある程度どんなショップでもお使いいただけるような仕様になっています。


もちろん、「ストーリー性のある少数商品EC、サブスク販売、オンラインコミュニティ」といった使い方を想定される場合は必ずおすすめしたいテーマです。
（それまでのテーマとは極端に違うコンセプトだったので、BASE開発チームの皆様にはリリースまで何度も何度も修正アドバイスをいただき、とてもご迷惑をおかけしました…）


デモサイト：https://demoreltn02.base.ec

BASEの人気テーマ3位「Handmade」

「Handmade 」は暖かみ、柔らかさ、素材感を大切にしたテーマです。


定番のレイアウトでシンプルな使いやすさを基本に、細部に素材感のある表現を用いて優しくふんわりとした印象が感じられるようデザインされています。


素材感のある背景を選べたり、パーツが縫い目のデザインになっていたりと、とてもかわいいデザインが人気です。


ウェブデザインには流行や最先端をよしとする向きもありますが、いざお買い物をする人の立場となれば、なんとなく安心する感じ、ほっこり感、手作り感があった方が、販売者さんとの距離を近く感じることができる場合もあ理ます。


https://design.thebase.in/detail/27

BASEの人気テーマ「Landscape」「MASTERPIECE」

「Landscape」「MASTERPIECE」も2位や3位でご紹介したテーマと同じくらい、人気のテーマです。


こちらはフルスクリーンのスライドショーをメインにした、シンプルでクールな雰囲気のテーマです。利用していただいているショップもとても多いので、これからもどんどんとアップデートを行なっていきます。


MASTERPIECE：https://design.thebase.in/detail/15

LANDSCAPE：https://design.thebase.in/detail/24

Instagramフィードの表示

ショップ上にインスタグラムの投稿写真を自動的に表示させたい

というカスタマイズはとても多いですね。これはよく見る形なのですが、実は結構難しいのです。といっても、技術的に難しいというよりもインスタグラムの仕様（サービス提供上の仕組み）でうまく規制されているためです。

数年前までは簡単にできたのですが、インスタグラムは単純な広告によるビジネルも出るから、ビジネスアカウントでの収益モデルへと変化していく中で、誰でも好き勝手に埋め込むということができなくなりました。

2021年現在、Instagramは最新フィードを表示するための貼り付けコードを利用者に提供しておらず、自分のウェブサイトにInstagaramフィードを埋め込むには、個々でプログラミングをするか、それ専用の別のサービスを介して行う必要があります。

「それ専用の別のサービス」というのは基本的に有料なのですが、無料のものをうまく利用する方法として、UNIVERSEのマニュアルに解説していますので、参考にしてみてください。 https://basedesign.info/universe/#instagram

デザインテーマ「UNIVERSE」「Relation」ではその方法での埋め込みができるようになっています。 （マニュアルで紹介しているサービス自体は埋め込みコードを生成してくれるだけなので、そのコードをHTML編集Appで直接埋め込むことで、他のテーマでも利用することは可能です。） 実際にインスタフィードを埋め込んでいるデモサイトをご覧ください。

https://universe.base.ec/

インスタグラムの埋め込み方が分からない時

デザインテーマ「UNIVERSE」「Relation」の場合はマニュアルにて解説しています。 それ以外のテーマなどで埋め込みが分からない場合など、サポートフォーラムにお気軽にご質問ください！

サポートフォーラムの方に、「BASEにログインする方法」というお問い合わせをいただくことが割と多くあります。 BASEへのログインは特に難しい方法があるわけではなく、ショップ開設時に設定したメールアドレス、パスワードがあればログインできます。 ブラウザの場合でも、スマートフォンなどのBASEアプリの場合でも共通したアカウントで利用ができます。 もしどうしても分からない場合、どんな状況でログインできないかを書いていただければサポートさせていただきますので、お気軽にご質問くださいね！

動画やスライドショーで商品を魅力的に表現しよう！「商品説明カスタム App」

4月13日（月）、BASEより新しく「商品説明カスタム App」がリリースされました！ これまでBASEの基本機能では写真と文章というシンプルな構成となっていて、それが分かりやすさでもありましたが、一方で「商品説明をもっと充実させたい」「YouTube動画を掲載したい」といった要望もありました。 使いたい人だけがインストールできるAppとして、しかも無料Appで、とても大きな機能アップデートとなりました。 見出し、文章、画像、画像ギャラリー、動画、なんでも無制限に追加していくことができますのでぜひインストールしてみましょう！

• UNIVERSE
• LANDSCAPE
• MASTERPIECE
• HANDMADE
• FRAGRANT

早速、これらすべてのテーマにて「商品説明カスタム App」に対応しましたので、ぜひお試しください。

どんな感じになるの？

実際に「商品説明カスタム App」をインストールし、商品説明画面でテキストや画像、動画を追加してみました。こちらの商品ページにて表示を確認できます。 https://universe.base.ec/items/24307773#&gid=0&pid=2

テーマごとのレイアウト

上のリンクはUNIVERSEのデモサイトです。UNIVERSEはもともと最近のトレンドを抑えた1カラムレイアウトになっています。 1カラムというのは、商品ページで画面を右エリア、左エリアというように分けず、画面いっぱいにコンテンツを広げて見せるレイアウトです。 そのため「商品説明カスタム App」による追加コンテンツは、パソコン等の大きな画面でも思い切って中央に寄せて広いエリアで並んでいく形となります。 LANDSCAPE、MASTERPIECE、HANDMADE、FRAGRANT　などのベーシックな2カラムレイアウト（商品ページでもサイドバーを表示するタイプ）では、そのままメインエリアの幅を利用する形でコンテンツが展開されます。