経験ゼロから独学でWebデザインのスキルを習得し、副業としてできるようになったプロセスを紹介




※当サイトはアフェリエイト広告を利用しています

Web制作
2022.09.29

「未経験でWebデザインのスキルを身につけるにはどうすればいい？」

「独学で勉強していきたいけど何をすればいいの？」

最近では副業を許可する企業も増えてきて、もっと収入を増やしたい、スキルアップしたいという方が副業を始めていますが、副業やフリーランスの仕事の中でも人気なのがWebデザインです。

Webデザインは副業の中でも単価が高く設定されており、パソコンとインターネット環境があれば比較的始めやすいと多くの方がスキルを身につけようと始める方がいます。しかし、Webデザインのスキルがない人にとってみれば未経験でスキルを身につけていかなければなりません。

スキルを身につけるために独学やスクールでWebデザインを学ぶ人が増加していますが、スクールは高いし、時間がなくて通う事ができない、独学で勉強しようにもどうすればいいのかわからないことも多いですよね。

そこで、この記事では未経験者がWebデザインに必要なスキルを独学で勉強をして、案件獲得ができたプロセスについてご紹介していきます。

未経験者が稼ぐのは無理だと思われがちなWebデザインですが、スキルをつけるための学習方法や案件受注の手段が増えたことによって、初心者でも副業を始めることは可能です。

この記事を読む事で独学でWebデザインに必要なスキルを身につける方法が理解でき、副業として成り立たせるまでのプロセスがわかるようになります。

この記事は以下の内容を書いています
  • 未経験者がWebデザインのスキルを身につけていく方法
  • Web制作を副業として稼ぐ方法
  • 独学でWebデザインのスキルを習得するコツ

それでは、早速、解説をスタートしていきます！

※この記事の作成者

ブログ歴2年6ヶ月、副業歴1年5ヶ月
現在はブログ執筆を行いながらWebライター、Web制作を副業として活動中。今まで経験したきたことを（仕事、副業、キャンプ、育児）を中心に記事を更新しています。
少しでも皆さんの悩みを解決できる記事を目指して日々、成長をしていきます。




なぜ、副業でWebデザインのスキルを身につけようと思ったのか

私自身、本業ではWebデザインに必要なスキルを全く使わない仕事をしていて、Webデザインを行うこと自体が副業を始めてからです。

そんな私でも、いちから勉強を始め副業でWebデザインの案件を受注できるようになっています。しかし、そもそもなんで副業でWebデザインを行おうと思ったのかご紹介します。

Webデザインに興味があった

まず、最初の理由は「Webデザインに興味があった」からです。

今の時代、IT化が進み、プログラミングの需要が増えてきていますが、エンジニアの人手が不足しているため自分が参入し、仕事を得るチャンスがあるんじゃないかと思ったからです。

さらに、副業として始めるなら自宅で出来ることを条件に探していたので、私が考える副業を行う環境としてマッチするのがWebデザインでした。

正直なところ、スキルがなく興味だけでどうにかなるものでもないですが、しっかりと基礎知識を身につけてスキルをつけていけばどうにかなると思っていました。

ただ、実際にスキルを習得するまではとても苦労しましたが、それ以上に新たなスキルが身についたことは嬉しかったですし、大きな収穫です。

Webデザインは成果が見えやすい

次に、「Webデザインは成果が見えやすい事」です。

コードを入力していくと自分の好きなようにコードを構成する事ができ、構築していった分だけ目に見えて変化をしていきます。

自分の考えていた事が自由に構築できる楽しみは他ではなかなか味わう事ができないので楽しいです。

色々とやっていくと覚える事はたくさんありますが、その分自分ができる範囲も広がるので確実にスキルアップを実感できます。

Webデザイン関連の仕事は単価が高い

副業の平均月収は4万7455円という調査結果があり、さらに、副業者のおよそ8割が月3万円未満の副収入であることもわかっています。

Webデザインの案件を受注する手段としては、クラウドワークスやランサーズなどのクラウドソーシングサイトや長期契約ができるフリーランスエージェントがメインになってきます。

比較的、簡単なWebデザイン案件でも一件、3〜5万円程度の案件がたくさんあり、初心者でも応募OKなどの条件もついています。

そのため、案件1件で副業平均収入を超える可能性が十分ありますが、いきなりそんな高額な案件を受注するのは躊躇するかもしれません。

その為にも、しっかりとWebデザインのスキルを身につけて自信を持ってできるところまでスキルアップしていく必要があります

Webデザインの重要性と需要

Webデザインは現代のビジネスや個人活動において需要がある職業です。

インターネットの普及により、ウェブサイトは企業のオンラインプレゼンスや情報発信、製品やサービスの販売に不可欠なツールとなっています。

Webデザインが副業で重要な理由とは

Webデザインは需要の高いスキルであり、副業としてクライアントからの仕事を受注することで、追加の収入を得ることができます。

本業に依存せず、自分のスキルや時間を活かして収入を増やすことができるのが大きなメリットです。

特に、自宅での作業が可能なため、本業との両立がしやすく、柔軟な働き方が可能です。

さらに、スキルアップに大きく貢献します。

新しいプロジェクトに挑戦したり、クライアントの要件に対応する経験を積むことで、デザインのスキルが向上します。

これは将来的にフリーランスとして独立する可能性や、他の関連職種へのキャリアアップにも繋がります。

Webデザインの需要について

Webデザインの需要は近年急速に増加しており、デジタル化とインターネットの普及によってますます重要性が高まっています。

現代のビジネスにおいて、企業や個人がオンライン上で存在することは不可欠です。ウェブサイトは企業の顔となり、商品やサービスの情報提供、オンライン販売、顧客とのコミュニケーションの重要なツールとなっています。

さらにスマホやタブレットの普及により、さまざまなデバイスでウェブサイトを閲覧できるようになりました。そのため、ウェブサイトのデザインが重要視され、魅力的で使いやすいサイトを提供することが求められています。

ウェブサイトにおけるコンテンツは非常に重要ですが、それだけでは訪問者を引き付けるのは難しい場合があります。視覚的に魅力的なデザインがコンテンツを補完し、訪問者の興味を引き、滞在時間を延長させる役割を果たします。

これらの要因により、Webデザインの需要は今後も拡大していくことが予想されます。

Webデザインに必要な基礎知識

Webデザインの基本的に必要な言語を（HTML、CSS、JavaScript）をご紹介します。

HTMLの役割

HTMLは（HyperText Markup Language）は、ウェブページの構造を記述するためのマークアップ言語で、ウェブページのコンテンツを意味的に構造化するための役割を果たします。

見出し、段落、リスト、画像、リンクなど、様々な要素を使用して、情報を適切に整理し、読みやすく理解しやすい形式で表示します。

そして、コンテンツの意味を正しく伝えるためのセマンティクス（プログラミングが持つ意味）を提供します。

例えば、h1〜h6の見出しタグは、見出しの重要度を示し、段落のpタグは、文章のパラグラフを表します。

このように、正しいセマンティクスを使用することで、ウェブページのアクセシビリティや検索エンジンの理解性が向上します。

HTMLの基本構造

HTMLの基本構造は以下のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    <!-- コンテンツをここに記述する -->
  </body>
</html>

HTMLでは、要素（Element）を表現するためにタグ（Tag）が使用されます。

要素は開始タグと終了タグで囲まれ、その間にコンテンツを配置します。

例えば、<p>と</p>は段落要素を表し、その間に段落のテキストを挿入します。

<p>これは段落のテキストです。</p>

さらに、一部の要素は開始タグ内に属性（Attributes）を指定することができます。

属性は要素に追加の情報や設定を提供します。例えば、<a>要素はリンクを表し、href属性でリンク先のURLを指定します。

<a href="https://example.com">リンクのテキスト</a>

HTMLの役割と基本構造を理解することで、ウェブページの構造化と意味の伝達を行うことができます。

CSSの役割

CSS（Cascading Style Sheets）は、ウェブページのスタイルやレイアウトを指定するためのスタイルシート言語です。

HTMLがウェブページの構造を定義するのに対し、CSSは見た目やデザインの装飾を担当します。

文字の色やサイズ、背景の色や画像、要素の配置や余白、アニメーションなど、さまざまなスタイルプロパティを使用して要素の見た目をカスタマイズすることができます。

CSSの基本構造

CSSは、セレクタと宣言から構成されます。セレクタはスタイルを適用する要素を選択するための指定方法であり、宣言は選択した要素に対して適用するスタイルのプロパティと値のペアです。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

CSSはHTML文書内に埋め込む方法と、外部のCSSファイルをリンクする方法の2つがあります。

埋め込み方式では、<style>タグを使用してHTML文書内にCSSコードを直接記述します。

外部ファイル方式では、<link>要素を使用して外部のCSSファイルをHTML文書にリンクします。

<!-- 埋め込み方式 -->
<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>

<!-- 外部ファイル方式 -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

外部ファイル方式の利点は、同じスタイルを複数のHTML文書で共有できることや、メンテナンスのしやすさです。

JavaScriptの役割

JavaScriptは、ウェブページの動きを実現するためのプログラミング言語です。

HTMLやCSSが静的なコンテンツを表現するのに対し、JavaScriptはユーザーとの対話やデータの処理、要素の操作など、ウェブページの動きを制御します。

例えば、ユーザーからの入力を受け取り、計算やバリデーションを行ったり、データをサーバーに送信したりすることができます。

また、データの取得や表示の制御を通じて、動的なコンテンツを生成することも可能です。

JavaScriptの基本構造

JavaScriptの基本構造は、文（Statement）と式（Expression）から構成されます。

  • 文（Statement）:
    JavaScriptの文は、1つ以上の文の集まりであり、プログラムの実行の単位です。文はセミコロン（;）で終わります。
  • 式（Expression）:
    JavaScriptの式は、値を生成し、計算を行うためのコードです。式は値、演算子、変数、関数の呼び出し、オブジェクトの作成などから構成されます。式は文の一部として使用されることが多いです。

その他にも変数、関数などがあります。

例えば、関数であれば再利用可能なコードブロックとして関数を定義することができます。関数はパラメータを受け取り、特定の処理を実行し、結果を返すことができます。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // "Hello, John!"をコンソールに出力

JavaScriptは、ウェブページの動的な機能やユーザーエクスペリエンスの向上に重要な役割を果たします。

基本構造を理解し、文や式、変数、関数、イベントの使い方をマスターすることで、JavaScriptを効果的に活用できるようになります。

使用するツールの紹介

Web制作の副業において役立つツールとリソースの活用方法について詳しく解説します。

コードエディターを使う

コードエディターは、Web制作において必須のツールです。

  • Visual Studio Code：
    無料で利用できる強力なコードエディターで、豊富な拡張機能やデバッグ機能があります。
  • Sublime Text：
    高速で軽量なエディターであり、パッケージ管理やカスタマイズ性が高い特徴があります。
  • Atom：
    オープンソースのエディターで、カスタマイズ性や拡張機能の豊富さが特徴です。
しょうしーど
しょうしーど

私は「Atom」を利用しています！

Webデザインの参考となるサイトを見る

Webデザインの参考になるサイトは、デザインのアイデアやトレンドを学ぶために役立ちます。

これらのサイトは、優れたデザインの実例を提供し、デザインの勉強として有効です。主な種類のサイトとその特徴を以下に簡潔に解説します。

  • Pinterest（ピンタレスト）:
    視覚的なデザインやアイデアのインスピレーションを見つけるのに適した画像共有サイトです。Webデザインの画像やデザインアイデアが多く集まっています。
  • Awwwards（アワーズ）:
    ウェブデザインのコンペティションサイトで、優れたウェブサイトのコンテンツやデザインを審査し、賞を授与します。優れたデザインのトレンドを知ることができます。
  • Dribbble（ドリブル）:
    デザイナーのポートフォリオや作品を共有するプラットフォームで、美しいデザインやインタラクションを閲覧できます。個々のデザインやUIコンポーネントに焦点を当てた画像を掲載しており、トレンドの把握に役立ちます。
  • I/O 3000：
    国内問わず、Webデザインの参考となるサイトです。様々なデザインが掲載されているのでデザインの幅も広がるでしょう。
  • MUUUU.ORG：
    主に縦長のデザインを集めたサイトです。業種や色、タイプに合わせて検索することができるので目的に合わせてすぐに見つけることができるのが魅力的です。
  • 81-web.com：
    日本の優れたWebデザインを集めたサイトギャラリーとなっています。ぞれぞれのサイトにアイコンを合わせるとジャンルやカラーなどが表示されるため数多くのサイトをさっとみれるようになります。

他のWebデザイナーが作ったサイトを見るのはとても参考になります。自分では気づかなかったデザインやコードなどを知れるのでとても勉強になります。

是非、Webデザインを集めたサイトは数多く知っておくと自分のスキルアップもできるでしょう。

独学でWebデザインのスキルを習得したプロセスとは！

ここまでWebデザインの副業を始めた理由について紹介をしてきましたが、理由は人それぞれなので、一例として捉えていただければと嬉しいです。

さて、ここからが本題になります。

未経験の私自身も実践してWebデザインに必要なスキルを習得したプロセスについて詳しく解説をしていきますが、私がWebデザインのスキルを習得するために行ったのが、以下の3つです。

  • Webデザインに必要な基礎知識を身につける
  • YouTubeで実践している動画を見る
  • サイトの模写をたくさんする

以上、3つのことをやっていきました！それでは1つずつ解説をしていきます。

Webデザインに必要な基礎知識を身につける

まずはWebサイトの仕組みを理解していくことから始めます。ホームページがどのような仕組みで制作されているのか、画像や文字、動きがあるサイトはどんな言語で構成されているのか理解する必要があります。

Webサイトの制作をするのにまず勉強すべきなのが『HTMLやCSS』です。私自身も基礎知識がない状態だったので、操作方法やコーディングの意味、アプリの導入方法などが解説してある参考書を読みました。

正直に言うと、私自身、様々あるWebサイトがHTMLやCSSでJavaScriptなどいろんな言語が利用されて作成されていることをこの時に初めて知りましたし、CSSという言葉を初めて聞いたほどの未経験者です。

そのため、全くWebデザインの仕事内容が分かっていなかったことを実感しています。

参考書を購入して勉強した理由として、インターネットで探せばWebデザインになる情報が配信されていますが、数多くあるサイトから正しい情報もあれば、古い情報、間違った情報も混在している可能性があります。また、人によってやり方も変わってくると思ったので、まずは参考書を参考にする事で1人の人から正しい情報を一貫性のやり方で学んだ方が混乱が少ないと思い参考書で勉強することを選びました。

まずはホームページがどうやってできているかのか基本中の基本を理解してからいろんなスキル・知識を身につける事を心がけていました。

実際に私が利用した参考書でおすすめしたい本は以下です。

■１冊ですべて身に付くHTML＆CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
created by Rinker

Web関連の情報やデザインが体系的に学ぶことができる「Webクリエイターボックス』の管理人「Mana」によるHTML & CSSとWebデザインが学べる本

一番売れている本で、シリーズ27万部突破の大ヒット!

実際に手を動かしながら１つのサイトを作ることができるので実践向けでもあり、初心者にもわかりやすい本となっています。

プログラミング独学中です。
本書を参考に少しずつ学習に取り組んでいます。
コードはダウンロードできますが、自分の手で一から入力しています。
女性が好みそうなオシャレなウェブサイトが作れると思います。

引用：楽天

口コミでも独学で学んでいる人が使っている声が多かったです。

■Web制作者のためのSassの教科書


次に紹介するのが「Sass（サス）の教科書」です。

SassはCSSよりも効率的にコーディングすることができて、コーディング数も少なくなるため、Web制作時間の短縮化ができる言語です。この本はそんなSassのひと通りの機能を使いこなせるようになることができる本となっています。

CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。

Sassについて詳しく書いてあった。Sassに関してはprogateで少し触れた程度だったが、こちらの本には詳しくSassのインストール方法からnpmやgulpに関して、また関数などについても書いてあったのでSassを勉強するのにおすすめの本。

引用：楽天

インストール方法から様々な手法まで書かれているため、すぐにSassを使いこなすことができるでしょう！

参考書以外にもおすすめなのが無料で始められるオンライン教材です。特にお勧めしたいのが「Progate」と「ドットインストール」です。

  • Progate：
    イラストを中心にした「スライド学習」で初心者でもスムーズに学ぶことが可能です。
  • ドットインストール：
    ３分の動画で学習ができて、隙間時間を利用して学ぶことができます。スマホでも視聴が可能！

無料で、できる範囲は限られますが、Webサイトを制作するための基礎はわかるようになるので、まずは両方登録してやってみることをお勧めします。

YouTubeで実践している動画を見る

次に行ったのが、YouTubeで簡易的なサイトを1から制作していく様子をまとめた動画を視聴しました。

現役のエンジニアによるサイト制作は各コードがどのような役割をしているのか、コーディングしていくときの注意点が目で見れて変化がわかる内容の動画が配信されていたので、視聴しました。

やはり現役エンジニアのコーディングとあって様々手法が見れますし、無料で実践に近い勉強ができたのは大きな収穫です。

動画視聴している中でもSass、JavaScript、Bootstrap、jQuery などの新しい言語、デザインをするのに必要なIllustrator、Photoshop、AdobeXDなどのツールが出てきたので必要に応じて参考書を買って併用することで多くの知識を得ることができています。

模写や自作ホームページをたくさん制作する

参考書で得た基礎知識と動画で学んだ実践系に近いコーディング技術を理解できたところで、よりスキルアップをする為に行うのが模写や自作ホームページを制作することです。

模写はあるサイトを参考に同じものを作っていく作業のことで、見本があるので文字や図の配置などの検討はしないで、コーディングに集中する事が出来ます。

一方の自作ホームページの作成は自分でデザインや写真、文字などの全てを一から考え、実務に近い流れで制作をしていくやり方です。

少し、難易度が上がる方法ですが、実務になれば当たり前のように行う流れですので、自作のホームページを制作することを是非行ってみましょう。

それでももし、自作でデザインが浮かばない方におすすめなのが「フリーホームページ.net」と「Codestep」です。

  • フリーホームページ.net：
    完全無料で商用利用も可能なレスポンシブ対応のWebサイトを制作することができます。
  • Codestep：
    ジャンルやレベルに合わせて実践的なWebサイトの制作スキルが身に付きます。

どちらのサイトもレイアウトを考える力とコーディングスキルが身に付くので是非、模写を行う際は活用していきましょう

Webデザインの独学が難しいと感じたならスクールも検討してみよう

Webデザインは、パソコンやインターネット環境が準備できれば、初期コストも最低限に誰でも簡単に学習が始められます。

しかし、Webデザインで稼ぐレベルになるまでには、実績を含めた一定のWebデザインのスキルが必要になってきます。

いざ、独学でスキルを身につけようと思ったけど「独学で学んでいくには厳しいな」と感じた場合には、スクールの利用を検討するのがよいでしょう。

おすすめのスクールを「Webデザイナーを目指している人におすすめなスクール７選！」でも紹介しているので是非、参考にしてみてください。

Webデザイナーを目指している人におすすめなスクール7選！
「Webデザイナーになるためのおすすめなスクールは？」 「早くスキルを身につくスクールは？」 「副業や就活のサポートをしているスクールはない？」 これからWebデザイナーを目指そうとしている人でオンラインやスクールに通おうと検討しているけど...
shoceed.com
2022.09.19

Webデザインの副業を始める上で、スキル取得だけでなく事前の準備が必要になりますので「未経験者がWeb制作の副業を始めるための方法を解説！」を是非、参考にしてみてください

未経験者がWeb制作の副業を始めるための方法を解説！
「Web制作を副業としてやりたいけど何をすればいいのかわからない」 「Web制作の始め方を知りたい」 未経験だけど、副業としてWeb制作を始めようと思ったけど「何から始めればいいかわからない」、「未経験でもできるのか」と不安に感じている方も...
shoceed.com
2022.09.17

スクール選びで悩んでいる方は「スクマド」に相談してみる

スクールに通ってみることを検討してみるも、講義内容や目指しているものなどがバラバラで自分に合っているスクールを探すことができないと悩んでいる方に「スクマド」で一緒に自分に合うスクールを探してもらいましょう。

スクマドではサービス完全無料で、お客様満足度９７％の「かしこく、失敗しないスクール選び」を専任のカウンセラーがマンツーマンで理想のスクール選びをサポートしてくれます。

プログラミング、マーケティング、デザインなど様々なジャンルに対応しており100以上のプランから本当に必要なプランを比較・検討することができます。

さらにスクマド限定プランやオリジナルキャンペーンで通常よりも平均して20％もお得に受講することが可能！スクールが決まって後もサポートをしてくれるので、確実にスキルアップすることができるでしょう。

かしこく、失敗しないスクール選びなら【スクマド】

スクール選びで失敗したくない。後悔したくない！確実にスキルアップできるようにまずは無料のカウンセリングを予約してみることを検討してみてください。カウンセリングはオンラインでも可能なのです。

@Sho_Ceed

この記事を書いた人

しょうしーど
しょうしーど
３5歳の２児のパパです。
12年目サラリーマンが副業（Webライター・Web制作）やブログに関する情報を配信しています。
本業と副業を両立しながら家族を幸せにする計画を実行中です。

将来のために日々、独学で勉強し成長しています！
ぜひ、皆さんと一緒に成長していく仲間を募集してます！一緒に切磋琢磨していきませんか？

コメント