前回「無料でホームページを作成したい場合のオススメサービス」で友人にJimdoを紹介しました。
基本的には直感的な作業なので、すんなりサイト制作ができているようで安心しています。 そこで次に出てきた問題が以下のようなことでした。
ということで、オススメのソフトないですか？ という流れですが、サイトの立ち上げから画像作成に興味を持ってもらえるのは嬉しいですね。 一番はじめに出てきた「画像に文字を入れたい」という相談は、他の方からも多く寄せられる質問です。 自分で撮った写真に文字が入るだけでオリジナルなヘッダー画像やバナーになりますし、何より「自分でバナーを作った」という意識はウェブサイトへの愛着につながると思いますので、継続した運用のためにも良いと思っています。
今回は、「初心者でも簡単！おすすめの無料バナー作成ソフト5選」というタイトルで、いくつか無料バナー作成ソフトを紹介していきたいと思います！ ウェブサイト作成のサービスと同様に、無料で使えるソフトは結構たくさんあります。 バナー作成に特化したソフトではありませんが、バナー作成に利用できるという観点から選んでみました。
ここでは「ダウンロードしてそのまま使える」「ウェブサービスとして使える」、など導入もカンタンなソフトを5つに厳選して紹介したいと思います。 日本語パッチやプラグインが必要なソフトは操作が難しくなるため、今回は外しています。
※気になったサービスは今後解説を増やしていければと思います。
※この記事は2015年11月6日時点で各サービスに掲載されているデータを元にしています。
無料のオンラインバナー作成ツール「Canva」を追記しました。（2018年11月）
有料でもいいから、とにかく使いやすい「バナー作成ソフト」をお探しの方はこちらの記事で紹介しているのでぜひチェックしてみてください！
個人的なオススメになりますが、無料で機能的なソフトやウェブ上でカンタンに作成できる、基本的な機能だけで迷いが少ないソフト、など好みや目的にあわせて選べるような5選を考えてみました。 多機能だとどうしても覚えることが多かったり、簡素な機能だとかゆいところに手が届かなかったり・・・。 一長一短ではありますが、順番に見てきましょう。
Canvaは、バナー作成に特化したオンラインツール。
バナーのサイズが用途に合わせて自動で変化したり、無料で利用できる素材が豊富であったり、共有して編集したりと、使いやすい機能が充実しています。
バナー作成自体も、サイズを選ぶ、背景を決めてテキストを乗せて完成、とかなりスムーズ。
選べる素材も配置するだけでデザインが良いので、完成のクオリティも高い印象です。
操作も簡単なので実際にバナーを作ってみましょう。
「Canva」にアクセスし、ユーザー登録をしてログインをします。
はじめの画面では利用目的を選択しますが、私は個人を選んで進みました。
FacebookやGoogleのアカウントでそのままログインできるので簡単ですね。
ログイン後バナーの作成に進みます。
まずは「用途」を選びますが、検索ボックスに「バナー」のようにキーワードを入れると用途に合わせたバナーサイズが展開されるので、ここでは「Blogバナー」を選択しました。
サイズを選択するとデザイン作成の画面が別のタブで開かれます。
ここからはブログのアイキャッチ画像のような、背景画像の上に帯を引き、タイトルのテキストを入れる、形のバナーを作っていきます。
まずは背景にするための画像を左メニューの「アップロード」からアップしてみましょう。
画像のアップロードが完了すると、ボタンの下部にアップした画像が追加されています。
この画像を選択すると自動で右側のキャンパスに追加されるので、配置を決めます。
この時背景画像のサイズの拡大・縮小が可能なので、目的に合わせてサイズを変えてみましょう。
背景画像を決めたので、次に黒い半透明の帯を配置したいと思います。
左メニューの「素材」に移動して、「図形」の右側の「すべて」をクリックします。
今回は四角い図形を選んで、サイズを変えて、色を変えて、透明度を変える、という一連の作業をおこないます。
言葉にすると大変そうですが、Canvaでは直感的に作業できるので、実際に触ってみるとかなり簡単におこなえます。
この「素材」エリアだけで楽しめるくらい充実しているので、いろいろ選択して試してみると良いと思います。
図形を選択すると、先ほど背景画像を配置したキャンパスの上に、四角い図形が置かれました。
まず図形の色を黒くしてみます。
キャンパス左上の四角いエリアは色を変更するボタンでした。
クリックでパレットが展開されるので、今回は黒色を選択。
配置した図形が黒色に変わりましたね。
次はこの図形の透明にしていきます。
透明度の選択は右上のボタンが並んだエリアにあります。
透明度を「40」ほどにしてみました。
もし、実際にここまでの作業をこの記事を見ながらしている方がいたら、カンタンだな〜と思っているはず！
次にテキストを配置したいので、図形を横長にリサイズしてみたいと思います。
図形の周りにある白色の部分をドラッグするだけなので、かなり簡単です。
ここまででかなりそれらしいアイキャッチになりましたね。 それではテキストを配置してみましょう。
左メニューの「テキスト」から「テキストボックスを追加」を選択すると以下のような画面になります。
上部のボタンエリアにいろいろなものがありますが、書体を変えたり、色を変えたり、サイズを変えたり・・・この辺りは説明がなくても直感的に触れるものだと思います。
この記事のタイトルを入れてみました。
サイズを変えて、白色に、左揃いにして、先ほどの黒い帯の上に配置しました。（少し見づらかったので、透明度50に変更しています）
これであとはファイルをダウンロードするだけです！
右上の「ダウンロード」ボタンから今回は拡張子を「PNG」にしてダウンロードして見ます。
「共有」ボタンの左側にあるテキストは、このデザインの名称設定のようで、この名称のファイルがダウンロードされました。
今回はバナー作成にしましたが、こちらは任意で分かりやすい名称にしておくと良いと思います。
というわけで完成したバナーがこちらです！
もう少しバナー自体のサイズを大きめに設定してもよかったかな〜と思っていますが、すごく簡単にバナー作成ができました。
操作がスムーズで多くの場面で直感的に作業できる点がかなり好印象です。
サイズをカスタムでおこなう場合には、最初の選択画面で「カスタムサイズ」を選択しましょう。
有料会員になると利用できるテンプレートや素材の数が増えたり、フォルダなど無制限に利用できます。 プランの違いは公式ページが参考になりますので、気になる方はチェックしてみてください！
Pixlr Editorは、画像編集や描画機能を備えた、無料の画像編集ソフトです。 ウェブ上で完結するので、ウェブアプリという方が適切でしょうか。 インストールなしで利用できる点は、手軽にはじめられる魅力的なポイントだと思います。
機能は、画像の回転・反転、トリミング、リサイズ、色調・明るさ補正など、ほとんど「フォトショップ」と同じような機能が使えます。 多彩な「ブラシ」や「フィルタ」は有料のソフトとそん色がない印象です。 もちろん自分の画像の取り込みも可能です。 しかし、高機能なゆえに操作を覚えることが大変かもしれません。
「Pixlr Editor」にアクセスするとすぐにはじめられます。
「新しい画像を作成」から「サイズ」を選択して制作開始です。
ソフト自体の使い方はここでは割愛させていただきますが、無料素材や自分で撮影した写真素材をアップし、テキストを配置する、といった簡単な作業だけをおこなう場合でも十分に活用できるソフトだと思います。
「レイヤー」メニューから「画像をレイヤーとして開く」を選択し、ご自身のPCから画像をアップロードします。 この操作で、はじめに選択したサイズのキャンバスに画像が挿入されたかと思います。
テキストを入力するには、左側の「ツール」パネルから「A」と表示されたテキストツールを選択し、任意の文字を入力します。 基本的にはこのような作業で画像とテキストを配置することが可能です。
作成後は、「ファイル」メニューから「保存」を選択し、画像の形式を選んで完了です。 ウェブサイトで利用する場合は「JPG」「PNG」形式を選んでおくとよいでしょう。
これまでに画像編集ソフトの経験がある方には、多機能でも困ることなくすぐに利用いただけるかと思います。 逆に多機能だからこそ使いづらいという方は、ご自身で使う機能だけを覚えて運用するのもいいかもしれません。
また、会員登録やGoogle+でログインすることで、共有ライブラリーを利用することも可能なようです。 日本語のマニュアルはまだないようですが、英語の基本操作は以下のページにありました。 参考にならないかもしれませんが、リンクを掲載しておきます。
The basics of working with layers in Pixlr Editor
GIMP – The GNU Image Manipulation Program
次に選んだソフトはデザイン業界では有名な「GIMP」。 フォトショップの代替ソフトの代名詞でもあり、基本的な機能はフォトショップと同等だと言われています。 比較を考えると、メモリを結構使うせいか起動が遅かったり、デフォルトでは「CMYK」に対応していないなど、多少劣る印象ですが、バナー作成に必要な機能は十分です！ ただし、高機能なため「Pixlr Editor」同様に操作を覚えることが難しいところです。
プラグインによる「機能の拡張」や日常的に使う動作を「自動処理登録」できる点も魅力的ですね。 「CMYK」もプラグインで対応可能なようです。 デザイナーを目指している方や、フォトショップの代替品を探している方にもオススメです。 というと、難しそうなイメージですが、実際はどうでしょうか。 バナーの作成を順番にみていきましょう。
「GIMP」公式サイトからダウンロード、インストールしGIMPを起動します。 初回の起動には若干時間が掛かりますが、しばらくすると制作画面になります。
それではこちらでもアイキャッチ画像を作る流れをみていきましょう。 画像を挿入して、テキストを配置するという流れです。
「ファイル」メニューの「開く・インポート」から利用する画像を挿入します。
画像を挿入し、「画像」メニューの「画像の拡大・縮小」からリサイズした状態になりました。 次にテキストを配置する際に目立つように、黒い帯を入れてみます。
新規のレイヤーを追加し、適度なサイズに変更して下部に配置しました。 黒背景のレイヤーのサイズを変更し、透明度を「50」として黒の透過の帯を入れました。
配置した黒の帯の上に、ツールボックスから「A」テキストツールを使って文字を挿入します。 黒の帯に配置することで見やすいキャッチコピーになったかと思います。
最後に挿入した画像の高さを「切り抜き」ツールを利用して完成！ 「ファイル」メニューの「名前を付けてエクスポート」から今回は「PNG」形式で保存しました。
少し操作を覚える必要がありますが、比較的スムーズに作成できました。 画像の加工に強いソフトなので、こだわりたい方にもオススメできそうです。 また、作業中は快適に動きましたので、起動してしまえばストレスは少ない印象です。
詳細な使い方は日本語のドキュメントがありますので、以下のサイトを参考にしていただければと思います。
リサイズやトリミングなどのレタッチ機能や、自由な描画が可能なペイントソフト。 現在は「AzPainter2」となっています。 「インストール不要」で、レジストリも使わないためUSBメモリなどで持ち運びが可能です。
また、起動が軽快なことが特徴で、基本的な画像作成だけであればストレスなく気軽に使える印象です。 「AzPainter2」はシンプルな画面設計なので操作の面では入りやすいかもしれません。 さらに意外と自由な制作が可能ですので、これだけでも十分に満足できるソフトではないでしょうか。 シンプルですが、なかなか高機能なソフトですので、色々な機能を活用するとなると複雑になってしまう部分もありそうです。
「AzPainter2」をダウンロード、zipファイルを解凍すると「AzPainter2.exe」が表示されるので、こちらをクリックすると起動します。 先述のように、このexeファイルから起動が可能なため、外部に持ち運んで作業することも可能です。
こちらのソフトでもテキストを配置したバナー画像を作ってみましょう。 起動した画面ではパネルを自由に動かせるので、使いやすい配置にして進めて行きます。 まずは、背景にする画像を挿入してみます。 「ファイル」メニューから「開く」を選択して、利用したい画像をご自身のPCから取り出します。
このままではサイズが大きくなってしまいそうなので、完成予定のサイズにリサイズしてみましょう。 「編集」メニューの「イメージサイズ拡大縮小」にてサイズを50％にしてみました。 次に、テキストを配置するための黒の帯を作ってみます。
「レイヤ」パネルの一番左下の「追加」を選択して先ほどの画像の上にレイヤを作成します。 重ねていくイメージで、新規のレイヤには黒の枠を作っていくという流れになります。
新しいレイヤで「選択範囲」で黒い帯の枠を作り、右クリックで「塗りつぶし」を選択し、黒色の帯を作成します。 これのままですと真っ黒なので、黒色の帯を作った「レイヤ」パネルを「ダブルクリック」して「不透明度」を50に設定します。 あとは、この帯の上にテキストを配置していきます。 今度はテキストを挿入するために、「レイヤ」を追加してみましょう。
右上のパネルの「T」テキストツールを選択すると、文字入力の画面になるので設定をおこないます。 「パレット」パネルで色を選択することで、文字の色を変えることができます。 それではこの状態で「ファイル」メニューから「別名で保存」を選択し、「PNG」形式で保存をします。
もちろん一定の操作を覚える必要はありますが、比較的簡単でスムーズに作業ができる印象です。 今回のような画像作成であれば十分活用できるソフトです。 残念ながら公式のサポートは終了していますが、ヘルプページが残っていますので紹介します。
windowsの方限定にはなってしまいますが、デフォルトで「ペイント」というソフトが入っています。 windowsメニューの「アクセサリ」に入っているので、すぐに確認することができるかと思います。 画像な簡易な加工、テキストの配置など基本的な機能しか搭載されていませんが、基本的な機能で十分の方には便利なソフトです。 機能が必要最低限の方が使いやすい場合もあるので、自分に合うか一度試してみてることをオススメします。
ここでは、取り込んだ画像の上にテキストを配置し、アイキャッチ画像を作成してみたいと思います。 まずは、左上のメニューから「開く」を選択し、ご自身のPCから利用したい画像を挿入します。
やや大きい画像になってしまったので、サイズを50％ほど小さくしてみましょう。 右クリックの「サイズ変更」メニューから下の画像のようにパーセントを「50％」と設定します。
これで作成したいサイズになったと仮定し、次にテキストを入れていきます。 上部のパネルから「A」のボタンをクリックし、テキストの入力項目を表示させます。 今回は背景を黒、文字を白にして見やすいキャッチコピーにしてみたいと思います。
保存の方法は左上のメニューから「名前をつけて保存」を選択して完了です。
非常にざっくりとした説明をしましたが、windowsの公式サイトでペイントのヘルプがあります。 操作方法は以下のページに詳細な解説がありますので、ご利用の際にはぜひ参考にしてください。
オススメのバナー作成ソフト、5つ目はウェブブラウザ「Sleipnir」でおなじみのフェンリルさんのサービス「PictBear」。 ソフトの開発自体は終了していますが、十分活用できるレベルのソフトだと思います。
「PictBear」にアクセスしてダウンロード、「インストール」が必要なのでインストールをして「PictBear.exe」起動をします。
それぞれのパネルが移動できるので、お好みの作業スペースにカスタマイズできるのも特徴です。 ここでも画像に黒の帯とテキストを入れるアイキャッチ画像の作成を試してみましょう。 「ファイル」メニューの「開く」から画像を選択し挿入します。
「イメージ」メニューの「イメージのリサイズ」で画像の大きさの変更が可能です。 左のメニューにある「点線の四角」は選択ツールで、選択範囲をしていた部分の切り抜き（トリミング）も可能。
次に「レイヤー」パネル上で右クリックをし、新規のレイヤーを作成します。 先ほどのように「選択範囲」ツールを使って、黒の帯を入れる範囲を指定、さらに選択範囲を右クリックし「編集」から「塗りつぶし」をおこないます。 レイヤーパネルの「ダブルクリック」で不透明度を50％程度にすると、透過した黒い帯の完成です。
最後にテキストを入れるために「レイヤー」を新規作成、左メニューの「A」となっているテキストツールを選択します。 複数のレイヤーを使っている場合は「JPG」や「PNG」での保存ができないようなので、「レイヤーを統合」をおこなってから名前を付けて保存をします。
機能的なソフトなので、操作を覚えてしまえば苦にはならないかと思います。 個人的にはテキストツールがちょっと使いづらいかなぁという印象でした。 「ブラシ」や「プラグイン」も別途ダウンロードで用意されているので、PictBearが気に入った方は機能追加をしていくとより充実していきます。
こちらはバナー作成と少し違いますが、プラスアルファでご紹介。 「PictBear」と同じくフェンリルさんのサービス「Picky-Pics」。 ウェブブラウザ上で画像の出力までおこなえるサービスで、無料の会員登録のみで利用可能です。
まず作りたいサイズ（A4サイズの紙、名刺、ハガキ、プレゼン資料、Facebookのカバー写真）を選択します。
サイズを選んだ後は、初期のデザインを選びます。 この時「白紙」を選択することで、自由な画像レイアウト、テキストの入力・配置が可能となります。 用意されているデザインがどれも素敵で、そのままオリジナルのテキストを配置して利用できそうなくらいのクオリティです。
サイズと基本デザインを選んだ後は、画像素材やテキストの配置をおこないます。 操作パネルもシンプルな設計で、直感的に素材を選んだり、テキストを設定可能です。 「レイアウト」タブを利用することで、キレイな見栄えになるとレイアウトパターンのガイドが出現し、デザインがはじめてでも一定のクオリティに仕上がります。
出力の際、有料素材を選択している場合には、使用権として一定の金額が必要となります。 もちろん無料の素材やオリジナルの写真を利用することで、無料でチラシや名刺を作成することが可能です。 出力はPDF、画像（PNG）、Webページに書き出し、の3種類から選択します。
無料で使えますので、詳細はぜひご自身で触って確かめてみてください！ 登録後は「チュートリアル」も用意されているので、操作はこちらで覚えられそうです。 サイズの変更ができないので、ウェブで利用するためのバナー作成には向いていないように思いますが、サイト運営とともに実店舗の運営でDMやチラシなどを普段必要としている方には、利用価値のあるサービスかと思います。
無料バナー作成ソフトでは使いにくい、もっとカンタンにバナー作成をしてみたいという方には、ホームページ作成サービスの紹介記事でも挙げましたが、有料ソフトの「バナープラス」をオススメしています。
有料のソフトなので、使いやすさにこだわりがあり、カンタンな操作でバナー作成が可能です。 また、無料ソフトでは補えきれない「画像素材」が「4,400以上」収録されていることや、動画マニュアルやサポート掲示板などのユーザーサポートも魅力的なバナー作成ソフトです。 ぜひ一度こちらの紹介ページもご覧ください！
バナープラスの一番のポイントは「操作画面がシンプルでカンタン」というところ。 バナーのサイズを選ぶ、画像を選ぶ、文字を入れる、だけでバナーが作成できる点が「バナープラス」の使いやすいところだと思います。 気になった方はぜひ公式ページから機能の詳細を確認してみてください。
いかがでしたか？ 今回は初心者の方にも使いやすい無料のバナー作成ソフトを5つ紹介しました。 5つのソフトを知人に紹介したところ、オンライン作業が可能な「pixlr editor」をとりあえず使ってみるとのこと。 どれも無料のサービス、ソフトなので、それぞれ使ってみてから選んでみるのもいいですね。
絶対にこのソフトが良い！と決めるのが難しいので、5選とさせていただきました・・・！ 個人的に1つオススメを、となると今回改めて全てのソフトを触ってみて「GIMP」はスムーズに作業できてよかったです。 お使いのPCの環境によっては起動がストレスかもしれませんが、なかなか使いやすいと思いました。
実際にバナー作成ソフトを触ってみると、自分にとってどの機能がポイントなのかが分かってくると思います。 逆にこの機能はいらないなぁということも分かってくるかもしれません。
バナー画像はテキストだけのリンクよりも、よりインパクトのある訴求ができると思います。 もちろん、キャッチコピーもとても大事ですので、テキストだけが悪い訳ではありません。 しかし、画像や写真は見るだけで雰囲気を伝えたり、イメージを共有しやすい要素ですので、ウェブサイトを作成する際にはほとんどの方が取り入れていると思います。 特に「お問い合わせ」や「お申込み」のクリエイティブが変わるだけで、クリック率が向上した、という事例は数多くあります。 この機会にぜひヘッダー画像やポイントになるバナー画像の作成に取り組んでみてはいかがでしょうか。
This website uses cookies.