見出し画像

【初心者向け】BASEでおしゃれなショップを作る


ハンドメイド作家のastin muhlerです。新しいスマホケースブランドを立上げ、BASEを使ってショップを作ったのでコツを書いちゃいます。

実際に作ったサイト【飛鳥珈琲】
https://astincoffee.base.shop/

なんここのサイト作り始めて半日あまりで作っています。(商品登録は別)

今回実際に作り始めて思ったこと

作り出す前の準備が大切!

初めての人はショップページを作ろうと思ったら
まずサイトに登録して、カチカチしながら作り始めると思います。

これは家事で例えると、何となくかわいいお弁当を作り始めてから食材を買いに行くのと同じくらい非効率。まずは計画して食材を集めることろから始めましょう。

しかしBASEのショップページはこの3つの材料があればもう90%完成したといえます。

①サイトの枠組み
②画像
③文章

①サイトの枠組み作り

無料テンプレートか有料デザイナーズテーマが選べます

無料テンプレート
デザイン性があまり必要ないショップ、もともと強い販売チャンネルがあって決済に使うなどそんなショップは無料テーマでも全然OK。最近は簡単にパーツをはめ込めるのでかなり作りこめるようになっています。でも考え始めると時間がかかってしまうので予めイメージを固めておくのが大事。
無料テーマの場合はまずは
1.BASEのショップをとりあえず見まくる
2.自分の好みのショップを見つける
3.背景や文字の色は後から変えれるのでサイトの枠組みを観察
そしてそのショップっぽくデザインパーツをはめ込んでいく。

慣れればとても簡単です。自分で作っていくときはスマホの表示の方が全体が見やすいのでオススメ

有料テーマ
デザイナーさんが作ってくれたテーマにそって画像やテキストをハメていく感じ。無料で作ってるうちのこだわりたくなっちゃった人や、プロの作ったオシャレなショップにしたい方は有料がおすすめ。今回のショップも私の今あるショップも有料テーマを使っています。(値段は5000~10000円くらい)安い!

参考:私のショップのテーマ

飛鳥珈琲 → fit.
astin muhler → Fortune

有料テーマは画像をハメていくだけなのでとても簡単です。

②画像

素材となる画像をあらかじめ準備しておきましょう

今回の有料テーマだと

画像1

19枚も画像があります。ただ、スライドとかは1枚でもいいので15枚くらいあればデザイン的には問題なさそう。

フリー素材でもいいのですが「どこかで見たことある、、、」とならないためにもPIXTAやAdobeSTOCKで有料のものを買うのがおすすめ。
https://pixta.jp/
https://stock.adobe.com/jp/

※PIXTAの場合1画像Sサイズで500円くらい。PCスライド画像はサイズ大き目の方がきれいかも。

TOP画像
ブランド紹介
コンセプト
作家紹介

これらのカテゴリに分けて15枚くらいあればOK。PCとスマホで使用する画像を変えたいと方はもう少し必要かも。

画像2

もちろん撮影技術があれば自分で撮影してもOK。仕入れと自前、半分半分くらいにするとオリジナリティもでて良いと思います。

ロゴはなくてもよいのですが、作りたいと言う方はアプリでも作れるし、パソコンでデザインするのが苦手な方はメモ用紙に手書きして明るくすればそれっぽくなるので簡単にできます。

画像3


③文章

細かな告知以外に必要な文章は

1ブランドコンセプト
2作品のストーリー
3作品のこだわり
4作家の紹介

あたりがあるとよいと思います。

文章を書くのが得意な方は本当にうらやましいですね。ここは悩んでると時間がかかってしまうところでもあるので外注するのもありだと思います。

まずはブランドのことを箇条書きにしてCOCONALAやランサーズなどで発注するのがおすすめです。5000~10000円くらい。

それぞれのページはblogを使って作ると作りやすいです。

https://astincoffee.base.shop/blog/2020/12/06/233316
例えばこのページはブログで作っています。

まとめ

自分で作る部分と人にお願いする部分のハイブリッドで作ると時間もかからずすぐにクオリティの高いホームページができます。

今回私的最短最速でしっかり作りきるオススメなやり方は

①フレームは有料テーマ!

②画像は自分で撮影、素材屋から仕入れの半分半分!

③文章は自分で書くか、苦手なら必要な情報を箇条書きにして外注!

これで15000~20000円前後でとてもおしゃれなショップページが完成します。

後はいつも通りがんがん商品登録して完成です!

ぜひお試しくださいませ。

画像4

サポートしてね☆新しい作品開発と研究に使わせていただきます!