完全未経験からのWebデザイナーの始め方【簡単5ステップ】|初心者から中級者になるまで

「WEBデザイナーをやってみたいけど、どうやって仕事としてできるのかな。順を追って教えてくれる人いないかな」

実際にWEBデザイナー・ディレクターを行っている僕が解説します!

ちなみにWebデザイナーの仕事は安くて5万円です。受注からサイトの実装まで巻き取ると、超簡単なサイトでも20万円までは見込めます。

本記事の内容
  • 完全未経験からのWeデザイナーの始め方【簡単5ステップ】
  • 5ステップを行っても仕事受注まで行かない場合

\クラウドワークスでお仕事を見てみる/

目次

完全未経験からのWebデザイナーの始め方【簡単5ステップ】

Webデザイナーの主な仕事内容は、企業や個人経営などのクライアント(お店)から依頼されたWebサイトのデザインを担当・制作することです。フリーランスの場合は案件を獲得する営業活動から企画まで携わる場合も多々あります。

使用言語は主にHTML、CSS、JavaScript、JQueryで、ソフトとしては[affi id=6](ロゴや幾何学図形の製作等)[affi id=7](アルファ付き画像の出力、サムネイルの作成等)の操作スキルが必要です。

それではWEBデザイナーの始め方は簡単5ステップです。さっそく見てみましょう!

  1. コーディング出来る環境を用意しよう
  2. 実際にコードを書いてみよう
  3. ポートフォリオ(ブログも可)を用意しよう
  4. クラウドソーシングに登録しよう
  5. 仕事を探して受注しよう

1. コーディング出来る環境を用意しよう

コーディング出来る環境を用意しなければ、お仕事の受注ができませんので、まずは環境を整えましょう。

コーディングを行うならPCが必須!

最近ではタブレットやスマホでもコーディングできますが、操作性の観点やコードの俯瞰のし易さが全然違います。そのため、PC以外では圧倒的に時間がかかってしまいます。

コーディング用のソフトは「VSCode」がおすすめ!【無料】

コーディングするためには正直、Windowsに初期設定で入っている「メモ帳」でもできます。しかし、タグの色変更による見やすさエラーの起きにくさやショートカットによる時短コードの予測変換が使えるコーディングソフトは作業効率がめちゃくちゃ上がります。

しかも僕が教えるのは無料で使えて、プロモ使っているもの(僕の友達の社長もおすすめ)なので、まずはダウンロードをおすすめします。

✔ Visual Studio Code

引用「https://code.visualstudio.com/

VSCodeはWEBデザイナーが使うHTML、CSS、JavaScript、JQuery等、様々なプログラム言語が使えます。かなり使いやすいので、おすすめです。

2. 実際にコードを書いてみよう

コードを書く上で、まずは簡単なサイトの模倣をしてみるのが良いです。

練習でコードを模倣する理由

結論を先に書くと、「答えがあるから」です。これが重要な理由は、間違っても、最悪答えを見ればいいからです。プログラムをしたことがないのに、五里霧中で参考書片手に書いていくのは、途方もない苦労があります。

既存サイトのプログラムを見る方法は3ステップです!

  • GoogleChromeをダウンロードしブラウザを立ち上げ
  • 参考にしたいサイトを表示
  • 右クリック、「検証」を押下

①GoogleChromeをダウンロード

引用「Googlechrome

②参考にしたいサイトを表示

おすすめはSANKOU!を文字通り参考にした方がいいと思います。本サイトではジャンル毎に洗練されたサイトをピックアップしているので、参考になります。どうせならオシャレを作った方がいいですよね!

今回は僕のブログで試してみます。

画面上で右クリックを押す

画像右下に表示してある「検証」をクリックする。

すると右側にHTMLのコードが表示されました!

このようにして、模倣したいサイトのコードを見てみましょう!

簡単なサイトを模倣しよう!

模倣する際は、見た目が簡単そうなサイトの、TOPページだけ作ってみましょう。

最近は見た目が簡単そうなものから真似て作ってみましょう。

同じコードをただ打つだけでも構いません。

「そんなのいきなり無理だよ」っていう方には、僕もやっていた無料の勉強アプリをご紹介します。

おすすめのコーディング勉強アプリ

CODEPREP

引用「https://codeprep.jp/

この勉強サイトは無料なのに、めちゃくちゃ洗練されています。色々な言語を習得する上で最初に触ってみるのはありです。ただ、やはり自分で一から作成する手順を踏まないと覚えずらいと思うので、最初のインプットとして行うくらいであればおすすめします。

3. ポートフォリオ(ブログも可)を用意しよう

ポートフォリオとは、自分のスキルや経歴を、実績付きでわかりやすく伝えることです。ただの作品集ではなく、「こんなことできまっせ」と一目瞭然のアピールポイントになります。

ポートフォリオを作る理由

ポートフォリオを作る理由としては、フリーランスとしても、企業に面接を受けるとしても、相手のニーズに合う仕事ができると印象付けできるためです。

ポートフォリオを作るにあたっては、もちろん成果物は多い方がいいです。webサイトで言えばBtoB向けコーポレートサイトと、BtoC向けの商品サイト、出来ればECサイトもあると、幅広い仕事ができるのだなと評価してもらえます。

自分の目標がBtoC向けのサイトなら、それに特化しつつも、あらゆるデザインのものを用意しておくことをおすすめします。

ポートフォリオの作り方

WordPressでデザイン作成

次に紹介するレンタルサーバーを使用すれば、無料で利用できます。

のレンタルサーバーとドメインを取得

費用は月1000円ちょっとですので、他社と比べても大差ないです。

ポートフォリオを作る

まずはポートフォリオの全体像を簡単に示します。

案1

WordPressで構築した簡単ペライチサイト

 └ポートフォリオ1(別ドメイン)
 └ポートフォリオ2(別ドメイン)
 └ポートフォリオ3(別ドメイン)
       :
⇒TOPページや固定ページにポートフォリオのリンクをまとめて、
外部で用意したサイトにリンクさせる

案2

WordPressで構築した複数ページあるサイト
└ポートフォリオ1(画像)
└ポートフォリオ2(画像)
└ポートフォリオ3(画像)
      :

⇒一つのサイト内で全てを表す

上記のように、

案1「ハブになるペラサイトからリンクで飛ばす」

or

案2「サイトに抜粋を列挙(カテゴリ別に複数ページあっても可)」

のようにすると、綺麗にまとまります。

✔僕がいいなと思ったサイト⇒ 案2「https://u-d-l.jp/

4. クラウドソーシングに登録しよう

ポートフォリオと並行して、クラウドソーシングサイトの登録はかかせません。

まずはクラウドソーシングに登録する理由

✔収入ポケットを増やすのは安定収入に必要

もし現在お仕事を頂いていたりしても、その会社からパッタリお仕事が来なくなることは良くあります。僕もこういう経験をしていて、定期的にお仕事をくれるクライアントを2~3社は確保し、お仕事がもらえなくなったらまた次の良いクライアントを探せるまで、つなぎとしても重要な収入ポケットになります。

特に最初は、「実績なし=お仕事なし=収入なし」の状態なので、簡単な案件でも何か収入を得ている感覚を養うのが大事だと思います。

おすすめのクラウドソーシングサイト

正直、まずはです。

\クラウドワークスはこちら/

5. 仕事を探して受注しよう

お仕事を探す方法は4.でも挙げたクラウドソーシングサイトに登録して、まずは簡単な案件(アンケート回答で300円)などを行って感覚を掴むのが良いと思います。

この章では、クラウドソーシングではなく、他の方法でお仕事を貰う方法(ノウハウ)を大公開しちゃいます。

オフラインでの集客

✔まず、「フリーランスの準備中」を名乗ろう

お仕事が欲しいと手を挙げなければ、誰にも気付かれません。また、本気度を示すためにも、「副業」ではなく、「フリーランスの準備中」公言するのは効果的です。(会社にバレたくない方は、関係者以外に対してのみです。)

✔自分が「やりたい事」と「出来る事」を明確に伝えよう

それで、一体何をやりたいの?何ができるの?と聞かれます。その時のためのポートフォリオと、クラウドソーシングサイトでの仕事なのです。

✔どのような人に、どのように仕事をとるの?

これはケーススタディが大事だと思うので、僕の経験談を紹介します。

動画編集の仕事をとった時のお話。

オフラインでの方法

STEP
準備(ポートフォリオの作成)

Youtubeに編集した動画(エンタメ系)を30本くらい挙げてました。再生回数が上がれば、それも武器になると考えてました。Instagramにカッコいい系の動画を10本上げました。

STEP
集客

これまで何人にもアタックしました。(バーテンダー、居酒屋の店員、大学時代の友達、、、)出張の時も一人で飲みに行っては声をかけてました。出張中、ちょうど江ノ島の海の家で、Youtuberに出会いました。

STEP
売り込み

その人はエンタメ系Youtuberでした。最初は僕に興味がなかったのですが、ちょっとだけアドバイス下さいって感じで僕のYoutube動画を見せました。そしたら、「おもろい!これ大変だったしょ!自分のもやって!」と逆にお願いされました。

これはほんの一例ですが、こうやって仕事をとっていくと、べしゃりもうまくなっていきますし、一度仕事をやると、次から仕事が取りやすくなっていきます。そして、ポートフォリオの大切さが分かりました。

最初は大変だと思いますが、一緒に頑張りましょう!!

オンラインでの集客

SNSを伸ばそう!

特にTwitterが良いと思います。これは皆さんもご存じだとは思いますが、「リツイート」があるため、拡散力が高いためです。フ

DM送りまくる

なんかきゃりーぱ〇ゅ×2の曲でありそうな見出しですが、DMは大事です。なんせダイレクトですからね。(笑)そのままなのですが、合コンよりナンパの方が優れている理由は、「タイプな子と無料で話せる」からですよね。ダイレクトに仕事したい人に絡むほど効率的なものはありません。

ただし、なん十通送っても既読すら付かないなんてことはざらにあるので、メンタル大事にしてください。(笑)

※ナンパは犯罪です。やめましょう。

5ステップを行っても仕事受注まで行かない場合

悩むイメージ

5ステップをやってもうまくいかないこともあります。おそらく以下のどれかが足りていないのかなと思います。一度振り返ってみるのも大切ですので、メンドクサイかもしれませんが、頑張りましょう(笑)

クラウドソーシングの場合

  • プロフィールに空欄がある
  • ポートフォリオが不十分
  • 提案文が良くない

オフライン集客の場合

  • 話しかけるのが億劫で、「いらっしゃいませ」「ありがとうございました」のサービスだけ受け取っていませんか?
  • 「この人なに?話しかけてきた。こわ」と思われるのが嫌で、いつも何もなかったように過ごしていませんか?
  • 実績がないことで、自信喪失していませんか?

オンラインでの集客

  • Twitterでは毎日ツイート出来ていますか?
  • リプ周りして、新規フォロワー獲得していますか?
  • DM文に悩んでしまって、送れないでいませんか?

もしお仕事が取れない場合、僕がお話を聞くので、TwitterでDMください。なんでも相談にのります。

Twitterはこちらhttps://twitter.com/@temtor_blog

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

理系大学院を卒業後、大手電力会社に就職。プライベートで動画編集やWEBサイト作成により月収3~5万円を築く。「お金をもらいながら勉強する」をモットーにひたすら「できます!」と言い、アウトプットし続けている。インキャ

コメント

コメントする

目次