【経験談】未経験から始めてWeb制作を仕事にするための必要なスキル
本記事では、未経験の方がどうしたらWeb制作の仕事に就くことができるのか、そのために必要なスキルや手順はどうすればよいのかを僕の経験談からお伝えします。
僕は30代後半という年齢でも、未経験でHTMLやCSSがわからない状態から、スクールで学んでWeb制作会社に就職できた経験があり、できない人の気持ちは結構わかっている方ではないかと思っています。未経験→Web制作会社に勤務→フリーランスとなっており、今では楽しく仕事ができています。
この記事を読むことによって、Webサイト制作ができるようになるまでの大まかな学習手順がわかるようになります。
【経験談】未経験から始めてWeb制作を仕事にするための必要なスキル
未経験の状態から始めるとき、何から手を付けて始めればよいかわからないと思います。
そこで、僕のオススメは以下の手順です。
↓
・jQueryを使って、コピペで簡単なプラグイン実装ができる。
↓
・LPや簡易ホームページは作れるようになる
↓
・ドメイン・サーバー契約してホームページ運用はできるようにする
↓
・WordPressの基礎理解＆簡単なオリジナルテーマが作成できるようにする
最後のWordPressは基礎が理解できればOKなレベルです。ここまでできれば、就職したり個人で仕事を受注することが可能な状態となります。いきなり個人で仕事を受注するのは難しかったりするので、まずは就職を個人的にはオススメしています。
動画学習で基礎を固めるのがオススメ
僕がおすすめする学習方法は、無料の動画教材で学習するです。「ドットインストール」という動画学習サイトがオススメです。
動画がよいのは分からなくても、どんどん進めていけて、つまずきにくい点です。進めていくと前にわからなかったところも後から分かることがあったりします。
完全に理解する必要はありませんが、スキマ時間に何度か見たりすると理解が深まると思います。ざっと理解して、どの動画で何を説明していたかが分かる程度で十分。必要になった時に見直せばOKです。
重要なのは手を動かすことです。実際に動画を見ながらコードを書いて慣れていきましょう。僕がよくやっている手順は１回目は流し見して、２周目で手を動かしながら自分で試すという方法です。
また僕は使っていませんでしたが、初心者はよくprogateという学習サイトを使うことが多いみたいです。
ドットインストールだと動画を順番に見ていけばよいので迷うことがなくオススメできます。慣れてきたら、他の方法で知識の補完をするのがよいかと。
・ドットインストールの有料プラン(1080円/月)を使い有料動画でさらに知識を深める
・Udemyで有料動画を購入してさらに知識を深める
・ピンポイントでわからないところは、YouTubeやGoogle検索して調べる
HTML・CSSの学習
HTMLやCSSの基礎を覚えて、ホームページ制作の基礎を身に着けます。
コーディングするためのパソコン設定を整える
まずはパソコンの設定からです。パソコンに慣れていない人は動画を見て、設定からしていきましょう。
▼パソコンの設定(Mac / Windows)
» HTML/CSSの学習環境を整えよう [macOS版]
» HTML/CSSの学習環境を整えよう [Windows版]
HTMLの基礎を覚える
HTMLはホームページの骨組みを作るために必要なものです。HTMLが書けるようになると、とりあえず文字や画像などの実装ができるようになり、ホームページの表示ができるようになります。
まずはドットインストールの無料動画でHTMLの基礎を学習します。
» はじめてのHTML
最初はとりあえず１回目は流し見して、次のCSSに進んで全体を理解するのがよいかもしれません。分からなくても実際にコードを書いて手を動かして、理解するようにすると徐々に理解が深まると思います。
CSSの基礎を覚える
CSSはホームページの装飾ができるものです。CSSが書けるようになると、HTMLで書いたホームページの装飾ができるようになります。具体的な例でいうと、文字の大きさや色を変えたり、画像の大きさを調整したり、全体のレイアウト変更ができるようになります。
CSSの基礎をドットインストールの無料動画で理解します。
» はじめてのCSS
CSSは色々な書き方がありますが、まずは動画の通りにやって基礎を固めるのがよいかと思います。
まずはHTMLとCSSを使って、簡単なホームページを構成できるようになりましょう。
jQueryを使った実装
jQueryは、JavaScriptのライブラリ(付随するツールのようなもの)で簡単な記述でJavaScriptを動かせるツールのようなものと思っておけばよいかと思います。
jQuery(JavaScript)は、ホームページに動きをつけることができます。例えばページ下部で「トップに戻る」ボタンを押したら、ページトップにスクロールするなどの機能実装ができるようになります。
jQuery自体の理解ができなくても、とりあえずコピペで実装できるレベルになれればOKだと思います。jQueryの詳細は理解せずに動きの実装ができるようになれば、次に進んでよいと思っています。
理解を深める場合も、まずは実装して「動いた！」という感覚をつかみ、後から理解を深めていくというのがおすすめの方法です。
▼まずは以下のことだけできて、jQueryプラグインを使って機能実装ができるだけでOKです。
↓
実装したそのコードをコピペして、jQueryを実装する(主にプラグインなど)
▼理解する手順
↓
jQueryの基礎を勉強して理解
↓
JavaScriptの基礎も徐々に理解
順番がメチャクチャに見えるかもしれませんが、僕のオススメは上記の手順です。JavaScript(jQuery)はプログラミング言語であり、HTML・CSSとは違って最初は理解に時間がかかると思うので、挫折せずに進めていくためには、こんな感じでOKかと思っています。
jQueryの学習方法
基本的にはGoogle検索して、記事を読み、とりあえずの実装ができればOKです。「jquery プラグイン使い方」などで検索して上位のサイトを見たら実装だけなら分かるかと思います。
簡易ホームページ・LPの作成
HTML・CSS・jQueryが使えるようになれば、簡単なホームページの制作はできるようになります。
LP(ランディングページ)と呼ばれる１枚ペラのページ制作はできるレベルになるため、力試しをしたい場合は、ランサーズやクラウドワークスなどでLPコーディングの仕事を受注してみてもよいかもしれません。
ドメイン・サーバーの設定
ホームページがPC環境で作れるようになったら、インターネット上へ公開できるようにする方法を覚えるステップに進みましょう。
自分が作ったホームページをインターネットに公開するには、ドメインとサーバー契約(基本的には有料)をする必要があります。
仕事を受けたり、Web制作会社に就職するなら、自分のブログを作るなどでいいので、ドメイン契約をして、サーバーも契約し自分で一度設定を一通りやってみるのがよいです。FTPツールを使って、FTPでデータのアップロードもできるように経験した方がよいです。
ドメイン・サーバー契約・設定の学習方法
YouTubeやGoogleで検索して出てきた記事を見れば十分理解できると思います。
WordPressの実装
WordPressはCMS(コンテンツ・マネジメント・システム)であり、更新機能などを持ったホームページの制作ができます。
仕事で受注する小規模なホームページはWordPressで作ることが多いため、WordPressでの制作までできるようになれば、最低限ではありますが仕事が受注できるレベルになれます。
WordPressではテーマを変更することにより、デザインや表示などを変えることができます。テーマは多数存在しており、WordPressでホームページ制作をする際は、既存のテーマを使うか、自分独自で作成したオリジナルテーマを使う選択肢があります。
仕事で使うWordPressの場合は、既存テーマのHTML・CSSなどを変更してカスタマイズする方法か、ゼロからオリジナルテーマを作って納品する方法のどちらかがよくあります。またWordPressをカスタマイズする際は、簡単なPHPの修正も必要になるため、PHPの超基礎だけできるとよいです。
仕事で使うなら以下のレベルができるようになるとベターです。
・PHPやWordPress関数の使い方を覚える
※必要な時に都度調べて使えるレベルでOK
WordPressの学習方法
WordPressについては、記事で調べたりして基礎を学んだり、YouTubeの動画でも多数あるのでそれらで学習すればよいかと思います。
可能ならPhotoShopの基本操作までできるとベター
就職する場合、必須ではないですが、デザインカンプ(デザインデータ)からコーディングしてホームページを制作できる必要があります。Web制作会社だとデザインカンプはPhotoShopで制作されることが多く、PhotoShopの基本操作ができるとベターです。
fiigmaやXDなどのツールを使うケースも多くなっていますが、PhotoShopのデザインカンプからコーディングできれば他も似たようなものなので問題なくなります。
画像の書き出しができて、デザインを見てコーディングできる(マージンが◯pxなどわかる)レベルであれば問題ありません。
PhotoShopは購入すると高いので、XDでとりあえず慣れておくだけでもよいかもしれません。
まずはやってみるのがおすすめ
ここまで色々と説明してきましたが、とりあえずは始めてみるのがよいです。少しでもやってみることにより向き不向きがわかるもの。
そして、完全未経験から始める時につまずくのは０→１の部分です。まわりに教えてくれる人や環境がないと、かなりキツイと思います。
最近は何と0円の無料プログラミングスクールがあります。プログラミングスクールだと完全にわからない状態から、初心者レベルまで引き上げてくれるのではないかと思います。無料なので損することがない、プログラミングスクールで試しに初めてみるのがおすすめです。
» TechAcademy 無料体験はこちらから
もちろん、初心者状態からも学習していくのも大変ではありますが、超基本がわかると、あとは自己学習で進めるハードルが一気に低くなるのです。
まとめ
未経験の方が、Web制作を仕事にするまでに必要なスキル・学習手順をざっと紹介してみました。
学習の手順まとめ
↓
・jQueryを使って、コピペで簡単なプラグイン実装ができるようにする。
↓
・LPや簡易ホームページは作れるようになる
↓
・ドメイン・サーバー契約してホームページ運用はできるようにする
↓
・WordPressの基礎理解＆簡単なオリジナルテーマが作成できるようにする
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています