くまだどうも、くまだです。
Web制作を勉強する上でみんなが通る道だと思いますが、まずはProgateから始める人が多いと思います。プログラミングってどんなもんなのか、どんな雰囲気でやるのかを掴むんだったらそれが一番です。
Progateサクサク進みすぎて自分才能あるんじゃね？って一瞬勘違いしそうになりますが、恐らく中級の道場編でその自信はへし折られると思います。
それが終わったらドットインストールです。
ドットインストールとProgateだけ勉強しておけばいいというわけではありませんが、実際にProgateで「触り」を掴んでドットインストールでコードの写経をする、というやり方もあります。
そんな感じで、勉強のやり方はいろいろあります。テキストでもいいし、Udemyの動画教材を購入してやってもいいし、プログラミングスクールに通ったっていいわけです。
勉強のやり方はなんだっていいのですが、基本的には案件・実務で使うものを勉強しましょう。
ちなみに私が過去に通ったプログラミングスクールの感想を下の記事で紹介しています。
Web制作の勉強は、実際に使うやつから勉強しよう
ガチのエンジニアになりたいのであれば、私のはあまり参考にはなりません。（なぜなら、本人がガチのエンジニアではないから、、、） Web制作においては基本的にHTML CSS 、JavaScript、 jQuery、WordPress あたりが使えるといいかなと思います。
この辺りの話は、他のサイトでもよくいわれている話です。
Bootstrap(ブートストラップ)はあまり使わない？
たまに名前が挙がるBootstrapですが、こちらは実際には実務であまり使わないです。（自分の場合は、ですが）そういうものはあるとか、Bootstrapのグリッドの概念だけ知っておくといいかなというレベルです。
個人的に参考になるかなと思ったのは、Bootstrap で使われるブレイクポイントの数字なんかは参考になると思います。
ブレイクポイントとは、
ブレイクポイントは、デバイスやビューポートのサイズによってレイアウトがどのようにレスポンシブに変化するかを示すトリガーです。
Bootstrap公式
ブレイクポイントは、レスポンシブのコーディングする際に使用するものなんですけど、ブレイクポイントの数字の設定は人によって（もしくは案件によって）違うので、いわゆる正解といったものはありません。数字に迷うならBootstrap で採用されている数値を採用するといいかもしれません。
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
自分が働いている環境・現場によってはBootstrapをガンガン使うところもあるので、一概に勉強しなくていい、というわけではありません。必要になったら勉強すればいいだけです。
先取りしすぎの勉強法はよくない？
あまり先々のことを勉強しすぎるのも良くないかなと思っています。
例えば将来Vue.jsやReact などを使うかもしれないからそっちを先に勉強する、というのはあんまりよろしくないです。まずは基礎が大事なので HTML/CSS/JavaScript 辺りはしっかり学習していたほうが良いかと思います。
もちろん、はっきり目的があってその目的を達成するために必要というのであれば、それらを勉強してもいいと思いますが、Web制作というジャンルにおいてはそれほど使わないという印象です。
ちなみに私はそれをやってしまって結構失敗しているところがあります。RubyやVue.js、Bootstrapあたりは1～2年前ぐらいに勉強していたのですが、今ではすっかり忘れています笑
結局先取りで勉強しても実践で使わないと忘れてしまうというやつです。
必要に迫られたら、そのときにはじめてそれらについて勉強するというやり方が効率的かもしれません。ちなみにそういった勉強法をパラシュート勉強法といいます。
以下、参考記事です。
エンジニアのスキルアップに大切なマインドセットの話 〜 パラシュート勉強法とメタ学習
個人的にWeb制作の勉強でやっていて良かったのは、テキストだったら以下のようなものがいいかなと思います。
デザインの学習について
PhotoShop、AdobeXd などデザイン系のツールは、基本的なことは使えたほうがいいかなと思います。
というのも、お客さんからこういう風なWebサイトを制作したいと依頼があったら、いろいろ要望を聞いたりしてそれを形にしないとなりません。いきなりコーディングしてつくれればいいのですが、実際はなかなかそうはいきません。
AdobeXdなどでワイヤーフレーム(WF)というものを作ります。それはWebサイトの設計図のようなもので、（ラフ画から書いてWFにする）それをさらにデザインカンプとして仕上げていきます。
- ラフ
- ワイヤーフレーム
- デザインカンプ
- 実際にコーディング
という感じです。ラフを飛ばしてWFを作成することもあります。1 の前にクライアントからヒヤリングして、こんな感じでWebサイトをつくりたい、参考サイトなどを聞いておきます。
コーダーだったらデザインの知識は必要ないのか、というと必ずしもそれが必要ない、というわけではないです。デザインの知識もあった方が当然いいですし、逆にデザイナーの人がコーディングの知識が全く必要ないのか、というとそれもちょっと違うかなと思います。
まあ、あるに越したことはないです。コーディングの知識があるデザイナーさんの方が需要ありそうですし、デザインの知識があるコーダーさんだっていたほうがいいでしょう。
最も、デザイナーさんが注力すべきはデザインの部分なので、余力があったらコーディングの知識もあったらすごいよね、という感じです。
WordPress(ワードプレス) 学習に関して
WordPress は、ブログから高機能なサイトまで作ることができるオープンソースのソフトウェアです。簡単にいえば、だれでも簡単にWebサイトを構築することができ、ブログなどもWordPressを使うことが多いです。
Web制作において、WordPress を使った案件もそれなりにあります。
WordPress案件をこなすのに必要なスキル（もしくは、あったほうがいいスキル）
- WordPress 特有のPHP
- WordPress 自体の基本的な操作
- 導入したプラグインの設定
- WordPressの追加CSSなど使った見た目のカスタマイズなど
- 静的サイトからWordPress化
WordPressは、テーマが幅広くあるため、それらの見た目のカスタマイズも時には必要になります。
また、WordPressのカスタム三兄弟といわれる、
- カスタム投稿 ・・・ デフォルトの投稿とは別で追加できるカスタム投稿。
- カスタムフィールド ・・・ 様々な項目の情報を入力できる。
- カスタムタクソノミー ・・・ カスタム分類、項目。
この辺りが使えるようになるとWordPressでできることが幅広くなります。
WordPress の勉強で私が使ったのは以下の本です。
一人で全部やるのならこの辺のスキルは全部自分でできるようにならないとダメかなと思います。
ただ、苦手な分野があってデザインはどうしてもだめ、とか特定の言語、例えば JavaScript が苦手とか、そういうのあったとしても、例えばチームを組んだり、外注化したりそれが得意な人に任せるというやり方もあります。
私の場合は、チームを組んでやっているので、苦手な分野は得意な人に任せて自分の仕事に集中という感じで役割分担をしてやっています。
とはいえ、一人でできることに越したことはないので、少しずつでいいのでこの辺のスキルはある程度自分でもできるように勉強しておくといいです。例えば、デザインの仕事だったら素材集めだったりWFで簡単な部分を手伝う、など少しでもデザインに触れる経験をしたほうがいいです。
インプットよりもアウトプット重視学習
インプットよりもアウトプット重視で勉強したほうがいいです。テキストや動画教材である程度インプットしたら、実際に悩みながら、そして調べながらでいいので、制作物を作る。それが一番のアウトプットになります。
テキストや動画で勉強したら実際に作ってみます。例えば、以下のような流れ。
- 架空の案件を設定し、要件定義。
- ラフ
- ワイヤーフレーム
- デザインカンプ
を作成してみます。これでデザイン系のアウトプットになります。実際はクライアントに都度デザインを確認してもらい、修正があったら修正してまた提出、みたいな流れになります。
完成したデザインカンプを使って、
- HTML、CSS（Sass）でコーディング
- JavaScript(jQuery)で動きをつける
でコーディングする
これでデザインカンプ→静的サイトにするアウトプットになります。そこからさらに、
静的サイト→WordPress化
ここまでやれば、デザインカンプから静的サイト、WP化の一連の流れをアウトプットすることができます。
個人的には、Gitを使ってデータを管理するのも同時並行で勉強したほうがいいかなと思います。
GitHubにデータを上げておけば、万が一パソコンが壊れたとしてもデータがGithubに上がっているので、復旧できるという寸法です。バックアップ代わりにもなるので個人で使う場合はあまり出番はなくとも利用したほうがベターです。チームを組んでやるのなら、Gitを使ったデータのやりとりは必須スキルとなります。
複数人作業でやったほうが、GitHubの恩恵をより感じることができます。
こんな感じで私が勉強したやり方や失敗した勉強なんかをざっくりあげてみました。なにかの参考になれば幸いです。
ここまで読んでくださりありがとうございました。