他のサイトと統一したデザインをMagnetで作る

　
すでにYahoo!ストア以外のネットショップ・公式サイトを運用中の方向けに、『可能な限り近いデザインを作るにはMagnetのどこを操作すべきか』ポイントを【４つ】ご紹介いたします！

 

１. 色を揃える

まずは、背景色と文字色・アクセントカラーを揃えます。これだけでもおおよそ同じイメージのデザインにすることができます。

カラーコードが分からない場合は

他サイトで使用している色がわからない方はChrome拡張機能のカラーピッカーをインストールしましょう。

• カラーピッカーをインストールする
  (こちらの拡張機能は、他社さま提供の機能となりますので、Magnetサポートでは操作方法をご案内する事は出来かねますこと予めご了承ください。)

Magentで色を設定する

カラーコード(#で始まる6桁の英数字)が取得できたら、Magnetの「ストアトップを作る」機能からそれぞれ色を設定しましょう。設定できる箇所は下記の通りです。

全体の背景色	デザイン作成画面上部の「背景・フォント」 操作ヘルプ：ページをカスタマイズする
全体の文字色	デザイン作成画面上部の「背景・フォント」 操作ヘルプ：ページをカスタマイズする
パーツごとの配色	各パーツの「レイアウト」メニュー 操作ヘルプ：レイアウトを調整する
一部文字色	テキストエディタの「文字色」 操作ヘルプ：テキストを入力する

 

２.バナーを移す

次に、他サイトで使用しているバナー・写真を掲載します。Yahoo!ストアに貼っても支障がないバナーは、そのままYahoo!ストアでも使いましょう。

• ご注意
  著作権の関係上、必ずご本人さまが運営しているサイトでのみご操作ください。またご本人さまであった場合も、外部が作成した画像は制作会社さまへ使用の確認をお願いいたします。

1.バナーを保存する

保存したいバナーにカーソルを合わせ右クリック、「名前を付けて画像を保存」でPCに画像を保存します。

2.バナーを掲載する

Magnetの「画像」パーツを使って、保存したバナーを掲載します。

• 操作ヘルプ：画像を登録する

 

３.同じ商品コーナーを用意する

他サイトと同様に、Yahoo!ストアでも同じ切り口の商品紹介コーナーを用意しましょう。

• 操作ヘルプ：トップページに商品を並べる

 

４．余白・レイアウトを揃える

全体の統一感を出しつつ他サイトと雰囲気を合わせるには、「余白とコンテンツの並べ方」も統一することが重要です。

余白を調整する

パーツ前後の余白	パーツ内の左右の余白

各パーツの編集画面へ入り、「レイアウト」メニューで余白を調整することができます。実際の操作方法は下記ヘルプページをご参照ください。

• 操作ヘルプ：パーツの「余白」を設定する

レイアウトを調整する

横並び数「４」	横並び数「２」

各パーツの編集画面へ入り、「レイアウト」メニューで横並び数を調整することができます。実際の操作方法は下記ヘルプページをご参照ください。

• 操作ヘルプ：レイアウトを調整する

 

サポートへご相談ください！

「このサイトのこのデザインをMagnetで作る方法が分からない...」「どうしても他サイトと統一感が出ない...」など、デザインでお困りのことが御座いましたら、お気軽にサポートまでご連絡ください。HTMLサンプルのご用意なども対応いたします。

• Magnetサポートへ問い合わせる

お送りいただく情報

• 他サイトのURL
• (デザイン作成の場合)該当デザイン部のキャプチャ画像など箇所の詳細
• 「ストアトップを作る」機能の操作・更新をしてもよいか否か

尚、大変恐縮ながら「売れるデザインのアドバイスが欲しい」などのお困りごとにはお応え出来かねますのでご容赦ください。