読者です 読者をやめる 読者になる 読者になる

おうちでお仕事(したい)!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!日々の勉強記録と行動記録をしていきます。目標は2016年中にタイトルの(したい)をとること!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!
日々の勉強記録と行動記録をしていきます。
目標は2016年中にタイトルの(したい)をとること!

初めてのバナー作成!おさえておきたいコツとレイアウト

「WEBデザインの勉強をするために手を動かすなら、まずバナーから!」
「比較的時間がかからずに作れるし、レイアウトなどの勉強にもなるし、やっておいて損はないよ!」
ということをいろんな人から言われるのですが、初心者にはバナー作成もひとつの試練!

どこから手を付けていいかわからない!
いいレイアウトとかデザインってなに??状態です。

実際、会社でバナーを作ってほしいといま言われても、あたふたすることが目に見えているので、作成のコツなど調べてみました!

作成のコツとレイアウト例

f:id:yaike_webnohito:20151225114434p:plain
勝てるバナーレイアウト20選!│レイアウトに悩んだ時の虎の巻
さまざまなレイアウトのワイヤーフレームと実例が載せられているので、まずどういうレイアウトにするか決めるときに見ると、イメージしやすいかと思います。
意外とバナーにも決まったパターンがあるんだな、ということがわかるので、ちょっととっかかりやすくなるかもしれません。



f:id:yaike_webnohito:20151225113709p:plain
新人必見!倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog
色の抽出や、文字組についても触れられています。
「貰ったワイヤーや、参考にしてと渡された別バナーなどを見過ぎない」というのは大事ですね!



f:id:yaike_webnohito:20151225115523p:plain
バナーの文字の組み方の簡単なコツFEVDES BLOG
文字組について詳しく触れられています。
ちょっと大きさや配置を変えるだけで、驚くほど印象が変わります!
文字組する前には必ず目を通したい記事です。


作成フローと実践

f:id:yaike_webnohito:20151225113303p:plain
新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ | 株式会社LIG
レイアウトにも触れつつ、文字の可読性の高め方や、遊び要素の足し方など、応用部分も書かれているので、とても勉強になります!
こちらのページを参考に1つバナーを作成してみましたが、とても作りやすかったです。
初心者におすすめ!



f:id:yaike_webnohito:20151225112944p:plain
「45分」で作れる! 高品質バナーの作り方!
バナー作成をする際のフローを8ステップ、トータル45分間でできるように書かれています。
各ステップの目安時間も書かれているので、参考にして手際よく時間内に作成することを目指してみるといいかもしれません!


バナーギャラリーサイト

Retoro banner

f:id:yaike_webnohito:20151225115721p:plain
バナーデザイン専門ギャラリーサイト | レトロバナー
サイトのデザインがシンプルで落ち着いているのでとても見やすいです。
ストックされているバナーの数も豊富。
色やサイズだけでなく、業種やテイストでも検索することができます。


バナーデザインアーカイブ

f:id:yaike_webnohito:20151225115930p:plain
バナーデザインアーカイブ|バナーのデザインをまとめてチェック!
サムネイルにサイズ・色・業種が書かれているので、一目でそのバナーがどういうものかわかるようになっています。
サイズ・色・業種で検索することができます。
バレンタインバナー特集もあるので、これからの時期に役に立ちそうですね!


バナーデザインギャラリー

f:id:yaike_webnohito:20151225120454p:plain
バナーデザインギャラリー | Banner Design Gallery
88×31という小さなバナーも扱っているのがめずらしいです。
横に細長いバナーがメインで取り扱われています。


BANNER LINKS

f:id:yaike_webnohito:20151225121055p:plain
BANNER LINKS デザインバナーいろいろ集めました
サイトのデザインがかわいい!サムネイルも大きくて見やすいです。
パッと見た感じ、ビビッドな色合いのものより、目に優しい、おしゃれなバナーが多いように思いました。
サイズ・カテゴリー・色で検索できます。




日ごろからギャラリーサイトを見るようにして引き出しを増やしつつ、コツやフローを意識しながらどんどん作成して、さくっとバナー作れるようにがんばるぞ!!