この記事の目次
「Web制作」とは、一言で言えば“ウェブ上で表示されるホームページやサイトを作ること”です。新規のWebサイトの制作(企業HP、ECサイト、ブログ、広告としてのLPなど)や、既存のWebサイトのリニューアル、コンテンツ追加など、Web制作と言っても幅広い仕事があります。(ときに「ホームページ制作」や「サイト制作」と呼ばれることもあります。)
ネット社会の現代では、会社や商品のことなどさまざまな情報を発信するためにWebサイトが必要不可欠となり、手軽でありながらも価値を示す重要なものとなりました。一般的にWeb制作をしよう！と考えた際、Web制作会社やフリーランスに依頼することが多いでしょう。しかし、制作するサイトの種類や規模によって異なるものの、それなりの費用がかかる場合がほとんどです。
そんなとき、独学でWeb制作を始めようと考える方も多いのです。さらにWeb制作は、在宅の副業としては始めやすいフィールドでもあり、サイトを必要とする人や会社が多い現代だからこそ多くの案件を得やすいため、Web制作を独学で学びWeb制作を本業として活躍する人も増えてきました。
この記事では、独学でWeb制作を始めてみよう！とお考えの方向けに、独学でWeb制作を行うために必要な“心構え”的な感覚で、準備するものや大まかな流れをお話ししていきます。あくまで初心者向けの効率的な独学のやり方、流れについて説明していきますので、技術面など詳しいことには触れていません。最後には独学でWeb制作をするうえでおすすめの方法をご紹介しています。ぜひ最後までご覧になり、今後の学習計画に少しでもお役立ていただければ嬉しいです。
Web制作を独学で学ぶメリットは主に以下のポイントがあります。
最近では、無料で学べるサイトやブログも多いうえ、書籍などを購入して勉強を進めていくことで費用を最低限に抑えることができます。スクールに通うにも多くの受講費用がかかるため、費用面で心配な方には大きなメリットと言えるでしょう。また圧倒的に費用がかからないことで、続けられるか不安な方や副業から始めたいとお考えの方でも気軽に始められるのもポイントです。
スクールに通うとなると時間が決まっていて縛られることもあるかもしれませんが、独学であれば好きな時間に好きなように学ぶことができます。自分のペースで学習を進めることができるので、学校や仕事で忙しい人も空いた時間を活用して学べます。
制作会社やフリーランスに依頼する場合も、綿密に打ち合わせをし、要望を伝えれば理想に近いサイト作りが叶うでしょう。ですが、自分で制作ができるようになれば、思い描くものを自由に作ることができ、より納得のいくものが作れるはず。また、ここを少し変えたい、もっとこうしたい、こんなデザインにしたいなど変更したい点が見つかったらスピーディに解決できるのも魅力と言えます。
ただ、すべてが自分次第。勉強方法として何を選択するかも、勉強時間を作れるのかも、つまずいたときに解決できるのかも、自分の気持ちや環境で変わります。独学で学ぶ場合はやはり途中で挫折する方が多いのも事実。
挫折しないよう、あらかじめ目標やスケジュールを立てておき、1つ1つ分かることを増やしていきながら自信をつけいくことが大切です。
「可能」です。ここまででも触れてきましたが、現代ではさまざまな勉強方法があるため、独学でもWeb制作を学ぶことができます。実際に独学で成功した方も多く、実際にフリーランスで活躍されている方もいます！ただ、勉強すべき点や順序、目的をしっかり決めておかなければ効率よく学ぶことができません。
また、初心者の方にとってはじめて聞く単語や仕組みも多いうえ、特に複雑なプログラミングスキルの習得は簡単なことではありません。そのため、途中で挫折してしまわないよう、まずは事前の準備・把握をしっかりしておきましょう。
なお、Web制作と言っても、趣味で簡単なホームページを作ったり、個人のブログを作ったりという、多くのページや機能を必要としないものでれば難易度も低く比較的早くマスターできるようになってくるかと思います。(もちろん勉強に充てられる時間も方法も人によって異なるため焦ることはありません！)
また、独学で身に付けた知識やスキルを活かして、副業やフリーランスとして仕事にしたいとお考えの場合は、それなりに知識・スキルの習得に時間がかかることを覚悟しておきましょう。仕事を請け負うということは、その道のプロとして任せられるわけですから、時間をかけてコツコツと学習を積み重ねていきましょう。実際にサイトを作る実践的な学びを繰り返していくことで理解を深めてくださいね。
Web制作を独学で学ぶための前準備として、以下を揃えておきましょう。
・パソコン
・タイピングスキル
・デザインソフト（Photoshop・Illustratorなど）
※デザイン作業に使うソフト
・テキストエディタ
※コーディングやプログラミングを行うための専用のエディタがあれば、効率よく作業が進みます。
通常、Web制作を制作会社に依頼した場合は様々な人が関わって作られることがほとんどです。例えば企画や統括はディレクター、デザインはWebデザイナー、開発はエンジニアなど、各分野に特化した人が担当し、共同して進めていきます。そのため、Web制作で必要なスキルは、どの業務に携わりたいかによって異なります。
この記事は、独学でWeb制作をしたい方向けのため、「制作(デザイン関連)」に焦点を当てて説明していきます。なお、制作がする作業の中でパッと思い浮かぶものと言えば、以下のようなことが挙げられます。(一部ですが必須となるような主な作業です。)
・デザイン
・レイアウト
・コーディング
・プログラミング
・ロゴやバナー制作
・画像やアニメーション制作
ここからは主に【デザイン】・【コーティング】・【プログラミング】の3つについて少し詳しく見ていきましょう。
Web制作を行う際、最低限必要なスキルのひとつが「デザイン」に関するスキルです。Web制作において「優れたデザイン＝おしゃれなサイト」というわけではありません。もちろん、目に留まるおしゃれさも時には必要ですが、ユーザーが何を求めているのかを理解したうえで、何より利用者目線の「見やすい」「使いやすい」「分かりやすい」ようなデザインが求められています。そうした使いやすさ・導線などを含めたサイト全体に意図を持たせたデザイン力が必要になります。
また、デザインを作成するためのツールを使えるようになることも重要なスキルと言えます。例えば「Photoshop（フォトショップ）」や「Illustrator（イラストレーター）」などのツールは、Webサイト制作において欠かせないスキルとなっています。さらに、よいデザインを作り上げるためには、後述するプログラミングやコーディングなどの知識も必要です。
コーディングとは、ブラウザなどでサイトの“見た目”を作る作業のことです。それだけ聞くと前述したデザインと似ているなと感じるかもしれませんが、より専門的な言葉で話すと、プログラミング言語を使ってプログラミングコードを記述していく作業のことを言います。そんなコーディングについての知識は、Webサイトを作るうえで基本中の基本です。
また、プログラミングコードの中でも、ヘッダーやフッター、見出しなどを形作るコードが「HTML」であり、レイアウトや文字の色といったサイトの装飾、整えるのが「CSS」で、HTML・CSSどちらもしっかり整えることが、わかりやすく読みやすいWeb制作につながります。
HTMLとCSSでデザインしたWebサイトに“動きをつける”役割を果たすのが、「JavaScript」や「jQuery」です。想像しやすいものでいうと、クリックすると詳しい情報を表示したり、複数の写真をスライド式で表示したり、よりいろんな情報を伝える・動きをもたせることでより使いやすくなる、見やすくなりデザイン性も高まるなどのメリットがあります。
これまではプログラマーの仕事であったものの、最近は習得しているWebデザイナーも多く、優れたWebサイト作りには必須の知識とも言えるので、ぜひ習得したいスキルです。
前述した内容もありますが、改めて、Web制作を行う際、独学で身に付けたい知識や言語、技術を振り返りましょう。（「制作」に絞って解説していきます。）
・HTML
HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略。Webページに表示するテキストや画像などの内容を配置するための言語です。HTMLで書くことによって、文書の構造をコンピュータが認識できるようになります。
・CSS
CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略。HTMLで書いた内容をどのように装飾するかを指示する言語です。HTMLと組み合わせて、テキストや背景の色を変えるなど、装飾をするために使います。HTMLとCSSの2つはセットで用いられ、Web制作には欠かせないスキルなので勉強は必須です！
・JavaScript
JavaScriptはプログラミング言語。TMLとCSSを使って記述するもので、現在多くのホームページで使われている人気の言語です。“動きのある”Webサイトを作る場合にはJavaScriptを学ぶ必要があります。そのJavaScriptの勉強の入口としておすすめなのが次に紹介する「jQuery」です。
・jQuery
jQueryはJavaScriptライブラリの1つであり、Web制作ではよく使われます。記述が簡潔で初心者でも扱いやすいため、サイト制作におけるJavaScriptのとっかかりとして最適です。
・WordPress
WordPressは今や世界最大のシェアを誇るホームページ・ブログ作成ソフトウェアです。無料で使えるうえ拡張性も高いため、多くの現場で取り入れられています。実際、WordPressのスキルを身につければ応募できる案件も数多くあるので、フリーランスや副業としてWeb制作を始めたいとお考えの方はぜひ身に付けておきましょう。なお、WordPressは「PHP」というプログラミング言語で作られているため、同時に学びましょう。
・「Photoshop（フォトショップ）」・「Illustrator（イラストレーター）」
主に写真を補正・加工するためのPhotoshop。線や色がはっきりとしたイラストを描いたり、細かい文字設定やレイアウトを行ったりするのに最適なIllustrator。どちらもWebデザインには必須のスキルです。
身に付けるべき知識や技術が分かったところで、ここからはWeb制作の独学での学習方法をご紹介していきます。今では、本や学習サイト、動画教材、成功者のブログなど様々な学習方法がありますが、何より自分に合った方法を選ぶのが大切です。
というのも、自分に合わない方法だと学習が苦痛になり、挫折してしまう可能性もあるからです。そうなっては本末転倒。自分の環境(どれくらい時間がとれるか、活字に抵抗がないかなど)を踏まえ、楽しいと思える方法を見つけましょう。
現在、Web制作について学べる書籍はたくさん販売されています。独学で学ぶ場合は主に書籍をベースとして、分からないことはパソコンで検索するというように併用してスキルを習得するのがおすすめです。なお、書籍の中でも「実践ができる」ような内容がベストです。
▼おすすめの書籍
・1冊ですべて身につくHTML & CSSとWebデザイン入門講座
https://books.rakuten.co.jp/rb/15822265/
デザインの基礎やHTML・CSSの書き方だけではなく、Webサイト制作の全体の流れまで網羅的に説明されている1冊です。話題の1冊でもあり評価も高いのでWeb制作をはじめるにあたって大変おすすめです。前半は基礎知識の説明、後半はサンプルのサイトを作っていく構成で実践しながら学ぶことができます。
・確かな力が身につくJavaScript「超」入門
https://books.rakuten.co.jp/rb/16014712/?l-id=search-c-item-img-01
初心者にもおすすめ！サンプルを作りながらJavaScriptの基本を学べる入門書です。動きのあるサイト作りのためJavaScriptを学習しようと思っている方に最適。扱う内容も難しすぎず適度なボリュームで、実際にサンプルコードをダウンロードして手を動かしながら基礎を固められる1冊です。
・Illustrator & Photoshopデザインの作り方 アイデア図鑑
https://books.rakuten.co.jp/rb/16727977/?l-id=search-c-item-text-01
PhotoshopとIllustratorを実際に使って、操作手順やデザインの考え方、レイアウト、画像・テキストといった素材、さらには「ai」「psd」といった完成データまで、学習する上でとても役立つ情報が全部揃った内容で満足度も高い1冊。実際に手を動かしながらPhotoshopとIllustratorを学びたい人にぴったりの書籍です。
▼無料でコーディング・プログラミングが勉強できるサイト
・Progate
https://prog-8.com/
1番有名なオンライン学習サービスと言っても過言ではないのがこの「Progate」。Web制作に必要なHTML・CSS、JavaScript、jQueryなどを学ぶことができ、初心者の方でも取り組みやすいのが魅力です。
・ドットインストール
https://dotinstall.com/
ドットインストールではHTML・CSSに限らず、多くの言語を扱っているのが特徴です。また、JavaScriptに関する動画がとても多く、基礎もしっかり学べます。動画形式かつ3分という短い動画なので、開いている時間を見つけて手軽に学べる点も嬉しいポイントです。
・chot.design
https://chot.design/
現役クリエイターが制作したカリキュラムで学んでいくオンライン学習サイトです。Webデザインの基礎からHTML・CSSのコーディング手順を学べます。そしてPhotoshopやIllustratorといった各種ソフトの使い方からバナー制作やランディングページの制作テクニックなどより実践的なスキルを身に付けられるのも魅力です。
そのほか、実際に独学で学び、現在フリーランスや副業として仕事にしている方が体験談をもとに執筆されているブログや、YouTubeなどで公開されている動画なども参考になります。ちょっと調べものをしたいときにもおすすめです。
ここまで、初心者向けに独学でWeb制作を学習する際に必要なスキルやおすすめの学習方法をご紹介してきました。企業や商品のサイトを持つことが当たり前の現在、Web制作は在宅の副業、フリーランスとして始めやすいフィールドでもありますから、Web制作のスキルを身に付けることはいい選択だと思います。
ただ、独学となると時につまずいてしまったり、挫折しそうになったりすることもあるかもしれません。そうならないためにも、ぜひこの記事をきっかけとして自分にピッタリの学習方法を見つけて、Web制作スキルを身に付けていってくださいね。
Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。
LIGブログに掲載されました
