こんにちは。ふみ（@tasuhiku_labo）です。
3月に開催された、第3回スキルアップウィークに初参加しました。
ひとりで勉強していると誰かにアドバイスをもらえる機会がなかなか無いので、ありがたき神企画！
スキルアップウィークとは？
現役フリーデザイナーのKAORIさんが主催する企画。
▷KAORIさんInstagram：＠cam_design_tips
▷KAORIさんTwitter：＠cam_0922
自分が実際にクライアントさんにバナー制作を依頼されたと仮定して作成に取り組み、提出すると最大5回フィードバックをいただけます。
今さらですが、学んだことや反省点など全てまとめたいと思います。
ふみほんとにいまさら〜
参加に当たってのルール
下記ルールに沿って参加します。
- 3つの中から1つ、好きなお題を選んで制作をする。
- 制作するのは1度に1人１種のみ。
- 5回のアドバイスのうち、例えば2回目でOKもらったら2つ目の制作に着手してOK。もちろんそこで終了としてもOK。
わたしの選んだお題
今回挑戦したお題はこちら。
3つのお題の中で一番要件が詳しかったこちらを選択。
初心者なので冒険はせず、トレースレベルで作成することにしました。
ふみたぶん冒険すると事故っちゃうな
1回目提出〜5回目fixするまで
1回目
まず提出したのがこちらです。
トンマナとして提示されたバナーをほぼトレースして作りました。
写真はトリミングして、つないでいる手を強調。
必須の文言だけではさみしく感じたのとリンクボタンに視線を集めるために、筆記体であしらいをプラスしてみました。
KAORIさんからのフィードバックはこんな感じ。
- 素材選びからトリミング箇所まで考慮した点は素晴らしいです！
- 依頼したトンマナからもずれておらず、配色がとてもきれい
- 文字の優先度も正しく配置さていると思います！
- 今回は写真をメインに持ってきて、そこからイメージさせるようなデザインにしてくれていると思うので、全体のバランスは悪くないですが、下半分の円の中のパーツ配置を丁寧に考えないとかなと思います。
- checkの位置が中途半端なので色変えてボタンに少しかぶるくらいのほうがいいかも。それか無くてもいいかも。ボタンの文言に「チェック」って入っていなかったらありだったかも。
- ボタンの中の文字サイズってこれがベスト？もう少しボタンデザインピンポイントで参考探してほしいです。
- 来館特典付きの文字と下線の幅があっていないのが気になります‥！文字より下線のほうが太く目立っている気も。
- 「ウェディングフェア」より「開催中」のフォントサイズを一緒にしてほしいです！あとカタカナ小文字の前後カーニングは丁寧に揃えましょう
とっても詳しく添削してくださって感激…。
ふみたくさんの人が参加しているだろうに、こんなに丁寧に…すごすぎる！
2回目提出
フィードバックを踏まえて修正したのがこちら。
「Check!」を消すか残すか迷って試行錯誤。やっぱり無いとさみしく感じたので、色や配置を変えて残すことに。
ボタンはフォントサイズを上げて矢印を細く小さく変更。
すると、ボタンが悪目立ちしている気がしたのでボタン自体の高さを少し小さくしました。
「来館特典付き」の下線は幅を変更し、細い線のみに。
あとは、文字のカーニングを全体的に調整しました。
KAORIさんから2度目のフィードバック。
- ボタンの中、良くなりましたね！矢印はフォントと同じが小さいのが正解だと思います。
- ボタンの中の文字が上によっている気がする。
- 「check」は1回目よりはだいぶ良くなったけど、本当に必要かな？
もし物足りないのなら「weddingFair」を入れるとか、ボタンのサイズとフォントサイズの見直しとか…。
どうしてもスカスカ感を埋めたくて、何か足さねば！という気持ちになってしまっているのを見透かされていたようです。
ふみ素人っぽい考え…
3回目提出
2回目のフィードバックを踏まえて提出したのがこちら。
まずはボタン内の文字をきちんと上下中央に。こういう凡ミスはしっかりチェックしてなくしていかないと！
そして、筆記体のあしらいをつけるのか・つけないのか…。迷いに迷って「weddingFair」をつけることにしました。やっぱりどうしても寂しさが拭えず。
KAORIさんから3度目のフィードバック。
- ボタンのなかはこれで良いと思います。
揃えやカーニングなどは必ず細かい部分まで確認しましょうね！ - レイアウトはきれいですし、情報も正しく届くデザインになっています。
- 「weddingFair」をいれるならメインコピーの部分ではないでしょうか？
適切な情報をターゲットに届けるためのデザインを意識して装飾すると良いと思います。 - 「筆記体はナシ」でFIXでも良いですが、もう少しクオリティ上げたいというのであれば
・「来館特典」のデザインを変えてみる
・画像のフチにブラシや素材でキラキラを足してみる
などやってみては？
「適切な情報をターゲットに届けるためのデザイン」
これは難しいけどとても大事！引き出し無いながらも試行錯誤しながら考えます。
ふみ多分頭からけむり出てた
4回目提出
試行錯誤の末、4回目提出したのがこちら。
4パターンくらい作ったのですが、結局
- 筆記体のあしらいをなくす
- 画像のフチにキラキラのブラシで装飾する
このパターンを提出しました。
KAORIさんから4度目のフィードバック。
- きらきらはすごく素敵！加減もちょうどいいと思います！
- 無理にこの長方形＋円のかわった形にしなくとも上下分割レイアウトのほうが組みやすいかなと思います。
確かに。
トレースレベルで挑戦しよう！と思っていたのですが、トレース元にとらわれすぎていました。
KAORIさんがざっくりと例を作ってくださったので、今度はそれを参考に大幅修正。
ふみトレースレベルと言っても、内容が違えばデザインも変わるの当たり前〜
5回目提出
5回目の添削が最後なので、気合を入れ直して提出したのがこちら。
結局は８割くらいKAORIさんの作った例のトレースになってしまったんですが、プロのアドバイスは全力で実行させていただこう！学ぶことは真似ることから！と気を取り直して作成。
「来館特典付き」のレースのフレームは、ドレスの雰囲気と合うように意識してみました。
KAORIさんから５度目のフィードバック。
- 円のなかが上下中央になっていない
- キラキラの終止点が中途半端なので画像部分だけのほうが良いかと思います。
そしてもう少し光彩がランダムな感じ（ジグザグ感？）出せるともっと良くなると思います！
本来であれば5回目のフィードバックで完走しなくても終了なんですが、もう少し待ってくださるとのことで急いで修正！
キラキラをバランスよく修正して、レースの中の文字の位置も微調整。
文字の位置は上下中央ボタンで合わせていたんですが、目で見ると上に寄っている気がするので目視で修正しました。
これでなんとか無事にFix！
ふみ完走めっちゃうれしい！！
まとめ
今回初めてスキルアップウィークに参加して、自分の足りないところに心折れる瞬間もありました。
でもKAORIさんからのフィードバックは的確で分かりやすくてとても勉強になったし、何より楽しく参加できました！
実際に参加したのは数ヶ月前ですが、今でもたまにやりとりしたslackを見返して忘れないようにしています。
ふみ細かいところまでしっかりチェックする！これ基本！忘れないで！（自戒）
コメント