ショーピーパイ、ワードプレス、マゼントを利用して海外ショッピングモールを構築すれば、テーマを利用してデザインをセッティングすることになります。テーマスタイルを選択した後、実際に販売する製品やスライド、バナーイメージを入れ替える順にデザインをセッティングすることになります。このような過程で明確な企画やコンセプトがないと、デザインが気になることがあります。今回のポストでは統一感を維持するためにはどのような要素が必要かを調べ、ブランドを際立たせることができる海外ショッピングモールのデザインセッティングについて学びます。

整形化されたタイトル

ショッピングモールで使用される製品名であるタイトルは、検索エンジン最適化（SEO）でも最も重要な要素の一つです。タイトルはキーワードに基づいて構成する必要があり、サイトのみのルールを作成して使用する必要があります。国内のジマーケットやeBayでよく見られる「タイトル/キーワード1/キーワード2/キーワード3/キーワード4」形式は必ず避けてください。タイトル以外に必ず追加するキーワードがある場合は、記述（製品説明）やタグで追加してください。一般的なタイトル形式はブランド+製品名+スペック形式で、ブランドはタイトルの他にブランドセッションに追加しても構わないので、直接製造した製品ならタイトルにブランドを必ず記載する必要はありません。

ショッピングモールに適した画像

モールデザインの8割は写真です。写真は製品画像とバナー画像に分けられます。海外ショッピングモールのデザインを研究してみると、写真で海外ショッピングモールと国内ショッピングモールの違いを感じることができます。海外のショッピングモールはほとんどが製品中心の写真を使用し、国内ではモデル中心のカットを多く使用しています。この部分はファッション、美容スイートでさらに際立っています。スタイルナンダなどのソーホモールが国内ショッピングモールのトレンドをリードしていくと、ファッションショッピングモールのデザインがフォーマット化されたようです。このようなデザインフォーマットはスターモデルを作り出し、モデル中心のフォーマットを固めました。モデル中心のデザインは韓流文化が流行が東南アジアでは肯定的かもしれません。しかし、北米、ヨーロッパ圏をターゲットにするなら、製品メインイメージだけは製品写真で構成するのがデザイン的に望ましいです。 Amazonや他のマーケットプレイスも代表イメージは白い背景で作られた製品イメージを要求するため、今後の製品リスティング連動にもリソースを減らすことができます。

ウェブサーフィン中にうまく見える画像を見たことがありますか？プヨン画像は画像最適化ができずに現れる現象でスライド画像やバナー画像を製作するならば1024px画像やショピパイの場合は最大画像サイズの2048px画像を使用しなければ鮮明な画像を提供することができます。ほとんどのテーマは、自分のセクションに高画質の画像だけをアップロードすると、サイズは自動的に調整してくれる機能を提供しているので、スライド画像を制作する場合は、必ず高画質の画像をアップロードすることをお勧めします。また、製品イメージは同じサイズのイメージを使用する必要があります。製品イメージも自動リサイズ機能を提供しますが、統一感のあるデザインのためには必ず同じサイズのイメージを使用することをお勧めします。

▲一定サイズの商品画像

メインカラーの選択

画像（写真）以外のサイトのコンセプトを決める要素は、ショッピングモールのメインカラーです。カラーはブランドロゴに加え、サイトのデザインコンセプトを示す重要な要素でしょう。カラーはブラック、ホワイトを除いて2～3色を決めて使うのが基本です。メインカラーでバーバナーやスライドのメインヘッダなどに使用し、サブカラーでCTAボタン、フッター、その他バナーイメージなどに使用する式です。統一感を与えるカラー選択で最も簡単な方法は、ロゴ色に合わせてメインカラーを決めることです。ロゴとメインカラーだけを統一して使用しても、ショッピングモールでは十分に統一感を維持できます。メインカラーを決めたら、そのカラーのカラーコードを保存しておき、モールから発送されるメールやフライヤーなどにも共通して使用できます。

▲カラーコード

• #FFFFFF - ホワイト
• #2D2D2D - ダークグレー
• ＃50B83C - グリーン

3種以下のフォント使用

フォント選択の最も重要な要素は可読性です。どんなにデザインが優れたフォントだと読みやすさが落ちたら、使用を止めるべきです。さらに、過度のフォントの使用は多者の毒になる可能性があります。フォントは3つ以下で使用しなければならず、統一感を維持できることを忘れないでください。フォントファミリを使用している場合は、よりバランスの取れたデザインを構成できます。もちろん、フォントも同じサイズで使用する必要があります。

▲ open sanse フォントファミリーを使った異北デザイン (source:canva)

▲フォントファミリーを使用したバナーデザインの例

ショーピーパイをはじめとするほとんどのショッピングモールビルダーが提供するテーマは、テーマで提供するフォントの他にGoogleフォントのような外部フォントが連動しており、コーディングなしで簡単な設定だけでもフォント変換が可能です。しかし、Less is moreという言葉があるように、きれいなデザインに読みやすさを失わないためには、過度のフォントの使用は控えてください。
_
上記のタイトル、画像、色、フォントのみを統一するように構成しても、統一感を維持できます。しかし、ショッピングモールの主人公は製品があるので、あまりにも過度なカラー選定や複雑なデザインは、指摘して製品に集中できるようにデザインになるはずです。 4つの要素でショッピングモールブランディングの基礎を作ってください。