WEB上でブラウザで無料で扱える世界的人気画像処理ソフト『Pixlr Editor(ピクセラエディタ)』を使い、自力で10分程度で作り、Wordpressにアップロードするまでの流れを解説していきたいと思います。
記事下の動画でも詳細に実演解説をしています。
表示したいバナーのサイズとアスペクト比を大まかに決める
出典:iborc.com
サイドバーに表示して誘導したいのならば、アスペクト比(画像の縦と横の長さ(ピクセル数)の比)は「5:3」か「3:2」で良いでしょう。
Wordpresのテンプレートのウィジットの設定で最終的に「横300px:縦180px」などと手動で入力して表示サイズを変えることが出来ますので、初めに「横1000px:縦600px」など編集しやすい大きなピクセルサイズの画像で作成していきます。
また他社のWEBサイトやブログ記事に広告を出稿するなどの場合は、Googleアドセンスのレスポンシブで記事の合間などに最も表示されやすい細長い長方形タイプを作る必要があります。
この場合はピクセルサイズは「横730px 縦90px」程度、最初に大きいピクセルサイズの画像で制作・編集しておきたい場合はアスペクト比は「10:1.2」程度にしておく必要があります。
各ASP(アフィリエイト・サービス・プロバイダー)でサイズも違いますので、より詳細なサイズは広告出稿するASPに各自で問い合わせて確認をして下さい。
使用する背景や画像素材をライセンスフリーで調達する。
出典:google.com
自社の系列サイトやメールマガジンなどのコンテンツの宣伝バナーでしたら背景は無料画像素材サイト『Pixabay.com』を利用すると良いでしょう。
無料画像素材サイトは沢山ありますが、中でも最も高品質で有料級の画像が80万枚以上も商用利用可能で帰属表示の必要がない『Pixabay.com』は世界でもとても人気が高く筆者が最も気に入って利用しているサイトですので、これを読んでいる方にも太鼓判を押してお勧めします。
次に宣伝したいサイトやコンテンツの画像を切り抜いて貼っても良いですし、イメージ画像として連想できる人物やモノを『Pixabay.com』のカテゴリーから選んだり、検索窓から検索して切り抜いて使用しても良いでしょう。
元々切り抜かれた透明レイヤーのPNGファイル画像が欲しい場合は、検索エンジンで英語で「apple png」などと入力して画像検索を掛けます。
この際に注意してよいのが画像の著作権の問題ですが、Googleの検索窓で検索をしてメニューバーの「画像」をクリックして画像一覧が出てきた際にメニューバー(右上)にある歯車アイコンの「オプション」をクリックして出てくる「検索オプション」をクリックし、一番下の「ライセンス」⇒「営利目的を含め自由に使用、共有、または変更できる」を選択して「詳細を検索」で検索をし直せば、ライセンスフリーの画像が沢山出てきます。
いよいよPixlrでバナーを制作する
出典: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を自由自在に使いこなせるようになりましょう。
📹動画で観る
☥IBORCを応援してください。