「web制作に必要なスキルって結局何なの？」
「いろんな情報を見てきたけどまちまちで困ってる」
本記事はこのような悩みを持つプログラミング初心者が対象です。
こんにちは！
僕は1年間web制作を学習してきたShinと申します。
現在は、大学で医学を学びながらプログラミングを学習中です。
皆さんはどのような理由でプログラミングを始めましたか？
「稼ぎたいから」、「時間があるから」、「副業や転職としてスキルを「身に着けたいから」など
同機はそれぞれだと思います。
僕は一年前に「在宅でできるし、稼げるって聞いたから勉強してみよ！」といった感じで皆さんと同じく
プログラミングの勉強を開始しました。
当時、僕が聞いていた話では「HTMLとCSSとJQueryを勉強しておけば案件とれるよ！」という話でしたが、
実際の案件で求められている能力はこれだけではありませんでした。
あれ？聞いてた話と全然違うじゃん…
というわけで本記事ではweb制作経験1年の僕がクラウドソーシングの案件を考慮したうえで、これがないと案件をとるのは難しいぞ、といったスキルを紹介します。
ここに書いてあるスキルを習得できればweb制作の案件はほとんどすべて受注できるレベルになります。
「皆さんには効率よく学習してほしい…」、そんな思いから本記事を書きました。
本記事では、各スキルどのような役割を果たすのかもざっくり解説しています。
（結論）web制作で必要なスキル
最低限の案件（LP制作レベル）を受けるには
- HTML
- CSS
- Javascript(JQuery)
- CSS設計（OOCSS,BEMのいずれか）
- レスポンシブデザイン
あったら受けられる案件が増えるスキル
- Bootstrap
- Sass
- PHP（WordPressをいじれる程度）
- Adobe XD
webデザインからすべて案件をとれるレベル
- illstrator
- Photoshop
- webデザイン
こんな感じです。
聞いていたよりも結構多いですよね（笑）。
次からはどの言語がweb制作にとってどのような役割を果たすのか、ざっくり説明していきます。
HTML
web制作では外すことができない言語です。
サイトのひな型をつくるのが主な役目です。
ぶっちゃけこの言語さえあれば、サイトで伝えたい部分は大方説明できます。
ただしこの言語だけでは見栄えが悪く、ユーザーにとっての機能性が低く、満足度の低いサイトとなってしまいます。
CSS
見栄えの悪いHTMLにいろどりを加えていきます。
具体的には文字の色や大きさ、背景の変更、各パーツの配置などの見た目を整えていく言語になります。
HTMLでは、人それぞれの特徴が出にくいですが、CSSはデザインに深くかかわっており、web制作ではCSSの能力が評価されやすいです。
質問者 web制作を始めたいんだけど、オススメの教材ある？ Progateは終わったけど、次に何をやればいいの？ 挫折しない教材を選びたい 今回はこのような疑問に答えます。 結論から言う[…]
JQuery
HTML,CSSにさらなる機能を付加します。
HTMLとCSSの2つの言語ができていればサイトの見た目はほとんど完成します。
JQueryはサイトに動きをつけることができます。有名なところで行くと、スライドショーやドロップダウン、文字をリアルタイムで動かす、など多くのwebサイトで導入されている機能はこのJQueryで実装できます。
CSS設計
これはサイトの見た目には関係しません。
ただしサイトはコードで書かれていますが、CSS設計はこの書き方のルールになります。
このルールがなければ、コードが人によってばらばらになり、ほかの人がコードを変更するときに訳が分からなくなったり、新しい機能をつけようと思ったら、バグが出るなどのトラブルが起きます。
逆な言い方をすればCSS設計を共有することで、ほかの人との協同制作が可能になったり、自分以外の人がコードをいじるときに負担が減るといったメリットがあります。
いわば、web制作における法律になります。
現在の主流はOOCSS、BEMあたりを勉強しておけば大方通用しますが、そこはクライアント次第といったところです。
ルール自体は多くないので、2時間くらいパラっと確認して、コードを書くうちに覚えるのがいいのではないでしょうか？
レスポンシブwebデザイン
パソコンやスマホのような画面の大きさが違うメディアに対して、それぞれのデザインを変更する操作です。
例えば,パソコンでは16pxで表現していた文字をスマホでは12pxにしたり、画像のサイズを変えたりする操作です。
レスポンシブ対応はスマホが普及した今日では、必須のスキルといえます。
Sass
分かりやすく言えばCSSをより簡単に短く書けるようになるツールです。
厳密にいえば多くの人が使うのはSCSS（CSSよりもナイスなシート）ですが、cssで3行必要だった記述が1行でかけたり、本来cssでは扱えない関数や変数などのプログラミング言語の特徴も持っているのでJavascriptやPHPを学んだあとだと直感的に理解しやすいです。
最近のWeb制作の案件ではSCSSを推奨する動きも多いので、学んでおいて損のないツールです。
またCSS設計はその厳密さから記述量が増えるのですが、このSCSSを用いるとかなりコードを省略できるのでオススメです！！
PHP
ぶっちゃけ書き方が違うだけでJavascriptを勉強した人は理解するのにそこまで時間はかからないと思います。
ただし、web制作においては「WordPress」の案件が絡んでくることが多いのですが、WordPressはPHPで作られているので、wordpressの案件をとりたいなら、PHPの基本文法は抑える必要があります。
ただ、そこまで複雑な操作は個人レベルでは扱わないので、Progateレベルの文法が分かれば十分なので、そこまで身構える必要はないでしょう。
WordPress制作の案件をとりたいんだけど、参考書は何を使って勉強するのがいいの？ 本記事ではこのような悩みを解決していきます。 ・WordPress案件の立ち位置 ・初心者にオススメしたい[…]
Adobe XD
サイトのデザインとリンクのつながりをクライアントに確認できるようになります。
Adobe XDは、サイトの完成形をコードを書かずに再現できるので、家のカタログのように、完成形を見ることができます。
実際は、その配置や色合いをもとにコードで書き直さなければいけないですが、クライアントとしても安心材料になったり、完成形を思い浮かべながら作業できるのであるとラクに作業が進みます。
ただし、絶対に必要なものというよりは、作業の効率化と同業者との差別化をするうえで使うので、コーディングスキルとは関係がないです。
Adobe XDもクリック操作でプロトタイプを仕上げます。
illustrator
主にイラストの作成を行います。
分かりやすいものでは、イラストやのようなかわいいデザインを作ったり、簡易的な地図などを作成することが可能です。
このスキルは、webデザインも同時に自分でしたい、と思う人にオススメですが、役割分担や企業側が提供してくれることもあるので、あったらいいなくらいです。
Photoshop
illustratorと同様に写真などの画像の編集を行います。
特にPhotoshopでは既存の画像の編集が得意で、画像の合成や角度などを変更することができます。
またPhotoshopはプログラミング言語とは全くの別物で、主にクリック操作で変更を加えていくこと、人によって編集のセンスが変わることなどから、web制作の際のアピールポイントとなることがあるようです。
ただ、クライアントの多くはそこまで個人に要求することは少なかったり、プログラミングとは別で依頼することが多いので、どちらかというと「あったらいいな」くらいのスキルで、web制作を考えているなら優先順位は低めでも大丈夫です。
webデザイン
結局最後はこれです（笑）。
といっても、個人レベルでは特別なデザインスキルは求められていないことがほとんどなので、より無難なサイトを作ることが求められることが多いです。
眼が疲れないような配色にしたり、間隔の空け方を見やすくするようなデザインができれば十分です。
これらはギャラリーサイト（Cacooなど）やwebデザインの参考書を眺めていれば基本は抑えられるので、初心者の方は、まずは実際に企業で使われているサイトやギャラリーサイトを見るところから始めてはいかがでしょうか。
まとめ
いかがだったでしょうか。
結構多い＿＿＿。
こう思った方が大半ではないでしょうか。
実際多いですし、最低でも3か月くらいは考えておいた方がいいでしょう。
ただ、実際に自分でコードを書けるようになるのはうれしいし、自分の作ったサイトを使ってもらえるのはうれしいものです。
なので、今は修業期間だと思ってぜひ頑張ってみてください！！
ではまた。
質問者 プログラミングでラクに稼ぎたい！！ 勉強時間を確保したいから、仕事とかアルバイトはやめようと思ってる… 最短で稼ぎたい！！ 今回はこのような考えについて解説していきます。 &nb[…]
