初心者でも簡単!プロみたいな見栄えの良いバナーを作成する方法

ホームページ作成, 中小企業・個人事業主がホームページで集客するには?

ホームページやブログを運営する上で

  • ヘッダー画像
  • フッター画像
  • 製品・サービスをPRする画像
  • キャンペーン情報の画像

上記のような、バナー画像は必ず必要になりますが…

「初心者がプロがデザインしたようなバナーを作るのは難しい」
「プロにバナー作成を依頼しているが費用が …」

初心者がプロみたいなバナーを作るのは難しいと思い込んでいませんか?

あるソフトを使えば、初心者でも簡単にプロ並みのバナーを作ることができます!

この記事では、さまざまなバナー作成ツールを使いこなした私がおすすめする、初心者でも簡単にできるバナー作成の方法を解説していきます

バナー作成ソフトは、PowerPointやKeynoteなどのプレゼンテーションソフトがおすすめ

おすすめのバナーソフトは、結論から言うと「PowerPoint」や「Keynote」などのプレゼンテーションソフトがおすすめです

初心者でもバナーが簡単に作れると謳っているソフトは多いですが、素人っぽい見た目になったり、画像のサイズを自由に指定できなかったりと、何かと不便な点が多いです

プロはIllustratorやPhotoshopなどの、プロ向けのソフトを使用していますが、初心者にはかなり難しいです

PowerPointやKeynoteはバナーを作るソフトではないですが、これらのソフトが実はプロっぽいバナーが作れ、PowerPointはビジネスでも日常的に使っている人も多く、これらのソフトでバナーを作成するのがおすすめです

Keynoteでバナーを作成する方法

ここでは、Keynoteでバナーを作成する方法を解説します

私はMacユーザーなのでKeynoteで解説しますが、PowerPointでも同じような機能はあるので、PowerPointでも同じバナーを作ることができます

Keynoteで新規作成を選択し、適当なテンプレートを選択します

Keynoteでバナー作成

最初から設置されている、編集エリアは削除しましょう

Keynoteでバナー作成

最初にバナーサイズの四角形を作成します
メニューの「図形」から「正方形」を選択します

Keynoteでバナー作成

右側のメニューから「配置」タブの「サイズ」の項目で、画像のサイズを指定します
今回は300×300サイズのバナーを作成したいと思います

ちなみにこれはマメ知識ですが、iPhoneなどのRetinaディスプレイの端末に、300×300の画像をそのまま表示させると、画像がボヤけます

例えば、300×300の画像をRetinaディスプレイで鮮明に表示させたい場合は、倍の解像度の600×600の画像を用意し、ホームページやブログでは300×300に縮小して表示させれば、Retinaディスプレイでも画像が鮮明に表示されます

四角形の塗りつぶしは、無しに設定します

Keynoteでバナー作成
Keynoteでバナー作成

枠線は表示させましょう

Keynoteでバナー作成

これで300×300の枠線が表示され、この中に画像や文字などを挿入して、バナーを作成していきます

Keynoteでバナー作成

次にバナーの背景に表示させる画像を選択します
上部のメニューから「メディア」「選択…」を選びます

Keynoteでバナー作成

バナーで使いたい画像を選択します

Keynoteでバナー作成

枠線を表示させるために「最背面へ」を選択します

Keynoteでバナー作成

枠線が表示されるので、枠内にちょうど良い感じに画像が収まるように、画像のサイズを調整したり、画像を移動させたりしてください

Keynoteでバナー作成

次に吹き出しを挿入していきます
「図形」から「吹き出し」を選択します

Keynoteでバナー作成

塗りつぶしを「白」に設定します

Keynoteでバナー作成

枠線を表示させ、枠線を色と太さを適当に設定します

Keynoteでバナー作成

こういう感じで吹き出しが表示されるので、吹き出しの位置やサイズを調整しましょう

Keynoteでバナー作成

吹き出しの中のテキストを作成します
メニューから「テキスト」を選択します

Keynoteでバナー作成

こういう感じでテキストが表示されるので、テキストの文字を入力します

Keynoteでバナー作成

テキストのフォント、サイズや色を設定して、吹き出しの中のテキストを作成していきます

Keynoteでバナー作成

このような感じで、強調するポイントを文字の色や大きさを変更して、インパクトのあるテキストを作成していきましょう

Keynoteでバナー作成

テキストのフォントや、配置にはこだわってください
MSゴシック、MS明朝、メイリオなどのWindows標準のフォントは、素人っぽさが出てしますので、必ずキレイなフォントを使用してください

先ほどと同じように、バナー中央に表示させるテキストを作成します

Keynoteでバナー作成

「回転」の項目を設定すると、斜めのテキストも簡単に作成することができます

Keynoteでバナー作成
Keynoteでバナー作成

ドロップシャドウを設定することで、文字に影をつけることができます
画像の上にテキストを重ねる場合は、文字に影を入れたり、枠線を入れないと文字がとても見づらくなるので注意してください

Keynoteでバナー作成
Keynoteでバナー作成

裏技的な方法ですが、テキストをコピーして

Keynoteでバナー作成

「アウトライン」にチェックを入れて

Keynoteでバナー作成

フォントの色を白にすると

Keynoteでバナー作成

このように白い枠線だけのテキストができます

Keynoteでバナー作成

白い枠線のテキストを、普通のテキストの上に被せると、枠線のあるテキストを作ることができます

Keynoteでバナー作成

白い枠線のテキストを、コピペしていくつも重ねていくと枠線が明確になってきます

Keynoteは標準で、テキストに枠線を付ける機能が無いのが難点ですね
テキストに枠線をつける処理は、Keynote以外のソフトでやった方が良いかもしれないですね

こういう感じで中央のテキストが完成しました!

Keynoteでバナー作成

最後にバナー下部のテキストを作成していきます
「図形」「正方形」で四角形を作成します

Keynoteでバナー作成

四角形の位置や、サイズをバナーの幅に合わせて調整していきます

Keynoteでバナー作成

四角形の色を選択します

Keynoteでバナー作成

不透明度を100%以下に設定すると、四角形が半透明になり、下にある画像が薄っすらと表示されます

Keynoteでバナー作成

すると半透明の四角形が作成でき、プロのバナーっぽい感じが出てきます

Keynoteでバナー作成

その上にテキストを作成していきます

Keynoteでバナー作成

これでバナーは一応できましたが、画像が枠線からはみ出しているので、枠線からはみ出た部分はカットしましょう
画像を右クリックして、「マスクを編集」を選択します

Keynoteでバナー作成

赤丸の6箇所のポイントをドラッグして、画像を枠線に収まるように調整してください

Keynoteでバナー作成

こういう感じで枠内に収まるように調整します
「完了」を選択すると、薄っすらと表示された画像の部分は、カットされます

Keynoteでバナー作成

最後にデータを画像として出力します
「ファイル」「書き出す」「イメージ…」を選択します

Keynoteでバナー作成

出力したい画像のファイル形式を選択します

Keynoteでバナー作成

保存したい場所を選択すると、画像ファイルとして出力されます

Keynoteでバナー作成

ただこれだと枠外の白い部分まで画像になっているので、枠外の白い部分はカットします

Keynoteでバナー作成

流石に、Keynoteでは白い部分はカットできないので、画像編集ソフトで白い部分はカットします
私は「Skitch」というフリーソフトで、白い余白をカットしています

こういう感じで、白い余白をカットしてバナーの完成です
慣れれば、ここまで15分ぐらいで作成できます

Keynoteでバナー作成

これが実際に作成したバナーですね
中央の文字は、Keynoteで太い枠線をつけることができないので見づらくなっています
このあたりの処理は、別のソフトで行った方が良さそうです

Keynoteでバナー作成

300×300のサイズで作成したので、Retinaディスプレイで見ると、少しボヤけていると思います

この場合は先ほど述べた通り、倍の解像度の600×600の画像を用意して、300×300に縮小して表示させてください

バナーのデザインはどうするか?

「PowerPointでバナーを作成する方法はわかった。けど肝心のバナーのデザインはどうするのか?」

PowerPointを使いこなせても、肝心のバナーのデザインをどうしたら良いのか迷うと思います

バナーのデザインは一から考えるのではなく、既存のバナーをアレンジしましょう

バナーデザイン専門ギャラリーサイト | レトロバナー
https://retrobanner.net

上記のサイトからいいな〜と思うバナーデザインをKeynoteで再現して、アレンジしましょう

バナーデザインのセオリーは決まっています
いろいろなバナーを見ると、どれも同じようなデザインになっていることに気がつくと思います

奇をてらってオリジナルのデザインにするのではなく、上記のサイトを参考にしてバナーの定石をおさえたデザインにしましょう

まとめ

PowerPointやKeynoteを使って、レトロバナーのバナーをアレンジすれば、初心者でもかなりのレベルのバナーが作成できるので、ぜひ挑戦してみてください!

  • バナー作成は「PowerPoint」「Keynote」などの、プレゼンテーションソフトを利用する
  • すでにあるプロがデザインしたバナーを、PowerPointやKeynoteで再現して、それをアレンジする
集客に困っている中小企業で経営者、個人事業主の方へ、集客できるホームページを作成いたします

「デザインの良いホームページを作ったが、いつまでたっても集客できない」
「何十万の費用をかけて、ホームページを作ったのに、1年間に数回しかお問い合わせが来ない」
と嘆いているあなたへ、月額9,800円で集客できるホームページ+ブログを構築いたします

お問い合わせ
  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

関連記事一覧

このホームページが役に立ったと思ったら、クリックをお願いします


ネット広告・マーケティングランキング

 

またLINE@でも、役に立つ情報を発信しているので、友達登録よろしくお願いします!

友だち追加

友達登録すると、無料特典で集客できるホームページの作り方集大成の資料がダウンロードできます!

またQRコードからも、お友達登録できます

Web沖縄のQRコード

カテゴリー

月別記事一覧