Webデザインのステップ別練習方法!バナーのお題はどうやって考える?

  • 2022年01月25日
  • 2022年03月11日
  • うちゆう

  • デザイン

Webデザインのやり方が分かっても、練習に使うお題が見つからないことがあります。

私は、オンラインスクールを卒業してから、そこで頂いたお題で作ったデザインをブラッシュアップしてスキルを磨いていました。

しかし、なかなか案件には繋がらず、自分のデザイン制作物も増えずに悩んでいました。

今回は、かつての私のようにどう練習すればいいのか分からず悩んでいる方に向けて、おすすめの練習方法をご紹介します。

後半では、ただ練習するだけでなく実力をつけるために必要なポイントもご紹介しますのでぜひ最後までご覧ください。

お題を考えるヒントになるステップ別練習方法!

実績のないうちは、練習に使ったバナーやLPデザインをブラッシュアップすることで営業時に活用することができます。

以下は、お題が無くて悩んでいた私が実際に行っていた練習方法になります。

ステップ1:トレース(模写)ではなく文字組みからレベルアップ!

トレースではなく文字組みをおすすめする理由は、デザインの情報レベルを分かりやすく整理できるからです。

さらに、後の解説で、文字組みで作ったデザインを制作物として活用するコツについても解説します。

トレースは、同じものを作り上げて完成!という気になって満足しがちです。

しかし、本来のトレースの目的はただデザインを同じように仕上げる事ではありません。

主に以下の目的があります。

  • 上手い人のデザインや構図を学ぶ
  • 自分の中にデザインのストックを作る

しかし、トレースではしっかり上記のことを意識できず、デザイン脳を使えずにいたことに気が付きました。

文字組みは、相手に伝えるためのデザインを考える事ができるのでおすすめです。

文字組みの具体的な手順

デザイン脳が働きにくいトレースに対して、文字組みは情報レベルを整理した「伝わるデザインの構図」を考えることができます。

私は、当時の自分に「トレースではなく文字組みで練習して欲しい!」と伝えたいです。

では、実際の文字組みの手順をご紹介します。

①お手本となるバナーを見つける
②そこから文字だけを抜き取る
③抜き取った文字を使って、文字と線だけで構成を作る
④構成を元にデザインを完成させる

文字組みの作成例やその他の初心者から抜け出すためのポイントを詳しくご紹介したおすすめの記事があるので、気になる方は以下からご覧ください。
デザイン初心者から1歩抜け出す、注意すべき3つのポイント!初心者にありがちなデザインを知る

文字組みの練習で制作例を増やすことができる

文字組みの練習で実際に出来上がった制作物は、自分なりに言葉を変え、デザインもオリジナルのものに仕上げれば、自分の制作物として使用することも可能です。

このように、練習としても役立ち、制作物を増やすこともできるので文字組み練習は一石二鳥です。なかなか自分のデザインに自信が持てない人や、早く初心者から抜け出したいという人がトライしやすくておすすめです。

制作物として使う時の注意点は、あくまでオリジナルであることです。構成が違うからと言って、文字が全く同じだと活用できないので気を付けましょう。

言うまでもないかもしれませんが、逆も同じで、文字が異なってもデザインを完全にまねたり転用したりしてるものは使えません。

ステップ2:実案件を見て、デザインを作ってみる!

実践レベルの案件がどのくらいの内容を求めているのか、クラウドソーシングのコンペをお題として参考にするのも一つの方法です。

最初はコンペに参加しなくても、自分が作ったものを表に出さなければ練習材料としてとても勉強になります。

コンペには提案者の作品を公開するものと非公開で進むものがあります。

練習段階ではみんなのデザインを学んで自分の改善点を見つけるために、公開している案件を見てみると良いでしょう。

作ったバナーなりLPは、大まかな構成を参考にして完全にデザイン、文字、ロゴを変えれば、実績ゼロの内は自分の制作例として応用が可能です。

その後、自信が付いてきたら思い切ってコンペに参加するのも良い経験になります。

ちなみに参加するときは非公開の方が締め切った後に色んな作品を参考にできるし、競合のデザインに引っ張られ、いたちごっこで終わる心配も少なくおすすめです。

ただし、いきなり上手くとを期待するとへこむ可能性があるので、あくまでも挑戦の意識でやってみてくださいね。

ステップ3:自分のポートフォリオサイトを作って実績を載せる

ポートフォリオサイトは、お客さんにWebデザイナーとしてどれくらいのレベルか知ってもらうために必要なものです。

手始めに作成する場合は、以下のような無料ホームページ制作がおすすめです。

ただし、無料のため自由度は低く、エフェクトもこだわったものは作れません。

できればサーバーレンタルをして独自ドメインを取得してサイトを作った方が良いと思いますが、いきなり本格的にやろうと思っても挫折してしまう可能性があります

私もポートフォリオサイトは本格的なものはできていませんが、無料ホームページ制作のWixで自分のポートフォリオサイトとしてTwitterに載せていたことがありますし、やってみる価値はあると思います。

実績がない場合載せる項目に迷うと思いますが、以下の内容を参考にしてみてください。

  • プロフィール
  • 制作例(ステップ2までで作った著作権違反しないもの、実績がある場合は掲載許可を取ったもの)
  • 制作金額、製作期間
  • お問い合わせフォーム

実際に自分のサイトができてみるととても嬉しいものなので、ぜひ挑戦してみてください

練習の質を上げるためのポイント!

やみくもにデザインの練習をするのではなく、ある工程を踏むことで効率よく質を上げることができます。

そのポイントをぜひ覚えて活用してください。

ポイント①デザインを行う前に考えておくべきこと

相手に伝わる良いデザインにするには、気を付けるべきことがあります。

  • このデザインを作る目的
  • ペルソナ設定
  • テーマ
  • 文字組み、構成

最初はお手本となるデザインをまねることに必死で難しいのですが、デザインはただ綺麗に仕上げればいいというわけではありません

そのデザインを通じて伝えたい相手や、伝えたい情報の優先順位をはっきりしておかないと、見た目だけつくろっただけで実はちぐはぐなデザインになってしまいます

例えば、健康に良い食品の広告バナーを作ろうと思った時に、次の情報があるとします。

  • キャッチコピー
  • 初回無料と期間限定
  • 商品画像

以下の文字組みを例にどのように考えていくのかを説明します。

まず、デザインを作る目的は、既に認知があるサプリの新商品で顧客を増やすことを想定しました。

今回ペルソナは健康が最近気になっているという30代女性をイメージしています。

今回のバナーではお得感を一番に伝えてとにかく登録者数を増やすことを目的としたので、0円を一番目立つ形で配置しています。

バナーに入れる文字が多いほど配置が難しくなるので、文字組みの段階でいかに配置をはっきり決めておくかが大切です。

この文字組みを元に、実際の画像や色、あしらいなどを追加して完成させてみました。

こちらのバナーは、サプリや健康系のバナーを参考に私がデザインしたもので、商品はもちろん架空です。

画像やあしらいはフリー素材を使用し、パッケージも作成しました。

全体的に、青で統一感を出して体に良さそうな印象を与える目的があります。

このバナーは文字組みを元に作成したことで、1時間半ほどで作成しました。(作成スピードはまだ修行が足りません…)

このように、文字組みを行うとデザインも迷走しにくくなり、スムーズに作成出来るようになります

ポイント②インプットも忘れずに

デザインを作るというアウトプットも大事ですが、インプットを行うことで更に成長することができます。

まず、書籍でおすすめなのは「なるほどデザイン」です。

こちらの本はWebデザインだけでなく、あらゆるデザインに通じる考え方を画像と一緒に分かりやすく解説したものです。

配置やフォントの選び方などの基本となる知識を与えてくれます。

そして、ピンタレストやバナーまとめサイトを参考にして色んなプロの技を参考にするのも良いインプットになります。

もちろん、このようなインプットはアウトプットと別々に行うのではなく、アウトプットを行った後の改善のために並行して行うことが大切だと思います。

コツコツ練習してプロのWebデザイナーを目指そう!

デザインはさぼればさぼるほど、一度学んだはずのことがあっという間に抜けていってしまうものです。

私もまだまだ学ぶことが多いですし勉強も行動も足りないと反省する日も多いです…!これからも、コツコツとアウトプットやインプットを続けて成長いこうと思っています。

一生懸命学んで頑張ったことは無駄にはなりません。

皆さんも、ぜひ挑戦してみてください!

この記事を書いた人

うちゆう

Webライター兼Webデザイナー/元一般事務契約社員/将来を考えて手に職をつけたいと考えて一念発起。現在フリーランスで活動しています。

記事一覧
GoTop