デザイン作成のプロセスを学びました
はじめに
こんばんは。
てぇきちです。
前回に引き続き、BONOでのデザイン学習が一区切りついたので、学んだことを整理したいと思います。
今回取り組んだこと
「デザイン勉強の診断サイトのアイキャッチ制作」を目的として、完成に至るまでのプロセスを学びました。
デザインてどうやって決めてるの？
なんでこの色にしてるの？
なんでこの文章を載せてるの？
トレースではなく、実際に自分で手を動かして作業し、これらの疑問を解消することができました。
デザイン制作のプロセス
最初に作業全体のプロセスをまとめておきます。
目的を決める
参考となるデザインを調査する
グラフィックの方針を言語化する
ムードボードを作成する
レイアウトのパターンを作成する
スタイリングのパターンを作成する
配色を決める
この流れでデザインを作成したので、一つずつおさらいしていきます。
1.目的を決める
目的は依頼者がまとめてくれる場合もあるが、そのパターンはあまり多くはないとのこと。
なので自分で考えられるようにする。
早速、書き出してみました。（手書きなので読めないかも、、）
メモをベースに、今回の目的を考えた結果、
『デザインの勉強をしている人向けに、現在のスキルや今後の勉強法を提示するようなデザインスキルの診断サイトを作成する』ことを目的としました。
2.参考となるデザインを調査する
Pinterestを使って、今回の目的やイメージにあった参考サイトを調査しました。
まずは「診断サイト」で検索し、その中から「デザイン」や「初心者」といったワードのイメージに近いサイトを集めました。
※デザインの引き出しがないので、世の中のトレンドを知る意味でも調査はしっかりと行う！
また、集めたデザインに対してコメントを残し、なぜこのデザインを集めたのか、パッと見で分かるようにしていきました。
3.グラフィックの方針を言語化する
デザインの方向性を決めるため、目的に沿った方針を言語化しました。
参考サイトを調べた結果、診断サイトにもポップなものやクールなもの等、様々な種類がありました。
今回は、デザイン初心者の不安を解消できるようなサイトにしたいと考えたので、そのイメージを言語化して付箋にメモしていきました。
4.ムードボードを作成する
イメージしている「ポップ」「明るい」「初心者向け」といった内容に近いデザインを再度調査しました。
ある程度デザインを集めたら、２軸で印象を分けていき、
「ポップ」・「シンプル」のような基準で並べてみました。
並び替えが終わったところで、今回のイメージに近い部分を丸で囲いました。
ポップ・シンプル寄りに丸をつけた理由
・ポップかつシンプルにすることで、不安を抱えた人が診断を行ってみようと思えるようにしたい
・賑やかすぎると、楽観的に見えてしまい「不安を解消」というイメージとは少し違うと思った
・かっちりしていると、「初心者向け」ではなくなってしまう、気軽に診断できるイメージではなくなると思った
5.レイアウトのパターンを作成する
ムードボードで決めた方向性に沿って、再度デザインを調査しました。
そして、色や装飾はつけず、レイアウトの骨組みを白黒のみで検討しました。
※白黒にすることで、検討する内容が減り骨組みに集中できる。
また、１つのパターンで決めようとせず、複数パターンを用意して比較検討できるようにしました。
条件
・ポップかつシンプル
・賑やかすぎない
・かっちりしすぎない
6.スタイリングのパターンを作成する
白黒のまま、要素を追加してデザインを検討していきました。
まず、構成の参考となるデザインを再度調査し、配置やテキストの構成、イラスト等、使えそうな要素を集めました。
イラストに色が付いてるのは元からです。
初めてということもあり、参考サイトのデザインに寄せすぎてしまったのは反省ですね。。
参考からデザインを取り込むやり方も意識して改善していきたいと思います。
（丸パクリではなく、構成やバランスなどの大枠を盗めるようにする）
7.配色を決める
最後に配色を決めていきました。
いつも通り、まずは配色の参考になるデザインを調査しました。
その中から、使えそうな色を自身のデザインに当てていき、できるだけ多くのパターンを用意しました。
今回は自分の中で「このデザインでいこう」というものが決まっていたので、そのデザインに絞って配色を検討しました。
色々と並べてみた結果、この４つのデザインで悩みました。
まず右上、明るい印象があっていいなと思ったのですが、赤色っぽい背景がなんとなく刺激が強い気がしてやめました。
できるだけ親しみやすく優しい印象にしたかったので、ボツ。
次に左の上下、これらもおしゃれで優しい感じがしていいなと思ったのですが、落ち着き過ぎていて明るい雰囲気ではないと感じたのでボツにしました。
最終的に右下のデザインに決定したのですが、理由としては上述したデザインで満たせていなかった要素を満たしていると感じたからです。
親しみやすく明るい印象であり、背景色と文字色のバランスもいいなと思いました。
完成したデザイン
背景に少しだけグラデーションを加えましたが、ほとんど配色を決めた時と同様のデザインです。
完成品を見ると、正直イマイチというか、素人が考えたデザインだなぁという感じがしますね、、
ただ、学習前の自分はこのデザインすら作れなかったと思います。
ここに至るまでのプロセスを学び、実際に手を動かしてデザインを作成することができたので良かったです。
また、これまでと違い、デザインを構成する要素一つ一つに「なぜ〇〇にしたのか」という問いへの回答ができる状態になりました。
「なんとなくいいと思った」、「自分の好みだから」ではなく、「サイトの目的である〇〇に合っている」、「××にすることで△△になっている」というように今では具体的な理由を答えられます。
おわりに
完成後に振り返ってみて、デザイン作成は前半の工程がとても大事なんだなと感じています。
目的がはっきりしていなければ、目指すべき方向性が定まらずに後半の工程で詰まってしまうというのがよく分かりました。
今後は今回学んだプロセスに基づいてデザインを検討し、自身の経験値・デザインの引き出しを増やしていきたいと思います。
あとサムネも余力が出てきたら見栄えよくします👍
この記事が気に入ったらサポートをしてみませんか？