【独学】大学生でWeb制作の勉強の記録とステップ

大学生がWeb制作を独学で学んだ記録を綴っていきます。2020年9月からWeb制作の勉強を始めました(現在は2021年9月)。1年間Web制作を独学でしてきたステップを解説していきます。

仕事として案件をもらいたいのであればおすすめはWeb制作の勉強よりも営業の勉強の仕方を学ぶといいと思います。Web制作の営業を3週間毎日20分ずつ行いましたが、大手のWeb制作会社のコーダーや下請けとして仕事をもらった方が早いのはあります。ただ柔軟性がないので1から仕事をもらいたいのであれば、自分で営業をしましょう。

独学でWeb制作の勉強を進めるステップ

学習期間や学習方法、おすすめの本や教材も洗い出して書いていきます。仕事をもらうためには最後のステップで広告と案件を打つことも書いているのでWeb制作で仕事をもらいたい場合は参考になれば幸いです。

【僕がWeb制作の案件をもらうためにしたこと】

  • 1、プログラミングの概要を理解
  • 2、エディタ(コード編集ソフト)をインストール
  • 3、HTMLとCSSの理解
  • 4、HTMLとCSSのサイト・LPを模写
  • 5、Bootstrapの理解
  • 6、サーバー・ドメインの理解
  • 7、PHPの基礎理解
  • 8、WordPressの基礎理解
  • 9、オリジナルWordPressの作成
  • 10、PHPの理解を深める

プログラミングの概要を理解

プログラミングとはそもそも何なのかについてWikipediaでは、「プログラミングとは、目的達成のために①アルゴリズムを作り、②そのためのデータを扱うためのもの」と記されている。

料理初心者が肉じゃがを作るのであれば、まずレシピ本(プログラミング初心者の本)を買いまずプログラミングの概念を理解した方がいい。実際に僕は大枠の概念を知らなくてブログから始めたのでプログラミングをしよう!と思ったとき少し苦労した。

VSCode(エディタ)をインストール

プログラミングのコードを書くためにVSCodeというエディタ(編集)をインストールした。VSCodeをインストール後は様々なプラグインを検索して調べてインストール。

まずはプログラミングができる環境を構築する必要がある。そのためにまずは自分で調べてやってみよう。ちなみにMacでなくてもWindowsでもプログラミングはできる。今のところWeb制作に関してはWindowsで困ったことはない。

>>VSCodeホームページ

HTMLとCSSの理解

HTMLとCSSの全体の構造を理解するために、Progateと本を数冊購入し使った。分からないところはとにかく検索して調べまくる。YouTubeやGoogleの検索でだいたいのことは出てくるのでまずは調べてみよう。

HTMLは基本的にテンプレートで代用可能。CSSの方が難しく柔軟性もあり応用をしないといけないのでHTMLは1週間で学び、それ以降はCSSを学ぼう。

HTMLとCSSのサイト・LPの模写

自分がこれ真似したい!というサイトをとにかく模写しまくった。結果HTMLはテンプレートがあれば十分であり、問題はCSSであることが分かる。CSSはとにかくデザインや配置のことを頭に入れて、考えながらいろいろと真似したい部分をコードに書いては反映させて繰り返した。

Bootstrapの理解

BootstrapはHTML/CSS/JavaScriptから構成される最も有名なWEBフレームワークのこと。WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されているから便利。また、デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済んでしまいます。

サーバー・ドメインの理解

サーバー・ドメインの理解をしました。もともとブログをしていたのでなんとなくは分かっていたけどここで本格的に理解しました。簡単に言うとサーバーはネット上の土地でドメインは住所。いわゆるネットを地球と考えたら分かりやすいです。ネット上に自分のマスを作っている感じに近いと思います。

PHPの基礎理解

PHPの基礎理解をしよう。PHPはWordPressで作られているプログラミング言語。

PHPを理解することでWordPressでの案件をもらいやすくなることも可能。PHPの最初の基礎的な理解をするためにまずはYouTubeや自分で調べて勉強してみよう。

WordPressの基礎理解

初めてWordPressを触るのであればまずは設定の仕方や簡単なカスタマイズ。プラグインなどを知るところから勉強しよう。特にssl化やテーマについてもどんなものがあるのか知るといい。

オリジナルWordPressテーマの作成

簡単でいいのでオリジナルWordPressテーマを作ってみよう。WordPressのファイルの中のPHPファイルの種類をまずは確認して、様々なWordPressテーマを調べてまずはコピー&テーストで反映させてみること。その後に、CSSでデザインを装飾しよう。オリジナルテーマの作成時にはWordPressテンプレートタグがおすすめ。効率よくWordPressコードを知ることができるので使ってほしい。

PHPの理解を深める

さらなるPHPの理解を深めよう。

PHPを自在に使いこなせるようになるだけでも十分に案件にはつながると思います。PHPで特に条件分布を理解しておくとWordPressにおいて分かりやすくなる。

【おまけ】ホームページの案件をもらうために営業と広告を打つ

実際に仕事をもらいたい場合は集客をしよう。集客において大事なことはコンテンツ。特にSEO対策による集客は記事のコンテンツの質によって変わる。特に個人の方やこれからビジネスをしたい方にホームページのことを聞きたいのであれば広告を打つこと。また下請けからでも仕事をもらうことは可能なのでまずは応募や営業をかけよう。

【大学生】Web制作活動の記録

1カ月目

活動一カ月目まずはHTMLとCSSの勉強を始めました。

ドットインストールやProgate、YouTubeにあるコンテンツをはじめとして勉強を開始。HTMLとCSSは1週間ほどで全体の構造を理解し、自分でまずはサイトを作ってみることに挑戦。その際にはソフトはVSCODEを使用し、模写サイトは自分がきれいだなと思ったサイトを模写していました。

最初はLPから始め、徐々に自分のできることを増やしていきHTMLとCSSで簡単なWebサイトを作りました。また本は1冊ですべて身につくHTML & CSSとWebデザイン入門講座をAmazonで購入し扱っていました。

IllustratorやPhotoshopを使うことは1カ月目ではありませんでした。とにかく手を動かして体にコードを暗記させることが今思えば大事と思いました。また、パソコンは大学入学時に購入したものを使用しています。価格帯は10万円前後です。10万円前後のノートパソコンでもWeb制作は少し重たいときもありますが使えます。

もともとブログをしていたこともありこのときにジモティーのお助けカテゴリーにWordPressの設定方法をします!という投稿をしました。完ぺきなWebサイトを作れないとお金を稼げないわけではありません。自分の出来ることがあるのであればまずはいろいろな人に聞いてやるのがいいと思います。

2カ月目

WordPressの設定や簡単な操作方法、ドメインやサーバーとはなにかという基本的なところからジモティーで依頼が来た方にお会いして教えていました。この時は時給1000円でいろいろと教えていました。

2カ月目はCSSの勉強を中心にコードを書き、実際にWebサイトに反映させてどうなるのかというところを実験していました。この時にバイトでしていた家庭教師が終わり、本格的に何かしないといけないなと思いはじめ活動を広げていました。

この時点でブログを立ち上げておくといいかもしれません。ホームページ作ります!というサイトでなくてもいいのでブログで自分の学んだことを書いていくとあとあと役に立ちます。僕はサーバーとドメインはXserveを使っています。ドメインが1つ永久無料のキャンペーンをしているときがあるのでキャンペーン時を狙うことをおすすめします。

3か月~4カ月目

自分のブログのデザインをいろいろといじるようになりました。少しずつ自分ができるところも増えていき楽しくなってきました。独学1カ月目の時は勢いで毎日ずっと勉強していましたが精神的には少し疲れていたかもしれません。

ですが3カ月目くらいになるとHTML・CSSの構造もきちんと理解でき実際に応用ができるようになりました。ブログをしているとデザインを凝りたくなるのでCSSでデザインを変えることができるようになったのはよかったです。

またこの時期にPHPの構造や基礎的なところから勉強を始めました。PHPはWordPressのフレームで使われている言語であり、PHPを使うことによって簡単に記事やWebサイトの変更をすることができます。WordPressのPHPのコードは『WordPressテンプレートタグ』を使用することによりまずはコピペをしてきちんと反映されているかを確認することで構造を理解しました。

VSCODEでWordPressのローカル環境を作るのが難しかったので自作テーマを作る際はもし知人にWordPressについて詳しい人がいるのであれば聞くことをおすすめします。

5カ月目~6カ月目

まずは自作テーマで行っていましたがもともとあるWordPressテーマを使い、そこに自分でさらに改造をして現在は使っています。WordPressテーマを改造する際はGPL100%の商用利用可能のものを使いましょう。ビジネスマッチングアプリであるYentaをここでインストールし利用していましたがあまりおすすめはしません。

7カ月目から1年後

暇な時にブログで記事を書く感覚に近い状態でWordPress全般のプログラミングをいじっていました。結果的に全体の構造の理解はできるようになりました。仕事としてもWeb制作で例えばWordPressのヘッダー画像を挿入、全体のデザインの構築や修正・カスタマイズの仕事をちょこちょこともらえるようになりました。

【独学】Web制作で役立ったもの

【独学】Web制作で役立った本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

WordPress仕事の現場でサッと使える!デザイン教科書Webデザイナー養成講座

HTMLとCSSの勉強に関しては「この1冊を全て身につければ、安全にその先に進めます」。

webの世界は日々入れ替わり立ち代わりが早いので移り変わりが早い。まずWeb制作ではなくてもプロラグミングを学ぶ点において、本書は入門書の中では「最短」に近い。

デザインに最低限必要な基礎知識やHTMLとCSSについていろいろ教えてくれる。今時のコーディングの基礎の部分をしっかり押さえています。この本に書いてあることを「自分の手を動かしながら」やってください。最後にカフェのサイトが出来上がりますが、からなず自分で写経しながら完成させてださい。

IllustoraterやPhotoshopでがんばらなくてもWebデザインができる優れたツールがAdobeXDです。これは「今から」Webを勉強する人の特権。

僕自身はAdobeXDのことを知らずに独学でWeb制作を始めました。しかし1からヒアリングをしてWeb制作をするのであればAdobeXDは絶対に必要なツール。

ファイルもダウンロードできますが、使うのは基本「画像素材だけだ」と心に決めて、書いてあるフローは全て手を動かしながら実現させることをおすすめします。

Web制作独学の悩みQ&A

Web制作・ホームページ制作は独学でもできるの?

結論できます。

ただし時間をかけて勉強してもいいのであれば独学をおすすめしますが、短期間で転職や就職、フリーランスとして活動する予定である場合はあまりおすすめしません。独学の場合はやはり分からないところが聞けないというのがデメリット。その都度自分で調べてなんとか解決しないといけません。その際にはどうしても本やYouTube、Webの記事だけでは解決できないことがあります。

Web制作の具体的な勉強方法は?

僕は以下のように勉強をしました。

1、プログラミングの概要を理解

2、エディタ(コード編集ソフト)をインストール

3、HTMLとCSSを書く

4、Bootstrapの理解

5、PHPの基礎理解

6、WordPressの基礎理解

7、オリジナルWordPressの作成

8、PHPの理解を深める

9、サーバーサイドについて理解を深める

6つ目までは1カ月から2カ月ほどで独学でも基礎理解までは習得はできます。ただ7以降から現在でも勉強中です。よりよいホームページやWebコンテンツを作れるように日々勉強しています。

Web制作をするためのパソコンのスペックは?

Web制作ができるパソコンのスペックはおおよそ10万円~15万円ほどのパソコンであれば大丈夫です。

Web制作であれば10万円前後のものでもそこまで不便を感じることはありません。今であればM1Macでもいいかもしれません。WindowsかMacでプログラミングをするか迷うと思います。僕はWindowsでも問題なく使うことができています。しかし、開発環境がMacの方がすでに構築されているので楽だと思うのでこれからパソコンの購入を検討しているのであればMacがいいでしょう。

WebデザインでAdobeのPhotoshopやIllustratorなどを使用する際もこのくらいのスペック帯の価格のパソコンであれば使うことが可能です。パソコンを持っていない場合はノートパソコンを最初に購入するのをおすすめします。どうしても取引先のクライアントのところまで行きご要望を聞いて課題を解決する際デスクトップのパソコンは持っていけないですからね。お金がないという場合はまずはノートパソコンを買いましょう。

終わりに

副業というよりは本格的に仕事をしないとやっぱり稼ぐことはできないと思います。

その職種の先輩や偉人たちがすでに本気で活動しているので自分も本気で行動しないといけません。簡単に稼げるからと思っているのであれば辞めた方がいいと思います。たしかにカフェで作業をしたりすることも可能です。しかし、本来のWeb制作やWebデザインはクライアント目線で仕事をする必要があるので必ずミーティングをする機会は絶対にあるので人と会わないで仕事をすることはできないかもしれません。

企業の下請けとして仕事をもらうことも可能です。まずは自分で独学から始めてみること。きちんと仕事として行いたいのであればプログラミングスクールのWeb制作の講座を受けることをおすすめします。講座を受けると土台が出来上がります。仕事をしたいのであればその辺りも仕事を聞いた方がいいでしょう。

最後にAdobeXDも学んでおくといいです。サイトの構築の際に絶対に学んでおくと便利なので学んでおくといいでしょう。

タイトルとURLをコピーしました