見出し画像

「#バナーお題 」をやってみた#01

こんにちは!®です。

今回は、Webデザイナーのこばやすさん(@kobayas_s)さんの「#バナーお題」に挑戦してみました。

このお題シリーズはWebデザインを学ばれている方はすでにご存知の方はたくさんいるかと思います。私は2、3カ月程前に知ったときは、こんなのあるんだ!すごい!やりたい!と密かに感動していました(笑)ただやるまでにはいろいろ勉強してからやろうと思って、今日に至りました。

感想としては、まず見た目よりも難しかったです。想像以上に時間がかかってしまいました。でもやったことによって自分のやるべきこととかがわかったり、最近一時期デザインの勉強から少し離れていたのですが、またデザインって面白い!ワクワクすると思わせてくれるお題でもあり、技術面の良し悪しを除いたらやってよかったです。

「#バナーお題」とは?

Webデザインを学んでいらっしゃる方はご存知の方はたくさんいるかと思いますが、以前のわたしみたいにnoteやTwitterでまだ出会っていない方に向けてざっと紹介させていただきます。

「#バナーお題」とは、WEBデザイナーのこばやすさん(@kobayas_s)さんという方が2018年からTwitterで実施しているバナー練習用のオリジナルお題コンテンツのことです。

お題内容としては、今回私がチャレンジした①だったらこのような形で公開されていて、誰でも挑戦できるようになっています。

ちなみに現在は、noteに全お題を改めてまとめてくださっています。

「#バナーお題」にトライした理由

わたしが「バナーお題」にトライした理由は以下です。

①オリジナルのバナー制作ができるから
よくデザイン技術を向上する上で欠かせないと言われている「デザイントレース」は、自分の中のデザインの引き出しを増やすための作業として実践しています。このトレースでインプットとして得たことを実践として0からの「つくる」作業として0からオリジナル作品づくりの練習をしてみたいと思い、挑戦してみました。

完成作品は自分のポートフォリオとして載せることができるから
トレースを数多くしていて技術力の引き出しを増えていくことができても、トレースした作品自体は著作権フリーではないため自分の作品としてポートフォリオに載せることはできません。しかしこのこばやすさんの「#バナーお題」は、事前に定められたお題やテーマに沿ってオリジナルでデザインするので作品自体はポートフォリオに載せることができます。
いずれわたしもポートフォリオを作成しようと考えていたので、経験が浅い自分が0から作品テーマやペルソナを決めてつくるよりも、プロのWEBデザイナーさんが考えてくださったお題やペルソナをもとに自分のデザインを実践して作品をつくるほうが作品自体や効率的にもいいと思ったので挑戦してみました。

③モチベーションアップに繋がると思ったから
#バナーお題のタグを通じてTwitterなどのSNSでこのお題に挑戦された方の作品から自分には今の時点でない技術面やアイデアなど学ぶことができたり、SNSを通じて勉強仲間がいることで自分の中のモチベーションが向上できるのではないかと感じました。
例えば、独学で勉強していたら仲間がいなくて寂しかったり、客観的な意見やアドバイスがもらえなくて自分のデザインのいいところ・悪いところがわからないまま突き進んでしまう恐れがあります。でもこの「#バナーお題」をやることで他の方の作品からいいと思った部分を発見できたり、オンラインで他の方からアドバイスをもらえたりしてデザインの勉強のモチベがキープできるのでいいなと思いました。

以上の理由から「バナーお題」にチャレンジしてみることにしました。

完成作品

さて、わたしが初めての「#バナーお題」にチャレンジしてみて完成した作品はこちらです。今回は、「冬限定一口チョコ」のバナー広告のお題に挑戦してみました。

#バナーお題 1

かかった時間:4日
参考サイト:Pinterest、sakiさんのnoteなど
作品を制作する上でやったこと
・参考バナー探し
・ラフで下書きを手書きで作成
・デザインの原則の見直し

まず、参考になるバナーを探すことから始めました。私の場合は、Pinterestで「バナー 冬」「バナー チョコ」などで検索して色合いや写真の配置など参考に複数のバナーを探しました。Pinterestでまとめてジャンルごとに保存していつでも見れるようにしていたので便利でした。

そして、上記サイトで探したバナーをいくつか参考にしながら完成作品をイメージして下書きをいくつか手書きで書いてみました。ここが私の中で最初に多く時間を要してしまった関門となりました。何回も何回も書いては「これは違う」となって8個程色々下書きを書いていて、結局半日費やしてしまいました。

ちなみに下書きはこちらです。汚くて見づらかったらすみません。

1枚目

画像2

2枚目

画像3

なかなかアイデアが浮かばず何個か描いたので裏面までいってしまいましたが、1つに絞ってデザインを仮決定した後にPhotoshopを使って下書き作成からスタートしました。その際にデザインの基本原則を何回も見直ししてはやるを繰り返しました。なぜなら、以前Webデザインオンライン講座での課題をやっていた際に面倒くさくて原則の振り返りを少し怠った結果、最初の段階ではっちゃかめっちゃかなデザインになってしまい、完成までに修正点を直すのに多くの時間を要してしまったからです。

正直、この作品も原則が基本でしっかりと反映できているか不安なところもいっぱいありますが、改めて基本の原則の大切さを実感したので途中わからなくなったら調べたり、振り返ったりを行うように心掛けました。

「#バナーお題」をやってみて

このバナーお題には、1日丸ごとではなく2~3時間ごとを数回に分けて取り組みました。その中で新たにツールやデザインスキルを学ぶことができたり、今後の身に付けていくべきことなど色々と発見がありました。

①季節感や高級感などテーマに沿った演出の仕方
今回は、冬の高級チョコのセールバナーということで「どうやったらパッと見で冬の季節感が出せるか」「どうやったら高級な感じが出せるのか」といったデザイン全体のテーマイメージの表現方法をたくさん考え、たくさんインプットしました。表現する上で色感やフォントなど細部までこだわることがとても大切だと実感しました。
例えば「冬」を表現するためには「白」に「青」や「グレー」「水色」などを組み合わせたデザインが、「高級感」を出すためにはフォントでは「明朝体」や「筆記体」など細くてしなやかなデザインフォントを、色では「金色」を使用していることが多かったなどです。
テーマに合わせた演出方法や表現方法を改めて学ぶことができました。

②雪の結晶のあしらいなど表現方法が難しかった
冬を表現するためには雪を使うべきだと思い、Photoshopで雪の結晶のペンツールを使ってみました。初めて使ってみたのですが、配置やバランスを取るのが難しかったです。色々Pinterestで雪の結晶を使ったデザインを参考にしながら作ってみましたが、完成作品を改めて見直すとちょっとやり過ぎたかなと感じました。特に真ん中ら辺にかけすぎた気がしました…。
全部白色にしたのは雪を表現したのですが、「贅沢」以外の上部分の文字が全て白色で、さらにペンツールでの雪モチーフのスタンプも白色で紛らわしくさせてしまったかなと思い、だったら「冬限定」の色やデザイン(円の中にこの文字を入れるなど)を変えた方がよかった気がしました。
そして一応ターゲットは「20~40代の働く人」なのですが、ちょっと全体的に若々しいデザインになってしまったような気もして。もう少し大人っぽい色やデザインへの改善余地あるような気がしました。総じて、ターゲティングに合わせた表現方法の難しさを実感しました。

③引き出しがまだまだ少なかった
このお題を取り組んでみて、まだまだデザインの引き出しが少ないことを実感しました。次のお題をやりつつ、トレースしながら色々引き出しを増やしていこうと思います!そして、このお題も時間があるときにもう一度修正できそうなところを修正してよりイメージやターゲットに合ったバナーに成長させていくつもりです。

終わりに

スキル面ではまだまだだなとは思いつつ、「#バナーお題」をやってみるとやっぱり面白い、楽しいの気持ちが高かったです。日常の中でフォントや色などテーマに沿って細かいところに焦点をあてて見てみるということをこのお題に挑戦してみて改めて意識してみようと思えました。

そして「言語すること、形にすること」これが難しくもあり、できるようになるとデザインを勉強する上ですごく楽しいなと思いました。

少しずつですが、デザインのドリルやトレースと並行して今後も「#バナーお題」に取り組んでみようと思います。

読んでいただきありがとうございました!それでは~

この記事が参加している募集

振り返りnote

この記事が気に入ったらサポートをしてみませんか?