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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

の順に紹介します。

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

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

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

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

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

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

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

アクセス

• 新宿本校:東京都渋谷区代々木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だけなら無料体験だけで学べてしまいます。

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

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

無料体験だけでHTMLとCSSは学べてしまうので、迷っているなら受けない理由はありません。まずは無料で体験してみて、それから受講を考えましょう。

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

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

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

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

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

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

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

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

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

• 独学なら：『作りながら学ぶ HTML/CSSデザインの教科書』
• スクールなら：HTMLとCSSだけを集中的に学べる「KENスクール」
• 完全オンラインなら：1週間無料体験が魅力の「TechAcademy」

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

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

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

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