最近、当社から発売したBASEテーマ「スターターパック ( Starter Pack )」のご案内ばかりで恐縮です。

新たに始めた事業なので強めにアピールしておりまして...💦

 

さて、このブログで最初にBASEデザインテーマ「スターターパック」のご紹介をさせてもらったときに、ページ内で色バリエーションを画像で掲載しましたので、ご覧になった方は若干いる?のではないかと思ってますが、この記事ではもう少し詳しくご説明させていただきます。

「スターターパック ( Starter Pack )」のカラーバリエーション

カラーバリエーションと言っても、デザインの背景を変えているだけで、レイアウトなどは変更していません。

ただ、シンプルで余白も大きめに取ったレイアウトで画像も大きく配置しているので、背景色が変わっただけでも、印象がずいぶんと変わってきます。

 

背景の色 白

白背景のスターターパック ( Starter Pack )デザイン

白い背景では、色のイメージから明るく清潔な印象を受けますよね。

画像が大きく配置されていることもありますが、視覚的な混乱を減らし、商品の画像を際立たせて見せてくれます。

全体のデザインがシンプルで一貫し、すっきりとした印象を与えてくれます。

背景の色 黒

黒背景のスターターパック ( Starter Pack )

黒い背景(濃いめの色)では、落ち着いた高級感やモダンな印象になります。

ジュエリーや高級ブランドなど、エレガントな商品を取り扱うネットショップ様に最適です。また、文字色を白に設定することで文字の見やすさを確保でき、さらに商品の魅力を見ているユーザーに訴求することができます。

 

背景の色を濃くすると、文字の色がそのまま(黒)では、文字が見えなくなってしまいます。

そんな時は、上記の通り、文字の色を白に変更するなどの対応が必要です。

このテーマでは、濃い背景色の場合の文字色などを調整する機能が備わっており、管理画面のテーマ設定に「文字を白にする※濃い背景色用」という設定があるので、それをONにするだけで簡単に対応することができます。

 

BASEテーマの文字を白にする機能

 

背景の色 ベージュ

ベージュ背景のスターターパック ( Starter Pack )

ベージュの背景を設定すると、ナチュラルで人々に親しみやすい雰囲気を作り出し、全体的に暖かみと柔らかさを感じさせてくれます。

ベージュという色からカジュアルイメージを与えますが、大きな画像と余裕を持った余白でレイアウトされているので、洗練された印象を与えてくれます。

ファッション、家具、手作り品など幅広い商品に適しています。

 

背景の色 グリーン

グリーン背景のスターターパック ( Starter Pack )

グリーンの背景は、自然と健康などからくイメージがあり、クリーンでフレッシュなイメージを与えてくれます。

また、最近のエコへの取り組みも連想させるので、エコフレンドリーな商品や健康食品だけでなく、生活に優しいアイテムも似合っています

BASE管理画面での背景色設定

上記でご紹介したカラーバリエーションは、当社制作のBASEテーマ「スターターパック ( Starter Pack )」のページで、デザインサンプルとして見ていただくためのもので、この4色しか設定できないわけではありません。

下記のような管理画面で、特別知識やHTMLなどがわからなくても簡単に設定することができます。

 

「カラーから選ぶ」では設定したい背景色をクリックするだけで設定できます。

「パターンから選ぶ」では、色と柄が設定された四角をクリックするとその色とパターンが背景に適用されます。

 

まとめ

ネットショップは、取り扱う商品や訴求したいブランドのイメージによって、背景色などを最適化する必要があります。

そうは言っても、全ページを一度に変更するとなると「かなりの手間がかかるんだろうなぁ」と思ってしまいがちですが、BASEでは管理画面から簡単に設定すればすぐに変更できます。

当社が制作したBASEテーマ「スターターパック ( Starter Pack )」も同じように簡単設定で、背景色を変更できます。さらに、シンプルかつ余裕を持った配置と大きな画像で、カラーバリエーションと相まって様々なイメージを与えてくれます。これは、可愛すぎるデザイン、キレイすぎるデザインなど、基本デザインが強すぎる場合ではイメージがマッチせず、雰囲気が出しにくくなります。

様々な商品が取り扱われることを想定し、色バリエーションへの対応も考えて設計したテーマだからこそ実現できるものです。

 

ネットショップをオープンする時、既存のショップをリニューアルする時は、是非一度、当社制作のBASEテーマ「スターターパック ( Starter Pack )」の活用をご検討ください!

 

BASEテーマ「スターターパック」についての詳細情報

BASEデザインテーマ販売開始のご案内

https://www.ryu-raku.co.jp/blog/archives/2191

 

BASE DESIGN MARKET  スターターパック ( Starter Pack )

https://design.thebase.com/detail/106

 

デモショップ

https://easy.thebase.in/

 

解説ページ

https://www.ryu-raku.co.jp/basetheme/starter/