狠狠撸

叠础厂贰クリエイティブセミナー

2 ?BASE, Inc. All rights reserved
本?のアジェンダ
?デザインテーマについて
?商品写真について
?商品??について
?プラスアルファであると良い?夫
?質疑応答

ネットショップのデザインとは？

テーマ
商品写真
商品説明
デザインを構成する３要素
１
２
３

１つの参考指標：滞在時間と直帰率
滞在時間と直帰率を意識し、コンセプト（デザイン、
商品タイトル、商品説明、商品写真）を明確に伝える。
滞在時間
ショップページや商品ページなど特定のページに購?者が訪れ、閲覧を
開始してからどのくらい滞在していたのかを?すアクセス解析?語。
直帰率
購?者が閲覧し始めたページから他のページに移動することなくサイトを
離脱した割合。

BASE Apps（ベイスアップス）とは？
BASE Appsであなたのショップをもっと使いやすく。
ショップ運営のあらゆる課題をかんたんに解決する拡張機能
の総称が「BASE Apps」です。
たくさんの便利な機能が、無料でご利?いただけます！(※)
※?部有料の機能もございます。
さっそく使ってみましょう！
ショップ運営の悩みは、BASE Appsで解決
https://apps.thebase.in/

BASE Apps へのアクセス?法
本セミナーでは随所にAppsが登場します。

Google Analytics 設定

9
Google Analytics 設定
?BASE, Inc. All rights reserved
Google アナリティクスを使?すれば、
ショップに訪れたお客様のアクセス情報を詳しく分析できます。

10
Google Analytics 設定?法

11
ウェブサイトのURLは「https://」、
レポートのタイムゾーン、利?規約は「?本」を選択。

12

13

Google Analyticsの使い?に関しては
下記のキーワードでググってみてください。
Google Analytics 使い?
Google Analytics 上司
Google Analytics テンプレート

テーマ１

BASEのデザイン編集は?きくわけて３つ
???BASEが予め?意しているテーマは11種類
???「BASE DESIGN MARKET」でアップグレード
???「HTML編集」で?由に編集することも可能
無料
有料
無料

基本的なデザイン編集
テーマ×ロゴ×背景×テキスト?を組合せて作成
▼

基本デザインの事例
http://shop.someyasuzuki.com/

基本デザインの事例
http://shop.new-mingei.com/

美しいデザインの共通項
ロゴ部分をイメージ画像として表現

BASE DESIGN MARKET（https://design.thebase.in/）
5,000円からの買い切りでジャンルに特化した
リッチなテンプレートを購?することが可能。

BASE DESIGN MARKETの事例
http://www.shop.shojifujita.com/

HTML編集

HTML/CSS/JavaScript等を編集することでオリジナルの
ネットショップをデザインすることができます。
※HTML編集Appをご利?いただくには、あらかじめHTML/CSS/JavaScriptの知識が必要です。
?BASEサポートでは、HTMLの記述?法などの技術的なサポートは?なえませんので、ご注意ください。
25
HTML編集

http://sangacio.base.ec/
26
HTML編集例

http://www.honey-selection.com/
27
HTML編集例

http://www.ktbz.jp/
28
HTML編集例

https://shop.tsurutama.jp/
29
HTML編集例

ショップロゴ作成

ショップロゴ作成
お好きなフォントと?を選ぶだけで、
あなたのネットショップにぴったりなロゴを作成。

付録：かっこいいロゴをかんたんに作る?法
3,000以上のテンプレートからロゴを?作「DesignEVO」
https://www.designevo.com/
AIがロゴを?動的に作ってくれる海外サービス「Logojoy」※有料
http://logojoy.com/
数ステップでシンプルでおしゃれなロゴが作れる海外サービス
「Hip Logo Generator」
https://www.hipsterlogogenerator.com/

付録：かっこいいグラフィックを簡単に作る?法
https://www.canva.com/

無料テーマよりデザインマーケット、
デザインマーケットよりHTML編集
…のほうが優れているというワケで
はありません。

商品写真２

?枚?の写真がとても重要

なぜなら

なぜならアプリにしろWEBにしろ、写真で判別され
クリックされないと肝?の商品ページに来てもらえないから

興味関?を弾いてクリックしてもらうからこそ
肝?の商品ページをみてもらえる。

こんな写真はヤバイ！

こんな写真はNG①
暗い
購買意欲が喚
起できない
ピントぼけ
瞬間的に判断
できない
?味が変
意思決定に?
ける

こんな写真はNG②
どんな商品か
わからない
パッケージ
だけとか…
どの商品か
わからない
?んなものと
合わせて撮っ
てるとか…
?きさが
イメージ
できない
商品そのもの
だけを撮って
るとか…

こんな写真はNG事例

商品写真のコツ
情報イメージ

共感
× ×
商品写真における?切な3要素

できるかぎり?然光で撮影する(ライト直下やフラッシュNG)
被写体
逆光
半逆光
側光
半順光
順光
半順光
側光
半逆光
?
?

商品の形や?を
印象づけたい場合は
『順光』

商品を?体的に
際?たせたい場合は
『側光』

ストーリーチックに
印象づけた場合は
『逆光』

?途に応じたスチレンボード(発泡スチロールの板)を2枚購?。
レフ板を作ってみる①

スチレンボードをL字型にしてテープで留めると
簡易的なレフ板の完成。
レフ板を作ってみる②

レフ板を作ってみる②
→?然光→
←反射←

カメラの位置と確度を考えてみる
位置-?常 ?線-?度

寄り-質感
使った時の?常がイメージできる位置や?度なのか？
?に取れないネットショップだからこそ質感が伝わるのか？

?道具を使ってみる
画?紙板

ご友?
画?紙やまな板などホームセンターや100円ショップで?に?
るものや、ご友?の協?などだけでも印象はグッと変わります。

その他テクニック参考事例
?きさが分かる
後ろをぼかして
みる
中?をズラして
みる
付属品を添える
テキストで補完できない雰囲気を伝える。

撮影キットを購?してみる
撮影キット?撮影ボックスなどと検索

三脚を購?してみる

接写レンズを購?してみる

ファッション系の写真撮影?５つのTIPS
モデルである必要は無い（WEAR/Instagram）
“壁”を効果的に使う
着回しを伝える（全?、ボタン開閉、インアウト、カラバリ）
360°を意識（側??背?（髪の?注意））
ディテールをおさえる（?周り、袖、プリントや刺繍、ボタンなど装飾物）

背景で印象が変わる事例
https://store.vannie.tokyo/

商品説明3

３つのコピー＋ベネフィットを意識する
キャッチコピー（商品名）
ボディーコピー（商品説明）
クロージングコピー（商品説明）
ベネフィット（商品説明）
＋
＋

キャッチコピー（商品名）
???＋商品名
?軽に乳酸菌。後発酵茶（阿波番茶）☆200g
世界?の胡椒！カンポットペッパー☆10g
1?1粒、?サプリ。無添加フルーツニンニク☆100g

ダメな例
【即納?秋ワンピース】秋
にかわいい厚?ワンピース
クラシカル M L? チェック
?袖ベルト付ミモレ丈フ
レア秋?ワンピは流?モデ
ル多数着?

ボディコピー（商品説明）
5W1H?に商品の詳細を書き出してみる
どこでいつだれか
なにをなぜどのように
期限素材サイズ

クロージングコピー（商品説明）
購?を促すための後押し、メッセージ?演出
できうる限り地元のものを使?し、季節の旬の野菜やフルーツを加賀で採れ
たはちみつや?然な?みのきび砂糖でコトコト煮込み、瓶詰めしています。
余分なものは加えておりませんので、ちいさなお?さまからおじいちゃんお
ばあちゃんまでご家族さまで安?してお楽しみいただけます。
お得な５００円OFFのクーポンコードが届くメルマガは「XXX@XXX.jp」
から送信されます。

＜ラデックさんの誘惑レシピ＞
材料?2?前
たまねぎ?半分
ままちょび?6ひれ
ジャガイモ?3つ
?クリーム?150ml
パン粉?適量
ままちょびが浸っていたオリーブオイル?適量
あったら?ディル?適量
１）たまねぎを繊維に沿って薄切りに切る。ままちょびはみじん切
り、ジャガイモは２つを５ミリ幅くらいの短冊切り、１つを５ミリ
の輪切りにする。オーブンを180度に温める。
２）18cm幅の耐熱?に、短冊切りにしたジャガイモ、たまねぎ、
ままちょびの順に重ねる。またその上に輪切りにしたジャガイモを
飾る。写真のように並べるとパーティ等で?栄えします。
３）上から?クリームを注ぎ、ままチョビが浸っていたオリーブオ
イルを回しかけて、オーブンで30分焼く。
４）パン粉をかけて、さらに15分焼く
ベネフィット（商品説明）
その商品を買ったら“どんな体験ができるのか”
ままチョビ
（瀬?内産ままかりのアンチョ
ビフィレ?）

参考：好ましい事例
ココホレ物産
http://shop.kkhr.jp/

?章を書くのは難しい

まずは
質＜量

?分の商品だからこそ
?分しか知らない情報を書ききる
ことが?切です

要点を押さえる
商品の唯?無?性や独?の視点で伝えてみる（差別化）
使?感を伝えてみる（写真で伝わりづらいことを補完）
購?検討者の不安を取り除いてあげる（品質?スペック）
?読してみる（聞きやすい＝伝わりやすい）

整理してみる
箇条書き分類分け起承転結

箇条書き
?オーガニックコットン
?草?染め
?肌触りが良い
?環境に優しい
?コーディネートに映える
?荷造りに便利

分類分け
?オーガニックコットン
?草?染め
?肌触りが良い
?環境に優しい
?コーディネートに映える
?荷造りに便利
→ 素材
→?体感
→?イメージ

起承転結
持続可能なモノづくりブランドなので素
材にはオーガニックコットンを使ってい
ます。また?も草?染めを?い、環境に
配慮していますし肌に優しく肌触りも
とっても?地よいです。
カラフルな?味が多いのでワンポイント
でコーディネートに映えますし、バッグ
以外の?途として荷造りに便利です。

＋αあるといいな！

カテゴリ管理

カテゴリ管理
商品毎にカテゴリを?中?３階層まで設定する事ができます。
商品をカテゴリ整理して?やすいショップにしましょう。

商品検索

商品検索フォームをショップページに?動的に表?。
※ご利?のテンプレートによって検索フォームの表?場所?デザインは異なります。
※HTML編集Appをご利?中でHTMLを編集されている場合、検索フォームは?動的に追加されません。
BASE Templateドキュメントをご確認の上、設定をお願いいたします。
※デザインテンプレートをご利?の場合、テンプレートによっては検索Appに未対応の場合があります。
商品検索
例）テンプレート「ハンモック」の場合：ショップページ左上に表?

レビュー

あなたのショップに購?者からのレビュー情報を表?。
レビューに対して返信することもできます。
レビュー

ラベル

商品にラベルを貼ることができます。ラベルは約100種類から
選択可能。強調したい商品にご利?ください。
ラベル

ラベル表?例

セール

指定した商品を1％単位でOFF表?。「％OFF」表?とともに、
??字でセール後の価格を表?できます。
セール

セール表?例

質疑応答

93
きれいなショップの共通項
ショップのテーマ（デザイン?
ロゴ）と商品写真（１枚?）の
トーン＆マナーが揃っている

スグ買いたくなる！また来たくなる！
フォローしてもらえるお店にしましょう！
94
まとめ
１ ??店舗はキレイですか？
２ ??商品写真は?やすい？
３ ??説明は丁寧ですか？
４ ??導線やPOPはありますか？

ご不明な場合はヘルプページを御覧ください
https://help.thebase.in/

狠狠撸

叠础厂贰クリエイティブセミナー

More Related Content

叠础厂贰クリエイティブセミナー