ebay輸出のブログ / File exchangeの使い方 / 海外ブログ / 海外ネットショップ作り

5分で!オリジナルebayテンプレートを改造しよう:色の変更

      2016/06/16

Robot

当サイト海外行ったことないけどebay輸出オリジナルebayテンプレートを改造してくコーナーです。

作った作った言ってますけど、このebayテンプレートはちょっと知ってる人からすれば1時間もあれば作れる内容で、プロのウェブデザイナーなら10分かからずに作るでしょう。(僕は2時間以上かかりましたけどね!)

まー、ようはめっちゃシンプルってことです。だから誰でも改造できます し、改造できるように作りました。ご自身のオリジナルに改造してほかの人と差別化して頂きたいのです。

今回は基本の「き」:色を変更してみましょう!5分以内で終わります。

オリジナルテンプレートの場所

そもそもですが、テンプレートの本体をみなさん知ってる前提で話をする必要があるので、当サイトのオリジナル ebayテンプレートをまだご存じない方は、こちらでご確認願います。もちのロン、タダです。無料です。

スポンサーリンク

オリジナルebayテンプレートの色を変更する方法

original-temp-eye

色を変更するには、テンプレートの中身2か所をイジります。好きな色コードへ上書きするだけです。

企業の配色を参考に色を変えてみる

現在のメインカラーは黄色ですが、それを「水と生きるSUNTORY 風」のカラーに変更してみましょう。

suntory

サントリーで使われているカラーコードは以下の3色

  • ベースカラー:#ffffff (白)
  • メインカラー:#abdcea
  • アクセントカラー: #5bc2dc

これを、テンプレートに入ってるカラーコードと入れ替えます

入れ替える場所は、テンプレート全体を見て上から17行目と24行目。background ~~~ #○○○の所を上記コード#○○○と入れ替え!

できました?

色を変更後の見た目

入れ替えると以下のようにテンプレートの色が変わります。

水と生きるSUNTORY 風

suntory-fu_colorsuntory

いかがでしょうか。

フォントの色と松田翔太が不足してるせいか、ちょっと水と生きる感には欠けますがまあこんな感じです。タイトル部分のカラーと、それ以外の部分のカラーを色コードの入れ替えだけで変更できるわけです。簡単でしょー。

爽やかな商品取り扱ってるから、俺(私)もこの色にするぜ!って方は以下のコードをコピペしたらオッケー!(background 色変えてるだけ)

 

ついでにいくつか企業イメージのカラーから配色をいじります。

企業イメージごとのテンプレート変化まとめ

企業のウェブサイトはイメージカラーがブランド戦略で決まっています。ebayでもブランド戦略は意識したいものですね。配色を参考にしてみましょう。

自然が好きです。 伊藤園 風

  • ベースカラー:#ccead7
  • メインカラー:#ffffff (白)
  • アクセントカラー: #00a040

itoen_fuitoen-2

 

乾杯をもっとおいしく。 サッポロビール 風

  • ベースカラー:#f0ebdf
  • メインカラー:#ffffff (白)
  • アクセントカラー: #d7cca6

sapporo_fusapporo-2

 

FUN TO DRIVE, AGAIN. TOYOTA 風

  • ベースカラー:#ffffff (白)
  • メインカラー:#f5f5f5
  • アクセントカラー: #e60a1e

toyota_futoyota-2

これメインとアクセントが逆だと思った方、正解です。逆にしてください。

SHISEIDO 風

  • ベースカラー:#f5f5f5
  • メインカラー:#ffffff (白)
  • アクセントカラー: #df0068

shiseido_fushiseido-2

資生堂はフォントが命なのでちょっと弱いですが、世界で3秒に1個売れてるベアミネラルファンデーションなども同じような配色ですし、化粧品を扱ってる人向けですね。


もっと他の企業カラーない?って方は :配色を参考にしたサイト

その他のカラー:HTMLカラーコードはこちら

配色を変更することは、見る人の感情を動かす一歩です。色をバカにしてはいけません。世界共通で「信号の止まれ=赤」なのは理由があります。色が持つ力は大きいので、是非商品にあった色をつけてくださいね。

ちなみに、

購買意欲を最も刺激するのも「赤色」と言われています。楽天は赤ばっかりですね笑

  • 購入単価を上げたい場合は「黒」や「紫」
  • 女性をターゲットにする場合は「ピンク色」
  • 消費者行動で「ついで買い」を促進しやすいのが「白色」

参考サイト:そのほかの購買意欲を高めるための「色」についてはこちら

しかしちょっとお待ちください。

色の変更は差別化への一歩ではありますが、コレだけだと「オリジナル感」は弱いですね。

フォントの変更も簡単にできるテンプレートなので、次回はその点を改造してみます。

色の変更方法まとめ

テンプレート内の「background:#○○○;」

この○○○を商品に沿った色コードへ変更するだけ!簡単でしょ

yottaの思うこと

この記事にかかわらずですが、HTMLって書くとなぜかめちゃくちゃアクセスが落ちます。クリックされなくなるのです。

HTMLって難しくないです。先入観なく簡単なところから始めたら、麻雀の役覚えるぐらいすぐにマスターできます。符計算じゃないですよ。役覚えるだけ!

例えが悪いかもですが、麻雀ばっかりしてた僕が今ではHTMLばっかり酒飲みながらいじってるので、HTMLは麻雀好きな人におすすめ!とか意味分からんこと言って今回は終わります。

スマホで見たときの表示内容を改造する方法はこちら

The following two tabs change content below.
海外行ったことないし英語もできないけど海外オークション ebay をエンジョイしてます。ebay 楽しいので、みんな始めたら良いと思ってる。続いてる理由のすべてがこのブログの中にあるよ。

 - ebay 輸出