新型コロナウイルス拡大防止策による在宅勤務のご案内

誠に勝手ながら、新型コロナウイルスの拡大防止策の一環として3月27日より在宅勤務とさせていただいております。
そのため、代表番号(03-6416-5195)にお掛けいただいた場合、誠に申し訳ございませんが、お電話が繋がりません。お問い合わせをご希望のお客様に関しては 当サイトの問い合わせフォームよりご連絡を下さいますようお願い申し上げます。

問い合わせフォームはこちら

【Photoshop初心者必見】お店の休業・配送に関するお知らせバナーを作る方法!

1.はじめに

Photoshop初心者のEC担当者様向けPhotoshop講座第三弾。
「AdobeのPhotoshopを契約しているけど、うまく使いこなせない・・・。」
「使いこなしたいけど、何から始めたら良いのかわからない。」
「シンプルでわかりやすいバナーをサッと作りたい」
そんなECご担当者様は多いのではないでしょうか?
今回のコラムではお店の休業期間と配送についてご案内する「シンプルなお知らせバナーを作る方法」をご紹介します!

2.作り方

Photoshopは、1つの画像を作るのに何通りもの作り方ができるツールです。
今回は初心者向けということで、見出しと本文のみのシンプルなお知らせバナーを作り方をご説明します。

2-1.まず、フォトショップを開きましょう。

「新規作成」をクリックして、制作したいアイコンの「サイズ」を設定します。
合成する画像にもよりますが、今回はサイズを「1000px × 400px」、カラーモードを「RGBカラー/8bit」、 カンバスカラー「白」に設定してください。

設定をすると、指定されたサイズのカンバスが表示されます。

2-2.上部のウインドウを開きましょう。

今回使用したいウインドウは、
・プロパティ
・レイヤー
・文字

この3つです。 これらのウインドウを表示させてから作業を進めると作業がスムーズです。 (すでに該当のウインドウが表示されている場合は、割愛してください)

2-3.早速バナーを作っていきましょう。

今回は、初級編ということで、見出しと本文のみのシンプルで読みやすいバナーを作っていきます。

2-3-1. 背景を作る

バナーの背景を作りましょう。
ツール内にある四角の書かれたボタンを長押しすると表示される「長方形ツール」を選択してください。

「長方形ツール」はその名の通り、四角や長方形を描くツールです。
選択したのち、カンバスの上で1度クリックをすると、長方形のサイズを指定することができます。
今回は、1000px × 400pxで設定します。

◆図形の色を変える
プロパティウインドウから、塗りと線の色を変更することができます。
今回は、トップページでも目立ちやすいように、白背景に赤い縁取りをつけてみましょう。

◆図形を移動させる
移動ツールを選択した後、長方形をドラッグして、カンバスの真ん中に配置します。
長方形にピンク色のガイド線が十時に表示されたら、ピッタリ真ん中の目印です。

◆ロックをかける
この後の作業中に長方形がズレてしまわないように、ロックをかけると作業がスムーズです。
長方形を選択したまま、レイヤーウインドウの鍵のマークをクリックすると、動かなくなります。
(ロックを解除する際は鍵マークを再度押します)

同様に、見出しの背景を作りましょう。
再度「長方形ツール」を選択し、今度は十字のカーソルを左からそのまま右までドラックし、手動で長方形を作ります。
長方形のサイズは横書き1行のタイトルが入るイメージでざっくりと決めます。
今回は赤の見出しにしましたが、プロパティウインドウから色の変更もできます。

こちらも背景と同様、ロックをかけておきましょう。
さあ、これで土台となる背景を描くことができました!

2-3-2. タイトルを入れる

いよいよテキストを入れていきます。
まずは見出しにタイトルを入れましょう。

文字ツール選択後、カンバスの中をクリックすることでテキストを入力することができます。
今回は「夏季休業のお知らせ」と入力します。

2-3-3.タイトルを移動し、サイズを整える

打ち終わったタイトルを見出しの赤背景の上まで持っていきます。

◆文字を移動する、文字サイズの拡大縮小をする
文字ウインドウからサイズを変更するかor移動ツールで文字を選択した後、シフトを押しながら マウスを動かすことで大きさを調整することができます。

◆フォント・カラーを変える
移動ツールで文字を選択した後、文字ウインドウから変更ができます。
今回は赤背景の上に乗せても読みやすいように、
・フォント→ヒラギノ角ゴシック
・カラー→白
に設定します。

2-3-4.本文を入れる

ここまできたら、あと一息!
バナーのメインとなる本文を入力していきましょう。
今回入れる参考文章はこちらです。

「2021年8月13日(金)正午~8月16日(月)は誠に勝手ながら休業とさせていただきます。
休業中のご注文につきましては17日(火)から 順次発送させていただきます。
お客様にはご不便をお掛け致しますが、 何卒ご理解くださいますよう宜しくお願い申し上げます。」

タイトルを入力した時と同様に、文字ツールを選択し、本文を入力します。
今回、本文は黒文字にします。

◆入力後のテキストのバランスを調節する
フォントの行間、行揃えはプロパティウィンドウで変更が可能です。
バナーの枠内に綺麗に収まるよう行間を整え、今回は行揃えは中央揃えに設定します。

ここでバナーの読みやすさをグッとアップさせるワンポイント!
テキストの休業期間の箇所のみを赤に変更し、目立たせてみましょう。

移動ツールを選択した状態で、テキストをダブルクリックすると、編集可能な状態になります。

「2021年8月13日(金)正午~8月16日(月)」の箇所をカーソルをドラックしながら選択し、プロパティウィンドウでカラーを赤に変更します。


パッと見ただけで休業期間がわかる、読みやすいバナーになりました!


2-3-5. 保存方法

「ファイル」から、「保存」を選択し、ファイル名を記入後psdデータを保存してください。
PSDデータが保存できたら、jpgファイルも保存しましょう。
「ファイル」から「別名に保存」を選択して、ウインドウの下部にある拡張子を選ぶタブからjpg を選び、保存してください。

3.最後に

いかがでしたか?文章で読むとなかなか難しいのでは?と思う方もいるかもしれませんが、実際にPhotoshopで作ってみると意外に簡単に作れたのではないでしょうか。

今回は、初心者講座としてシンプルな夏季休業のお知らせバナーを作りましたが、「台風による 配送遅延について」「商品の欠品について」「価格変更について」など、テキストを変更するだけで様々なバナーが作れます。

お知らせバナーはトップページや商品ページ内に設置するだけで、来店された多くのお客様に重要 なお知らせをご案内できる便利な宣伝物です。今回のようなバナーを活用し、お店のサービス向 上に役立ててみてはいかがでしょうか。

ぜひ施策の一つとしてお試しください。

 

お取引先様一覧(一部) -多くのお客様に弊社サービスを導入頂いております-

楽天 Amazon Yahoo

ユーグレナ・オンライン様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

チャップアップ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

クリアネオ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo

ベルタ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

ブレスマイル様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

アクセサリー ジュエルVOX 様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo Qoo10

セレクトショップMOMO様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

美マルシェ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo Qoo10

プロ愛用ジェルネイル通販ジェルネ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天

出島オンライン様

運営代行、コンサルをさせて頂いております。

楽天

スタイリンカー様

運営代行、コンサルをさせて頂いております。

Qoo10

ル・フタール様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

Smart Beam Laser正規代理店 MONCHUA様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアラボ様

コンサル、各種制作をさせて頂いております。

自社サイト

VENOSAN SHOP様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

MUKUMI 様

オウンドメディアの構築、コンサルをさせて頂いております。

Qoo10

弾性ストッキングファクトリー様

運営代行、コンサル、各種製作をさせて頂いております。

制作 広告運用

東京血管外科クリニック様・ハンドベイン(手の血管)手術

広告運用代行、コンサル、各種製作をさせて頂いております。

制作

メンズスタイル様

同梱冊子の製作をさせて頂きました。

製作 広告運用

東京血管外科クリニック様・下肢静脈瘤手術

広告運用代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアプラス様

コンサル、各種制作をさせて頂いております。

楽天 Qoo10

Hera-Witch様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo

フラコスメ様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

beauty air様

オウンドメディアの構築、コンサルをさせて頂きました。

制作

株式会社ペンギントレード様

コーポレートサイトの制作をさせて頂きました。

オウンドメディア

ブランド図鑑.com 様

オウンドメディアの構築、コンサルをさせて頂きました。

製作

こころ卓球様

商品ページの製作をさせて頂きました。

制作

株式会社メディソリーゾ様

商品ページの製作をさせて頂きました。

オウンドメディア

住宅ローンSOS様

オウンドメディアの構築、コンサルをさせて頂いております。

制作

マハロネイルサロン 様

HPや販促チラシなどの製作をさせて頂きました。

制作

マハロヌイロア 様

HPや販促チラシなどの製作をさせて頂きました。

製作

アトリエKT-2様

HPや販促チラシなどの製作をさせて頂きました。

制作 Qoo10

海外ブランドならサウスコースト 様

運営代行、コンサル、各種制作をさせて頂いております。

Amazon Yahoo 制作 Qoo10

レディースシューズ ALETTA(アレッタ)様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

美甘麗茶 楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

palclair楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天

靴ネット通販コア様

コンサルティングをさせていただいております。

SNS

SHOEZOO様

インスタグラムの運用をさせて頂いております。

楽天 Yahoo 製作

ヘアケアフェスタ様

コンサル、各種制作をさせて頂いております。

製作

カジヤ様

各種制作をさせて頂いております。

楽天 制作

ブルービーセレクト 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

Rifle楽天市場店 様

運営代行、コンサル、各種制作をさせて頂いております。

Yahoo コンサル

PARFUM 様

コンサルティングをさせて頂いております

楽天 制作

カルトラーレ 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

きらりセレクション 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 Yahoo 製作 コンサル

ブリッサリットル 様

コンサル、制作をさせていただいております。

楽天 Yahoo 製作 コンサル

インテローグ様

コンサル、制作をさせていただいております。

楽天

PENGUIN VINTAGE様

運営代行、コンサルをさせて頂いております。

その他サービス