SNS担当の方やWEBライターさん必見！
たったの3ステップで簡単バナーづくり
こんにちは！ omatsuです。
イベントの告知や活動レポートなど記事で情報を発信するとき、クリック要素として重要視されているのが、
「SNSでシェアした際に表示されるイメージ画像」。
そんなSNSの投稿用画像で、いろんな人が頭を抱えているそうです。
「自分でSNS投稿用画像のバナーデザインをしなければならない・・・！」
最近「デザイナーさんに発注している時間もないし、コストも掛けられないので、自分でどうにか作っています・・・。」という切実な声をよく耳にします。
しかも普段デザインのお仕事をメインにしていなかったりするので、Photoshopなど画像編集のアプリケーションを持っていなかったりするのが現実なんですよね。
なかにはPowerPointなど資料作成ツールで無理やりバナーを作っているなんて話もちらほら・・・。
こ、、、これは思った以上に大変そう！
「なにかお役に立てることはないかなぁ～」と思い、今回バナーづくりの “はじめの一歩” となるようなSTUDY記事を作ってみました。入門編なのでPhotoshopは使用しませんよ。ご安心ください！
今回使用する画像編集ツールは、「PIXLR EDITOR」。
見た目も操作もPhotoshopそっくりなフリーのWEBアプリです。
つくる手順はたったの3ステップ！早速作ってみましょう～！
白地バナーに素材を貼りつける
今回はfacebook記事シェア用バナー（OGPイメージ）を作ってみたいと思います。
「SNS投稿用画像サイズがよく分からない～！」という意見も多かったので、白地のSNS投稿用サイズ画像を用意しました。ぜひこれを使って作ってみて下さいね。※決まった記事投稿用サイズがある場合は、新規でサイズを入力して白地画像をご準備下さい。
【画像ファイルの開き方】
メニューの［ファイル］→［画像を開く］で、使用する画像をすべて開きます。
① facebook白地バナー
② 背景イメージ
③ デザイン素材
背景イメージを、白地バナーに貼りつけてサイズ調整します。
次にデザイン素材を、背景イメージの上に重ねてサイズ調整します。
【貼りつけ方法】
イメージ画像を全選択（Ctl＋A）→選択をコピー（Ctl＋C）。
そのあとに、白地バナーに選択をペースト（Ctl＋V）して貼りつけ完了。
【サイズ調節】
メニューの［編集］→［自由変形］で画像サイズを調整できます。
Shiftキーを押しながら画像の端っこをドラッグすると、変倍を防げます。
あとは、左端のツールバーにある［移動選択ツール］を使ってレイアウト位置を決めましょう。
文字を入力する
ツールバーの［タイプツール］を選択し、文字を入力します。
テキスト、フォント、サイズ、スタイル、色、整列など、まとまって表示されるのでとっても編集が楽です。
今回ワークショップイベントの告知バナーという設定なので、イベント名と日付を入れてみました。
※facebookに広告を出す場合、画像の20%を超えるテキストを使うことはできないのでご注意です！
ちなみに今回使ったフォントは「Cabrito Inv Norm Bold」というフリーフォント。
カーニングに遊び心を効かせたフォントは、オールドスタイルの雰囲気を演出してくれます。
普段からいろいろなフォントをダウンロードしておくと、シーンに合わせていろいろ選べるので、デザインする時にとっても便利ですよ！箱庭でも、フリーフォント紹介記事あるのでぜひチェックしてみてね。
バナーを書き出す
最後にレイアウト調整をしたら、画像を書き出します。
名前（ファイル名）、フォーマット（書き出し形式）、クオリティー（画質）を選択して［OK］。
SNS投稿用画像の書き出しは、画質80が最適なのでぜひ覚えておきましょう～。
facebook用バナーの完成～！
今回文字の後ろに使った黄色いひし形のデザイン素材は、ステンシルというアナログ作業で作ったものなので、独特な“かすれ”が、風合いのあるデザインに仕上げてくれていますよ。
単調になりがちのタイムラインも目を引くデザイン要素を入れると、見た目もアクセス結果も変わるはず！
SNSの投稿って毎日するものだから、いろいろ変化をつけて楽しんでみるのが一番です！
いろいろ作ってみるとソフトの操作も慣れると思うので、ぜひトライしてみてくださいね～。
箱庭がつくるデザイン素材のお店「haconiwa DESIGN STORE」
すでにお気づきの方もいるかもしれませんが、今回使ったデザイン素材、箱庭で買えちゃうんです！
スタンダードなデザインに対し、水彩、シンプル、万年筆、えんぴつ、アナログの5テイストの素材が販売中。
デザイナーさんだけではなく、いろんな人に使ってもらいたいな～と思い、使いたいところにペタッと貼れるPNG形式（背景が切り抜かれた画像）で収録してみました。
実は今回のSTUDY記事バナーや見出しなど、「haconiwa DESIGN STORE」のデザイン素材を使用して作ってみたものなんですよ。
いろいろ使えるスタンダードコレクションは、持っておくとなにかと便利でオススメです。
次回はバナー作成のコツ中級編をお届けしたいと思います～！どうぞお楽しみに～！