2019.01.12 2024.07.12

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

Creative21

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

どうも、最近髪を黒からダークブラウンに染めた@Naoyaです。一時期金髪にもしてましたが、ブリーチすると手入れが大変過ぎて多分もうブリーチはしないです。明るい髪のオシャレさん素直に尊敬します。

はじめに

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

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

今ここ

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

前回のおさらい

前回の記事「2.それを見てまずはひたすら気づく」では下記の様な内容を気づきましたね。今回はこの気づいた部分が何故なり立っているのかについて一緒に考えていきましょう！

フレームが二重
外側のフレームの方が太い/青
全体的に要素がセンター揃え
「Basic operation」の文字が斜め/欧文/スプリクト体/最初大文字
「Photoshop」の文字が欧文/セルフフォント/大文字
「フォトショップ」の横に線がある
「ドキュメント」の文字が青い/大きさが調整されている/明朝体/カタカナ
「は」細いゴシック体
「カンバス」太いゴシック体/カタカナ
中央下にエレガントな装飾がある
四隅にエレガントな装飾がある
要素のまとまりの上下の余白が等しい
全体的に配色がPhotoshopっぽい
オシャレな印象
エレガントな印象
落ち着いた印象
ヴィンテージな印象
配色少なめ

何故そのデザインが成り立っているのかを考える

何も文字を入れていない画像に戻しました。では早速前回気づいたものを一つずつ考えていきましょう！では早速一つ目です！

まずドキュメントの気づきについて考えて見ましょう。画像にある通りドキュメントの気づきは下記になります。この気づきは私と違っていいんです。一つ前の記事であなたが気づいたことです。

文字が青い
明朝体
カタカナ
文字が調整されている

ではまず一つ目の文字が青いが仮に青ではなく白だったとします。すると下の様になりますね。

これを見て皆さんはどう思いますか？どう感じますか？どう印象が変わりました？何故を考えるとはそういうことです。

Naoya

一つ目なので私の感じたことを書いちゃいますね！

読みづらくなった
全体の青を占める割合が少なくなり、デザインの強弱(コントラスト)が弱まった
「はカンバス」と文字の主張が同じになった

ということはですよ？この感じたことはそのまま、何故そのデザインがなり立っているのかの仮説になります。上の感じたことを言い換えるとこうなります。

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

この様に何故を考えたら自分の中で結論づけてしまいましょう。私の結論と同じじゃなくていいんです。何故？の答えを自分の中に出してください。この何故を結論づけることが、自分のデザインを作る上で非常に重要になってきます。

Naoya

気づいた！何故！？それを結論づける！です。では二つ目見ていきましょう！

次にこのドキュメントの文字が明朝体ではなく「カンバス」と同じ書体だとこうなります。

これを見て皆さんはどう思いますか？どう感じますか？どう印象が変わりました？

Naoya

よ〜く考えよ〜

Naoya

何故か考えるの大事だよ〜

Naoya

ウ〜ウゥ！ウ〜ウゥ！ウウウ〜

Naoya

ゲフォぉ！おほぉ！むせた！どうですか〜？浮かびました？

Naoya

では私が感じたことはこうです！

硬い印象になった
「ドキュメントはカンバス」を全部ゴシック体にしてしまうと全体の雰囲気と合ってない感じがする
オシャレ感が弱まった

と私は仮説しました。みなさんはどう仮説しましたか？では続いて結論づけましょう！私は下記の様に結論づけました。

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

ドキュメントの気づきに関しては下の様にカタカナ、文字が調整されているがまだありますが、ドキュメントに関してだけやるのもあれなので、他の部分を見ていきましょう！カタカナと文字が調整されている気づきに関しては皆さんで仮説して結論づけてみてください。もちろん、あなたの気づきの中にそれがなかったらないでいいんですよ！

Naoya

次いこ！次！ドキュメントはもう飽きたよね！

では「Basic operation」の文字が斜めについて考えましょう！もしこれが斜めじゃないと下の様になります。

これを見て皆さんはどう思いますか？どう感じますか？どう印象が変わりました？

Naoya

最近ねミスチル聞いてるんですよ

Naoya

何の曲かって？

Naoya

くるみ

Naoya

良かった事だけ思い出して〜げぇお！むせた！あんなイケボ出ない。どう？浮かんだ？

Naoya

では私が感じたことはこうです！

中央の要素が全部横のラインで整っていてひつこい
スプリクト体の走り書き感が薄れた感じがする
きっちりしすぎて見える

と私は仮説しました。みなさんはどう仮説しましたか？では続いて結論づけましょう！私は下記の様に結論づけました。私と違っていいんですよ！私はこう思う！って言うのを自信持って主張してください。

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

なんで、何故を考えると上手くなるのか

今回は気づきの後にそれがなぜ成り立っているのか仮説し結論づけましたね。この工程が何故必要かというとデザインを説明する時や自分のデザインを考える時に非常に役立ちます。とだけ言われてもイメージ掴みづらいですよね。例えば、友達とチョコレートパフェを食べたとします。友達は他の味を食べていて、「どう？どんな味？美味しい？」とあなたに聞いてきます。あなたは「フレークは甘くて美味しい！チョコレートは多分カカオが効いててちょっと大人の感じ！このギャップが癖になる！」と答えます。あれ？今の！！！そうです。味に気づいて何でそう感じるのかを考え、結論づけ、説明してますよね！今回この記事でやったことが入っている！！！今回の記事の様に一部を説明すると、チョコレートが大人っぽいと気づき、カカオが効いているからと仮説し結論づけています。これで何故を考え、結論づけるには気づくことが必要ということが伝わったと思います。次の項目では、気づいたことを生かして自分のオリジナルパフェ作ろうよって話をしていきます。もう一度気づきの記事を読まれたい方は下記からどうぞ。