活動の様子 Nutmeg advent calendar 2024

アドカレのサムネを作りました!

アドカレのサムネを作りました!

自己紹介

はじめまして!皆がゆめみんと呼んでくれるのがうれしいので、ゆめみんという名前でブログを書かせていただきます! NUTMEGには今年の春から参加しました。現在はデザインチームとHPチームに所属しています。

1と2が整列しているおもしろい日のアドカレ担当になれてうれしいです。よろしくお願いします。

サムネイルを作りました!

adocare-3adokare3

サムネイルとは、一番初めに出てきたこの画像のことです。 メンバーが使っているこの画像ですが、私が制作を担当させていただきました!ありがとうございます!! とても楽しく作らせてもらったので、ラフ画像と完成画像を比較しながら、作ったサムネイルの振り返りをしてみたいと思います!

経緯について

サムネイルテンプレートを作るにあたり、いくつか候補があった方がいいと思い、複数の案を考えました。 クリスマスや冬をモチーフにとのことだったで、他のブログのサムネイルやクリスマス商品の広告の配色を見るなどしました。 初めは、NUTMEG内のデザインチームMTで候補を1つに絞る予定でしたが、チームのみんなが 「どれもいいねえ」 と言ってくれて、さらに私の時間的にも余裕があったため、複数のデザインのサムネイルを作ることに決めました(みんなありがとうね!!!)

サムネイル紹介

以下から、作成したサムネイルの紹介をします!せっかくなので名付けも行ってみました。

No.1 サンタぼうしアソート

ラフ(使用ツール:ibisPaint) Frame 10

完成品(使用ツール:Figma) adocare-1

サンタさんの帽子が画面下に見えるシンプルなデザインです。NUTMEGのイメージカラーのオレンジの帽子が混じっているところがアクセントになっています。 このサムネイルでは、今まで使ったことのなかったFigmaのコンポーネント機能を使ってみました!

コンポーネント機能とは、簡単に言うと、複数のオブジェクトの色や大きさを一括で変えることができる機能です。

image 今回は、上記画像右端の枠外によけてある帽子をコンポーネント(親)に設定し、画像内の帽子をインスタンス(子)に設定してみました。この帽子を変形させると……

image こんな風にすべてのインスタンス帽子に変形が適用されました!パンクな帽子に変身ですね。 コンポーネントの機能は奥が深く、まだまだ使いこなせていないので、これからいろいろ勉強していきたいです!

No.2 クッキーアソート

ラフ(使用ツール:ibisPaint) Frame 11

完成品(使用ツール:Figma) adocare-2

ラフから少しデザインを変更しました。理由としては、大きなモチーフが多すぎて目が散らばる感じがしたためです。また、色味も少し鮮やかにしたりと、変更点が多いデザインとなりました。 個人的に、全体的なブラウンの中に鮮やかな赤や黄色がポイントで入ることにより、全体が引き締まった感じがしてよいのではないかと思いました。

このような色彩の設定は感覚でやってしまうことが多いので、少しずつ論理も考えながら作っていけるようになりたいです。

No.3 ゆきだるまリース

ラフ(使用ツール:ibisPaint) Frame 12

完成品(使用ツール:Figma) adocare-3

個人的に一番気に入っています! 背景が赤色なのに加え、全体的に使用カラーが多めなので、1つ1つのカラーの彩度を落としてお互いが邪魔しあわないように気を付けました。線の端に●をつけたり、すべてのオブジェクトが丸みを帯びていることにより、統一感が出ているのではないかなと思います。

背景の薄い赤い円は製作途中に挿入しました。三角形の余白が開いている気がして、少し違和感を感じたためです。

image

なんとなくこんな感じの円をイメージして、邪魔にならないような色で挿入しました。

No.4 わくわくクリスマスイヴ

ラフ(使用ツール:ibisPaint) Frame 13

完成品(使用ツール:Figma) adocare-4

サンタさんへの手紙と靴下のモチーフで制作してみました。手紙が立体的に見えるように、影の色を工夫しました!

image

この雪の結晶は、両端を四角にした線のオブジェクトを回転させ、重ね合わせることで簡単に作ることができました。

No.5 夜空とサンタさん

ラフ(使用ツール:ibisPaint) Frame 15

完成品(使用ツール:Figma) Frame 2

夜の空を駆けるソリのシルエットがポイントです。 サンタさんたちは、図形を組み合わせて作りました。Figmaを始めたてのころにソリ図形の変形に悪戦苦闘していた時と比べて、かなりスムーズに形を作れるようになってきてうれしいです。

No.6 寝落ちサンタさん

ラフ(使用ツール:ibisPaint) Frame 14

完成品(使用ツール:Clipstudio/Figma) Frame 9

デスクの上で寝落ちをしてしまったサンタさんです。お疲れだったのですね。 このサムネイルは、ラフの手描きの質感をそのまま活かしたかったため、サンタさん周辺のみペイントソフトで制作し、Figmaで右側の吹き出し部分を追加しました。サンタさんのお鼻がかわいいと思います。

制作を通して

サムネイルの制作を通して、個人的に自分のスキルの再確認ができたと感じます。 基本的なことになりますが、画像の変形やプラグインの導入の仕方、ショートカットキーなどはある程度使えるようになったと感じました。4月の頃と比べて成長を感じられ、うれしかったです。

反対に、コンポーネントの機能など、私がまだ使ったことのないツールがたくさんあるということも分かりました。この後、テキストボックスなどを入れてテンプレート化したサムネイルの編集ページを先輩に手直ししてもらったのですが、大幅な改善がされており、自分の勉強不足を実感しました。

個人的な反省はたくさんありますが、なにより自分が作ったものをみんなに使ってもらえたことが本当にうれしかったです! まだまだ大初心者ですが、デザイナーとしての喜びを感じることができて、貴重な経験となりました。 これからも、よりよいものを作ることができるように、勉強と実践を繰り返していきたいと思います。

最後に、夜中まで作業するトナカイさんをおきます。ここまで読んでいただきありがとうございました!! IMG_0328 (1)