新人WEBデザイナー成長日記 #3　デザインの模写の方法

デザイナーのコーチを始めた佐々木です。
新人WEBデザイナーが、グラフィックのトレーニングをする連載の３回目です。前回、いくつかのトレーニング方法を紹介し、「模写」をする事になりました。

デザインの練習で「模写」をする人は多いと思いますが、何をポイントにするとデザインが上達するかが分かると思います。

バナーを選んでみました。
この辺いかがでしょうか、下手にイラストとか使わず文字表現などがうまいと思いました。左はサムネ、右はバナーです。

左出典：https://www.mongoroid.com/
右出典：https://vintagevalue.jp/

左の広告バナーギャラリーは良いと思いますが、右の平屋でるんるんは微妙ですね。
微妙な点は文字組です。文字を使ったデザインとしては、作り中に見えますね。

※この作り中のことはUnder Constructionといい、完成度の低いデザインに対して言うことがあります。

文字組の練習だと代わりにこのバナーを模写してみてください。
このバナーのポイントは、文字詰と大量の情報の中でメリハリをつける事です。

出典：ゼクシイ

最初は、左の広告ギャラリーのバナーを模写してみてください。
テーマは文字を使ったデザインのタイポグラフィーです。そして、構図がポイントになります。　
出版系は伝統がある業界なので、デザインのクオリティが高いことが多いですね。このバナーも、一見雑多な情報を上手くまとめている例です。
綺麗、カッコいいデザインとは違いますが、実用的な技術が詰まっていますね。

できました。
フォントが分からず結局近いものを選びました。

できなかったこと
　・フォントが有料で買えなかった
　・ドロップシャドウがうまくいかず変な影をつけてしまったこと

あとあしらいの帯の近くにいある小さい帯ですね、これもなんでつけたんだろう。。。？と思っています。

模写の精度は低いですが、良い部分に気付きましたね
このデザインは結構レベルの高いもので、表現のコンセプトがありますね。

・模写の目的は、デザインの意図や技法を分析すること
・漫然と模写しても、効果は低くポイントは「観察眼」

デッサンで模写をする時に「観察眼」が磨かれるといいます
形状や光を実物そっくりに描くには、光の当たり方やそれによる質感の変化を捉えるのが必要です。

デザインの模写にも同じような意味合いがあります。

上記のように、模写のポイントを書きました。デザイン自体にコンセプトがあるのと、いくつかのデザインの技法が使われています。
具体的には、斜めのグリッド構図と文字組で方向感を表現している感じですね。

あと、あくまで模写なので、トレースとは違うのもポイントです。

トレースではないので、フォントなどは全然同じである必要はないです。
ただし、元のデザインのコンセプトと使われている技法がわかるのは重要です。

ありがとうございます！分かりやすいです！！
このバナーファーストで感じたのは
"勢い" "シュッとした感じ" "文字組みのメリハリ"でした。

これもしかして全部同じ角度なんですかね。並行というか。
漫画の勢い線という概念もはじめてしりました。たしかに動きがグッと出る感じがします。

バナーの添削を書きました。
文字の傾きや影などを調整して、右に引っ張られてる勢いをつけてみてください。

デザイナーの間では「見えない線を見る」という表現を使うことがあります。

デザインを構造としてみる事で、コントロールしやすくなります。でも、出来るようになるのは、結構時間がかかります。

結構いろんな人から聞く話ですが
デザイナーとして一人前になってくると、構造線が見えるようになるんですよね。

修正してみました。これでどうでしょうか？

良い感じですね！　最初に作ったものと見比べてみてください。

細部はかなり違うと思います。

全然違いますね！
最初のやつはなんかのっぺりしているというか、文字がついてこれてない感を特に感じます。
なんかガタガタして見える
バランスが悪いというか、少なくとも勢いは感じません。

「見えない構造をみる」うーんいまでも正直よくわかってません、感覚というか。。

例えば分析するときにグリッド引いたり、ジャンプ率分析してみたり、4原則をたしかめたり、、、
そういうのが勝手に構造として見えてくるようなイメージですかね？？
頭の中でデザインからワイヤーへ逆算していくような？見ただけで？

そう言う感じですね〜
それが出来るようになると
頭の中でレイアウトを組み替えたりできますよ
この模写のトレーニングのゴールはそこです

こんなのが見えるようになる感じです。透明な線が見えると、よく言われます。

透明な線ですか、、、

今回のように少し不規則に見えたデザインもこんなに線引けるんですね。

まだまだです。

これで、最初の「模写」は完了です。

模写するときに重要なのが、どういうコンセプトのあるデザインなのか？

どんな技法が使われているかを意識することですね。

今回のたつきちさんのように、最初はなかなか難しいです。しばらく、「模写」をしていく感じを続けていきたいと思います。

次回は、冒頭に選び直したバナーを使って、文字組や文字詰をテーマに「模写」を行っています。

※この記事内では、実在する広告を模写のお手本として掲載しています。掲載あたっては、著作権法および文部科学省の引用基準に従い、引用としての掲載と出典を掲載しています。制作物に対する評価は個人の感想です。