専門学校で学んだことと、社会に出てから感じた実力不足。

こんにちは！
2021年4月入社、1年目デザイナーのましろです！

私はWeb業界の専門学校で2年間、Webデザインやコーディングの勉強をしていました。
その時の経験と入社してから感じたことについて、お話しさせていただきます！

どんな勉強をしてきたか

まず初めに、専門学校では主にデザインとコーディングの勉強をしてきました。
デザインの分野だと、Webデザイン・グラフィックデザイン・レイアウト・タイポグラフィーなど。
コーディングの分野だと、HTML・CSS・JS・PHP・SCSS・Pugなどを勉強してきました。

同級生や先生から「さすがまっしー！(まっしーは学生時代のあだ名)」とよく言われていたので、そのくらい努力をし、結果を残していたつもりでした。
しかし、社会に出てから私の前に立ちはだかったものは、圧倒的な実力不足です。
入社してからの3ヶ月間で任せていただいたお仕事は、バナー制作や写真のレタッチ、サイトのHTMLやCSSの修正などでしたが、
バナーを一つ作るだけでも、学生時代の倍以上の時間をかけないと合格ラインに達さなかったり、他の人が書いたCSSの理解に時間がかかったり…
といっても、学生時代にあまりバナーを作ってこなかったり、他の人のCSSを見ることがなかったことが原因とも言えるのですが…

そんなことを思いつつ、学生時代にどんな勉強をしておけばよかったのか、今さらながらにまとめていこうと思います。(今からでも遅くないと信じて…)

デザインの勉強

Webサイトのデザインはもちろんですが、バナーデザインをもっとしておけばよかったと後悔しています。
Webデザインができたらバナーも同じ要領で作れると考えて、Webデザインにばかり力を入れていて、バナーは全然作っていなかったので実力不足を感じている真っ只中です。

バナーデザインは色・フォントの使い方、構図・レイアウトの決め方などの勉強になるので、まずはバナーデザインに力を入れると良いかもしれません。
少なくとも私はバナーデザインをしてこなかったことを後悔しているので、Webデザインの勉強をしている方はバナーデザインも勉強していきましょう！

コーディングの効率化

HTMLとCSSでデザイン通りのサイトを制作するコーディングという作業ですが、効率化を図らずに作業をしていると時間がかかり過ぎてしまいます！
効率化をすることで作業時間を大幅に減らせてコーディングが楽しくなるので、私がしている効率化を紹介します！

コーディングの効率化といったらこれ！

効率化に大きく貢献する「Pug」と「SCSS」というものがあります。
HTMLはPug(パグ)を、CSSはSCSS(サス)を使うと、効率的にコードが書けるようになります！

Pugは閉じタグ(</〇〇>)を入れる必要が無くなったり、書き方をCSSと統一できたり、ファイルを別々に管理できます。
SCSSはタグやclassを入れ子状にして管理がしやすくなったり、変数や演算を使うことができたり、Pugと同じくファイルを別々に管理できるなど、
効率化にかなり貢献してくれています！(他にも色々便利な機能があるのでぜひ調べてみてください！)

ただし、PugやSCSSはコンパイルという作業をして、それぞれHTMLとCSSに変換してあげないといけません。
私は、「gulp」というシステムを先輩から教えてもらい使用していますが、gulpは導入が少しややこしいので、私が学生時代にお世話になっていた「Prepros」というソフトを利用することをお勧めします！
無料で使え、コンパイルも変換したいフォルダをドラック&ドロップで入れるだけなのでとても簡単です！
(「有料版にする？」というポップがちょくちょく出てくることだけが玉に瑕)

プラグイン

私は普段、VS codeというソフトを使ってコーディングしています。
VS codeでは拡張機能(プラグイン)というものがあり、リロードをしなくてもリアルタイムで更新されていくものや、ペアになる ( ) や { } に色が付き分かりやすくなるものなど、数え切れないほど便利なプラグインが存在しています！
そして、プラグインには効率化するためのものだけでなく、遊び心のあるものや、モチベーションをあげるようなものもあるので、自分が気に入りそうなプラグインを探してみてください！