【独学webデザイン】バナートーレス体験談１～１０本目感想

こんばんは、会社に冷房が効き始めて寒さに震えている春のあきよんです。

バナートレース１０本目クリアしました。実際やってみた感想や学びを書いていきたいと思います。

同じ独学でwebデザインを学んでいる方の役に立てれば嬉しいです。

2025/3/31～2025/4/13まで実施しました。約半月。４月一杯かけて４０本終わらせる予定だったんですが、このペースでは間に合わなそう…。焦っても仕方ないので、マイペースでやっていこうと思います。

本当は実際のトレースしたバナーをブログにアップしたいところなんですが、著作権の問題があるので実際のバナーはアップせずです。わかりづらくてすみません。

１本目

【初級】バナーの模写でPhotoshopをマスター｜初心者のための「本当はむずかしくない」はじめてのPhotoshop

お題はこちら。本来Photoshop用のお題なんですが、イラレでやりました。文字のみで模様無し、色も一色。フォントも一般的なフォント、さらに答えもあるやつなので、初心者向けのやつです。

制作時間は５０分。簡単なわりにかかってる！

やはり一本目ということで、フォント探したり基本的なところに苦労したんだと思います。

２本目

２本目も文字のみの簡単なやつです。

制作時間は１時間。１本目と違ってAdobeにもともと入っていないフォントだったので、フォント探しに苦労しました。時間の半分ぐらいフォント探しに使ってたんじゃないかって気がします。

２本目から習得した技や印象に残ったデザインやあしらいを、メモ書きとして残すようになりました。すぐ忘れるんでメモ大事です。

２本目で印象的だったのは

・数字と％の大きさがかなり違う。ここまで思い切って差をつけるとわかりやすい
・％が数字に食い込んでいるあしらいがかわいい

の２点です。

３本目

初めて柄が入ったバナーに挑戦しました。制作時間１時間。作った柄は和風の柄で「七宝つなぎ」です。楕円ツールとダイレクト選択ツールとコピーを駆使して作りました。多分慣れた方ならサクサクできるのでしょうが、手際が悪くてすっごく大変だった覚えがあります。

４本目

再びほぼ文字のみのバナーに戻りました。制作時間１時間。

メモ書きは

・SALEのバナーって赤が多いよね。危機感をあおっているのだろうか
・文字サイズを調整しててでも、端はぴったり合わせる
・袋文字の中が透けてる文字の作り方覚えた
・背景は白に見えても実は灰色だったりすることがある

の４点です。本当SALE系のバナーって赤が多いんですよ。私も実際に作る時は赤にしようと思います。

トレースが終わってから、ポイントを意識して練習用に作ったバナー▼です。
すべての文字の横幅を合わせているのと、背景色が白に近いグレーなのがポイントです。

５本目

多分今回一番苦労したバナーです。調査時感含めて３日（実質６時間ぐらい？）かかってます。でもバナーの模様の作りかったを習得したかったんですよー！結果なんとか形になったので満足です。

下の▼の後ろの模様です。ネットを探しても作り方が見つからず「ああかな…こうかな…」と試行錯誤して尽くしました。長方形グリット→エンペロープ（メッシュで作成）の合わせ技なんですが、すでに作り方を忘れてきているので、忘れないうちに記事にしようかと思います。

今までずっとゴシック体だったのが、明朝体初使用のバナーでもありました。明朝は高級感出ますね。

６本目

ペンツールで文字と文字をつなぐ技がいるバナーでした。ペンツールに苦労しました。うまく使えないし、調整にすごく時間がかかる上に、できたもののクオリティもよくない…。あまりにうまくいかないので、今回のバナートレースの中で唯一途中で投げ出しそうになったものです。一度切り上げて、気分を変えて翌日なんとか仕上げました。

ペンツール…習得には練習しかないんですかね…。

復習で作ったやつですが…苦労がにじみ出てる感じが…。曲線なんか不自然だし…。