Sponsored Link

広告バナーや宣伝バナーの作りかた
出典:iborc.com

サイドバーに表示して誘導したいのならば、アスペクト比(画像の縦と横の長さ(ピクセル数)の比)は「5:3」か「3:2」で良いでしょう。

Wordpresのテンプレートのウィジットの設定で最終的に「横300px:縦180px」などと手動で入力して表示サイズを変えることが出来ますので、初めに「横1000px:縦600px」など編集しやすい大きなピクセルサイズの画像で作成していきます。

また他社のWEBサイトやブログ記事に広告を出稿するなどの場合は、Googleアドセンスのレスポンシブで記事の合間などに最も表示されやすい細長い長方形タイプを作る必要があります。

この場合はピクセルサイズは「横730px 縦90px」程度、最初に大きいピクセルサイズの画像で制作・編集しておきたい場合はアスペクト比は「10:1.2」程度にしておく必要があります。

各ASP(アフィリエイト・サービス・プロバイダー)でサイズも違いますので、より詳細なサイズは広告出稿するASPに各自で問い合わせて確認をして下さい。

ライセンスフリー、商用利用、自由に変更可能な画像を Google画像検索で探す方法
出典:google.com

自社の系列サイトやメールマガジンなどのコンテンツの宣伝バナーでしたら背景は無料画像素材サイト『Pixabay.com』を利用すると良いでしょう。

無料画像素材サイトは沢山ありますが、中でも最も高品質で有料級の画像が80万枚以上も商用利用可能で帰属表示の必要がない『Pixabay.com』は世界でもとても人気が高く筆者が最も気に入って利用しているサイトですので、これを読んでいる方にも太鼓判を押してお勧めします。

次に宣伝したいサイトやコンテンツの画像を切り抜いて貼っても良いですし、イメージ画像として連想できる人物やモノを『Pixabay.com』のカテゴリーから選んだり、検索窓から検索して切り抜いて使用しても良いでしょう。

元々切り抜かれた透明レイヤーのPNGファイル画像が欲しい場合は、検索エンジンで英語で「apple png」などと入力して画像検索を掛けます。

この際に注意してよいのが画像の著作権の問題ですが、Googleの検索窓で検索をしてメニューバーの「画像」をクリックして画像一覧が出てきた際にメニューバー(右上)にある歯車アイコンの「オプション」をクリックして出てくる「検索オプション」をクリックし、一番下の「ライセンス」⇒「営利目的を含め自由に使用、共有、または変更できる」を選択して「詳細を検索」で検索をし直せば、ライセンスフリーの画像が沢山出てきます。

バナー制作
出典:YouTube この記事の動画
Pixlr Editor(ピクセラエディタ)』のトップページで「新しい画像を作成」をクリックし、上記の説明の通りピクセルサイズを指定します。
使用する背景画像やイメージ画像などを操作パネルのメニューバーの「レイヤー」をクリックし「画像URLをレイヤーとして開く」で背景として使用する画像の「画像アドレス」をコピー&ペーストします。「画像をレイヤーとして開く」でPCやクラウドに保存した画像を読み込んでも構いません。

各レイヤーごとにメニューバーの「編集」⇒「自由変形」でサイズを調節し、それぞれの画像が合体して違和感がないように配置しなおし、レイヤーパネルの「レイヤースタイル」で影を付けたり光沢を付けたりして際立たせていきます。
最後に操作パネル左の「ツール」パネルから「T(テキスト)」を選択して、宣伝したいサイト名やコンテンツ名、伝えたいキャッチフレーズや誘導文句を入力します。

メニューバーの「ファイル」⇒「保存」⇒でPCやクラウドに任意の名前で画像を保存します。

最後に仕上げとして『Pixlr Express(ピクセラエクスプレス)』で画像全体の色合いを再設定し直しエフェクトやオーバーレイ、枠を付ければ完成です。

Wordpressのサイドバーに画像を表示させる方法
出典:todaynews.jp
あらかじめメニューバーの「+新規」⇒「メディア」で制作したバナーをアップロードしておき、後々になってでも画像を探せるように「タイトル」にバナーの名前を分かり易く記しておき、右クリックして「画像URLをコピーする」で画像アドレスをコピーしておきます。

自社のWordpressサイトなどに宣伝バナーを掲載しアクセスを流したい場合は、Wordpressのダッシュボードのメニューから「ウィジット」をクリックし、Wordpress必須プラグイン「Jetpack」のウィジットである「画像(jetpack)」をサイドバーにドラッグ&リリースします。

「画像(jetpack)」の↓矢印マークをクリックすると「画像URL」や画像表示サイズである「幅:高さ」、「リンク先URL」などを入力する窓が出てきますので入力をして「保存」をクリックします。

WordPressを表示してしっかり表示されているか、サイズは正しいか、リンク先への接続は問題ないかをチェックして、微調整が必要な場合は再びダッシュボードの「ウィジット」をクリックして、しっかりと表示されるまで入力値に変更を加えていきます。

しっかりと表示されれば完成です。

バナー制作からWordpressにアップロードするまでは、慣れれば最短10~15分で作業完了します。PixlrやWordpressを自由自在に使いこなせるようになりましょう。




📹合わせて観たい

ViVidWood(ヴィヴィドウッズ)デザイン&画像制作 完全動画マニュアル
ヴィジュアルコンテンツの重要性
デザイン力を高める方法
最も簡単にプロ級画像が創れる黄金の方程式
魅力的なフリーフォントをPCに追加しよう
フォントでロゴをデザインしよう
PNG画像で絵を創りだす
自由変形と自由歪ませをマスターしよう
特定の部分だけに色を付けよう
ガラス、銃弾、炎を表現しよう
写真をアニメやコミック風に変えよう
文字の大きさや位置を変える
画像に本のタイトル風の帯を付けよう
クリスタルな表現方法を学ぼう


画像を重ね合わせる
ポップな画像を創ろう
破く表現方法
ホラー風の画像を創ろう
画像編集の基礎を始めから丁寧に
画像編集の基礎を初めから丁寧に
画像編集の基礎
画像編集の基礎
画像編集の基礎
画像編集の基礎を始めから丁寧に
画像編集の基礎を始めから丁寧に
画像編集の基礎を始めから丁寧に
画像編集の基礎
写真加工 やり方
Photoshop vs pixlr
youtube サムネイル画像 作り方
サイトのヘッダー画像を作る
Wordpress 記事 アイキャッチ画像 作り方 サイズ
広告バナーGIFの作り方
WoodsPress(ウッズプレス)ワードプレスWEBサイト作成完全動画マニュアル
WoodsEquip(ウッズイクイップ)WEB制作の為の便利なツールと必要知識
WoodsTalk(ウッズトーク)


☥IBORCを応援して下さい。