BLOG

【10/31はハロウィン!】新卒デザイナーがアイキャッチ作成してみた!(新卒デザイナーBLOG4期目 2022年10月)

2022/10/26

10月になってぐっと冷え込んできましたね…!
今年も残すところあと2ヶ月と少し。
年末に向けて走り抜けていきましょう!

今月の新卒デザイナーブログは、31日がハロウィンということで、新卒デザイナーのお二人にアイキャッチを作成していただきました。
先輩にもチェックしていただきフィードバックも頂いています。
どんなアイキャッチを作成したのか、どんなフィードバックをもらっているのか是非チェックして皆さんもアイキャッチづくりに役立ててみてください!

それでは、新卒デザイナーブログです!

新卒デザイナーの紹介

A.Yさん
2022年新卒としてBRISKに入社。
兵庫県出身。大阪の専門学校でWeb制作全般を学んできた。
食べることと動物が大好き。
K.Hさん
2022年新卒としてBRISKに入社。
千葉県の専門学校に通っていた。
写真撮影が趣味です。

今回は、新卒デザイナーのお二人にハロウィンのアイキャッチを作成していただきました。
お題としては、『ポップなアイキャッチを作成してください!』という内容で、それ以外は自由に作成してもらっています!

A.Yさんの作成したアイキャッチ

作成時の工夫ポイント

作成時に工夫したポイントを3点挙げて頂きました。

1全体的なテイスト

ポップな印象になるように、イラストを多く使用しました。
また、チープな印象にならないように、イラストはすべて自分で作り雰囲気が合うように調整しました。
真っ黒な背景に溶け込んでいるイラストと、色がついていて少し目立たせるイラスト2種類を作成し、アイキャッチに奥行が出るようにもしました。

2配色について

いつも#333の黒を使用するのですが、今回はコントラストをはっきりと出したかったので#000の完全な黒を使用しました。
また、ハロウィンっぽくなるように配色も黒や紫、オレンジを基としてデザインしました。
背景と文字にグラデーションを使用し、べた塗りすぎて重くなりすぎないようにしました。

3フォントの選定

使用するフォントは自分の中でパターン化しているので、あまり違うフォントを使用しないことが多かったのですが、今回のアイキャッチのテーマが「ポップ」ということだったので、イラストに負けないように丸みのある太いフォントを選びインパクトが出るようにしました。

大変だった所

「ポップ」がテーマと聞いて最初にイラストをたくさん使いたいなと思ったので、イラストをすべて自作しました。
自作するのはとても楽しかったのですが、他の作ったイラストとテイストが違ったり、納得がいかなかったりして何度も作り直したことが一番大変でした。おかげで1つのアイキャッチを作成するのに8時間程作業してしまいました…。
しかし、納得のいくイラストを作成することができたと思うので、そこは満足しています。
フォントも工夫ポイントでも述べたのですが、普段はあまり使用しないようなフォントを使いました。
アイキャッチなので、Webフォントではない独特の個性が出るような、しかし全体の雰囲気とマッチする絶秒なフォントを見つけることも大変でした。

先輩からのフィードバック

今回は、2名の先輩デザイナーさんにアイキャッチを見て頂きました。
実際に頂いたフィードバックをアイキャッチに反映していますので最後までご覧ください!

良いところ

ハロウィンらしい要素をかわいらしいイラスト・配色で表現されていてまさにピッタリなアイキャッチだと思います。
全てのイラストを自作していたりいつもは使用しないようなフォントを探して使ってみたり挑戦している姿とても素晴らしいです。
また背景色・文字色ともにグラデーションがとても綺麗で印象に残ります。フォントも丸みがありポップでハロウィンのデザインにぴったりです。
素材も月の模様から2匹のおばけちゃんが持っているカボチャのバッグに入っているものがそれぞれ違くて力の入れ様を感じます…!
まず、イラストを全て自作されたとのことで素晴らしいなと思いました!
A.Yさんは以前、新卒ブログでももっとイラストを作成してみたい、ということをおっしゃっていたのでもしかして全部自作するんじゃないかと期待してたので有言実行!とっても良いと思います。
他にもテーマに合わせていつも使わないくらいポップなフォントの選定や、配色の検討をしてもらい、ハロウィンらしさが出るように研究してもらったのが良い取り組みだと思いました。

さらにアイキャッチをよくするポイント

A.Yさんのアイキャッチをよくするポイントを4点あげて頂きました!
次のアイキャッチ作成ではこちらを気を付けてみると今回よりレベルアップした作品が作れそうです。

1イラスト調整

せっかく作成した月のイラストですが、比較的小さく置いていて模様の部分がほぼ見えないのがもったいないです。
月を大きくする事で模様部分も映るのは勿論、新卒ブログのテキストの背景に置く事で目立ちやすく、見やすくなります。
模様部分についてはかなり色が薄いようで認識がしずらいなと感じました。
もう少し濃い色にしてもテキストのフチがある事で視認性は落ちないと思います。
また、影になっている中央にあるカボチャが少し隠れているので顔までしっかり見せるとハロウィン感がより増しますよ!

2奥行き感の調整

おばけがせっかく2匹いるので奥行きを付けるとより良くなりそうです。
例えば下にいる子を大きく掲載すると上にいる子より寄っているのが分かると思います。そうするとメリハリがつくデザインになるのでとてもオススメです。
ちなみに風景画を描くとき、遠近感を出すために遠くのものを青くするそうです!(テレビで見た記憶があります)
文字よりも寄っている事を表したかったらあえてかぶせてしまうのも手ですよ。
さらに下にいる子に傾きを付けると動きがある目につきやすくなります。
凄く可愛いイラストなのでドーンと大きく載せてしまいましょう!

3色の調整について

配色をかなり検討して頂いたと思うのですが、背景の赤紫のグラデーションの中央部分の色があまり綺麗ではないようです。
月と同化するのを避けてこの配色なのであればオレンジ系にすると月もグラデーションも綺麗にみえますよ。
イラストやフォントのイメージがかわいらしいので配色をもう少しだけ明るめの色にすると可愛さ満点のハロウィンが表現できると思います。
今回は、グラデーションの色をインスタグラムのグラデーションを参考に調整してみました(笑)
インスタグラムのポップな感じをお借りしつつ、今回のアイキャッチに合う可愛い感じにまとまるかなと思いました。
(企業のロゴを参考にして調整するのも1つの手です。まるまる同じなのはよくないのであくまでも参考程度にしておきましょう!)
また【2022.10】の部分が居心地が悪そうに感じました。影になっている坂の部分をなだらかにして数字を置くと綺麗に収まりますよ。

4+αの工夫を

イラストが綺麗に作成できているので、さらに一工夫、イラストをゆがませたりするとなんだか怪しげな雰囲気になって面白いのではないかなと思いました。
かぼちゃはゆがませると可愛い表情が見えなくなってしまうので、お城や木を気持ち、ゆがませてみてください!
また、おばけのイラストはちょっとだけ透けさせてあげるとよりおばけらしさが出てポップになりそうです。
頭部分は透明にせず、足元にかけてグラデーションのように透明にしていっても良いかもしれません。

改善点を反映させたアイキャッチ

上記の改善点を反映させたアイキャッチがこちらになります。
ポップさがより増して明るい印象になり、奥行きも分かりやすくなりましたね。

K.Hさんの作成したアイキャッチ

作成時の工夫ポイント

作成時に工夫したポイントを3点挙げて頂きました。

1全体の配色

今回は、ポップなものというテーマだったので、通常アイキャッチを作成するときは3色か多くて4色というイメージですが、今回は白黒も合わせて6色使用しました。
色数が多くなると、全体的にまとまりがなくなってしまうので、白、黒、オレンジをメインにほかの3色はあまり主張が強くなりすぎないように使用しました。

2境界線

ポップなイメージについて調べてみたところ、境界線など、線を意識してデザインを作るとポップなイメージになりやすいと知ったので線を意識してみました。
文字の一部をアクセントカラーにしましたが、境界線が入ることによって
文字の視認性も上がり、全体的に締まったような気がしたので入れてみて良かったです。

3吹き出しのデザイン

線を意識したデザインだったので、ちょうど良いと思い、前から使ってみたいと思っていた吹き出しのデザインを今回使用してみました。
いつもはシンプルな吹き出しを使いがちですが、今回のような吹き出しのデザインは全体のポイントにもなって良かったと思います!

大変だった所

アイキャッチを作成するときは、アイデア出しや、どんなデザインにするか決めるところが一番時間がかかってしまうのですが、今回もそこが大変でした。また、アイキャッチの作成に取り掛かるのが締め切りギリギリになってしまったので、とても焦りながら作成しました…。
今回はこまごましたイラストを多くちりばめたのですが、全体的にごちゃついてしまったような気がしていて、イラストの配置についても今後改善していきたいと思います。

先輩からのフィードバック

2名の先輩デザイナーさんにアイキャッチを見て頂きました。
実際に頂いたフィードバックをアイキャッチに反映していますので最後までご覧ください!

良いところ

オレンジ・紫・黒のハロウィンらしい配色、そして飴やカボチャなどのイラストが多く使われていてとてもかわいらしいアイキャッチ画像だと思いました!
ハロウィンのモチーフを多く使用しているのでハロウィンの内容だという事がすぐに分かるデザインになっていて良いと思います。
境界線を入れてみたり、いつもより色数を増やしてみたり試行錯誤しているのを伺えます!
また吹き出しの形が背景色と線部分が分かれているという特徴的なデザインで目につくのも良いですね。
今回、6色使ってみたとのことで普段はしないデザインに挑戦してもらってとても良いと思いました!
こういうときでないと、好き勝手にデザインできないですからね(笑)また、上から垂れ下がっている装飾イラストも、特徴的で可愛らしいと思います。
なんだか保育園の玄関に置いてある季節のイラストみたいで、BRISKの入口にもこういう季節のイラストを飾ったら賑やかで来客時に楽しい気持ちになれそうです!
また、メインのイラストとサブの背景のイラストが分かりやすく、吹き出しも特徴づけしてくれていて良いと思います。

さらにアイキャッチをよくするポイント

K.Hさんのアイキャッチをよくするポイントを4点あげて頂きました!
次のアイキャッチ作成ではこちらを気を付けてみると今回よりレベルアップした作品が作れそうです。

1レイアウトの検討

レイアウトが少し単調的に感じます。
まずは一番目立たせたい情報は何でしょうか。
テキストであればもう少し大きく表示したり、特徴的なフォントに変更、飾りを置くなどしてより目につく工夫をするのも良いですよ。
上から垂れさせていたイラストは蜘蛛を文字に垂れさせたり、ポイントポイントで使用すると目立って効果的です。
文字色について現在黒を基本に3色をアクセントカラーとして使用されていると思います。
ですが、今のままだと全体の配色が若干暗めでポップとは少し離れているかもしれません。
思い切ってはっきりした色味の文字色を使ってみるのもいいですよ!また、背景が少し寂しいので、メインのオレンジと薄いオレンジでストライプの背景にしてみたら全体の雰囲気を崩さず、ポップさが増すと思います。

2色の調整と装飾について

全体的にのっぺりとした印象・色が暗いからか可愛いイラストがあってもポップさに少し欠けているようです。
背景色や飾り・文字色がかなり濃い目の色を使用しているからでしょうか。特に印象が強い色同士で喧嘩している印象があります。
重要な情報が目立つ配色を意識してみましょう!
配色の感覚が身につくまでは、ツールを使用して綺麗な色を作ってもらうのが一番だと思います!
おすすめ配色ツールを紹介しておくので是非使ってみて下さい。
Coolors – The super fast color palettes generator!

3色の調整ついて

オレンジの背景色は夜空のイメージだと思いますが少し味気ない感じがします。
より空らしくするには星や雲をちりばめたり月を載せるとより分かりやすくなりますよ。
さらにポップさを出すにはグラデーションやパターンを使用するとかわいらしく遊び心があるハロウィンらしくなります。
文字のデザインが少し味気なく感じるので、例えば文字を一部お菓子っぽくしてかじられちゃったような歯形をつけてみても面白いかもしれません。
他にも溶けているような装飾を入れてみるとか、ハロウィンの何かにまつわる装飾を入れると面白味が出てきます。

4吹き出しのバランスについて

BRISK 2022.10の文字組みが居心地が悪そうです。
吹き出しが特徴的な形をしているからか左の余白がかなり空いているのに文字は小さめな印象です。
特徴的な形は十分生かしながらフォントサイズを上げてみたり、幅を多めにとるのはいかがでしょうか。
また、吹き出し部分の配色の印象が強く目がチカチカしてしまいます。
紫の部分をもう少し薄くしてみるなど色の検討をしてみてください。
またテキストの【BRISK】のBと【2022.10】の10について文字色を変更していますが、目立たせるのであればレイアウト等を変更する方が良いかもしれません。

上記の改善点を反映させたアイキャッチがこちらになります。
より文字の視認性が上がり、全体的にすっきりまとまった印象になりました!

まとめ

今回のアイキャッチ作成でお二人ともいつもやらないデザインだったり、納得いくまでイラスト作成をしたりとすごく良い取り組み方だと思いました!
社内の業務ではどんどん挑戦や試行錯誤を繰り返して案件に活かしていただきたいと思います。

また、お題にじっくり向き合う機会もなかなかないので今回の経験を活かしてもらえればと思います。
また何かイベントごとがあるときにアイキャッチ作成のお題を出そうかなと思います(笑)
次の作品では今回のフィードバックが反映されたものが見れることを期待しています!

今月のエンジニアブログはこちら!!是非ご覧ください。

先輩にお悩み相談をしよう!
(新卒エンジニアBLOG4期目 2022年10月)

FOLLOW US