見出し画像

Webデザイナーに転職するためにやったこと（手を動かす編）

| tomo |

こんにちは。tomoです。

今回はわたしが実務未経験からWebデザイナーに転職するときに、実際にやっていたことや読んでいた書籍をご紹介します。全て書くと長くなってしまうので、【手を動かす編】と【読書編】の2つに分けてお伝えしていきますね。

全部読んでる時間ないよ！という方は【まとめ】がありますので、そちらに目を通してもらえるといいかなと思います。最後には「もっと早くやっておけばよかった…！」と後悔したことなども書く予定ですので、これから勉強を始める方や始めたばかりの方は、参考にしていただけると嬉しいです。

では早速本題に入っていきます。


その１：バナートレース

転職活動を始めた当初、スクールで一通りIllustratorやPhotoshopの使い方を学んでいたものの、ツールを使いこなせておらず、スピード感がないことに不安がありました。

そこでまずはバナーのトレースを繰り返すことで、よりツールに慣れ操作のスピードが上がるように意識しました。

掲載用バナトレ1

これは実際にわたしがトレースしていたバナーです（左が元で右がトレースです）。トレースの最後には所要時間やトレースをしていて気づいたこと、ツールを使うことで新しく学んだとなどを書き込み、記録として残していました。めちゃ時間かかってるのがよくわかりますね…

名称未設定-1_アートボード 1


またトレースはできる限り毎日決まった時間にやるようにし、自分の中でルーティンを作るようにしていました。完成したらSNSにあげるというのも、いいねがもらえたり、達成感につながるので毎日続ける励みになると思います！


トレースするバナーをどう決めたか？についてですが、わたしの場合はピンタレストを使い、以下のように簡単なものから徐々に複雑なものへと選ぶ素材を変えていっていました。

STEP１ : 文字のみ＋シンプルな背景
STEP２ : 文字のみ＋装飾的な背景
STEP３ : 文字と画像＋シンプルな背景
STEP４ : 文字と画像＋装飾的な背景
STEP５ : 文字と画像とイラスト＋シンプルな背景
STEP６ : 文字と画像とイラスト＋装飾的な背景

変えるタイミングについては細かく決めていませんでしたが、ある程度選んだカテゴリに慣れてきたら次のSTEPへ進む、というようにしていました。またデザインの引き出しを増やすために、見た目がおしゃれなものだけでなく、クレジットカードの入会案内や英会話教室の案内などおカタめな素材なども選ぶようにしていました。

トレースを始めるに当たっては以下のサイトも参考にしていました。
バナートレースについて非常に具体的なアドバイスが書かれていますので、もっと細かく教えてよ！という方は目を通してみてくださいね。

ツールについてですが、最初は使い慣れていたIllustratorでトレースを進めていました。ただそれだとPhotoshopを一向に使いこなせない…と感じたため、IllustratorとPhotoshopを交互で使用したりして、ツールの慣れが偏らないようにしていました。


その２：デザインのドリル

ツールは少しずつ使い慣れてきたけど、デザインのノウハウなんかも身につけていきたい…。そんな時に取り組んでいたのが【デザインのドリル】です。

こちらはtwitterでも#デザインのドリルで、たくさんの方が投稿されていますね。Power Design Inc.さんが出版されている【デザインのドリル】という本を活用した学習方法になります。

同じモチーフでどんな見せ方があるか？画像を目立たせたい、文字を目立たせたい、それぞれのシーンでどのような工夫ができるか？そんなことを実際に手を動かしながら学んでいける本になっています。


その３：cocoda（ココダ）

わたしは残念ながら全てをやりきれていないのですが（すみません！）、UI/UXデザインについて、手を動かしながら学べる良質なサイトです。しかも無料！

ログインすると【基礎から学べる】や【コツコツ続ける】など、自分の目的に応じてデザインカリキュラムを選べるようになっているので、初学者でも非常に始めやすいのが嬉しい。またデザインの方法なども細かくステップに分けて教えてくれるので、「何をどうしたら…」と迷うこともありません。

またカリキュラム内ではAdobe XDを使用するので、ツールの練習にもなります！わたしがXDをダウンロードしたのも、cocodaがきっかけでした。


その４：Progate（プロゲート）

言わずもがな、初学者の強い味方。今まではデザイン面での学習でしたが、こちらはコーディングの学習に役立つサイトになっています。しかも初級編など一部を無料で利用できます！

わたしはスクールでHTML/CSSに触れていたのですが、なにせ見よう見まねで作っていたので、知識が定着している実感がありませんでした…。そこでスクール学習の後に復習をかねて、Progateの利用を始めました。

無料のコンテンツでありながら非常に使いやすい＆わかりやすく、見本通りにコーディングできるとレベルが上がっていくので、自分の成長を楽しみながら取り組むことができました。

またわたしの場合コーディングに苦手意識がありましたので、中級編や上級編にも取り組めるよう、有料会員となって利用させていただいていました！月々約1,000円で幅広いコンテンツが利用できますので、コーディング周りを集中して学習したい方にはおすすめです。


その５：バナーお題

そろそろバナートレースも慣れてきたし、実務ベースで自分でデザインを考えたいなと思った頃に取り組んだのが、【バナーお題】でした。

特にこばやす（@kobayas_s）さんのバナーお題は取り組まれている方も多く、他の方がどのようにデザインしているのかも参考になると思います。twitter上でフィードバックをもらうことで、新たな気づきを得られるのも取り組んでよかったなと思うポイントです。

やってみようかな…という方はぜひこちらから記事をチェックしてみてくださいね！


その６：コンペ

ツールも勉強しなきゃ！コーディングも勉強しなきゃ！と色々やっていたわたしですが、ふと「このままでは一向に実績ができない…」と気づき、コンペに応募することにしました。コンペであれば、経験者・初学者問わず作品がよければ採用してもらえる可能性があるからです。

まずはクラウドソーシングに登録だ！と言うことで目をつけたのが、クラウドワークスとココナラです。結論から言うと、わたしはココナラはほとんど利用せず、クラウドワークスのみで活動していました。
と言うのも、ココナラはわたしのような初学者が非常に多く利用しており、競争環境が激しいと感じたからです…あくまで個人的な印象ですが。

そんなこんなで初めてクラウドワークスでコンペに応募し、初めてバナー制作の実務をこなすことができました。欲しかった実務…！

クライアントは埼玉県にある不動産会社で、新築マンションの告知バナーを制作しました。わたしもそうでしたが、初学者のみなさんには「コンペで採用なんて…わたしには無理！」なんて思わず、まずはどんなコンペがあるのかだけでも目を通してもらえるといいかなと思います。

なぜなら、いきなりサイトデザインやコーディングのコンペに参加しようと思わなくても、イラスト制作やバナー制作など、比較的応募のハードルが低いコンペもあるからです。その中でもわたしは応募者数が少なく、期日の迫っているコンペに応募していました。戦略的応募ですね…

結果的にこれがうまくいき、バナー制作後にもご連絡をいただいてサイトのボタンデザインを任せていただけたので、応募してよかったと思える経験でした。


その７：友人案件

「コンペだけでは確実には実務経験は増やせないな…」と感じたわたしは、ついに営業を始めます。といっても最初の案件はたまたまみていたInstagramからでした。

高校時代の友人が、Instagramに「名刺を作りたくて色々考えてるけどうまくいかない」と投稿しているのを見かけて、思い切って「デザインできるよ！」と連絡を取ったことがきっかけで、名刺デザインに取り組むことができました。

最終的には本人に了承をもらってポートフォリオにも掲載することができたので、作品数の少なかったわたしにはありがたい案件でした…！その他にも、友人の知り合いを紹介してもらい、ロゴのデザインを手がけることができました。意外とデザインしてほしい人って身近にいるんですね。


その８：サイトレビュー

順番が誤っていたかもしませんが、今度は「実務実務…」となり全然インプットできてなかったわたしは、1日1サイトピックアップしてレビューすることを始めました。

スクリーンショット 2021-02-09 13.51.58

内容はほとんどスクールでやっていたことと同じですが、どんなことを考えたりチェックしていたかというと

・ターゲット年代
・ターゲット性別
・具体的なターゲット像（年収やライフスタイルなど）
・サイトの配色
・サイトの目的
・サイトの参考にしたいポイント
・参考にしたいと思った理由
・使用されているフォント

こんなことを項目として書き出し、埋めるようにしていました。これに関してはSNSにあげるなど考えていなかったので、Googleのスプレッドシートで自分が見やすいように管理しています。

スクリーンショット 2021-02-09 13.56.42

また全体のデザインを俯瞰して見れるように、ページ全体のスクリーンショットも保存するようにしています（一部撮れないものもありますが…）。こうすることでデザインの前後関係や流れを把握できるだけでなく、リンクに飛ばなくてもどんなデザインだったかをすぐに思い出せるのでオススメです。

レビューするしないに関わらず、面接においても「最近気になっていること（デザイン）は？」と聞かれることがありますので、今のデザインがどういう流れになっているのか、トレンドは何か、とアンテナを張っておくことは大事だと思います。


まとめ

結局長くなってしまいましたが、振り返ると色々やったなぁと感慨深くなりますね。【手を動かす編】で学んだことをまとめると、以下のようになります。

【学んだこと】
・すぐには上手くならないので、まずは続ける
・SNSで積極的に発信する
・やることを決めてとことんやる
・怖がらずにコンペに参加する
・プロのデザインを常に吸収する

勉強していると、「このままでいいのかな…」とか「これだけで大丈夫かな…」とか、不安になることが多いですよね。でもそれで色んなことに手を伸ばしてしまうと、どれも中途半端にしか進まなくなってしまいます。

まずは思い切って「これ！」と決めたものを継続してみるのも一つの方法だと思いますので、学習に悩んでいる方は参考にしてみてくださいね。

-------------------------------------

ちなみにWebデザインを勉強しようと思っているけど、そもそも独学かスクールに通うかで迷っている、という方には、わたしが書いた【Webデザインを独学で学ぶかスクールに通うか】という記事もありますので、そちらも参考にしてみてくださいね。

-------------------------------------

では次回、【読書編】をお楽しみに！



この記事が気に入ったらサポートをしてみませんか？