ワードプレスで月を英語で出力する
hirotomo
ぼちBLOG
40代・50代未経験からのWebデザイン勉強法<コーディング>
hirotomo
中年になってから副業やフリーランスなどで仕事ができるスキルが欲しい、在宅で長く仕事ができるようになりたい。
歳をとっても続けられることが何か欲しい。
そのような思いからWebデザインのお仕事に関心を持たれる方はたくさんいらっしゃるのではないでしょうか。
私自身はパソコン好きだった他に、やはり「おばあちゃんになってもパソコンでちょっと専門的なことをできるようになっていたい」という思いから勉強を始めました。
この記事はコーディングを中心に、今まで特にIT関連でお仕事をしたことがないような初心者さん向けに私の経験談を交えておすすめの勉強法をお伝えしています。
この記事はこのような方に役に立ちます
40代・50代からWebデザインの勉強を独学でしようと思っている。
未経験からWebデザインのコーディングを学びたいので、おすすめの勉強方法や書籍などが知りたい。
もちろんお若い方でも初心者さんなら参考になると思いますので、読んでいただけたら嬉しいです。
Contents
手広くやりすぎない
まず始めにこれからWebデザイン関連を独学したい方に伝えたいことは、勉強する範囲がとても広いということです。
HTMLなどからデザインソフトまで様々な分野があります。
あれもこれもやろうとすると挫折の元ですし、どれも浅すぎるということになりがちです。
これは私が勉強してきて、あくまでも個人的な意見なのですが
コーディングかデザイン分野どちらかに絞って勉強した方がいい
ということです。
コーディングだけでも沢山勉強することがありますし、フォトショップやイラストレータなどデザインソフトを使用してWebデザインすることもとても奥が深いです。
もちろん両方やれるに越したことはないですよね。しかし勉強することが多すぎると思います。どちらかある程度できるようになって、さらに知識を深めたくなってからでもよいと思います。
しかしコーディングに絞っても、最低限のデザインソフトの数値の読み方などは知っていないと困ることはありますが。
冒頭に書いたとおり、今回はコーディングに絞ってお話しさせていただきます。
HTMLとCSS
まずはホームページを書くときに必要な言語のHTMLとCSSですね。
オンラインで勉強
現在はドットインストールやプロゲイトなど手を動かしながら楽しく勉強できる環境があり、しかもお手頃価格で始められます。
このどちらかはやった方がいいです。
特にプロゲイトはサイトも可愛いいしわかりやすいのではないでしょうか。何度も繰り返しやってみるのがよいと思います。
本で勉強
個人的に本でも勉強することを強く勧めます。
自分が本好きなこともありますが、体系的にまとめられていますしパラパラとめくれば目的の場所まですぐに行ける本は素晴らしいと思うからです。
ぜひプロゲイトなどと並行してやってみてください。
ここでおすすめしたい勉強方法は、
最近の1-2冊を買って、何度か往復するという方法です
基本のサイトを作りましょうみたいな本を購入すると同じように進めれば作れますので、それを何度かやってください。
ほぼ一回でマスターするなんて無理ですし、とにかく慣れが必要だからです。
そういう私は沢山買ってしまう人なのですが、だからこそ思うんですね。
おすすめの本はこちらです。
リンク
リンク
一冊目の本は数ページの基本サイトが作れます。作り方が丁寧に解説されているので初心者でもとっつきやすいです。
重ねてお伝えしますが、あまりたくさん買う必要はないです。
わたしはいっぱい買って中古で売ってしまったんです。
だけどホームページっていろいろ付随する知識がありますよね。どうしても基本的な本だけでは足りないです。
辞書的に持っていて結局捨てていない本は、やはりManaさんの本なんです。
リンク
以下は内容の一部です。
言葉の意味があまりわからなくても、これから勉強するのだから大丈夫です。
- ブレークポイントの設定
- javascriptの読み込み方法
- アイコンフォントの読み込み
- 開発ツールの使い方
- アニメーション
- 画像のレスポンシブ設定
- マルチカラムレイアウト
ぼちぼちWebの勉強を続けるなら、避けては通れない知識ですね。
いきなり全てやろうとすると大変なので、リストの上４つだけ読むことから始めても大丈夫です！
あとはやっぱり「検索力」ですよ〜
模写する
プロゲイトや本などを一通り勉強した後はぜひ模写に挑戦して欲しいです。
声を大にして言いたいのですが、模写はものすごく勉強になります！
なんでも人の真似をすることから始めたりしますよね。コーディングも同じだと思います。
おすすめのサイトは、「テンプレートパーティー」というテンプレート化したサイトを提供しているサイトです。
開発ツールの使い方を勉強する必要もあるのですが、それでコードの中身を覗きながら模写してください。
当たり前ですが、模写したものは自分の環境だけで決して外に出さないようにしましょう。
ここでとても重要なことですが、
ああ、こうやって書いているんだと常に意識して模写してください
決して無心でやらないことです
ここはこのタグを使うんだ、こうやってボックスを並べるんだなど。
フォントの大きさや字間などもひとつひとつ意識して真似してください。
自分でやりやすいものを数サイトやったら、少しずつレベルを上げていくかんじです。
簡単なものから模写しましょう
そしてもうひとつ、
なるべく簡単なサイトから模写するです
私はすぐに背伸びをしてしまう方なので、いきなり難しいサイトから模写したりなんてこともありました。
初心者のうちはおすすめしません。
なぜかというと理由は簡単で、基本が大事だからです。
大手サイトなどは大規模ですからとても緻密にサイト設計してあるでしょうし、コードも何層にもなって深くなっています。
クラス名もこれから勉強することになりますが、それらもよく考えられて命名されていて複数設置されているんですね。
もちろん勉強にはなりましたが、あまり上達している感覚がなかったので、もっとシンプルなサイトを探して模写することにしました。
シンプルなサイトの模写をして気づいたことは、それらの複雑なサイトも基本理解の積み重ねの上に成り立っているということです。
基本は絶対に軽んじてはいけないと痛感しました。難しいことをやれるようになりたいという気持ちの高い方ほど意識する必要があると思います。全くの未経験者は一足飛びにはなかなか上達しないです。
課題にチャレンジする
codejumpはコーディング練習ができるサイトとして有名です。
課題を提供してくれて、それに対するヒントや回答を載せてくださっています。
模写をする前にいきなりこちらに取り組んでもよいのですが、初心者のうちは初級レベルでもちょっと難しいと思ってます。
自分で書くということが慣れていないからです。
結局答えを見ながらということになると思います。私がそうだったからかもしれませんが、模写の次にやる方がいいような。
私はそれだけ模写の効果を素晴らしく感じたので。
検索力をつける
HTMLやCSSだけでなく、開発ツールの使い方など大概のことはネットで検索できます。
とにかくわからなかったら調べるを習慣化してください。
これはよく言われることなので改めておすすめすることではないのですが、独学は基本誰も教えてくれませんから自分で解決するしかないです。
メンターさんと契約する・有料スクールに入るなどすると聞ける人ができるのでそうした環境を作ってみることもよいと思います。
質問するにもしても自分で検索して十分調べてから質問した方がいいですね。
私は半年ほどメンターさんと契約していました。
メンタというサイトです。
メンターさんは当たればとてもよいという印象ですが、その反面相談してみたら不安を煽られることしか言われなかったということもあります。
相談した内容以外に、あれもこれもやらないとこれからは通用しない、だから自分の50万のコースで勉強できるなど。
結局勉強するのは自分なので、自ら進んで解決する姿勢はずっと必要になりますから検索力をつけましょう。
Udemy
Udemyはたくさんのジャンルをオンラインで提供しているサイトです。
私はここがダントツで1番好きなんです。どのジャンルにも良いコースが結構あります。
基本人気なコースは悪くないと思っています。講師との相性もありますが、そこまで当たり外れが強い印象はありません。
Webデザインでしたらこちらのコースがとっつきやすいです。
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
フォトショップも勉強できますが、コーディングだけ視聴するというのもありです。
基本サイトを作っていくコースですし、実際に手を動かしているのを観ることができます。
やはり実際に手を動かしているのを見ることが1番だと思います。
プロゲイトや本から更にステップアップしたいなら、このようなUdemyのコースを受講することを強くお勧めします。
プログラミングの勉強
Webサイトなど動きをつけたりすることが求められますので、JavascriptやJQueryなどを学ぶ必要があります。
ワードプレスを勉強するならさらにPHPですね。
とりあえず今回はJavascriptやJQueryに絞ってご紹介します。
これもどこまで勉強するかという点もあるのですが、まずはHTMLと同様にドットインストールやプロゲイト、Udemyで始めた方がよいです。
私はドットインストールのjavascriptから始めたのですが、最初はこの文法が何に活かせるのかすらわからなかったです。
しかしプログラミング自体に興味があったので黙々と勉強していました。
文法の理解はどうしても必要なので、一通り勉強したらWebで必要な機能を作る講座を受けてみましょう。ハンバーガーメニューやカルーセル・モーダルウィンドウなどです。実際にどのような場面でプログラムが必要かを体感し慣れることです。
私は結構な書籍を購入したのですが、JQueryですと以下がおすすめです。
一冊持っておくといいと思います。
リンク
とてもわかりやすく解説してありますが、オンラインなどである程度文法を勉強してからの方がよいと思います。
Javascriptの本も何冊か購入したのですが、はたして必要あるか疑問でした。ネットで検索しまくったりオンラインで勉強した方が断然多いかもしれません。
HTMLはいきなり本で勉強してもできますが、プログラミングはオンラインから学んだ方がいいというのが個人的意見です。実際書いているのを観ながら真似をするということをお勧めします。
プロゲイトなどで勉強して実践的なことを勉強したいなら、やはりUdemyのコースをお勧めします。こちらがとてもお勧めです。
2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
codeMafiaさんのコースはかなり人気コースなようです。
もし勉強されるようでしたらこのコースはガッツリやってみた方がいいです。すごく勉強になりますよ！
全く初めてですと敷居が高いので、一通りプロゲイトなどでHTML/CSS・javascriptの基礎文法をやってからの方がいいかもしれませんが、HTMLやCSSなどは論理的に基礎から教えていただけるので同時に進めても良いかもしれません。
CSSのアニメーションやJSライブラリを使用したスライダーなども出てきますので、プロゲイトよりも格段と実践向けになります。
時間をかけて慣れていくことが大事
プログラミングは勘が良い方ならそこまで難しくないのでしょうが、私は数字が苦手ですので苦労しました。興味はすごく大きいのですが頭がついていかないです。
HTMLとCSSの勉強とプログラミングでは全く別ものの印象です。
私のようにプログラミングが苦手かもと思っている方は、時間をかけて慣れていくということが必要なので長い目で取り組んだ方がよいです。
そうやってコツコツ地道にやっていくと、中小企業や個人のホームページで使用するJQueryなら調べながらでも読めるようになってきます。
プログラミングスクール
ある程度方向性を教えてくれて、サイト完成まであれとこれをすればよいと導いて欲しいならプログラミングスクールもありでしょう。
デイトラでしたらプログラミングスクールにしては料金的にも敷居が低いですし、すごく有名なのでよいと思います。ワードプレスまでできます。
Fammは私でもちらほら受講されている方のブログを読んだことがあります。
女性をターゲットにされているスクールです。
子供のシッターがあったり、案件保証制度というものがあって１件案件を任せてくれるようです。
最初の一件が難しいのですごく有り難い制度です。私も一件任せて欲しいくらいです。
ポートフォリオを作ろう！
ここまで勉強できたら自分のポートフォリオサイトにいくつかコーディングした作品を載せることが可能だと思います。
コーディング専門ならポートフォリオも自分が書いたものにしましょう。
ポートフォリは必ず必要になりますので、これを作っていざ営業ということになります。
どのくらい勉強すれば身につくのか
こればかりは個人差があってはっきり言えないです。40代以上になると勉強から遠ざかっている方もいるかもしれないし、バリバリの方もいるでしょうしわかりません。
私を例に出すと、そんな短期間では無理だったという感じでしょうか。
私は勉強してこなかったのでそんなに賢くないと思っています。その私から言いますと、
たまにみる３ヶ月でWebデザイナーは無理ということです
いや、その言葉の意味は必ず誰でも３ヶ月で Webデザイナーになれるとはいっていないのかもしれません。
しかし言葉の上澄だけ掬ってしまえば、誰でも３ヶ月でWebデザイナーになれるんだ！と思ってしまう。
私は無理でしたし、最初から３ヶ月でなれるとは思っていませんでした。
Webのデザイン系でもそうですが、お仕事をしながら少しずつ経験していろいろなものを作れるようになっていくものですし、経験が大切ということはいうまでもありません。
たぶんその言葉の意味は、３ヶ月でスタートラインに立てるかもしれないということでしょうか。
スタートラインというのは、お仕事を探して受けるだけの知識がなんとなくあるかもしれないということです。
実際にお仕事を受けながら苦労して苦労して、さらに並行して勉強しスキルを上げていくということが実際でしょう。
勉強沼にはまらないように
Web系の勉強は広いです。
ですので興味があってあれもこれもやらなくてはと、勉強沼にはまっているといつまでも営業できないです。
私がそうでした。あれもこれもやばかったです。
結局何もできない人、みたいになってきました。
とりあえず最低限上記のことを勉強してポートフォリをサイトを作ったら早めに営業しましょう。
そこからが新たな戦いです！
ここまで私の経験を交えて勉強方法をお話してきました。
勉強する上でChromeの検証ツールやコードエディターなどの知識も必要なのですが、今回は説明していません。
ドットインストールなどやネットでも検索できると思いますので、すぐに知りたい方は調べてみてくださいね。
頑張ってください！
ABOUT ME
自分が美味しいと感じるものを食べてたら満足のアラフィフ。
野望も目標もないけど、あえて言うなら毎日穏やかに笑って過ごしていくことかな。
書くことが好きです。日々の何気ない思いをぼちぼち書いていきます。
