新卒でフリーランスになって月144万円かせぐまでの全てをnoteにまとめました

フリーランスのウェブデザイナーになるにはまずコーディング。断言します

「フリーランスのウェブデザイナーになりたいけど、何からはじめればいいの?」

と思っている方、こんにちは。未経験からフリーのウェブデザイナーになったくろぽん(@ktsuyoc)です。

ウェブデザイナーとして自分の思い通りにサイトをつくるのは、めちゃくちゃ楽しいですよ。フリーランスならネットがあればいつでもどこでも仕事できますし、ライフスタイルも思うがままです。

とはいえ、ウェブデザインはHTML/CSSやIllustrator、Photoshopなど、初心者にとってはやることが多すぎます。どこから始めればよいのかもわかりにくいですよね。

結論、フリーランスのウェブデザイナーになりたいなら最初はコーディングを習得すべき。断言します。

この記事では、未経験からコーディングを身につけてフリーのウェブデザイナーになったぼくが、

  • そもそもウェブデザインとは。デザインとコーディングの違い
  • 最初にコーディングを学ぶ3つの理由
  • コーディングを最速で勉強する、たった1つの方法

の順に、ウェブデザイナーになるための第一歩について解説。

コードというとプログラミングを連想して難しく感じるかもしれませんが、概要だけならハードルは高くありません。

まずはこの記事でウェブデザイナーとしてのスタートダッシュを切りましょう!

そもそもウェブデザインとは。デザインとコーディングの違い

「ウェブデザインなのに、なんでコードを書くの?それはプログラマーじゃないの?」

と思った方に向けて説明すると、ウェブデザインは大きく分けて”デザイン”と”コーディング”に分かれます。

デザインとは
  • ウェブサイトの構成やイメージを考え、見やすいサイトやページを考える
  • Illustrator、Photoshopなどのデザインソフトを使う
  • プログラミングの必要はないが、知識はあるほうがよい
コーディングとは
  • できあがったデザインに合わせて素材を切り出し、コードを書く
  • Dreamweaver、Bracketsなどのエディタ+Illustrator、Photoshopなどのデザインソフトを使う
  • HTML、CSS、Javascript(jQuery)など、簡単なプログラミング言語の知識が必要

そして、フリーランスのウェブデザイナーとして未経験から最速で独立するには”コーディング”から学ぶべきです。以下では、最初にコーディングを学ぶべき理由を3つ紹介します。

最初にコーディングを学ぶべき3つの理由

ここからは、最初にコーディングを学ぶべき理由を、

  1. HTMLとCSSが分からないと、ひどいデザインができやすい
  2. 初心者にとってデザインはフワッとしてわかりにくい
  3. プロのWebデザイナーから指示を直接もらえることが多い

の順に3つ、お伝えします。

1. HTMLとCSSが分からないと、ひどいデザインができやすい

HTMLとCSSがわかっていないデザイナーは、ひどいデザインを出しやすいです。ひどいデザインとは、要するにコーディングができないデザインなのですが、例えば

  • 画面サイズが変わる場合を考えていないデザイン
  • 素材の切り出しができないデザイン
  • 幅や高さなどの統一がされていないデザイン

などがあります。コーディング、もっと言えばHTMLとCSSがわかっていないと、このようなひといデザインを出しやすいです。

紹介した「ダメなデザイン例」は、雑誌などの紙面なら実現できるデザインかと思います。しかしウェブサイトではコーディングが必要なので、コードの書き方をわかっているデザインが欠かせません。

2. 初心者にとってデザインはフワッとしてわかりにくい

グラフィックデザインなど、すでにデザインの基礎がわかっている方は別ですが、初心者にとって”デザイン”はわかりにくいです。ましてやお客さんから要望を聞くとなると、未経験では難しいかと思います。

お客さんは当然ながらデザイン未経験なことが多く、どうしてもフワッとした要望になりがちです。例えば、

  • 「清潔感のあるデザインにしてほしい!」
  • 「キュートでポップなサイトを作りたい!」
  • 「シュッとしてパーっとなるデザインにして!」

など、ぶっちゃけ「なんだそれ…どうすりゃいいんだよ…」と思う注文をいただくこともしばしば。初心者にとってデザインのイメージを文字にするのは難しく、その結果”なんか違うデザイン”になりがちです。

解決策としては、イメージに近いサイトをいくつか探してもらったり、こちらから提案したり、サイトを作る目的から考えたりなどいろいろあります。が、これらを全くの未経験からするのは難しいです。

そのため、まずはコーディングを習得してウェブデザインの根本を理解しつつ、徐々にデザインスキルを学ぶのがおすすめです。

3. プロのWebデザイナーから指示を直接もらえることが多い

サイト制作の順番は、大まかに分けて「①サイトのデザインが完成②コーディング」です。そのため、コーディングはデザインがないことにはできません。

ということは、コーダー(コーディングをする人)として仕事をはじめると、プロのウェブデザイナーから直接デザインや指示をもらえます。すると、

  • どうしてこのデザインにしたか
  • お客さんの要望はなにか
  • このデザインを通して伝えたいメッセージ

などをダイレクトに聞くことが可能です。

これにより、ウェブデザインに必要な考え方、もっと言えばお客さんが満足するウェブデザインを習得できます。これは最初からデザインを仕事にすると難しいかもしれません。

次は、コーディングを最速で学ぶ方法について説明します。

ウェブデザインのコーディングを最速で勉強する、たった1つの方法

コーディングを学ぶ最短ルートは「サイトをまるごと1つ作る」こと。なぜなら、サイトを作るためのコーディングをまんべんなく学習できるからです。

しかも、サイトを1つ作ればそれがポートフォリオ(自分のスキルを証明するもの)になり、仕事の獲得にもつながります。

以下では、コーディングを最速で学ぶ方法、もといサイトをまるごと1つ作る方法について、

  • 独学でコーディングを学ぶ場合
  • スクールでコーディングを学ぶ場合
  • 完全オンラインでコーディングを学ぶ場合

の順に紹介します。

独学の場合:『作りながら学ぶ HTML/CSSデザインの教科書』


独学でコーディングを学びたい方には『作りながら学ぶ HTML/CSSデザインの教科書』がおすすめです。その名の通り、この本ではウェブサイトを作りながらHTMLとCSSが学べます。

ぼくも使っていましたが、実際にコードを書きながら学習するのでスキルの習得がスピーディです。

おすすめはこの本を見ながらサンプルサイトを作って、そのあとHTMLとCSSでサイトをカスタマイズすること。これにより実績になるオリジナルサイトが最短で制作できます。

スクールに通う場合:KENスクール

KENスクールのホームページ
スクールに通ってコーディングを集中的に学ぶなら「KENスクール」がおすすめです。

HTML/CSSを集中して学ぶコースが用意されており、簡単なウェブサイトを作りながらコーディングの基礎を最短で身につけることができます。

KENスクール:HTML/CSSコース
  • スキル習得時間:10時間
  • 料金:42,000円
  • 受講期間:3ヶ月

アクセス

  • 新宿本校:東京都渋谷区代々木2-9-2 久保ビル4F
  • 池袋校:東京都豊島区西池袋1-11-1 メトロポリタンプラザビル20F
  • 北千住校:東京都足立区千住旭町4-12 桜テラス 3F
  • 横浜校:横浜市西区高島2-19-12 横浜スカイビル 20F
  • 名古屋校:名古屋市西区牛島町6-1 名古屋ルーセントタワー39F
  • 梅田校:大阪市北区梅田2-2-2 ヒルトンプラザウエスト11F
  • 札幌校:札幌市中央区北5条西2-5 JRタワーオフィスプラザさっぽろ19F

個別授業で丁寧にHTMLとCSSの基本を教えてもらえるので、初心者でも安心です。

KENスクールでは無料体験レッスンや個別相談を用意しているので、気になる方はまず体験からはじめてみてください。

完全オンラインでコーディングを学ぶ場合:TechAcademy

テックアカデミーのホームページ
「スクールは近くにないし、ネットで勉強できないかな…」

と思っている方には完全オンライン型のスクール「TechAcademy」がおすすめです。

その理由は無料体験が1週間もあって長いこと。正直、軽いHTMLとCSSだけなら無料体験だけで学べてしまいます。

TechAcademy:Webデザインコース
  • スキル習得時間:基礎だけなら無料体験1週間
  • 料金:89,000円〜
  • 受講期間:4〜16週間

体験後の本レッスンではデザインの考え方からillustratorやPhotoshopの使い方まで、ウェブデザイナーとして必要な知識を幅広く身につけることが可能です。

まずは1週間の無料体験でコーディングの基礎を身につけるとともに、スクールの雰囲気をチェックしてみてください。

コーディングを学んで、フリーランスのウェブデザイナーになる

この記事では、フリーのウェブデザイナーになる第一歩として、コーディングを学ぶことを紹介しました。

おさらいすると、そもそもウェブデザインには”デザイン”と”コーディング”があり、

  • デザイン:サイトの企画から考えて、デザインする
  • コーディング:デザインに合わせて、コードを書く

という違いがあると紹介しました。

そして最初にコーディングを学ぶべき理由を、

  1. HTMLとCSSが分からないと、ひどいデザインができやすい
  2. 初心者にとってデザインはフワッとしてわかりにくい
  3. プロのWebデザイナーから指示を直接もらえることが多い

の順に3つ見ていきましたね。

次に、最速でコーディングを学習する方法として「サイトをまるごと1つ作る」ことを紹介。具体的な方法では、

の3パターンをお伝えしました。

コーディングはウェブデザインの基礎です。コーディングの基本があることでデザインの学習スピードが早くなり、結果として最短でウェブデザイナーになることができます。

まずは文中で紹介したスクールの無料体験からはじめるのが、お金もかからずオススメです。コーディングを習得して、ウェブデザイナーとしての第一歩をふみ出しましょう!

スクールの詳細や他のおすすめスクールについては「【2018年版】おすすめのウェブデザインスクール比較ランキング9選!初心者も迷わない料金・内容まとめ」をご一読ください。