2019.01.08 2024.07.13

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

Creative21

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

どうも、ディズニー映画は『トイ・ストーリー』一推しの@Naoyaです。
最近、ディスニービタミン足りてなくて死にそうです。嘘です。メンヘラ女子みたいなこと言ってみました。

はじめに

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

今ここ

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

まずはひたすら気づく

この項目は「1.参考のデザインを集める」で集めた自分が作りたいイメージに近い！良い！と思った参考画像を見て“気づく”練習を行います。この気づきが後々デザインをする上で役立ってくるので、今は“気づく”ことだけ考えて下さいね！では仮に私は参考画像の一枚にこの画像を集めたとします！

これを見て気づきましょう！気づいたことをひたすら口に出しましょう！なんでもいいんです！とにかく気づいたことです！一つなんでもいいので気づいてください！いいですか〜？気づいてないのに次見ちゃ駄目ですよ！

まず一つ！文字が青い！ドキュメントの文字が青いですよね！「え？そんなレベル？」って思ったと思いますが、これでいいんです。なんだ、そんなことでいいのかってなりましたよね。笑
では早速二つ目行きましょう！なんでもいいので気づいてください〜！一つ目に気づいたことが自分と違った方はまだ出ていないものを気づいてください〜！

Naoya

どうですか〜？いいですか〜？では二つ目行きます！

二つ目！Basic operationの文字が斜めってる！うん、斜めってる！傾いてる！「え？だからそんなことでいいの？」ってなりますよね。笑
慣れてください、このレベルでいいんですよ〜！では早速三つ目考えましょう〜！

Naoya

どうですか〜？三つ目浮かびましたか〜？

三つ目！隅っこになんかオシャレな奴ある！何これ！？オシャレ！素敵やん！！！四つ隅にありますよね！では四つ目行きましょう〜！今回は五つ目まで行きます！

Naoya

どうですか〜？四つ目浮かびましたか〜？別に細かい所だけじゃなくてもいいんですよ〜？

四つ目！全体的に配色がPhotoshopっぽい！不意打ちでしたか？全体を見て気づいたことでもいいんですよ〜では今回は五つ目で最後にします！

Naoya

どうですか〜？まだまだありますよ〜、では最後！

Photoshopの文字周りがリボン！Photoshopの周りの文字がリボン見たいになってますね！リボンちゃん！因みにハム太郎は「寝てる君」が好きです。あの子いいキャラしてる。と、いう訳で以上、五つでした！

何故気づきがデザインに必要なのか

気づかないと何事も上達しません。私たちって気づいて初めて行動を起こしますよね？お腹が減ったと気づいてご飯を食べるし、太ってると気づいて痩せようとする、この服私に合うと気づいて洋服を買う、あの人が好きだと気づいて思いを伝える。Webデザインも同じです。何故ならデザイナーのデザインには、デザインの気づきが鏤められているからです。ですが、初心者は気づくことに慣れていません。そうです、気づかないと行動出来ないんです。作れないんです。私もそうでした。例えば、春をイメージしたデザインを依頼されたとして、あなたは、春についてどれだけ気づけますか？桜、ピンク、お花見、テントウ虫、四つ葉、入学、新学期等、たくさんありますよね。その気づきからデザインは生まれるんです。もう言いたいことは伝わったと思いますので最後にこの記事で使ったデザインの気づきをまとめますね。

その他の気づき

その他の気づきを画像とテキストでまとめました。全ては記載していませんが、ここにない気づきがあったらそれはあなたの武器になるので大切にしてください。

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

まとめ

気づきの練習は手軽に出来ます。レストランのメニューもそうですし、なんとなく買った飲み物のパッケージ、Twitterで流れてきた広告など日々私たちは広告を目にしています。私は電車内の広告でよく練習してましたね。気づきは次のステップ「3.何故そのデザインが成り立っているのかを考える。」に影響するので、まずは数多く気づくことを心掛けましょう。では私はバズと一緒に無限の彼方へ行ってくるので、またね。