ぬるま湯デザイン塾 – 公式ブログ

こんにちは！エキスパート講師の篠原です。

この度は今年最後の特別課題バナーコンテストに
たくさんのご応募をいただきありがとうございました！

3月12日の公開添削でご応募いただいたデザインの添削と
受賞作品を発表いたしました。
当日の様子は特別編＞特別セミナーから録画を確認できますので、
ぜひ確認してみてください。

課題内容はこちら >>

今回のお題は
『スペチャの使い方ページへ誘導するバナー』
だったので、改めて「スペチャってどんなものだっけ？」
と、認識を改める良い機会になったのではないかと思います。

スペチャに参加すると
・尾上塾長からのアドバイスを無料で受けられる
・自分が抱えている悩みをその場で相談できる
・多種多様な人と交流できる
など、メリット盛りだくさんです！

今まであまり参加されたことがなかった方も、
ぜひ気軽にお話ししに来てくださいね＾＾

スペチャの使い方＞

 【今回のお題】「スペチャの使い方ページへ誘導するバナー」について

今回のお題では『受講期間中の塾生』をターゲットとして
設定させていただきました。

受講期間中の塾生さんと特徴としては、
・スペチャへの参加に抵抗がある
・スペチャに参加するメリットを知らない
等があります。

今回はそんな塾生さんがターゲットなのですが、
ターゲットをしっかり捉えながら作成できている方が
少ないな〜というのが率直な感想でした。

デザインを制作する際は『前提条件の確認』に重点を置きます。
この確認が疎かになると、デザインの方向がぶれてしまいますね。

添削のポイント

・ターゲットに合ったデザイン
・『サービス』のデザイン
・スマホでも見やすいデザイン
・親しみが感じられるデザイン

今回は主に上記4点で確認させていただきました。
『ターゲットに合ったデザイン』として、
今回のお題で＜やってはいけないリスト＞も共有いたします。

⚫︎スペチャの背景画像を大きく目立たせたデザイン
→今回のターゲットはスペチャにまだ入ったことがない塾生
→スペチャの画面を見たことが無い

⚫︎”スペチャ”の文字を目立たせる
”スペチャ”自体に馴染みがないので、目立たせても刺さらない

⚫︎文字よりも画像・イラストを目立たせる
今回の内容は『サービス』なので、文字がしっかり目立つデザインに

以上を踏まえ、選考した結果を発表いたします！

【おしかったで賞】阿賀美帆さん

【阿賀美帆さんコメント】
文字が多いので二分割にし情報を整理。
右上の吹き出しは、青の反対色の黄色をアクセントに使用し
ポップで親しみやすい雰囲気に。
初心者はバーチャル空間に抵抗がある可能性あり
（実際私がそうでした）
→あえてスペチャの背景画像は使用せず、その他のアイコンで装飾。
リッチメニューサイズでは左下にスペースができたので
オンラインと連想できるアイコンを配置。

◎評価ポイント
ご自身の経験も踏まえ、しっかりターゲットがどういう特徴を
持っているのか、分析できていたのが素晴らしかったです。
整列や強弱など、デザインの4大原則がしっかり身についていて、
デザイン力のある方だなと感じました。
しかし、一番目立たせていただきたかった
“オンライン交流会”の目立ちが低く、”スペチャ”を強調してしまった点が
おしかったな〜〜と感じました。

【ぬるま湯塾賞】北村広大さん

【北村広大さんコメント】

⚫︎リサーチに基づく整理
・w h o ( 対 象 ) の 視 点
入 塾 し て 間 も な い 生 徒 に と っ て は 、
尾 上 先 生 は 遠 い 人 に 感 じ る と 思 い 、
尾 上 先 生 の 支 給 画 像 は あ え て 使 用 しま せ ん 。
・h o w ( 手 段 ) の 視 点
ス ペ チ ャ の 支 給 画 像 は 、
親 し み を感 じ て も ら う に は 適 さ ず 、
未 参 加者 が 見 て も 何 か わ か ら な い の で 、
こ ち ら も 使 用 し ま せ ん 。
・w h e r e ( 場 所 ) の 視 点
カ リ キ ュ ラ ム に は 画 像 の 下 に 、
クリ ッ ク す る と 遷 移 す る 旨 の 記 載 があ り 、
ま た 、 L I N E リ ッ チ メ ニ ュー は
タ ッ プ し て 遷 移 す る の は 通 常で あ る た め 、
ボ タ ン デ ザ イ ン は つけ て い ま せ ん 。

⚫︎コメント
文字が目立つよう、文字の背景色を白色にしました。
タイトルの次に大事な文字には色をつけ、
目線誘導もしました
一番大事な文字がより目立つよう「余白」を
たっぷり入れました
全体的に丸みのあるデザインで親しみやすさを
だしました
親しみのあるイラストで、スペチャのイメージを
補足しました
文字が目立つよう、イラストの色は背景色に合わせました。

◎評価ポイント
北村さんもしっかりリサーチした上でターゲット分析ができており、
目立たせるべき”オンライン交流会”の文字を目立たせられていた点が
とても素晴らしかったと思います。
また、配色には温かみがあり、余白もしっかり取れているため
親しみが感じられる良いデザインだと思います。
1点気になったポイントとしては、LINEリッチメニュー用のバナーで、
イラストが大きく目立ちがやや強くなってしまっていたので、
イラストの大きさを抑え、左の文字領域を大きくしてあげると
尚良くなったかなと思いました。

グランプリは、、、

それではいよいよグランプリの発表です！
・
・
・
と言いたいところですが、今回のバナーコンテストでは
グランプリは【なし】という結果となりました。

上記2名のように惜しい作品はいただけていたのですが、
採用し、実際にカリキュラムやリッチメニューに
使わせていただきたい！とまではならず、
この結果とさせていただきました。

尾上塾長がバナーを作る際に意識すること

もし今回のお題で尾上塾長がバナーを作ったらどうなるかを
今回のコンテストの最後に共有いただきました！

そのデザインがこちらです！

公開添削の場では、実際にデザイン制作を行う前にすることや、
制作の方法まで解説していただきました＾＾

ここでは一部抜粋して紹介させていただきます。

ターゲット＆前提整理

・まずはターゲットを確認&分析
→今回は受講期間中の塾生、特にスペチャをあまり知らない人がターゲット
→”スペチャ”の文字や背景画像を使っても意味はない
・デザインの種類を確認
→物販ではなくサービスなので”文字”が大事
・既存のデザインに影響されすぎないこと
・バナーをクリックした先にはどんなサイトが表示されるのか

制作の手順

・まずはモノクロで制作していく
・情報の優先順位を意識して、強弱をつけていく
・内容に合った背景素材を探す
・最後にモックアップも作成

ここでは紹介しきれない、実際に尾上塾長がどう考えて作成したのかも
詳しく解説していただけていますので、詳細はぜひ特別編の動画からご確認ください！

まとめ

今回のコンテストの録画含め、過去のコンテストや
公開添削の動画はカリキュラムの特別編から視聴することができますので、
ぜひご確認いただき、今後のデザイン制作に役立てていただければと思います。

また、今後もバナーコンテストは開催する予定なので、
次回もたくさんのご応募お待ちしております！