バナーやWebパーツ、画像素材など、これまでに制作したデザインを掲載しています。
自主制作や学習の一環として作成した作品も含まれています。

また、一部のデザイン課題において、
Web鍛(https://webtan.tech/category/training/design/) 様の課題を使用させていただいております。
使用した課題については 引用:Web鍛 様 という形で表記しております。
とても素晴らしいサイトを公開していただいたWeb鍛 様に、心より御礼申し上げます。


デザイン課題:夏期講習SNS広告バナー制作(受験生向け)

引用:Web鍛 様 「夏期講習SNS広告バナー制作(受験生向け)」 より

制作時間:
バナー内容の洗い出し 10分
ラフ作成 10分
素材調達 10分
バナー作成 120分

制作時に考えた事

夏期講習のSNS広告バナーということで、
まず青空をイメージしました。
そこで、使用する色は青/白とし、そこに+αで1色と決めました。

+αの1色については、マーカーで下線を引くときによく使われる明るい黄色が、
受験生になじみ深いかなということで採用しました。

そして、フォントについては、受験生を勇気づけるということで、
力強さを表現できる「HGP創英角ゴシックUB」を中心に使用しました。

まず、画像の方針として、夏の青空を表現するために、積乱雲が大きく立ち上った画像を用意しました。

そして、受験生の課題の多さ・悩みの大きさと積乱雲の大きさを重ね合わせ、
キャッチコピー内の「過去問対策、得点力アップの決め手は」の部分を積乱雲のうえに配置しました。

その対策としての「夏講」という文字は、白文字にして悩みの部分と分離し、
重要な文言に黄色のマーカーで線を引いたようにしました。

右上の部分については、悩みが晴れて青空が広がる、
のイメージでなにも置かずに広い空が見えるようにしています。
そこに人がジャンプしている画像を用意することも考えましたが、
どうにもコラージュした感じがぬぐえず、却下することにしました。

「夏期講習」の文字は、他のデザインを参考にしたところ、
それぞれ1文字ずつ四角で囲うデザインが多くあり、いいなと思ったので採用しました。
文字の後ろは濃い青色とし、その中に+αの色である黄色としました。

開催日程については、「年」の部分は極端に小さくし、月日の文字を大きくデザインしました。
その下に、これも大事な情報であること言うことで、黄色のマーカーで下線を引いたようなデザインにしています。

「年」の部分を「夏期講習」の左右どちらかに置くデザインも考えましたが、
それだと「夏期講習」のインパクトが弱まるとおもいそれは避けました。

最後に塾名については、
これまでに使用したフォントとは別の「HG創英プレゼンスEB」を使用しています。
もしロゴがあればそれを下部に配置しましたが、
今回は塾名だけだったので、別フォントにして、これは塾の名前である、ということが分かりやすいように表現しています。

今回は、スムーズにデザインのラフ作成からバナー作成まで作業を進めることができました。
学生時代に受験を経験したこともあり、今も教育分野のお仕事を頂くこともあるので、
普段から気にして広告などを見ていたことから、インプットも多かったのが要因かなと思います。


デザイン課題:ブランディングを意識したファッションサービスバナー

引用:Web鍛 様 「ブランディングを意識したファッションサービスバナーの作成」 より

制作時間:
バナー内容の洗い出し 20分
ラフ作成 20分
素材調達 40分
バナー作成 120分

制作時に考えた事

50代女性がターゲットということで、母の日に送るお花の色をイメージし、ピンク系のローズの色をメインに採用。
また、ワードローブ診断サービスであるので、
白黒しかなかったクローゼットの服が診断を経て華やいでいく、というイメージで
上にある情報は白黒⇒下にある情報はピンクを主体にして色味が付く様子を表現しました。

全体的な色の使い方は、ESSEのような生活情報誌をイメージしました。
文字に対して、強い縁取りは使っていないように見えたので、
見やすくしすぎるよりも、色味を優先しました。

またフォントについては、
上のキャッチコピーは古く白黒であることをイメージできるように、
文字色と縁取りは白黒としました。

そして、サブコピーについては薄いピンク色の文字色を使い、
後ろに濃いピンクを使用しました(これも生活情報誌で見られた表現を使用しています)
これによって、これまでの白黒に色付いたものが入ってくる、という表現を目指しました。

また50代をメインターゲットにするということで、この部分にのみ強調色として強い赤を使用しています。

サービス名は英字筆記体を使用して、綺麗なイメージをもてるようにしました。

今回は1人だと不安な方がペアプランの存在を意識できるように、ペアの要素を強く押し出しました。
具体的には、値段を1名様よりもペアの値段を大きく表示し、
またサービス名をみて驚いている2人の女性のイラストを配置しました。

値段については、キャンペーンで安くなっているのを表現するために元の値段に赤で打消し線を引いて、
矢印の後に現在の価格を表示することで安くなった値段を強調できるようにしました。

反省点として、このようなファッション・服飾に関する広告のインプットが足りないなと感じたところがありました。
ワードローブ診断というサービス自体、私にとっては初めて知るものでしたので、
なかなかイメージがつかず、何を情報として含めればよいのか考えるのに時間がかかってしまいました。

そこで、生活情報誌の表現を使用することで形にすることができました。
広告だけに限定せずに、いろいろなジャンルの媒体を参考にすることが学べてよかったと思います。

また、デザインの4原則のうち近接の考え方から、
キャッチコピーとサービス名、サブコピーは近くに配置した方が分かりやすいです。
しかい、キャッチコピーがこれまでの白黒の服飾、
サービス名とサブコピーが診断後の彩りのある服飾と考えると、
あまり近くに配置すると相反する要素で喧嘩してしまうなーと思いました。

その中で近接の考えと見た目のイメージの折り合いをつける配置にとても時間がかかってしまいました。

最終的には画像のような配置になりましたが、
「これまでの服が似合わなくなったと感じる」⇒「50代のためのクローゼット診断」⇒「サービス名」
という流れで自然に目線が動くようにできたかなと思います。


LINEスタンプで使用したターミナル画面をモチーフにしたデザイン

販売ページリンク:https://store.line.me/stickershop/product/34283254/ja

制作時に考えた事

最初に「手書き ✖ エンジニア系要素」というコンセプトでスタンプを作りたい、という発想からはじまり、そこから
「ターミナルのコマンドを自分で入力できるスタンプがあれば面白いのでは?」
という発想を組み合わせ、ターミナル画面にコマンドを入力する手書きスタンプの作成を開始しました。

ターミナル画面ということで、シンプルなウインドウとコンソールを意識してデザインを作成しました。
手書き感を強く出すために、ざらざらとしたペンを使用して輪郭がきれいになりすぎないようにしています。
またコンソール全体は黒よりも少しグレーよりにしています。

“$” の色は実際の緑色よりも視認性が高くなり、スタンプとしての見た目も明るくなるように、黄緑に近い明るい緑を使用しました。
また文字色についても、#ffffffではなく、コンソールの色となじむようグレーを少し混ぜた白を使用しました。

文字の大きさは、スタンプサイズでも何のコマンドが入力されているかを見やすくするよう、
スタンプサイズの1/3から1/4になるよう手書きしました。

また、文字の配置については本来ターミナル上では左から右にどんどん記入していく形ではあるのですが、
それだと正方形のスタンプと相性が悪いため、”\”(ターミナル上の改行記号)を使用することで
正方形でも見やすいようデザインをしました。

文字のサイズについては、カスタムスタンプ(自分で文字入力ができるスタンプ)の仕様との兼ね合いがとても難しく感じました。
ターミナルということで、できる限りたくさんの文字数が入力できるようにはしたいですが、
半角文字だけでなく全角文字の文字数に合わせて入力できる最大の文字数を設定する必要がありました。

そのため、文字数設定で一度リジェクトが発生し、それに関する対応が別で必要となってしまいました。

スタンプとして文字が見えて、ある程度それらしい文字列を入力でき、かつ手書きの文字の大きさとサイズ感を合わせるギリギリのラインを探った結果、最大5文字がギリギリのラインでした。

一番最初に作成したスタンプということで、したいデザインと実際のルールとの折り合いなど難しい点はありましたが、
最終的にリリースまでもっていくことができてよかったと思います。


LINEスタンプで使用したHTTPステータスコードとブラウザをモチーフにしたデザイン

販売ページリンク:https://store.line.me/stickershop/product/34484058/ja

制作時に考えた事

LINEスタンプの2作目で、「手書き ✖ エンジニア系要素」というコンセプトはそのままに、
ちょうどHTTPステータスコードを調べていたので、それをもとにスタンプに落とし込んだものです。

今回も手書きで作成するために最初はざらざらなペンを用いてブラウザを描いていましたが、
これだと見慣れたブラウザのウインドウに比べて汚いなと感じたので、きれいな線になるよう書き直しています。

数字の下に線が入っているのは、Bad Gatewayを引いたときに出てくるものをイメージしました。
また、数字とその下の線の間には、見やすくなるように 1px のグレーの線を引いています。


日々、コンテンツ追加中!