タグ別アーカイブ: バナー

ネットショップ用の注意喚起バナー作製の基本

こんにちは。nekonomoridesignのyoshyです。
ネットショップ用にバナーの作製などを日常的にやっている私なのですが、もうかれこれ5年以上そういう仕事をしていると、ちょっとお客様に注意喚起したい事があれば、フォトショップなどですぐにバナーを作ってその日のうちに貼り付けて・・・というのをやっているのですが、その画像はいたってシンプルに仕上げるようにしています。

残りわずか!などの短期間にしか出さないバナーに時間はかけない。
目立つ文字・配色・バランスでさっと手早く作る。

たとえば、今日、在庫が残り少ないと連絡があった商品のページには、「残りわずかです!」とお客様に注意を促すバナーを目立つように配置しました。
文字だけではやはり「視認性」(目に付く)のが少なく、見た人の印象に残らないので、

  • 印象に残りやすい配色(おおむね3色以内)
  • 印象に残る色
  • 印象に残るカラーバランス
  • 文字配置

を意識してつくりました。

※作ったバナーがこちら↓

目立つバナー
目立つバナー

赤を基準に白と黄色と黒で色数少なく、印象に残って欲しい文字を特に強調した文字デザインにした、極めてシンプルで極めて簡単なバナーを10分ほどで仕上げて即アップしました。

パソコン用だけではなく、スマートフォン用にもきちんと配置しよう

今回、私の管理しているのがヤフーショッピングだけだったのですが、ヤフーショッピングの該当の商品ページには、スマホ用の編集ページがあるので、スマホ用の編集にも、もちろんこのバナーを付けました。

いまや、スマートフォン用のページの編集もきちんとする時代

スマホ用のアプリが出ているほど、ネットショッピングはパソコンとスマートフォンで利用している人は増えています。
ですので、こういった注意喚起のバナーなども、スマホ用にもきちんと設定するのが望ましいと思います。

たかがバナー、されどバナー。

バナー1つで、お客様に伝わるメッセージは大きく変わります。
それぞれ、そのバナーの持つ役割に応じたものをすぐに用意できるかが、時間の流れの速いネットショップで成功していく鍵だと思います。

それでは、今日はこのあたりで!

ヤフーショッピングのページで、トリプル契約をしていなくても画面の左右に縦長のバナーを表示させる方法

こんにちは。nekonomoridesignのyoshyです。

ヤフーショッピングに無料で出店している方で、トリプルの契約無しと言う方もいらっしゃるのではないでしょうか?
でも、トリプルの契約をしていなくても、なんとなく「売ってるよ!」感を出したいと思うのは出店者としての本音だと思います。そこで、何とかできないかなーと試行錯誤したのがこちら。。。。

<ul>
<li style=”background-color:transparent;
background-image:url(画像のURLをここに記入);background-repeat:repeat-
y;background-position:top
left;background-attachment:scroll;height:7000px;top:230px;z-index:auto;left:0px;position:absolute;width:画像の横幅の大きさを指定;min-height:100%;visibility:visible;display:block;”>
<a href=”リンク先のURLを記入”
style=”display:block;min-height:100%;width:画像の横幅の大きさを指定;visibility:visible;height:5000px;text-indent:-9999px;”>
</a></li>
</ul>

こんな感じのタグを、ヘッダーのフリースペースに入れると出てきます。
ちなみに、これは左側に出したいときのタグです。

ヤフーショッピングの通常版(トリプル契約なし)で、CSSスタイルシート属性を適用したいときは、直接 styleで指定してしまう。

ヤフーショッピングなどのモールでの場合は、通常契約の状態だとスタイルシートは使えません。しかし、裏技的な事になりますが、直接style属性で設定する事はできます。

たとえば・・・

<p>スタイルを適用したいなー・・・</p>

<p style=”font-size:12px;color:#FF0000;font-weight:bold:line-height:20px;”>

スタイルを適用したいなー・・・

</p>

という記載は可能と言うことです。

直接CSSを適用しているので、スタイルシートの最も便利な「汎用性」「更新のやりやすさ」という利点はまったく活かされない

当然ではありますが、外部スタイルシートなどに直接CSSを設定できる場合、そのスタイルシートさえ書き換えれば、各ページも自動的に切り替わるというのがスタイルシートの利点でもあります。

しかし、直接style属性でcssを適用している場合は、当然ながら、書くページの変更をしないといけません・・・。

なので、css設定でしかやりづらい表現をしたいときなどは、この方法を使用しても良いと思いますが、できれば、外部スタイルシートを使用したページ作りができるような契約をしているほうが良いかなとも思います。

家賃無料・自社サイト系のクレジットカード決済よりも決済手数料が低いヤフーショッピングを最大限利用していこう

ヤフーショッピングで取り扱っているクレジットカード決済は、実は、EC-CUBEなどの自社サイト系で契約可能なクレジットカード決済サービスよりも手数料が安かったりします。(契約内容にもよるところはあります)

アフィリエイト負担等ちまちましたものはありますが、ヤフーショッピングは、限りなく0円に近く、それでいて集客もまあまあしてくれるサイトです。
正直なところ、詐欺だのナンだのが流行している時代に、モール以外の自社サイト系でしかも、大手じゃない小さなネットショップでショッピングをする人の絶対数は限りなく少なくなってきている事を考えても、ヤフーショッピングに出店する事はメリットになると思います。

(ヤフーショッピング+自社サイトはまだOK)

無料の範囲でも色々とできる事はあると思いますのでそれを追求し、広告費0円、固定費0円でどこまでやれるかこれからも頑張っていきたいと思います。

それでは、今日はこのあたりで。

photoshop Tips セールのバナーに良く使われる星みたいなギザギザのセールシールみたいな感じをフォトショップで書く方法 簡単作成方法

こんにちは。nekonomoridesignのYoshyです。今日は、photoshopの技術アップ講座?をしたいと思います。

セールの時期になりましたね。この時期になると、ウェブ製作現場やネットショップのウェブデザイナー、Webページ作成の人が良く頼まれる仕事のひとつに、「バナー作成」があります。

よくある、「セール用バナー作って」というアレです。
あまりに良く出くわす場面なので、ちょっと簡単に作る方法を伝授したいと思います。
※photoshopでバナー制作をしている人向けです。

フォトショップで簡単にセールバナー(セールっぽいアイコン)を作る方法
全photoshopバージョン対応です。

まず、フォトショップを立ち上げて、新規作成をします。
大きさはどんなサイズでもかまいません。今回は作り方だけの伝授です。

立ち上げたら、左のツールバーから、カスタムシェイプを選択

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

カスタムシェイプに、新しいシェイプを追加します。
まずは、現在のシェイプの横にある三角形を長押ししてください

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

長押しすると、追加するシェイプリストのグループが出てきます

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法


バナーと賞

という種類を選んでください。選ぶと、何か聞いてきます。
今のシェイプ一覧に追加の場合は「追加」置き換える場合は「置き換え」をしてください。
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

上の写真の場合は、【追加】をしました。
追加した中に、なんかギザギザっぽい丸があると思うのでそれを選択。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

ツールバーが、カスタムシェイプツールがアクティブ(選択された状態)になっているのを確認します。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

カスタムシェイプツールの色などをここで設定します。
旧バージョン(CS以下)の場合、もしかしたらこういうのないかも知れませんが、なければ、描画色の色を変えてください。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

書きたい色が決まったら、一度書いてみましょう。
一瞬で、ギザギザのやつができましたね。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

ギザギザはかけたので、その上に、文字を打っていきます。
セールっぽさを出すために、あえて赤色にしました。
オブジェクトの上で

SALE

とうちます。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

すると、こんな感じで完成しました。

いかがでしたでしょうか?意外と簡単なものなのです。

カスタムシェイプは優秀なツール。便利に使って時短作成デザイナーになろう。

デザイナー=手作りでないといけない、という考えをお持ちの方もいらっしゃるかと思います。確かにそうなのですが、クリエイティブに時間を全部使える、ゆっくりデザインが出来るというデザイナーも案外少ないと思います。

特にウェブデザイナーの場合、バナーなど簡単なものを作成する場合は、スピードも要求される場面が多くあります。

そんな時、こういった便利ツールをうまく使って、クリエイティブの作業を効率よく、かつ、クリエイティビティに行うこともデザイナーの腕だと思います。

カスタムシェイプは追加も可能。ネットで探せばいい物が結構出てくることも。

photoshop カスタムシェイプ

でネットで一度検索してみてください。
案外、いろいろ出てきます。矢印や足跡、マーク、シンボルなど・・・
探せば山ほど出てきます。

カスタムシェイプは自作も可能。Illustratorなどが得意な人はオリジナルのカスタムシェイプも自作できちゃいます

案外使い勝手の良いカスタムシェイプ。
仕事などで良く使うアイコンぽいような形の物があるのであれば、ベクターデータ(illustratorのようなので書かれたやつ)を毎回コピーして引っ張ってくるとかであれば、いっそのこと、カスタムシェイプとして登録してしまったほうが早いと思います。

時短でデキるデザイナーになりましょう♪

それでは今日はこのあたりで!