こんにちは、朝晩の冷え込みと日中の湿度の高さに自律神経がついていけていない湊月ナハトです。
最近週末に台風ばっかり来てないか？
めっちゃ毎日頭痛いんだが？？ってなってます。
頭痛持ちに加えて姿勢が悪いので毎日Twitter（鍵垢の方）でしんどい〜〜頭痛い〜〜って言ってる気がしてきました（笑）
まあそれはともかく。
今日の話題は、タイトルにもサムネイルにもある通り……。
駆け出しデザイナーは
どうやって勉強してる？
……です！
ちなみに私は元々普通の高校出身のただの文系でして、仕事も雑貨屋やら家電量販店やらパソコン修理業やらで全然業界未経験なデザイナーです。
元々PhotoshopやIllustratorは中学校の時に勉強したり資格持ってたくらいで、とくにwebデザインは全くの素人からスタートでした。
ではまずは、そんな私が本日に至るまでというか、デザイナーになるまでをダイジェストでお送りいたします〜〜。
勉強法だけ教えろって方は目次から飛んでください（雑）
デザイナーになるまでのお話。
学生時代編
学生時代、というか中学生の時にデジタルイラストを描く上でソフトウェアの使い方を知りたいな〜〜とPhotoshopとIllustratorの勉強をしてました。
なので、どちらかというとWEBデザインよりDTPデザインやグラフィックデザインから入りました。
といっても、これからの時代はWEBだよWEB！ってことで、簡単なHTMLとかCSSは勉強した覚えがあります。
もう10年くらい前の話なので、懐かしの『ホームページビルダー』ってやつで自分のホームページ作ったりしてました。
あ、もちろん古のヲタクなので、携帯サイトも運営していたことがあるのですが、タグ見本をみながらなんとかカスタマイズできるぐらいの知識でした。
調べながらなんとかJava Scriptでおみくじページ（ランダムでリンク先が変化するJS）を作ったりしてた気がします。
この時は他のことにも夢中になってたこともあって、デザイナーになりたいなとかはあんまり思ってませんでした。
なので悲しいかなここで習ったWEB関係の知識はほぼ消え去ってます（笑）
社会人編
社会人になったあとはデジタルイラストを描いていたのもあって、パソコンに親近感があって一時期パソコン修理の仕事をしてました。
ソフトウェアはもちろん、ハードウェアの修理ができるようになったのはこの仕事をやってたおかげです。
ちなみに入社した時は「HDD？聞いたことはあるし役割はわかるけど見たことはないです！」くらいの知識でした（笑）
他にも雑貨屋で働いてたときはお店のブログを運営したり、チラシやPOPを作ったりで、DTP作業をしながら「こういう店で働きつつ一人デザイン業務するのもいいかもな〜〜」と、デザイナーになることに。
転職活動、デザイナーとしての勉強もスタート
というわけで、デザイナー職を探すも、住んでるところが田舎だからかまあない！
あっても求人倍率が高い！＆田舎あるある！免許がないとそもそも面接条件すらクリアできない！！
……という惨敗ぷりでした。
そんな中でたまたま今の会社の求人を見つけ、WEBは素人に毛が生えたくらいだけどDTP経験ありという点と、前職で身につけたハードウェアの知識を買って貰えたのか無事拾って貰えることに。
正直まさか受かるとは思ってなくて、入社してからまずはDTP系の仕事をしながら徐々にWEBの知識もつけていきました。
ちなみにまず勉強したのは『Adobe XD』という、WEBサイトやアプリケーションのUI/UX・デザインカンプを作成するソフトでした。
というのも、まずはぁ〜デザインカンプっていうのを作るんでしょ〜？（雑）という知識はあったのですが、多分Photoshopや Illustratorで作るんだろうな〜〜と思ってたんですよ。
なんせ10年くらい前の知識しかないから！！
そしたらまあ便利なアプリケーションが増えてるじゃないですか！！
と『Adobe XD』は業務で触りながら操作方法から覚えていきました。
と、同時に色々本を見たり、今の流行りを知るためにいろんなサイトを見てどこがいいか自分で観察したり、なんとか試行錯誤の上デザインカンプを作る日々……。
入社して半年くらいはそんな感じだったと思います。
（ちなみにこの時作ったデザインカンプは外注のコーダーさんにWPで作っていただきました。
とんでもねえ初心者丸出しのカンプで作っていただけてほんとありがたい話です……）
これからの課題
デザインカンプも色々作れば身に染みてくるというか、手慣れてくるもんで、今度は自分が作ったデザインカンプをコーディングしてみようかという話になりました。
私「えッ……英語……苦手なので……ッコーディングはよォ……！！」
といいながらなんとか今HTML /CSS、あとちょっとしたJava ScriptやJQuaryを使いながらコーディングを進めてます。
ちなみに自分で何回やってもレイアウトが上手くいかない時はTwitter（鍵垢の方）でフォロワーさんに助けていただいたりで本当に助かってます……。
なんとか形にはなってるんですが、やっぱり細かいところやレスポンシブ化したときのサイドメニューがバグり散らかすところなど自分では手の施しようがないので、『MENTA』というサービスを利用しようか絶賛検討中です（笑）
そんなこんなで私のこれまでの話をしてきましたが、要は業界未経験で飛び込んだデザイン業界だけど、運良く拾ってもらった会社で勉強しながら業務やってるぜ！！ということで（雑）
本日はそんな私の勉強法のご紹介です（ここからが本題）
❶：HTMLとCSSの基礎を学ぶ
基礎中の基礎の学び方は色々あると思うのですが、これに関しては本を読んで、サンプルを見ながら実際にコーディングする……というやり方より、WEB上のサービスで１つずつ解説を受けて勉強していくやり方が私にはあっていたみたいです。
そんな私が利用したサービスがこれ。
Progate（プロゲート）
HTML /CSSの他に、Java ScriptやPHPなどのコースもあり、無事コーディングまでできるようになったら他のコースも勉強したいなと思ってます。
それくらい私には合ってました。
正直、『Progate』がなかったら、コーディングなんか難しいことやってられっか〜〜！！って投げ出してたかも。
基礎中の基礎は『Progate』で学び、デザインカンプのここはHTMLとCSSで表現する時どうしたらいいんだろう？という箇所はインターネットで調べながら進めていく……というやり方で進めてます。
ちなみにしばらくやってないとすぐ忘れるタイプの人間なので、定期的に基礎編をやり直してます。
❷：『HTML＆CSS全辞典』を読む
いつの間にか改訂３版が出てて最近買いました。なので綺麗です（笑）
（初版は親がやってたサロンのホームページを作るにあたって買った＆２版もなんかKindleで安かった時に買ってたりするシリーズです）
こちらの本は、絶対に記述するタグから「こんなタグが！？」みたいなマニアックなものまで網羅してる辞典になります。
余談ですができるポケットと名付けられてますがサイズはB6版で厚さも3cmくらいあるのでポケットには入りません。なのでデスク周辺の棚に置いてます。
私は先々で言ってる通り、マジのガチで英語が出来ない英単語すらまともに覚えられない英語力シニューニャな人間でして。
CSSの属性や値のスペルをす〜〜〜ぐ間違えるわ、度忘れするわ、「position:relativeの”relative”ってどういう意味かしらね〜〜！けど多分absoluteだと上手くいかんしrelativeだろ知らんけど！！」みたいな雑コーディングするので……。
めっちゃくちゃ頼もしい＆ありがたい存在です……。
あとこちらの本には、英語にフリガナまでふってくれてる親切設計なんですよ！！！！
これがなによりも嬉しい。
上司や外注のコーダーさんに説明するときに読み方わかんね〜〜！！ってなりがちなので……ほんとうれしい……。
暇な時にペラペラ捲ってると、本当に知らないタグがあったりで「あ！！今度これ試してみよ〜！！」ってなるんですよ。
各タグが『POPULAR（必須系）』『USEFUL（使いやすく効率的）』『SPECIFIC（特定の要素で使える）』『RARE（マニアック）』とカテゴライズされてるのもわかりやすくていいですね。
HTML /CSSのコーダーさんの手元に是非！！な一冊です。
❸：そもそもの英語力をなんとかしたい
英語力シニューニャからせめて英語力エーカムに！！（※ヌメロン的には逆だけど）
でも今更appleとかpencilとかからやりたくね〜〜！！
という私が見つけた本がこちら。
『デザイナーの英語帳』という本です。
こちらはタイトルの通り、「デザイン業界やデザイナーがよく使う英単語と例文」だけが載ってる英単語帳なのですよ！！
合間合間にコラムも掲載されていたりで、読み物としても◎です。
CSSを記述する上でclass名を自分で割り振ったりしますが、そういう時に役立つページもあります。
英語力がないとこういう時にも手が止まるというか、わざわざ電子辞書や翻訳サイトで翻訳する一手間がかかっちゃうんですよね……。
後述しますが、最近WordPressを触るようになってなおのこと英語力の必要さが身に染みます……。
（プラグインの説明やらなんやらとかほんとわからん顔）
まずはこの本でデザイン関係の英単語を身につけて、英語の苦手意識が減っていったら英語も勉強し直したいところです。
……いつになるかは知らないけど（おい）
❹：実際にコーディングする＆WordPressを触ってみる
結局は私はどちらかと言えば机に向かってカリカリするより、とりあえずやってみようぜ！！というタイプなようで、ある程度基礎がわかったら本のお手本を打ち込んでみるとかでなく、実際に私自身が作ったデザインカンプを一からコーディングしていたのが良かったのだと思います。
まだまだ修正しないといけない箇所は多いものの、ぱっと見は綺麗に仕上がっていて、「私にもできるんじゃん〜〜！！」という成功体験につながったというか。
「コーディングっていうのも楽しいもんだね、食わず嫌いしてたわ」と思えたのが一番良かったと思います。
そして今、Wordpressの管理方法を勉強する一環でこのブログを運営してます。
ちなみにこのブログ自体は『Nucleare』という有料テーマを使用しています。
……が、記事本文の見出し部分のスタイルや、月間アーカイブのデザインなど、自分でCSSを記述したり編集したりして日夜カスタマイズをしてます。
また、プラグインもこのブログに追加したいことが浮かんだら、インターネットで調べてインストールしてみたり、色々と試行錯誤をしながら勉強している感じです。
実践あるのみ！！な脳筋タイプなので、あれこれ考えるよりこのやり方が合ってるんだろうなと思います（笑）
❺：まとめ
というわけで、未経験からデザイナーになった私の勉強法の小話でした。
最後にこれからの目標を書いておくので、サボらないように見張っておいてください（笑）
- まずはHTML /CSSをマスターする
（TOPページを完璧に完成させて子ページも作っていく） - Java Script、JQuaryでアニメーションを付与できるようになる
- PHPを学びつつ、Wordpressのオリジナルテーマを作れるようになる
- 英語力をランクアップさせる
- 最終的にはコーディングもできるWEBデザイナーに
とまあこんな感じですかね？
なんとか今年度中にはオリジナルテーマでサイト作れるところまでなりたいな〜〜！！
というわけで本日の記事はここまで。
昨日Twitterで10月グッズが今日届くとか予告してましたが、勘違いしてて届くのは明日の予定です！
なので明日は新グッズのお披露目記事を書きに来ます〜〜！それでは！！