2019.01.16 2024.07.11

【初心者必見！バナーデザインの作り方】Webデザインは答えを組み合わせると上手くなる。【10の基本でコツを掴め】

Creative21

【初心者必見！デザインの作り方】Webデザインは答えを組み合わせると上手くなる。【10の基本でコツを掴め】

どうも、最近ブラックコーヒーが飲めるようになった＠Naoyaです。昔はカフェオレしか飲めなかったんですけど、今はブラックの割合が高いですね〜わしもまた大人になったかのぉ〜。寿司も昔はハンバーグ軍艦と卵しか食べれなかったし。笑

はじめに

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

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

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

【初心者必見！バナーデザインの作り方】Webデザインは何故を考えると上手くなる。【10の基本でコツを掴め】何故を考えたら自分の中で結論づけてしまいましょう。私の結論と同じじゃなくていいんです。何故？の答えを自分の中に出してください。この何故を結論づけることが、自分のデザインを作る上で非常に重要になってきます。...

今ここ

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

前回のおさらい

前回の記事では「ドキュメント」「Basic operation」の部分について下記の様に私は仮説し結論づけました。みなさんもそれぞれ仮説し結論づけているはずです。

Naoya

　何度も言いますが私と結論は違っていいんですよ！

ドキュメントが青い結論

「ドキュメント」が青い理由は、「ドキュメントとカンバス」を読みやすくする為
「ドキュメント」が青い理由は、全体のデザインの強弱をつける為
「ドキュメント」が青い理由は、「はカンバス」より目立たせたい為

ドキュメントが明朝体の結論

「ドキュメント」が明朝体の理由は、柔わらかい印象にするため
「ドキュメント」が明朝体の理由は、全体のイメージのバランスを取るため
「ドキュメント」が明朝体の理由は、オシャレな印象にしたいため

Basic operationの文字が斜めの結論

「Basic operation」の文字が斜めな理由は、中央の横のラインのひつこさを無くすため
「Basic operation」の文字が斜めな理由は、スプリクト体感を強調するため
「Basic operation」の文字が斜めな理由は、きっちりすぎる印象を崩すため

答えを組み合わせる

今回は答えを組み合わせるです。前回の記事であなたが出した答え(結論)を組み合わせていきます。ここで一度今の状況を振り返ってみましょう。あなたは今、作りたいデザインがあって、コンセプト確認を行いそのイメージに近い参考画像を集め、集めた参考画像が何故成り立っているのかを仮説し結論づけた状態です。なので皆さんそれぞれ作りたいものは異なります。春のイベントのデザインを作るべく春の参考画像を集めたかもしれませんし、ソーシャルゲームのバナーを作るベくソーシャルゲームの参考画像を集めたかもしれません。皆さんそれぞれです。

https://nexout.blog/design-concept-confirmation

自分が作りたいデザインの場合はどう活かせるかを考える

リッチ(高級感)なデザインを作りたい場合

リッチなデザインを作りたくて下記の参考画像(サムネイルの画像ですが)を集め、高級感を感じると気づきこう結論づけたとします。

高級感を感じる理由は、全体的に余白を広くとっているため
高級感を感じる理由は、配色が少ないため
高級感を感じる理由は、トーンが落ち着いているため
高級感を感じる理由は、欧文が多く使われているため

これ、盗んでください。あなたのデザインに生かしてください。答えを組み合わせるとはこういうことです。この参考画像では、上記のような項目で高級感を感じたから私が作りたいデザインの場合も、余白を広くとってみようかな、配色を少なくしてみようかな、トーンを落ち着かせようかな、欧文を入れてみようかなと思考錯誤してください。

エレガント、上品なデザインを作りたい場合

エレガントなデザインを作りたくて下記の参考画像を集め、エレガントさを感じると気づきこう結論づけたとします。

エレガントさを感じる理由は、配色が少ないため
エレガントさを感じる理由は、トーンが落ち着いているため
エレガントさを感じる理由は、装飾が使われているため
エレガントさを感じる理由は、全体的に細いあしらいが多くフォントにセリフ(文字の端にある小さな飾り)があり繊細なため

これ、盗んでください。あなたのデザインに生かしてください。答えを組み合わせるとはこういうことです。この参考画像では、上記のような項目でエレガントさを感じたから私が作りたいデザインの場合も、配色を少なくしてみようかな、トーンを落ち着かせようかな、装飾を入れてみようかな、繊細さを加えようかなと思考錯誤してください。

キャラクターを訴求させるデザインを作りたい場合

キャラクターを訴求させるデザインを作りたくて下記の参考画像(説明用にフリー素材で作ったバナー)を集め、キャラクターが目立っている立っていると気づきこう結論づけたとします。

キャラクターが目立つ理由は、しっかりキャラクターの全体像が分かるため
キャラクターが目立つ理由は、顔をアップで間を埋めているため
キャラクターが目立つ理由は、キャラ背景に墨を引いて、よりキャラを立たせているため

これ、盗んでください。あなたのデザインに生かしてください。答えを組み合わせるとはこういうことです。この参考画像では、上記のような項目でキャラクターが目立っている立っていると感じたから私が作りたいデザインの場合も、キャラクターの全体像を見せようかな、顔をアップにしてみようかな、キャラの背景に何かモチーフを足してみようかなと思考錯誤してください。

デザインを盗めは”パクれ”ではない

盗めと書きましたが、あなたが参考画像をみて感じたことを自分のデザインに生かすという意味です。参考画像のものをそのまま作ってしまったらそれはパクリです。これ似てるようで全く違うので注意してください。

まとめ

デザインを盗めはダイエットと同じ

ダイエットって痩せたくて色々調べますよね？糖質制限、運動、筋トレ、野菜から食べる、細かく回数を増やして食べる等色々ありますよね？で自分に合うかな〜と思って試し、続かないな〜と思って他の方法を試し、気づいたら自分に合う方法を見つけている。筋トレを週2でして夜は少なく食べるって方も入れば、糖質制限しながら運動を心掛けている方もいる筈です。あれ！？これって！！！そう、この記事でやったことです！！！良い所どりをして自分のスタイルを確立してますよね！

よく業界では、良い所どりしろとか、デザインを真似ろとか、盗めと言います。実際に言われことがある方もいるのではないでしょうか？その答えはこの記事でやってきたことです。あなたが良いと感じた部分をいい所どり、真似ろ、盗めと言うことです。これを今まで言いたくて細かく記事を書いてきました！皆さんに伝わっていると嬉しいです。次の項目では参考画像から盗んだものを生かしてラフデザインを作っていきますので、紙と鉛筆を準備しておいてくださいね。では私は少年心を取り戻すべくお寿司屋さんで卵とハンバーグ軍艦を食べてくるので、またね。