Webデザインの勉強をしていると、バナー作成をすることもあるかと思います。
でも構成とかデザイン、迷ってしまうことありませんか？
そんな時に見てもらいたい、15個のレイアウトを紹介します！(サイズはw300×h250)
よく見るものや、私が良いなと思ったレイアウトを作りました！
是非参考にしてみてください♪
バナー制作に使える無料の素材サイトはこちらから！
迷ったらこれ！バナーレイアウト
よく見かけるバナーレイアウト
この2つはよく見かけるレイアウトです。タイトルや説明文などは控えめに端に寄っていて、画像がメインになるレイアウトになります。
画像とテキストが半々くらいのレイアウト
こちらは画像とテキストが半々くらいのレイアウトです。フレーズを大きく書くことで大胆な印象になるようなレイアウトです。画像を置く位置も調整してみると、だいぶ印象が変わります。
比較にも使えるバナーレイアウト
画像がメインになっているレイアウトです。大胆さも表現できると思いますが、比較する場合にも使えます。画像が数種類あるとき、2種類ピックアップして使いたい場合にも良さそうです。
画像メインのバナーレイアウト
こちらも画像メインですが、どちらかというと背景のようなポジションです。1枚目はテキストがメイン、2枚目は画像がメインでとてもシンプルなレイアウトに仕上がると思います。ブランド名や、一言だけ載せるのも素敵ですね。
テキストメインのバナーレイアウト
こちらはテキストがたくさん書けそうなレイアウトになっています。かつ、画像も十分なサイズで載せることができます。
画像盛りだくさんなバナーレイアウト
こちらも画像メインですがひし形に並べたレイアウトになります。画像がたくさん入ったら楽しい雰囲気が出てきそうですね。
欠けてる水色の部分もありますが、気にせず画像を入れると良いです。
バナーデザイン/レイアウト参考サイト
バナー作成は、やっぱりいろんなデザインに出合い、引き出しを増やすことが大切です。
ということで、いくつかお手本になるサイトを紹介いたします。
Bannnner.com
今回のレイアウトイメージを作成する際にも参考にさせていただいたサイトです。サイズ別のカテゴリが現在7種と豊富にあるので、サイズ別にデザインを見たい時など助かります。
BANNER LIBRARY
バナーライブラリーはイメージ別に検索できるのが強いなと思います。「かわいい」など、デザインの雰囲気でお手本を探している方はおすすめです。
ピンタレストはデザインが幅広く載っています。バナー以外にも活用すると、出会ったことのないものに出会える可能性があるサイトです。
coconala
ココナラで依頼するのではなく、デザイナーとして働く方のページから、ホームページや作品などを私は見に行くことがあります。実際の仕事の雰囲気もつかむことができるかもしれませんし、個人的におすすめなサイトです。
おわりに
レイアウトは決まりそうでしょうか？
境界線が少し直線的に表現しましたが、作成したいバナーの雰囲気に合わせ曲線にしてみるなど、調整してみてくださいね。
それではバナー作り、頑張ってください♪
コメント