2019.02.02 2024.07.13

【初心者必見！バナーデザインの作り方】Webデザインは説明すると上手くなる。【10の基本でコツを掴め】

Creative21

【初心者必見！デザインの作り方】Webデザインは説明すると上手くなる。【10の基本でコツを掴め】

どうも、エナジードリンクは『モンスターエナジー』より『レッドブル』派の@Naoyaです。だってレッドブル飲んだら翼生えるらしいじゃないですか？そりゃレッドブル飲むっしょ！

はじめに

この記事は下記の記事「【初心者必見】Webデザインが上手くなる10の方法」の項目を掘り下げた内容になりますので、是非下記の記事も併せてご覧下さい。

【初心者必見！】思い通りのデザインが作れるようになる10の方法今回は私がWebデザインでスキルアップをする為に行っていたことをまとめましたので、参考になれば嬉しいです。デザインを初めて間もない方は、デザインがどうやったら”上手くなるのか”、”出来る様になるのか”ととにかく悩むと思います。ここで挙げた10の方法は私がデザインを作る際に行っていた全てです。...

こちらは一項目前の記事です。

【初心者必見！バナーデザインの作り方】制作イメージを元にデザインを形にせよ！【10の基本でコツを掴め】それでは早速ラフデザインを形にしていきましょう！一番ワクワクする工程ですね！この時に一つ注意してほしい点があります。それはデザインを制作する時に、今なぜその調整を行っているのか？を常に考えて行うことです。...

今ここ

1.参考のデザインを集める
2.それを見てまずはひたすら気づく
3.何故そのデザインが成り立っているのかを考える。
4.答えを組み合わせる
5.作りたいイメージを固める
6.デザイン作成
7.デザインを説明する
8.チェックしてもらう
9.修正をする
10.どこが良くなったのかをまとめて説明する

前回のおさらい

前回は上記の様なデザインを作りました。皆さんもそれぞれのデザインを形にできているはずです。※キャラクターはフリー素材を使用しています。

デザインを説明する

今回はデザインを説明するです。まず説明するってどういうこと？どう切り出したらいいのか分からない！と思われるはずです。分かりやすく言うと細かい部分を指摘された時にその指摘に対して理論的に説明ができるかどうかということです。私が作ったデザインを例に五つほど説明をしていきます、では早速いきましょう。

一つ目

クライアント

何故キャラが大きく配置されているんですか？おいこら。

Naoya

このバナーはキャラクターを一番に訴求する目的の為、キャラクターは大きくデザインしています。

クライアント

なるほど、キャラクターを訴求したかったので助かります。

理論的に説明ができている！

二つ目

クライアント

何故、声優名の色はこの色なんだ？おいこら。

Naoya

キャラクターの雰囲気に合わせた配色にしています。

クライアント

なるほど、確かにキャラクターの雰囲気に合っていますね

理論的に説明ができている！

三つ目

クライアント

何故CVと声優名の色を分けているんですか？おいこら。

Naoya

CVより声優名を目立たせたかったので強弱をつける為に色を変えています。

クライアント

でもCVと声優名はその二つで一括りのはずだ！色を変えたら違うグループに見えちゃうんじゃないの？おいこら。

Naoya

そちらに関しては大丈夫です。確かに色も違って文字の雰囲気も違ったら全く別のものに見えてしまうでしょう。ですがそう見えない様にCVと声優名の文字のあしらい(雰囲気)を同じにしていますし配色は同じにしていてトーンで違いを出しています。

クライアント

なるほど、だから違和感なく情報が入ってくるのか。やるな貴様

Naoya

いえいえ、納得頂けて何よりです。

理論的に説明ができている！

四つ目

クライアント

背景は何故青いのですか？おいこら。

Naoya

こちらはゲームのトンマナに合わせています。

クライアント

なるほど、ゲームの雰囲気が伝わっていい感じです。

理論的に説明ができている！

五つ目

クライアント

何故、手前の桜と奥の桜の大きさが違うんですか？おいこら。

Naoya

画面に奥行き感を出すためです。また背景の葉も手前は大きく奥は小さくして奥行き感が出る様にしています。

クライアント

確かに！背景に関しては気づかなかった！納得しました！

理論的に説明ができている！

何故説明することが必要なのか？

では何故デザインを説明する必要があるのでしょうか？

クライアントに説明する為

先ほどのやり取りではデザインを理論的に説明していたので、クライアントも納得していましたね！ではこれが下記の場合のデザインでクライアントにこうつっこまれたらどうでしょう？

クライアント

何故、声優名が青いんですか？おいこら。

Naoya

え〜汗。背景に合わせました！

クライアント

でもこの青男性っぽくない？しかもCVは何で赤っぽい色何ですか？まとまり感なくないですか？てか青ひつこく感じませんか？

Naoya

あ、え〜とすみません！作り直します！

クライアント

納期は後ろに倒したくないので頼みますよ

Naoya

は、はい！すぐに対応します！

この場合は声優名の色が青いことが一番の問題ではなく、説明が出来ないことが問題なのです。クライアントを納得させられませんでしたね。因みに冒頭でこんなにキレているクライアントは基本いないので大丈夫です。少なくとも私は出会ったことがないです。

方向性を示し合せる為

時には同じ案件もチームで対応することがあります。そんな時に方向性を決める時ってみなさんどうしますか？こんな感じで〜あんな感じで〜と口に出して伝えようとしますよね。そうです、伝えるには説明が必要なのです。その為には自分が説明出来るデザインを作らなければなりません。

デザイン力向上の為

説明がつくデザインを作ると自ずとデザイン力が向上します。それは過去の記事でも書きましたが、デザイナーのデザインには作成者の気づきが散りばめられていて見る人が見れば意図が伝わってきます。裏を返せば、何も考えてないデザインは何も考えてないなと見透かせてしまいます。

【初心者必見！バナーデザインの作り方】Webデザインは気づくことで上手くなる。【10の基本でコツを掴め】この項目は「1.参考のデザインを集める」で集めた自分が作りたいイメージに近い！良い！と思った参考画像を見て“気づく”練習を行います。この気づきが後々デザインをする上で役立ってくるので、今は“気づく”ことだけ考えて下さいね！...

じゃあどうやって説明すればいいの？

じゃあどうすればいいの！そんなこと言われたって分からないよ！難しいこと言うなよ！頭痛いよ！と思われるかも知れませんが皆さんはもうデザインを説明出来るはずです。何故なら前回の記事で常に考えながらデザインをしているからです。その考えたことがそのまま説明になるんです。冒頭にあったクライアントとの対話も私が作りながら考えたことを言っているのです。つまりです！!!!!

考えて作らないと説明出来ない！！！！！

考えて作っていれば、説明が出来るんです。

チェックをしてもらう時に説明文を作れ

皆さんがどんな目的でこの記事を読んでいただけているのかは分かりませんが、あなたがデザインを作っていてそれをチェックしてもらえる環境にあるのであればデザインを提出する時に説明文を加えて下さい。もしくは自分の言葉でデザインを説明する様に心がけて下さい。これはクライアントに提出する時も同様です。

私が作ったデザインの説明

最後に説明文のイメージが掴みやすい様に私のデザインを説明します。わざとかなり細かく説明しますね。

キャラクターを目立たせてほしかったとのことだったので、キャラクターを一番大きくしています。それに続いて声優名、CVと優先度をつけております。また背景色やモチーフに関してはゲームのトンマナに合わせました。墨のモチーフですが、刀に添わせるていることによって躍動感をつけました。また桜と背景のモチーフを手前から奥に向かうにつれ小さくしているので奥行き感も演出しております。文字の配色はキャラクターに合わせております。