BASEのショップデザイン、テーマを選ぶのは四つ目｜おしゃれに見える店の組み方

テーマはきれいなのに、ショップ全体が散らかって見える。ご相談でいちばん多いのが、この状態です。テーマを替えても直りません。テーマは器で、散らかっているのは、器に入れた中身だからです。器を何度替えても、同じ中身を入れれば、同じように散らかります。

この記事では、BASEでショップを組むときの順番を四つに分けて書きます。テーマを選ぶのは、四つ目です。読み終えたら、テーマ一覧を開く前に決めておくことが、ご自分の言葉で言えるようになります。

BASEのショップデザインの作り方は、決める順番で九割が決まる

BASEには、ショップの見た目を整えるデザインテーマが用意されています。選ぶだけで、見出しの書体や余白、商品の並べ方まで一度に整う。だから多くの方が、最初にテーマ一覧を開きます。

けれど、テーマを先に決めると、そのあとの判断がすべて「このテーマに合うか」になります。商品画像も、ショップの説明文も、テーマの見本に寄せて作ることになる。見本の写真は、見本のために撮られたものです。ご自分の商品とは、光も床も違います。

順番を入れ替えます。一、トップに並べる商品を絞る。二、商品画像の一枚目を揃える。三、ショップの一行を決める。四、そのうえでテーマを選ぶ。中身が先に決まっていれば、テーマは「中身をいちばん邪魔しない器」を探す作業になり、迷う時間がぐっと短くなります。

テーマは、決まった中身を受け取る器です。中身を決めてくれる道具ではありません。

一、トップページに並べる商品を、先に絞る

ショップを開いた人が最初に見るのは、トップページに並んだ商品の一覧です。ここに全部の商品を並べると、どれも同じ重さで目に入り、何の店なのかが伝わりません。

まず、「この店はこれです」と言える商品を、三つから六つ選んでください。季節ものや、在庫が一点だけのものは外します。残った数点が、ショップの顔になります。ほかの商品は、カテゴリーの先に置けば十分です。並べる順番も決めておきます。いちばん見てほしいものを左上に、価格や色の近いものは隣に置かない。それだけで、一覧に小さな起伏が生まれます。

選ばれた数点が並ぶ店のほうが、見る人は奥まで入ってきます。入口で何の店かがわかると、安心して次のページを開けるからです。

二、BASEの商品画像は、一枚目の「床と光」を揃える

冒頭の三枚に戻ります。白い紙、木の机、手。どれも単体では悪くない写真です。並べたときに散らかって見えるのは、床と光がそれぞれ違うからです。

BASEの商品画像で、まず揃えるのは一枚目だけで構いません。一覧に出るのは、その一枚目だからです。床は一種類。光は一方向から。商品の大きさは、画面の中でだいたい同じ面積に。この三つが揃うだけで、一覧の並びは驚くほど静かになります。

床を選ぶときは、商品より目立たないものにします。大理石や柄の布は、一枚だけ見ると華やかです。けれど一覧に二十並ぶと、目に残るのは、商品より床の模様になります。無地の紙、塗った板、くすんだ色の布。主役を譲れる床が、並べたときにいちばん強くなります。

二枚目からは、自由にして大丈夫です。手に持った写真、細部の寄り、使っている場面。一枚目で店の基準を見せ、二枚目以降で商品の表情を見せる。役割を分けると、写真を撮る日の迷いも減ります。

写真の統一感をどう出すかは、別の記事で、揃えるより捨てる側から詳しく書いています。

一覧が静かな店は、一枚目にだけ厳しく、二枚目からはやさしい。

三、ショップの一行を決めてから、言葉を置く

トップページの見出しや、ショップの説明文。ここに何を書くかを、テーマを選ぶ前に決めておきます。長い紹介文は要りません。「何を、誰のために作っている店か」を一行で書けるかどうかです。

一行が決まると、置かない言葉も決まります。「丁寧に」「こだわりの」「おしゃれな」。どの店にも書ける言葉は、書いた瞬間に店を薄くします。代わりに、素材の名前や、作っている場所、使ってほしい場面を、具体的な言葉で一つだけ置きます。

一行は、商品名の付け方にも効いてきます。一覧に並ぶ商品名が、型番だったり、説明だったり、愛称だったりすると、写真が揃っていても文字の列がばらつきます。名前の形を一つに決めておく。それだけで、一覧の下半分まで静かになります。

この一行は、テーマを選ぶときの物差しにもなります。見出しの書体が一行の体温に合うか。余白が一行を窮屈にしないか。言葉が先にあると、テーマの見本を眺める目が変わります。

四、テーマを選び、デザイン変更は「足す」より「削る」へ

ここまで決まってから、ようやくテーマを選びます。見るのは骨組みです。見本の写真は、いったん脇に置きます。商品画像が大きく出るか、文字が控えめか、余白が広いか。三つの順番で決めた中身を、いちばん素直に受け取ってくれる骨組みを選んでください。

選んだあとのデザイン変更も、順番は同じです。BASEでは、HTML編集Appを使うと、テーマの中身そのものを書き換えることもできます。自由が大きい分、足したくなります。帯の色、動き、飾りの線。けれど、手を入れるほど、最初に揃えた一枚目の静けさが崩れていきます。

変更で効くのは、たいてい削るほうです。使っていない帯を消す。見出しを一段小さくする。商品の間の余白を広げる。足す変更は、一つ入れたら一つ消す。そう決めておくと、ショップの見た目は長く崩れません。

おしゃれなBASEショップのデザインの例に共通するのは、並びの静けさ

おしゃれに見えるショップのデザインの例を見比べると、テーマはばらばらです。共通しているのは並びです。一覧の一枚目の床が揃っている。トップに並ぶ数が少ない。言葉が一行で言い切られている。

つまり、おしゃれは、揃えた結果として出てくるものです。高いテーマを買っても、一覧の床がばらばらなら散らかって見えます。無料のテーマでも、一枚目が揃っていれば、静かで高く見えます。

おしゃれなショップは、テーマで選ばれているのではなく、並びで覚えられています。

KHZ ARTでは、BASEと連携したECサイトの制作を ¥120,000〜、最短2週間で承っています。テーマ選びの前の、商品の絞り込みと一枚目の基準づくりから一緒に決めます。費用の目安は、ホームページ制作の費用シミュレーターで、項目を選ぶだけで出ます。

商品画像の一枚目だけを先に揃えたい場合は、ビジュアル制作（一枚 ¥30,000〜・最短3日）でもお受けしています。SNSのサイズ展開は ¥5,000 です。表示される金額は下限の価格を足した目安で、商品の数や世界観の深さに応じて、個別にお見積りします。

テーマ一覧を開く前に、三つだけ書き出してください

最後に、テーマ一覧を開く前に、三つだけ書き出してみてください。

一、トップに並べる商品（三つから六つ）

二、一枚目の床と光（一種類ずつ）

三、ショップの一行

三つが紙の上にあれば、テーマはもう、照らし合わせるものになります。BASEのショップデザインは、最後に選んだテーマより、最初に決めた三行で長く保たれます。