こんにちは！シバタです。
最近は涼しくなってきて嬉しいです。ようやくお出かけが楽しくなる時期ですね！
それはそれとしてFEシャドウズがすごく面白くて気がついたら寝不足スレスレの日常を過ごしています。

さて、今回は焦らしに焦らした初心者向けのデザイン制作方法を書いてみます！
ぶっちゃけこういうのは場数を踏んで自分なりのやり方を見つけるものですが、デザインの勉強を始めた方のための一助になれば幸いです。
デザイン上級者の方は今回の記事を見て「私の方がうまく作れるぜ！！」なんてマウントとったりしないようにお願いします！
いい歳した大人が全然容易く泣きます！
あくまで「シバタはこういう順番でデザインを消化して制作する」っていう参考記事として見てください。

他の方の制作方法も見たいです！

予防線を引いたところで、早速参りましょう！

1 指示書をよく読みましょう！

今回は弊社にいらした新入社員のとある方に協力をお願いしました。
私から和菓子・洋菓子をお題に出して、空き時間に架空のバナー制作指示書を作成していただきました！
これがですね…ロゴとか画像とかの指定をきっちりしていただきまして…ロゴなんかすごいんですよ…これをブログにしたらいいと思います…。
(使用画像についてはフリー素材である方が嬉しいとお伝えし、その通りのものを持ってきていただきました！)

指示書の内容をまるまる引用するということは今回はしませんが、まず一番最初にすることは指示書を読むことです。
もう既にお付き合いの長いお客様だと、そのテイストやテーマ性などがわかるかと思いますが、基本的には指示書から意図を想定し、イメージを膨らませます。
よくわからなければお客様とすり合わせをすることももちろん必要です。

とはいえ、まる読みしていても要素が抜けることはありますよね。
私はよくやらかしました。うっかり見落とすことがあるんです。指示書の文言って。
確認してもらう段階で判明して頭を抱えることがあるんです。

ここからが私の対策方法になります。

2 一旦全部いれましょう！

指示書に書いてある「これを入れてください」のもの、ぜ〜〜〜んぶ！！とりあえずキャンバスにいれましょう！
イメージ図が大体以下のようになります。大体。

この時点で私の場合は「大体ここにいれてやろう…」と目論見はします。
ですが！！一番はここに全部いれることが重要です！！どうせデザインしてたら位置なんかいくらでも変えます！！
ここに全部いれてからが本番です！

3 情報の優先順位を決めましょう！

もちろん、指示書を見ながら決めます。
今回の指示書の意図を汲み取ると、新商品の宣伝・購入ページへの誘導が目標になります。
「だったら商品の画像は大きく見せたい！」
「商品の名前も周知させたい！」
「限定商品だから限定であることを強調したいよね！」
などなど…自分の中で会議を開き、いろいろなことを検討しながら、さっきぜ〜〜〜んぶ盛り込んだキャンバスの要素を調整します。

そうするとですね、荒削りですがこんな風に変わって行きます。

う〜ん！！デザインの迷走！！

4 本格的にあしらいを取り決める時に参考成果物を見て流行りや王道を抑えましょう！

シチュエーションと使用画像によりけりですが、過去の成果物から学びましょう。
馴染みのクライアントだと以前作った成果物などがあるかと思いますが、同系統のジャンルを調べて抑えるのも大事です。
やったことないテイストをやる時はなおさら力を入れて取り組んだ方が良いです。
まんまのものを探せとは言いません。
世間の「カワイイ！」「おいしそう！」ってこういうものなのか…ということを学び、要素を自分の中に落とし込んでいきます。
この工程を省くと世間から置いてかれていきます。

参考にするものの探し方は弊社ブログでもいろんな方が紹介されてます。
はっきりデザインならこの記事(Webデザインのインスピレーションに！参考サイトまとめ)とか
配色ならこの記事(配色の組み合わせが決まる参考サイト３選！)とか
考え方ならこの記事(事前準備・参考サイトの探し方)などを参考にされるとよろしいのではないかと思います！

5 自分の中で要素を落とし込んだらもう一回向き合いましょう！

自分なりにテイストが固まったらもう一回向き合いましょう！
ここで私なりのポイントがあります。
方向性の違うアイデアが浮かんだら、もしくは迷ったら、今まで作ってきたものとは別にアートボードを分割しましょう！

惜しい気持ちがあるのはそうなんですけど、今まで作ってきたものの素材とかも流用できることがあるので、8割できるまでは置いておきます。
「やっぱり前の方がよかったな〜」って思った時に全然無いと悲しくなるし、そこまで復帰させる手間も半端じゃ無いからです。
PCの容量とか考えるとガンガン切り捨てるほうが一番いいのはそれはそうですが、私は結構後悔しいなので、極力後悔の負担を減らすためにそうしています。
何より最初に作り出した案は一番はじめに必要な要素をつっこんでいるはずなので、すぐ見比べて変に捨てて無いかという確認できるのもあります。

では、作り込んで行きましょう。

6 困ったり煮詰まったりしたらダブルチェックも兼ねて人の意見に頼る！

参考物を見直すのももちろんアリだと思います。
でも一番の効く薬は、第三者に見てもらうことだと思います。
企業に所属してるからこそできるメリットでもあります。
パッと見た時に「ここがなんかヘン！！」「ここが古い！！センスない！！」と言ってもらいましょう！
一番最初に必要な要素を突っ込む前の私は「シバタさん…これ忘れてるよ…」とここで指摘をいただいてました。本当に申し訳ございません。
あと馴染みの人に見せられないものはお客様に提出できませんので！覚悟を決める意味でも一度どなたかに見ていただきましょう！

今独学で頑張ってるよっていう方は、お友達に聞くのが良いかなと思います。
ですが、「どうしてもお友達もいなければ見せられる相手もいないよ！」という方にも、全然方法がないわけじゃないです。
私が「1人で困った時に試す方法3つ」が下記です。

・30%表示で見る
・一晩寝て起きて見る
・立って画面から離れて見る

上記のどれか一つを行うことによって、頭が一度リセットされて、第三者視点で俯瞰して見ることができることもあります。
精神論です。でも実際これをすることで「ヘン！！」という目が養われることがある、と思います。
例えば「優先順位をつけたはずなのに、重要な情報が全然見えない」とか、「画像と背景の色味が同色系で、なんか全然目立たない」とか、そういう感じのことが見えてくると思います。

上記の経緯を経て、最終掲載するものが下記になりました。ｴｲｯ

7 振り返り：自分なりのサイクルを見つけましょう！

それでは、私の制作手順を要点ごとに振り返って行きましょう！
もう一ついただいてた指示書に沿って、テイストの違うものを作りながら振り返ります！

1.指示書をよく読む！必要な要素は一旦全部いれる！

2.優先順位を付けて、整理！味付けの際に過去の成果物を参照し、流行りや王道に立ち返る！

3.他の人の意見または第三者視点を得て必要事項を確認し、デザインをブラッシュアップする！

4.完成！！提出！！

私はこの方法でデザインを作っています。
もちろんテイストやトーンによる得手不得手は未熟者なのでたくさんありますが、このサイクルを作ることで深刻な時代遅れなどは生じにくいかなと思っております。
一番理想的なのは常に流行アンテナを立てておいて、何が来てもすぐ取り組めるようにセンスを磨いておくことだと思いますが、私は3歩歩くと忘れてしまう重篤な鳥頭なので、「困った時に何を頼るか、何を調べるか」という道筋をあらかじめ取り決めておくことにしました。
皆さんも自分なりに制作サイクルを決めると良いかと思います。

8 まとめ：隙あらば自分語り

「デッサンは7割が観察。3割で描画する」と、かつて高校生の時に美術の恩師が仰ってました。
当時の私はなりふり構わず手を動かしていたような気がしますが、振り返って見ると鉛筆に指を立てて真面目にモチーフを測り、アタリをつけていた時間の方が長かった…気もします。
殊に私はモチーフを小さく描いてしまう癖があったので、そうならないように気を付けていた意識もありました。

最近はデザインにも似たようなものがあると思っています。「調査7割、実働3割」です。
簡単に作るだけなら正直そんなに時間はかからないです。
ただし、自分が作ったそのデザインのクオリティがどの程度のレベルなのかを理解するためには、過去に作られたデザインと比較することは避けて通れないと思っています。

しかし、調査だけにかまけて手を動かさなかったら一生時間がかかってしまいますし、時間をかけすぎたらそれはプロの仕事ではなくなります。
私の記事は初心者の方に向けて書いている面が強いですが、初心者のうちにできることは、「素早く調べ、的確にデザインに落とし込み、クオリティをあげるトレーニング」だと思います。

実際のデザインの仕事には、お客様側で厳格なルールが策定されていることが多いです。
そのルールに則った上で、要望を叶えるデザインを納期内で作ることができるのがプロ、だと思います。
そういう意味では本記事は本当に初心者向けで、いろんなものを省いた簡易版ですが、デザインに取り組み始めた人の助けになればいいなと本気で思っています。

ぜひ、楽しいデザインライフを！

本記事で作成したバナーの画像は、いつもお世話になっておりますフリー素材「ぱくたそ」様から拝借しています。

9 おまけ：本記事のサムネイル作り

弊社ブログではサムネイルを記事内で載せてる方と載せてない方がいると思います。
シバタはもっぱら、載せてない側ですね。
なぜか？を説明したことはありませんでしたが、シバタは基本的に「記事一覧で見た時にサムネイルから受ける情報量」のバランスを(一応)考慮して作ってるからです。
それが以前のブログサムネイルでマーケターに気に入っていただけた点かもしれません。

つまり記事に載せちゃうとすごくうるさいんです。情報量が。
思ったより大きいんです、この文字サイズ。

このサムネイル作りでやってることは3点だけです。

1.一旦全部入れる

2.優先順位を考える

3.バランスみて調整する

流行りとかは考慮してないです。クオリティを度外視するとこういうものです。
ただ、「人の目を惹くためになんとかしています」。
何に重きを置くかでもデザインは変わってくるというのがよくわかる例になっ…てたらいいですね。

ちなみにいつも記事名とサムネイルの文言が違うのは記事名はギリギリまで考えているからです

それでは改めて、よきデザイン学習ライフをお送りください！

メルマガ登録