高い画像作成ソフトやツールを使っても、これが分からないと先へ進めません。

しかし、バナーは面積が小さい範囲内のデザインとなるため、レイアウトパターンが限られてきます。

パターンを押さえておくと、写真や色を変えるだけで応用できるので簡単です。

では早速、よく見かける3つの基本パターンをご紹介します。

全面写真レイアウト

商品写真などをバナーサイズ全体に敷くパターンのレイアウトです。

見せたい物（この場合は化粧品）を中心をさけて左右どちらかに少し寄せ、できた余白にアイキャッチを配置します。（この場合は「春の新色登場」の丸い部分）

メインのコピーは上か下に横突き通しで配置します。

素材写真に左右されるのでうまくいく場合と難しい場合がありますが、写真、アイキャッチ、コピーの3点のバランスをとるだけで決まるので、シンプルにまとめやすいレイアウトです。

上下分割レイアウト

この場合は下の黒い部分にあたりますが、上下のどこかでばっつりと写真とコピーのエリアを分断するレイアウトパターンです。

ハーフハーフで分けるとダサいので、どちらかに比重を持たせましょう。サンプルの様に1行で収まるようにしたり、1:2などが分かりやすいです。

分割したそれぞれの範囲内および全体のバランスをとるようにするのがポイントです。

バナーを見る人の視線は、左上から右下に向かって動くので、「こちら」などのアクションにつながるボタン的要素は右下に置くとおさまりが良いです。

左右分割レイアウト

左側に写真を配置してビジュアル的な訴求をし、右側にコピーやアクション要素を配置するレイアウトです。

縦長のバナーにはあまり向いていません。

フレッシュ感のあるバナー画像作成のポイント

色でフレッシュさを感じてもらう

そのままの表現で分かりにくいかもしれませんが、フレッシュな色合いを選ぶことがまず基本となります。作成動画のように、ライムグリーンとイエローなどであったり、パステル系の色、ピンクや水色、クリーム色などもフレッシュな印象演出ができます。

なるべく人物の写真をつかう

フレッシュというのは人物の印象によるところも大きいので、爽やかな人物写真を使えるとベストです。人間は、人の写っている写真は目につきやすいので、アイキャッチ効果もあります。シンプルなインテリア写真や若葉や植物の写真などでも近いイメージを出せる事がありますが、物は静的なイメージですので、表情や動きの感じられる人物写真の方が、躍動感などからフレッシュなイメージ演出につながります。人物写真が難しい場合は犬などの動物写真でも近いイメージの演出が出来そうですね。

アクセントとなるポイントを作る

フレッシュな色合いと写真だけをポイントとすると印象が柔らかすぎてしまい、少しぼんやりとした弱いイメージになってしまう場合があります。ですので、作成動画の様なピンクの縁取り文字など、アクセントとなるような少し強めの色の目立つポイントをもう一つ位作るとバランスが良くなります。バナー画像などの場合、コピー文章や金額など掲載するテキストがある場合がほとんどですので、読ませたいところのデザインをアクセントとなるようなアレンジにすると訴求力のあるバナーとなります。

文字だけでインパクトを出す為の数字

数字はパッと目につきやすい特徴があります。そのため、大胆に大きくすることがポイントです。この動画の場合、「50」という部分を一番大きく見せるように配置し、右横に2段にして、BIGSALE！と％OFFを配置しています。ブロックを組み合わせるような感覚で、ガタガタにならずに見せたい数字部分を大きくできる組み合わせを考えるのがよいです。

文字だけでも映える色選び方法

文字だけのデザインですが、数字や記号などの複数のパーツを合わせて配置しますので、それぞれに色を変える事もできます。しかし、全体としてのまとまり感を出すためにも同系色で合わせるとよいです。今回の動画の場合も、赤とピンクの2色でまとめてみました。レディースファッションのセールでよく見かけるようなオシャレな雰囲気になっているのではないでしょうか。また、ここぞという見せ場は、赤を使うのがお勧めです。赤はとても強い色なので、セールなどのインパクトを持たせたい画像には必ずと言っていいほど使われる色です。今く使いながら少しオリジナルの個性もまぜていけるとよいですね。

バレンタイン画像のポイント

バレンタインといえば、恋愛やかわいいイメージのイベントで、女子力高めのデザインが定番と言えます。今回はそれらを演出するモチーフの一つとして、ハート型を使ったバナー作成をしてみました。バレンタインだけではなく、女性向けのファッションや雑貨、コスメなどのネットショップやサービスサイトなどでも使えると思いますので、是非参考にしてみてください。

ハートマークを簡単に作る方法

ハートマークを描こうとすると、イラストレターなどの高度なソフトが必要な場合がありますが、簡単にハートマークを作る方法としては、「テキストで作ること」という方法があります。ただし、フォントの種類によっては、ハートマークが表示されないので注意が必要です。ボタンメーカープロの場合は、動画の通りに「ハート」と入力して変換してハートマークを表示させ、ハートマークを表示できるフォントを探してくださいね
ハートマークのサイズはテキストという概念をなくして、文字サイズとしてあり得ない位、大胆に大き目にすると、デザインっぽくなります。ちなみに、今回は、ハートマークをバナーの枠内にきっちりと収めてしまうと、ただ置いただけという雰囲気が出てしまうので、あえて枠からはみ出るように配置してみました。また、おまけのアレンジとして、今回はバレンタインギフトという設定にしたので、プレゼント感を出すために、リボンのパーツを回転させて、ななめがけの飾りとして使ってみました。ネットショップなどで、「ギフト用アイテム」「プレゼント用包装承ります」などの画像にも使えるのではないでしょうか。

アメブロ読者登録ボタンのポイント

登録の意味を記号で表す

読者登録してもらうことが目的ですので、登録、クリック、追加などを連想させるようなデザインにしたいところです。そこで今回は、「＋」という記号をデザインに取り入れました。読者に登録（追加）するというイメージが演出できるかと思いますが、抽象的で少々弱い印象もあるので、背景にギザギザのふきだしをしいて、強調するアレンジを加えました。この画像があるだけで、登録ボタンということが一目で分かります。br />
もちろん、これだけでは、意味が分かりませんので「このブログの読者になる」というテキストも追加しています。

ボタンらしい画像にするために

読者登録ボタンということで、クリックしてもらいやすい「ボタン」であることが基本となりますので、土台（背景）部分は、角丸にして立体的に見えるような効果をつけましょう。これだけで一瞬でボタンぽい画像が作れます。あとはお好みで、ストライブの模様を入れたり、テキスト表現を変えたり、色を工夫したりするとまた違った読者登録ボタンへと簡単にアレンジができます。

アメブロ読者登録ボタンの作成の応用編

今回作成手順をご紹介したものとは別に、更なるクオリティアップしたアメブロ読者登録ボタンの作るためには、自分の写真など自分のアメブロをイメージさせる画像素材をボタン画像に入れるのもよいです。
芸能人のアメブロは自分をブランディングして顔写真を見ればその人だとすぐわかるような知名度になっているので、アメブロ登録ボタンの場合でも、ボタンの横に顔写真がアイコン的に置かれていたりします。一般の人が芸能人の様にブランディングする事はなかなか難しい面もありますが、強く印象に残るような読者登録ボタンがある事は差別化の一つにもなります。
ボタンメーカープロを使えばパーツをアップロードして画像に取り込む事が出来ます。操作方法としては、一般的な画僧編集ツールというよりは、まさにアメブロを更新するときの写真アップの要領にいているので、ホームページ制作にあまり詳しくない人でも使いやすいのではないかと思います。ぜひチャレンジしてみてくださいね。

超簡単な矢印ボタンの作り方

超簡単な矢印ボタン画像の作り方をご紹介いたします。
ボタンメーカープロで作れる最小の画像サイズは、50px×50pxになので、リストの頭などにポイントつぃて使いたい場合にはちょっと大きすぎるかもしれません。その場合は、別のツールで縮小するか、htmlに記載するときのwidthを小さくしたり、cssで画像サイズの指定をするなどしてお使いください。
さて、ボタンメーカープロを使って作成する場合ですが、画像の構成としましては、ボタンの土台の部分を作成し、その上にパーツギャラリーから矢印画像を選んで配置する形となります。
土台は、ボタンぽくなる効果を使うと、ワンクリックで立体感のある素材にすることができます。
パーツギャラリーの矢印の種類も多数あるので、使いたいサイトなどのデザインに合わせたものを選んでお使いください。
応用編としましては、土台を横長にしてテキストも配置すると「お申込みはこちら→」とか「次のページへ→」等の定番画像の作成もできます。ボタンメーカープロの場合、設定数値をそのまま使うと、同じ設定の素材が簡単に作れますので、定番画像を統一して作成すると、ホームページデザインに全体的なまとまりがでてきます。

エンブレムを使ったバナーのポイント

エンブレムの中に使う文字の色も、ゴールド風にする。

高級感のある色といえば光沢のある色や艶感がある色が定番です。面積の広い部分に使うと下品な印象を出してしまう場合もありますので、パーツ画像や文字などでポイント使いをすることがよいでしょう。

高級感が増すフォントとは

太い文字やゴシック系のがっしりとしたフォントはポップなイメージがありますので、細めの明朝体などを使うとより高級感が増します。明朝体などにみられるカーブのある線やサンセリフ体など文字の端に三角形などの小さな飾り（セリフ）がついていることで高級感が演出されます。

一工夫を加える

今回はエンブレムと王冠を組み合わせていますが、エンブレムとリボン、キラキラアクセントなどで色々な表現ができると思います。高級感を出すためには、丁寧に作られている感じや工夫を凝らして作りこまれているような感じを与えることが必要です。パーツをただ配置するだけですと、シンプルすぎてしまい、簡素な印象になるとも言えますので、ちょっと一工夫を加えるとよいです。

脱上級者の定番、グラデーションボタンの作り方を解説します。スタイリッシュにするコツと簡単に作るためのポイントです。

フラットデザインの流行で、グラデーションを使ったデザインは古く見える傾向があるとも言えますが、ボタン画像は「押してくなる感」が大切ですので、まだまだ活躍の場があります。

よく使う画像だからこそ、ブタンメーカープロを使って、50秒という速さで作ってみました。

スタイリッシュに作るコツ

背景色の決め方

グラデーションの始まりの色と終わりの色を指定することで色が決まります。

色を選ぶ際には、差をあまりつけすぎないように、加減することが大切です。「違いが分からないかな？」と思うくらいでちょうどよいです。やりすぎると素人っぽくなります。

基本的には、色味は同じにして、明るさや濃さのみを少し変えるような色選びをするとよいです。

枠線をつける

グラデ―ションは色の連続で作られていますので、枠や境目が何もないとしまりが悪い感じになってしまいます。

なので、グラデーションに使った色よりワントーン濃い色（または暗い色）を枠線としてつけてあげると境界線がはっきりとしてボタンらしくなります。

簡単に早く作るには

ボタンメーカープロを使って早く作業するためのポイントは、ショートカットキーの使い方です。

枠の色を決めたら、色コードの6桁の英数字をキーボードの「ctrl＋C」でコピーして、後の3方向の枠線を設定するときには、色指定の項目をクリックして「ctrl＋A」で全体を選択してから「ctrl＋V」で貼り付けをするとスピードアップできます。

他と差を付けるバナー画像のレイアウトのテクニックのポイント

パーツ画像は一工夫加えて使う

ふきだしや円形のパーツ画像をそのまま使っていませんか？他の人とちょっと差をつける事には、自分なりのちょっとした工夫によって実現します。それがパーツの配置の仕方です。動画の中で配置しているように、ふきだし画像はあえてふきだしの端がちょっとはみ出るように配置しています。また円形パーツもはみ出すというよりはパーツ全体に対してバナー画像として使ている部分の方がバナー画像からはみ出している部分よりも小さい位なので、パーツ全体ではなくパーツの一部を使うという配置の仕方をしています。
この様な考え方をするためのポイントは、文字、写真、テキスト、オブジェクトなどのパーツを「バナー画像の中のどこに配置しようか？」と考えるのではなく、「どんな雰囲気のバナー画像を作りたいか？」という発想を持つことです。ポップでインパクトのある雰囲気を表現したいな~という考えから始まって、ポップではじける様子だから・・・えーいはみ出しちゃえ。という様な流れで作成していっています。
こんな風に考えるとネタ切れで苦しいバナー画像作成がすこし楽しくなり、のびのびとしてオリジナリティあふれる発想で魅力的なデザインが出来るようになるのではないでしょうか。

意外と念入りな微調整

基本的な配置や全体の雰囲気などの方向性は、アイデアや思いつきの要素も大事なのですが、いざ作るものが決まったら、細かく微調整をすることも大事です。
写真とパーツがかぶらないように、1ピクセル単位で配置を変更したり、色を決めるためにパレット内の細かい色の違いを探ったりという根気強い作業を経てこれだっ！と思う最高のバランスを見つけるのです。ダイナミックで自由な発想と真逆ともいえる地味で繊細な微調整。これらがそろったときにいい感じのデザインが作れるのかもしれません。是非参考にしてみてくださいね。

photoshopなどの画像編集ソフトでは、テキストのエフェクトとしてドロップシャドウの具合を設定しますが、こんな方法でも超簡単にドロップシャドウ文字を作れますので、ご紹介いたします。

ドロップシャドウ文字の作り方のポイント

実は、テキスト本体部分とシャドウ部分が別々のテキストとして指定されているのです。photoshopなどの高度な画像編集ソフトでは出来る事の範囲が広いので、シャドウの深さや濃さの指定に自由度がありすぎでどのくらいの加減にするとちょうどよいのか分からない人もいるのではないでしょうか。
そんな時に、この方法でドロップシャドウを作れば、誰でも簡単にわざとらしくないプロっぽいドロップシャドウ文字をつくる事が出来ます。
今回の参考動画と同じ加減のドロップシャドウを作りたい場合は、文字の大きさも種類も全く同じにします。変えるのは文字の色と文字の位置だけです。
実際に作成してみると、二つの設定が本当にかすかにしか違いがない事に気づくかと思います。このようなほんの少しの調整がプロっぽいバナー画像を作成為のポイントです。この感覚はぜひ色々な場面で応用してみてくださいね。
また、ボタンメーカープロを使ってバナー画像を作成する場合、テキストボックスは、左上が一番下に重なるので注意してくださいね。左がグレーっぽい影の部分で右がテキスト本体となる白い部分です。