Site Overlay

本格的なバナーを無料で簡単に作る

バナーは、サイト上にあるリンク付きの画像の事を示しますが、バナーを直訳すると「旗」とか「横断幕」、「のぼり」と訳せます。バナーは、実店舗で見かけるような「のぼり」でお店を目立たせて集客するものと同じような役割があります。そのためバナーは、印象的かつ明確に情報を伝え確実にリンクへと誘導する必要があります。

バナーをデザインするには、バナーデザインの知識やルール、Photoshopのような有料のデザインツールアプリが必要となります。しかし最近では、Canvaという無料のWEBツールを使うことで誰でも簡単に本格的なバナーを作ることが出来ますのでご紹介します。

Canvaとは?

オーストラリア発のデザインWEBツールで、膨大なテンプレートとフォトストック、フォントを使い簡単にバナーを作ることが出来ます。テンプレートは、バナーだけでなく、ポストカード、プレゼンテーション、請求書など多種多様なテンプレートがありますので様々な用途でデザインできます。さらに、完全に日本語化されていますので誰にでも使いこなすことが出来るようになっています。

Canvaでバナーを作る

Canvaを使うには、はじめにサインアップをして無料のアカウントを作成します。GoogleアカウントやFacebookアカウントのアカウントを使うかメールアドレスを使って登録します。二回目からはこの作業は不要です。

「学ぶ」のバナーは、YouTubeサムネイルのサイズ (1280 × 720px) が最適ですので、ソーシャルメディアのタブの「YouTubeサムネイル」をクリックします。検索に「YouTubeサムネイル」と入力して「空白」からでもスタートできます。

テンプレートのリストの中から気に入ったサムネイルをクリックします。今回は、WordPressの基本講座のバナーを作りますので以下のテンプレートを使ってみたいと思います。

作成するバナーのイメージとは違う背景写真ですので別の写真に変更します。
変更するには、左にある写真のタブをクリックして背景に使う写真を探します。検索ボックスに使いたい写真のキーワード入力して探すと見つけやすくなります。使用する写真のサムネイルを右のテンプレートにドラッグ&ドロップします。ドロップする場所は、背景写真の隅の方にすると背景写真が入れ替わります。

テキストの変更は、テキストの上でダブルクリックをすると変更できます。テキストのレイアウトが気に入らない場合は、テキストをクリックして右上のごみ箱アイコンをクリックします。

新しいテキスを挿入するには、左のテキストタブをクリックして「見出し」「小見出し」「本文」のいずれかををクリックします。フォントの組み合わせを使えば綺麗にデザインされたテキストを挿入することもできます。気に入ったフォントの組み合わせを見つけ、ドラッグ&ドロップします。今回は、以下のようなフォントの組み合わせを使ってみます。

フォントの組み合わせを挿入するとテキストの色は黒になります。今回は、背景写真のバランスからするとテキストの色は白に変更したいと思います。カラーを変更したいテキストをクリックし、上にあるテキストの色アイコンをクリックします。左のカラーパレットから白をクリックして変更します。

フォントの種類も変えてみましょう。テキストをクリックし上のフォント名をクリックします。左にフォントのリストが表示されますのでお好きなフォントのフォントをクリックして変更します。今回は、見出しを「源暎ラテミン」に変更してみました。日本語のフリーフォントがたくさん使えるのは本当に便利です。

バナーが完成したらファイル名を変更してバナーの画像をダウンロードします。ファイル名は、上の赤で囲った部分で変更します。ファイル名は、半角英数文字の方が扱いやすいので半角英数で入力しましょう。

最後にバナー画像をダウンロードします。右上のダウンロードボタンをクリックし、ファイル形式を確認します。ファイル形式は、PNGもしくは、JPGのいずれかをお勧めします。ダウンロードボタンをクリック画像をダウンロードします。

いかがでしょうか? 作り始めて10分もしないうちにこのような素敵なバナーを作ることが出来ました。ぜひ、簡単でかつ本格的なバナーを作る場合は、このCanvaをお勧めします。

0