【30代後半から】素人がWebデザインを学んだ方法【ロードマップ】

こんなふうに考えている方も多いのではないでしょうか。

難しそう、わたしにはできないなって感じた方もいますよね。

そんな方へ、当時のわたしの状況もご紹介しておきます。

この状況から時間とお金を捻出して学習をスタート。
半年ほどでお仕事をもらえるようになりました。

このように素人からでも習得はできますが、簡単片手間でできる仕事ではないです。

お金をもらえるようになるまでは我慢と苦労の日々でした。

でも、興味があって挑戦してみたい方にはおすすめの副業です。

この記事を読めば、未経験から副業収入を得られるようになるまでのイメージがつかめるはずですよ。

それではどうぞ。

Webデザインを学ぶために必要なもの

必要なものを購入する

Webデザインを学習ために、この2つは絶対に必要です。

当たり前ですが、大事なので書いておきます。

パソコン

Webデザインを制作するソフトはいろいろな種類がありますが、パソコンは必須です。
特に画像編集にこだわるのであれば、高スペックな機種が必要になりますね。

これはよくある質問ですが、

なぜなら、ノートパソコンは持ち運べるのでどこでも仕事ができるからです。

こんな風に場所を選ばずに仕事ができます。

これはリモートワークの最大のメリットだと思います。憧れますよね。

パソコンのスペックですが、画像加工ソフト（Photoshop、Illustlator）を使用することになるので、可能であれば『macbook』を使用するのが一番です。

安価なPCですと画像加工の際に動きが遅くなり、フリーズしてしまうこともあります。

とはいえmacは高価ですので、まずは手持ちのPCで試してみてから考えることをおすすめします。

私もすでに持っていたPCで学習を始めました。
それでも全然問題ありませんでしたよ！

インターネット環境

パソコンとは違い、インターネット環境は最速をおすすめします。

わたしは東京と福岡を行ったり来たりの単身赴任生活で、都会と田舎でインターネット環境の違いがありました。

ただでさえ本業もあり、時間のない中での学習。
好きなことでも、めんどくさくなったらやめてしまいます。

お金はかかりますが、ここは重要なポイントです。
また、カフェなどの外のWifi環境で仕事するのも、気分が上がっていいかもしれませんね！

Webデザインの概念を学ぶ

デザインを学べる方法

世の中にはたくさんのWebデザインを学べるコンテンツやスクールがあります。
どうやって勉強するかは、かけられる学習時間や予算で変わってきます。

①から⑤にいくにつれて、かかるお金は少ないかわりに学習時間や手間ががかかります。
逆に⑤から①に向かっては、お金はかかるけど学習時間は短くて済むでしょう。

このあたりを意識して、自分に合ったコンテンツを選ぶことをおすすめします。

Webデザインのためのツールに慣れる

１つずつ簡単に説明していきます。

Figmaについて

Figmaは、Webデザイン作成に特化したツールです。

無料で使える

Figmaは基本無料で使用できます。

駆け出しデザイナーには助かりますね！
その他のデザインツールや素材って、意外とお金がかかるんですよ・・・

私も無料プランで使っていますが、全く問題ありません。
ベテランになっていくうちに必要になったら課金しましょう。

Webデザインに特化している

Figmaは、Webデザインに必要な、要素をブロックにして組み合わせるということができます。

もちろん、その他のツールでもデザインを作るということが可能です。
しかしブロック形式で作っていける、というところがとても便利で使いやすい点になっています。

コメント機能あり、同時編集できる

Figmaのデータ上で、作ったデザインに対しコメントを書き込める機能があります。

など、デザイン上に直接コメントすることが可能です。

また、Web上にデータがありますので、複数人で同時に編集していくことができます。
コメント書き込みながら同時に編集することで、デザイン作成の効率も上がることも良いポイントです。

ここまでFigmaをおすすめしてきましたが、もちろん注意点もあります。

デザインデータはクライアントが望むデータ形式で納品する必要がある、ということです。

ウェブデザインやプロダクトデザインのための無料デザインツール | Figma

Figmaは、創作、コラボレーション、ワークフローの効率化を実現した、無料で使えるウェブサイトデザインソフトウェア。Figmaの強力なデザイン機能を活用して、これからのウェブを作成することができます。

www.figma.com

Webサイトの模写を行う

模写することでデザインの基礎を復習する

どのサイトもデザインの４大原則など、デザインの基礎が使われています。

模写しながら基礎を振り返っていきましょう。

デザインの意図を考える

など、そのデザインを使っている理由を考えてみるんですね。

例えば、病院のホームページはだいたい白い背景を使ってますよね。
これが真っ黒や真っ赤な背景だったらどう思いますか。ものすごく違和感を感じるはずです。

白は清潔感を与える色です。
真っ白なホームページは、清潔な病院のイメージを与えますね。

また、ゴシック調の太いフォント　と　細い明朝体のフォント　でもイメージが変わります。

白い背景で、細い明朝体のフォントが使われた病院のホームページ。

清潔感があり洗練されたイメージが浮かびませんか。

フォントの色をシルバーやゴールドにするとさらに高級感も生まれ、整形外科のホームページに合いそうです。

見る人に与えたいイメージに近づけていくことで、理想のデザインにしていきます。

架空サイトのデザインをする

実際の案件をイメージしてテーマを決める

模写で学んだデザインの意図を意識しながら、架空サイトのデザインを作っていきます。

実際の案件に近いイメージのデザインを作っておくことで、提案時にもアピールがしやすいです。

ここでも自分のオリジナルを出しすぎず、実際の仕事をイメージして作成していきます。

架空サイトを使ってポートフォリオを作る

かっこいいポートフォリオはいらない

ポートフォリオといっても、最初はカッコいいサイトを作る必要はありません。

見やすい状態に並べておく

これまでに作った架空サイトのデザインをPDFやjpg、pngデータで残しておき、見やすい状態に並べておくだけで充分です。

ただ、フォルダ分けやフォルダ名、データ名は何のデザインなのかがわかるようにしておきましょう。

データを開けばすぐに見られるようにしておく

面談で見せることがあるのあれば、事前にデータを開いておいて、すぐに見せられるようにしておいてください。
実際のサイトがあるのであれば、そのページを開いておくことです。

デザインを見せてくださいって言われたとき、

こんな風に面談していただく方に、？って思わせないような事前準備が必要です。

こちらも相手にとってわかりやすく、見やすい状態に準備しておくことが大事ですね。

募集内容に対しての実績を揃えておく

コーポレートサイトの募集なのにLPデザインの実績を見せても実感が湧かないですよね。

美容系のLPを募集しているのに、IT系のデザインを見せてもピンときません。

依頼した際にどんなデザインを作ってくれるのかがイメージできるような実績を見せるようにしましょう。

ポートフォリオサイトに必要なもの

一つずつ説明していきます。

制作実績

これまで作ってきた架空サイトのデザインを並べて載せます。

また、それぞれのデザインに対しての詳細を載せておきます。

この内容が書いてあると、依頼する側もイメージしやすいです。
これも1つずつ説明していきます。

目安料金（料金表）

実際に依頼を受けるときの料金を記載します。

金額は明確に記載しましょう。

Webデザインであれば、

といった感じで詳細かつ明確に記載をします。

自己紹介

いわゆるAboutページ（私について）です。

まず、自己紹介は最後に持ってくることをおすすめします。

もちろん、相手がイメージしやすいように、人となりがわかるような自己紹介を載せておくことも重要です。

デザインに対する想いも含めて、最後の方に載せておくようにしましょう。

問い合わせ

問い合わせ先は必ず設置しましょう。

制作実績、料金表を見て『依頼したいな』と思った方に向けて、すぐに問い合わせできるようなデザインにしたいです。

いざ問い合わせしたいと思ったきに、

とならないよう、問い合わせフォームはわかりやすく設置したいですね。

また、問い合わせフォームはできるだけ簡素にして、入力項目は最低限にすることをおすすめします。

なぜなら入力項目が多すぎると、その時点で問い合わせすることをやめてしまうからです。

クラウドソーシングサイトで登録して営業する

ポートフォリオが準備できたら営業を始めることになります。

しかし、必ずここで壁にぶち当たるはずです。

もし知人や友人でデザインの仕事をもらえそうな人がいたら、そこから１件目を取る方が一番早いと思います。

しかし、そういう人の方が少ないと思いますので、ここではクラウドソーシングサイトでの営業について書いていきます。

私自身、知り合いが少なかったこともあり、最初の１件目はクラウドソーシングサイトから受注しました。

クラウドソーシングサイトの種類

クラウドソーシングサイトの種類はたくさんありますが、メインはこの3つです。

私はココナラから始めましたが、今では結局すべて登録しています。

その結果、それぞれ違うクライアントから仕事をいただけており、そこから直接のご依頼につながっているお仕事も多いです。

クライアントによって登録しているサービスも違うので、いろいろなところから仕事を受けられるようにしておくことが大事ですね。

プロフィールの登録はしっかりやろう

ポートフォリオサイトの項目にも書きましたが、自身のことをしっかりと書いておきましょう。

最低でもこれらを意識して書きたいですね。

クライアントにとって判断に必要なことを載せておくことで、営業した後の判断材料になるんですね。

提案時のポイント

ここまで作り込んだとしても、実際に仕事が来るまでは相当の時間がかかるはずです。

心が折れそうになり、諦めてしまう方もいるかもしれません。

ここでは初案件を受注するまでに、心がけたことを書いておきます。

大事なことなので、１つずつ説明していきますね。

他の提案者との差別化を図る

クラウドソーソングサイトで募集されている仕事には、数多くの提案者からの応募があります。

自分と同じように学習を始めたばかりの人が集まっているので、激戦になりやすいんですね。

そこで差別化を図る必要があります。

私の場合は、

こういった差別化をして、最初の１件目を獲得することができました。

直接のメッセージで後追い連絡

仕事に応募した後、直接のメッセージでも連絡をします。

ここに、仕事に応募させていただいたことや差別化できること（金額交渉やラフデザイン提出）を書いて送ることでコミュニケーションを取ります。

ただ案件に応募するだけの提案者と比べて、大きく差別化ができることになります。

相手のプロフィールを読んで、それに対してアピールする

仕事に応募する際は、相手のプロフィールを読んでおくようにしています。

例えば、プロフィールにこんなことが書いてあったとします。

こういった場合、どんな提案が最適でしょうか。

メッセージを送る際に美容院のデザインに関しての文言を入れたり、自分がサポートできそうな内容を書くと喜ばれそうですよね！

もしWebサイトを持っているクライアントでしたら、そのサイトの企業情報を見てからメッセージするとなお良いです。

ここまで書いてきましたが、これだけやっても返信すら来ないことも多いです。（というかそちらの方が多いです・・・）

ただ、繰り返しやっていくことで営業スキルも身に付きますので諦めず応募していきましょう！

案件受注したら120％の力でやり切る

仕事を１件もらえても、納品して終了したら終わりです。

また次の１件を探すために苦労することになるので、繰り返し仕事がもらえるよう、受注中も次の案件を意識して対応していく必要があります。

案件対応中に気をつけたいこと

ます大前提、いただいた仕事は120％の力でやり切りましょう。

この辺は当たり前にできるように心がけたいです。

クライアント側からすると、どちらに仕事をお願いしたくなるでしょうか。

きっと後者の方が好まれるはずです。

困ったときの助け舟

SNSやコミュニティなどで、相談できる人を作っておくと心強いです。

その際に相談できる人がいるかいないかで安心感も大きく変わってきます。

私は使ったことはないですが、メンターを受けられるサービスもありますので気になる方は探してみてください。

とはいえ、いきなりできるかわからない案件に応募するんじゃなくて、自分ができそうな仕事から請け負っていくことをおすすめします。

まとめ

ここまで、私が独学からWebデザインを学習し、仕事がもらえるようになったステップを書いてきました。

学習を始めて仕事をもらえるまでは、どれだけ学習時間が取れるかで変わってきますが、副業レベルでの技術習得は可能です。（私の場合は4ヶ月でした。）

長々と書いたように、お金をもらえるようになるまでは簡単ではないです。

しかし、学習スキルや営業スキルを身に付けることで本業に活かすこともできますし、仕事がもらえるようになれば収入も増えていいことだらけですよね。

今後はステップごとのさらに細かい解説も書いていきますので、少しでも参考になれば幸いです。

ではまた。